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;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: "Muli", sans-serif;
|
font-family: 'Muli', sans-serif;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: 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