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>
|
||||
<html lang="en">
|
||||
< html leng="en">
|
||||
<head>
|
||||
<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"
|
||||
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>My Project</title>
|
||||
<title>3D Boxes Background</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Project Starter</h1>
|
||||
<button id="btn" class="magic">Magic 🎩</button>
|
||||
<div id="boxes big"></div>
|
||||
<script src="script.js"></script>
|
||||
</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;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background-color: #fafafa;
|
||||
font-family:'Roboto', sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
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