Master

2 years ago · e9eff375c7
parent 9409685c9a
commit e9eff375c7
4 changed files with 140 additions and 11 deletions
--- a/.vscode/launch.json
+++ 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}"
+        }
+    ]
+}
--- a/_project_starter_/index.html
+++ b/_project_starter_/index.html
@ -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 "  />
+     <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>
--- 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()
--- a/_project_starter_/style.css
+++ b/_project_starter_/style.css
@ -1,10 +1,12 @@
-@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 {
+  background-color: #fafafa;
  font-family:'Roboto',  sans-serif;
  display: flex;
  flex-direction: column;
@ -12,5 +14,80 @@ body {
  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);
 }