diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..1b6cb8c --- /dev/null +++ b/.vscode/launch.json @@ -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}" + } + ] +} \ No newline at end of file diff --git a/_project_starter_/index.html b/_project_starter_/index.html index 4783501..7f230e3 100644 --- a/_project_starter_/index.html +++ b/_project_starter_/index.html @@ -1,13 +1,20 @@ - + < html leng="en"> - - - My Project + + + + 3D Boxes Background -

Project Starter

+ +
- + diff --git a/_project_starter_/script.js b/_project_starter_/script.js index 8b13789..7d72316 100644 --- a/_project_starter_/script.js +++ b/_project_starter_/script.js @@ -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() \ No newline at end of file diff --git a/_project_starter_/style.css b/_project_starter_/style.css index ec80c4b..d80261e 100644 --- a/_project_starter_/style.css +++ b/_project_starter_/style.css @@ -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 { - 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; + 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); + } \ No newline at end of file