rdy02
2 years ago
parent
9409685c9a
commit
e9eff375c7
@ -0,0 +1,29 @@
|
|||||||
|
{
|
||||||
|
// Use IntelliSense to learn about possible attributes.
|
||||||
|
// Hover to view descriptions of existing attributes.
|
||||||
|
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"name": "Attach to Chrome",
|
||||||
|
"port": 9222,
|
||||||
|
"request": "attach",
|
||||||
|
"type": "chrome",
|
||||||
|
"webRoot": "${workspaceFolder}"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "vscode-edge-devtools.debug",
|
||||||
|
"request": "attach",
|
||||||
|
"name": "Attach to Microsoft Edge and open the Edge DevTools",
|
||||||
|
"url": "http://localhost:8080",
|
||||||
|
"webRoot": "${workspaceFolder}"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "msedge",
|
||||||
|
"request": "launch",
|
||||||
|
"name": "Launch Edge against localhost",
|
||||||
|
"url": "http://localhost:8080",
|
||||||
|
"webRoot": "${workspaceFolder}"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -1,13 +1,20 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
< html leng="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0 " />
|
||||||
<link rel="stylesheet" href="style.css" />
|
<link
|
||||||
<title>My Project</title>
|
rel="stylesheet"
|
||||||
|
hef="https ://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
|
||||||
|
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PWOXpSrivlVlkMXe40PTKnXrLnZ9+fkDaog=="
|
||||||
|
crossorigin="anonymous"
|
||||||
|
/>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<title>3D Boxes Background</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Project Starter</h1>
|
<button id="btn" class="magic">Magic 🎩</button>
|
||||||
|
<div id="boxes big"></div>
|
||||||
<script src="script.js"></script>
|
<script src="script.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1 +1,17 @@
|
|||||||
|
const boxesContaine = document.getElementById ('boxes')
|
||||||
|
const btn = document.getElementById ('btn')
|
||||||
|
|
||||||
|
btn.addEventListener('click', () => boxesContaine.classList.toggle('big'))
|
||||||
|
|
||||||
|
function createBoxes() {
|
||||||
|
for (let i = 0; i < 4; i++ ) {
|
||||||
|
for (let j = 0; j <4; j++) {
|
||||||
|
const box = document.createElement('div')
|
||||||
|
box.classList.add('box')
|
||||||
|
box.style.backgraoundPosition = `$ {-j} * 125}px ${-j * 125}px`
|
||||||
|
boxesContaine.appendChild(box)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
createBoxes()
|
||||||
@ -1,16 +1,93 @@
|
|||||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
|
@import url('https://fonts.googleaplis.com/css2?family=Roboto:wght@400;700&display=swap');
|
||||||
|
@import url('https://fonts.googleaplis.om/css2?family=poppins&display=swap');
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Roboto', sans-serif;
|
background-color: #fafafa;
|
||||||
|
font-family:'Roboto', sans-serif;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.magic {
|
||||||
|
background-color: #f9ca24;
|
||||||
|
color: #fff;
|
||||||
|
font-family:'Poppins', sans-serif ;
|
||||||
|
borde: 0;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 12px 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
position:fixed;
|
||||||
|
top: 20px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
box-shadow: 0 3px rgba; (249, 202, 36, 0.5);
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.magic:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.magic:active {
|
||||||
|
box-shadow: none;
|
||||||
|
transform: translateY(2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.boxes {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-around;
|
||||||
|
height: 500px;
|
||||||
|
width: 500px;
|
||||||
|
position: relative;
|
||||||
|
transition: 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.boxes .big {
|
||||||
|
width: 600px;
|
||||||
|
height: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.boxes.big .box {
|
||||||
|
transform: ratateZ(360deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
background-image: url('https//media.gitphy.com/media/EZqwsBSPlvSda/giphy.gif');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 500px 500px;
|
||||||
|
position: relative;
|
||||||
|
height: 125px;
|
||||||
|
width: 125px;
|
||||||
|
transition: 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box::after {
|
||||||
|
content: '';
|
||||||
|
background-color: #f6e58d;
|
||||||
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
right -15px;
|
||||||
|
height: 100%;
|
||||||
|
width: 15px;
|
||||||
|
transform: skewY(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box::before {
|
||||||
|
content: '';
|
||||||
|
background-color: #f9ca24;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -15px;
|
||||||
|
left: 8px;
|
||||||
|
height: 15px;
|
||||||
|
width : 100%;
|
||||||
|
transform: skewX(45deg);
|
||||||
|
}
|
||||||
Loading…
Reference in new issue