msb-public
/
50projects50days
mirror of https://github.com/bradtraversy/50projects50days
1
0
Code Issues Projects Releases Wiki Activity

Shreyash 🍉

Browse Source
pull/156/head
Shreyash Kumar 3 years ago
parent 9aafd7870d
commit d64e74ca09
4 changed files with 77 additions and 21 deletions
Show Stats Download Patch File Download Diff File

37
3d-boxes-background/index.html
Unescape View File

@ -1,20 +1,21 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" /> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta charset="UTF-8" />
<link <meta name="viewport" content="width=device-width, initial-scale=1.0" />
rel="stylesheet" <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
crossorigin="anonymous" <link rel="stylesheet" href="style.css" />
/> <title>3D Boxes Background</title>
<link rel="stylesheet" href="style.css" /> </head>
<title>3D Boxes Background</title>
</head>
<body> <body>
<button id="btn" class="magic">Magic 🎩</button> <button id="btn" class="magic">Magic 🎩</button>
<div id="boxes" class="boxes big"></div> <div id="boxes" class="boxes big"></div>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>
</html>
</html>

6
3d-boxes-background/script.js
Unescape View File

@ -1,7 +1,9 @@
const boxesContainer = document.getElementById('boxes') const boxesContainer = document.getElementById('boxes')
const btn = document.getElementById('btn') const btn = document.getElementById('btn')
btn.addEventListener('click', () => boxesContainer.classList.toggle('big')) btn.addEventListener('click', () => {
boxesContainer.classList.toggle('big')
})
function createBoxes() { function createBoxes() {
for (let i = 0; i < 4; i++) { for (let i = 0; i < 4; i++) {
@ -14,4 +16,4 @@ function createBoxes() {
} }
} }
createBoxes() createBoxes();

1
3d-boxes-background/style.css
Unescape View File

@ -13,6 +13,7 @@ body {
justify-content: center; justify-content: center;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
border: 2px solid black;
} }
.magic { .magic {

54
animated-countdown/style.css
Unescape View File

@ -125,7 +125,7 @@ h4 {
} }
} }
#replay{ /* #replay{
background-color: #3498db; background-color: #3498db;
border-radius: 3px; border-radius: 3px;
border: none; border: none;
@ -160,4 +160,56 @@ h4 {
#replay:hover span:after{ #replay:hover span:after{
opacity: 1; opacity: 1;
right: 0; right: 0;
} */
button{
border: none;
padding: 5px 30px;
transform-origin: left;
font-size: 1.2rem;
transition: 1s;
cursor: pointer;
position: relative;
background: none;
color: aliceblue;
border-radius: 10px;
}
button::before{
position: absolute;
content: '';
width: 100%;
height: 100%;
z-index: -1;
left: 0;
top: 0;
transform: scaleX(37%);
background-color: #3498db;
transform-origin: left;
transition: 1s;
opacity: 40%;
border-radius: 10px;
} }
button:hover::before{
transform: scaleX(1);
}
button::after{
position: absolute;
content: '';
width: 100%;
height: 100%;
z-index: -1;
left: 0;
top: 0;
transform-origin: left;
transform: scaleX(44%);
border-radius: 10px;
border-bottom: 2px solid rgb(42, 58, 107);
transition: 1s;
}
button:hover::after{
transform: scaleX(1);
}
Write Preview
Loading…
Cancel
Save