Compare commits
8 Commits
566422ed0d
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 64e4f2717c | |||
| 789c73f9df | |||
| ef3c3d9b86 | |||
| fb2dd4670f | |||
| 4182d936c2 | |||
| 5650c582dd | |||
| 2cef727b24 | |||
| 67b803eef8 |
@@ -1,11 +1,11 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Muli&display=swap");
|
||||
@import url('https://fonts.googleapis.com/css2?family=Muli&display=swap');
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Muli", sans-serif;
|
||||
font-family: 'Muli', sans-serif;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
30
50Days/day2/index.html
Normal file
30
50Days/day2/index.html
Normal file
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
|
||||
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
|
||||
crossorigin="anonymous" /> -->
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<title>Day 2: Progress Steps</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="progress-container">
|
||||
<div class="progress" id="progress"></div>
|
||||
<div class="circle active">1</div>
|
||||
<div class="circle">2</div>
|
||||
<div class="circle">3</div>
|
||||
<div class="circle">4</div>
|
||||
<div class="circle">5</div>
|
||||
</div>
|
||||
<button disabled="disabled" class="btn" id="prev">Prev</button>
|
||||
<button class="btn" id="next">Next</button>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
39
50Days/day2/script.js
Normal file
39
50Days/day2/script.js
Normal file
@@ -0,0 +1,39 @@
|
||||
const progress = document.getElementById('progress');
|
||||
const prev = document.getElementById('prev');
|
||||
const next = document.getElementById('next');
|
||||
const circles = document.querySelectorAll('.circle');
|
||||
|
||||
let currentActive = 1;
|
||||
|
||||
next.addEventListener('click', () => {
|
||||
if (currentActive < circles.length) {
|
||||
currentActive++;
|
||||
}
|
||||
|
||||
update();
|
||||
});
|
||||
|
||||
prev.addEventListener('click', () => {
|
||||
if (currentActive > 1) {
|
||||
currentActive--;
|
||||
}
|
||||
update();
|
||||
});
|
||||
|
||||
function update() {
|
||||
currentActive === 1 ? (prev.disabled = true) : (prev.disabled = false);
|
||||
currentActive === circles.length
|
||||
? (next.disabled = true)
|
||||
: (next.disabled = false);
|
||||
|
||||
circles.forEach((circle, index) => {
|
||||
if (index < currentActive) {
|
||||
circle.classList.add('active');
|
||||
} else {
|
||||
circle.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
progress.style.width =
|
||||
((currentActive - 1) / (circles.length - 1)) * 100 + '%';
|
||||
}
|
||||
99
50Days/day2/style.css
Normal file
99
50Days/day2/style.css
Normal file
@@ -0,0 +1,99 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Muli&display=swap');
|
||||
|
||||
:root {
|
||||
--line-border-fill: #3498db;
|
||||
--line-border-empty: #e0e0e0;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Muli', sans-serif;
|
||||
background-color: #f6f7fb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
max-width: 100%;
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
.progress-container::before {
|
||||
content: '';
|
||||
background-color: var(--line-border-empty);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
transform: translateY(-50%);
|
||||
z-index: -1;
|
||||
transition: 0.4s ease;
|
||||
}
|
||||
|
||||
.progress {
|
||||
background-color: var(--line-border-fill);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
height: 4px;
|
||||
width: 0%;
|
||||
transform: translateY(-50%);
|
||||
z-index: -1;
|
||||
transition: 0.4s ease;
|
||||
}
|
||||
|
||||
.circle {
|
||||
background-color: #fff;
|
||||
color: #999;
|
||||
border-radius: 50%;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 3px solid var(--line-border-empty);
|
||||
transition: 0.4s ease;
|
||||
}
|
||||
|
||||
.circle.active {
|
||||
border-color: var(--line-border-fill);
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-color: var(--line-border-fill);
|
||||
position: relative;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
border-color: var(--line-border-fill);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
padding: 8px 30px;
|
||||
margin: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
background-color: var(--line-border-empty);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
65
50Days/day3/index.html
Normal file
65
50Days/day3/index.html
Normal file
@@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
|
||||
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<title>Day 3: Rotating Navigation</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="circle-container">
|
||||
<div class="circle">
|
||||
<button id="close">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
<button id="open">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h1>Amazing Article</h1>
|
||||
<small>The Writer</small>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum odio,
|
||||
maiores nostrum debitis, natus numquam velit minus officia a
|
||||
consequuntur quaerat obcaecati perspiciatis repudiandae suscipit nemo
|
||||
accusamus quam beatae pariatur iste cumque. Quibusdam illo mollitia
|
||||
unde odio eligendi ratione atque amet sunt fugit, laborum harum
|
||||
officiis at placeat dolore. Est optio omnis delectus hic voluptatem
|
||||
quam, cumque iusto laudantium ullam? Fugit, voluptates fugiat
|
||||
perferendis sunt corrupti vitae ab aperiam ipsa voluptatum, maiores
|
||||
maxime? Perferendis commodi architecto eligendi culpa ipsam adipisci
|
||||
magni deleniti placeat voluptatum, facilis deserunt id expedita vero!
|
||||
Repellendus possimus at harum fugiat repellat rem consequatur, placeat
|
||||
dignissimos soluta.
|
||||
</p>
|
||||
|
||||
<h3>My Image</h3>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1617892459113-0ef697cafa05?w=1350"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li><i class="fas fa-home"></i> Home</li>
|
||||
<li><i class="fas fa-user-alt"></i> About</li>
|
||||
<li><i class="fas fa-envelope"></i> Contact</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
11
50Days/day3/script.js
Normal file
11
50Days/day3/script.js
Normal file
@@ -0,0 +1,11 @@
|
||||
const open = document.getElementById('open');
|
||||
const close = document.getElementById('close');
|
||||
const container = document.querySelector('.container');
|
||||
|
||||
open.addEventListener('click', () => {
|
||||
container.classList.add('show-nav');
|
||||
});
|
||||
|
||||
close.addEventListener('click', () => {
|
||||
container.classList.remove('show-nav');
|
||||
});
|
||||
134
50Days/day3/style.css
Normal file
134
50Days/day3/style.css
Normal file
@@ -0,0 +1,134 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Lato', sans-serif;
|
||||
background-color: #333;
|
||||
color: #222;
|
||||
overflow-x: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: #fafafa;
|
||||
transform-origin: top left;
|
||||
transition: transform 0.5s linear;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
.container.show-nav {
|
||||
transform: rotate(-20deg);
|
||||
}
|
||||
|
||||
.circle-container {
|
||||
position: fixed;
|
||||
top: -75px;
|
||||
left: -75px;
|
||||
}
|
||||
|
||||
.circle {
|
||||
background-color: #ff7979;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
transition: transform 0.5s linear;
|
||||
}
|
||||
|
||||
.container.show-nav .circle {
|
||||
transform: rotate(-70deg);
|
||||
}
|
||||
|
||||
.circle button {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
height: 75px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
font-size: 23px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.circle button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.circle button#open {
|
||||
left: 55%;
|
||||
}
|
||||
|
||||
.circle button#close {
|
||||
top: 55%;
|
||||
transform: rotate(90deg);
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
.container.show-nav + nav li {
|
||||
transform: translateX(0);
|
||||
transition-delay: 0.3s;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
bottom: 40px;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style-type: none;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
nav li {
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
margin: 40px 0;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.2s ease-in;
|
||||
}
|
||||
|
||||
nav li i {
|
||||
font-size: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
nav ul li + li {
|
||||
margin-left: 15px;
|
||||
transform: translateX(-150%);
|
||||
}
|
||||
|
||||
nav ul li + li + li {
|
||||
margin-left: 30px;
|
||||
transform: translateX(-200%);
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.content img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.content h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.content small {
|
||||
color: #555;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.content p {
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
}
|
||||
64
50Days/day3_cssonly/index.html
Normal file
64
50Days/day3_cssonly/index.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
|
||||
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<title>Day 3: Rotating Navigation</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<input type="checkbox" name="" id="toggle" />
|
||||
<div class="container">
|
||||
<div class="circle-container">
|
||||
<div class="circle">
|
||||
<label for="toggle" class="close">
|
||||
<i class="fas fa-times"></i>
|
||||
</label>
|
||||
<label for="toggle" class="open"> <i class="fas fa-bars"></i> </label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h1>Amazing Article</h1>
|
||||
<small>The Writer</small>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum odio,
|
||||
maiores nostrum debitis, natus numquam velit minus officia a
|
||||
consequuntur quaerat obcaecati perspiciatis repudiandae suscipit nemo
|
||||
accusamus quam beatae pariatur iste cumque. Quibusdam illo mollitia
|
||||
unde odio eligendi ratione atque amet sunt fugit, laborum harum
|
||||
officiis at placeat dolore. Est optio omnis delectus hic voluptatem
|
||||
quam, cumque iusto laudantium ullam? Fugit, voluptates fugiat
|
||||
perferendis sunt corrupti vitae ab aperiam ipsa voluptatum, maiores
|
||||
maxime? Perferendis commodi architecto eligendi culpa ipsam adipisci
|
||||
magni deleniti placeat voluptatum, facilis deserunt id expedita vero!
|
||||
Repellendus possimus at harum fugiat repellat rem consequatur, placeat
|
||||
dignissimos soluta.
|
||||
</p>
|
||||
|
||||
<h3>My Image</h3>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1617892459113-0ef697cafa05?w=1350"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li><i class="fas fa-home"></i> Home</li>
|
||||
<li><i class="fas fa-user-alt"></i> About</li>
|
||||
<li><i class="fas fa-envelope"></i> Contact</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
0
50Days/day3_cssonly/script.js
Normal file
0
50Days/day3_cssonly/script.js
Normal file
144
50Days/day3_cssonly/style.css
Normal file
144
50Days/day3_cssonly/style.css
Normal file
@@ -0,0 +1,144 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Lato', sans-serif;
|
||||
background-color: #333;
|
||||
color: #222;
|
||||
overflow-x: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: #fafafa;
|
||||
transform-origin: top left;
|
||||
transition: transform 0.5s linear;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
.circle-container {
|
||||
position: fixed;
|
||||
top: -75px;
|
||||
left: -75px;
|
||||
}
|
||||
|
||||
.circle {
|
||||
background-color: #ff7979;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
transition: transform 0.5s linear;
|
||||
}
|
||||
.container.show-nav {
|
||||
transform: rotate(-20deg);
|
||||
}
|
||||
|
||||
.container.show-nav .circle {
|
||||
transform: rotate(-70deg);
|
||||
}
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.circle label {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
height: 75px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
font-size: 23px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.circle label:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.circle label.open {
|
||||
left: 55%;
|
||||
top: 60%;
|
||||
}
|
||||
|
||||
.circle label.close {
|
||||
top: 55%;
|
||||
left: 40%;
|
||||
transform: rotate(90deg);
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
#toggle:checked + .container {
|
||||
transform: rotate(-20deg);
|
||||
}
|
||||
|
||||
#toggle:checked + .container .circle {
|
||||
transform: rotate(-70deg);
|
||||
}
|
||||
|
||||
#toggle:checked + .container + nav li {
|
||||
transform: translateX(0);
|
||||
transition-delay: 0.3s;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
bottom: 40px;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style-type: none;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
nav li {
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
margin: 40px 0;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.2s ease-in;
|
||||
}
|
||||
|
||||
nav li i {
|
||||
font-size: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
nav ul li + li {
|
||||
margin-left: 15px;
|
||||
transform: translateX(-150%);
|
||||
}
|
||||
|
||||
nav ul li + li + li {
|
||||
margin-left: 30px;
|
||||
transform: translateX(-200%);
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.content img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.content h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.content small {
|
||||
color: #555;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.content p {
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
}
|
||||
26
50Days/day4/index.html
Normal file
26
50Days/day4/index.html
Normal file
@@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
|
||||
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<title>Day 4: Hidden Search</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="search" id="search">
|
||||
<input type="text" id="input" class="input" placeholder="Search..." />
|
||||
<button class="btn" id="toggle"><i class="fas fa-search"></i></button>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
8
50Days/day4/script.js
Normal file
8
50Days/day4/script.js
Normal file
@@ -0,0 +1,8 @@
|
||||
const button = document.getElementById('toggle');
|
||||
const search = document.getElementById('search');
|
||||
const input = document.getElementById('input');
|
||||
|
||||
toggle.addEventListener('click', () => {
|
||||
search.classList.toggle('active');
|
||||
input.focus();
|
||||
});
|
||||
57
50Days/day4/style.css
Normal file
57
50Days/day4/style.css
Normal file
@@ -0,0 +1,57 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-image: linear-gradient(90deg, #7d5fff, #7158e2);
|
||||
font-family: 'Roboto', sans-serif;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search {
|
||||
position: relative;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.search .input {
|
||||
background-color: #fff;
|
||||
border: 0;
|
||||
font-size: 18px;
|
||||
padding: 15px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.search.active .input {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-color: #fff;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.search.active .btn {
|
||||
transform: translateX(198px);
|
||||
}
|
||||
|
||||
.btn:focus,
|
||||
.input:focus {
|
||||
outline: 0;
|
||||
}
|
||||
27
50Days/day4_cssonly/index.html
Normal file
27
50Days/day4_cssonly/index.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
|
||||
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<title>Day 4: Hidden Search</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="search">
|
||||
<input type="checkbox" name="" id="toggle" class="toggle" />
|
||||
<input type="text" class="input" placeholder="Search..." />
|
||||
<label for="toggle" class="btn"><i class="fas fa-search"></i></label>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
0
50Days/day4_cssonly/script.js
Normal file
0
50Days/day4_cssonly/script.js
Normal file
64
50Days/day4_cssonly/style.css
Normal file
64
50Days/day4_cssonly/style.css
Normal file
@@ -0,0 +1,64 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-image: linear-gradient(90deg, #7d5fff, #7158e2);
|
||||
font-family: 'Roboto', sans-serif;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search {
|
||||
position: relative;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.search .input {
|
||||
background-color: #fff;
|
||||
border: 0;
|
||||
font-size: 18px;
|
||||
padding: 15px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.toggle:checked + .input {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-color: #fff;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transition: transform 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toggle:checked ~ .btn {
|
||||
transform: translateX(198px);
|
||||
}
|
||||
|
||||
.btn:focus,
|
||||
.input:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
display: none;
|
||||
}
|
||||
21
50Days/day5/index.html
Normal file
21
50Days/day5/index.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
|
||||
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
|
||||
crossorigin="anonymous" /> -->
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<title>Day5: Blurry Loading</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section class="bg"></section>
|
||||
<div class="loading-text">0%</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
18
50Days/day5/script.js
Normal file
18
50Days/day5/script.js
Normal file
@@ -0,0 +1,18 @@
|
||||
const loadText = document.querySelector('.loading-text');
|
||||
const bg = document.querySelector('.bg');
|
||||
|
||||
const scale = (num, in_min, in_max, out_min, out_max) => {
|
||||
return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
|
||||
};
|
||||
|
||||
let load = 0;
|
||||
let int = setInterval(blurring, 15);
|
||||
|
||||
function blurring() {
|
||||
load++;
|
||||
load > 99 && clearInterval(int);
|
||||
|
||||
loadText.innerText = `${load}%`;
|
||||
loadText.style.opacity = scale(load, 0, 100, 1, 0);
|
||||
bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`;
|
||||
}
|
||||
31
50Days/day5/style.css
Normal file
31
50Days/day5/style.css
Normal file
@@ -0,0 +1,31 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Ubuntu');
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Ubuntu', sans-serif;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bg {
|
||||
background: url('https://picsum.photos/1980') no-repeat center center/cover;
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
left: -30px;
|
||||
width: calc(100vw + 60px);
|
||||
height: calc(100vh + 60px);
|
||||
z-index: -1;
|
||||
filter: blur(70px);
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 50px;
|
||||
color: white;
|
||||
}
|
||||
Reference in New Issue
Block a user