Corrected A5 as per #6

jshreyans · Dec 22, 2018 · 87bb043 · 87bb043
1 parent 50dcc9f
commit 87bb043
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 12 deletions.
diff --git a/A/5.html b/A/5.html
@@ -1,4 +1,4 @@
-<!DOCTYPE <!DOCTYPE html>
+<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8" />
@@ -12,6 +12,8 @@
             padding: 0;
             font-family: sans-serif;
             position: relative;
+            height: 100vh;
+            width: 100%;
         }
         .button-left {
             position: absolute;
@@ -98,7 +100,7 @@
             border: 2px solid black;
             transition: transform 0.3s ease;
             position: absolute;
-            left: 2px;
+            left: 1px;
 
             transform-origin: 0 50px;
             transform: translateZ(20px) rotateX(90deg);

diff --git a/A/7.html b/A/7.html
@@ -1,4 +1,4 @@
-<!DOCTYPE <!DOCTYPE html>
+<!DOCTYPE html>
 <html>
 <head>
     <title>frontend-101 A7</title>
@@ -21,15 +21,15 @@
             width: 387px;
             height: 765.647px;
             /* border: 3px solid black; */
-            border-radius: 52px;
+            border-radius: 61px;
             display: flex;
             justify-content: center;
             align-items: center;
             background: black;
             border: 3px solid rgba(200,200,200,1);
         }
         .inner-face {
-            width: 370px;
+            width: 371px;
             height: 749.393px;
             background: rgba(200,200,200,1);
             border-radius: 50px;
@@ -66,14 +66,14 @@
             width: 6px;
             background: rgb(160, 158, 158);
             border-radius: 2px 0 0 2px;
-            top: 100px;
+            top: 112px;
             left: -3px;
             /* z-index: 100; */
         }
         .volume-up {
             position: absolute;
             height: 70px;
-            top: 180px;
+            top: 192px;
             width: 6px;
             left: -3px;
             background: rgb(160, 158, 158);
@@ -83,7 +83,7 @@
         .volume-down {
             position: absolute;
             height: 70px;
-            top: 270px;
+            top: 282px;
             width: 6px;
             left: -3px;
             background: rgb(160, 158, 158);
@@ -92,20 +92,20 @@
         .center-piece {
             background: black;
             width: 200px;
-            height: 34px;
+            height: 31px;
             position: absolute;
             top: 20px;
             left: 94.5px;
-            border-radius: 0 0 55px 60px;
+            border-radius: 0 0 55px 55px;
         }
         .right-curve {
             width: 20px;
             height: 20px;
             border-radius: 50%;
         }
         .camera {
-            width: 13px;
-            height: 13px;
+            width: 11px;
+            height: 11px;
             border-radius: 50%;
             background: rgba(103,103,255,0.55);
             position: absolute;
@@ -122,6 +122,16 @@
             top: 11px;
             left: 68px;
         }
+        .curve-right {
+            position: absolute;
+            height: 18px;
+            width: 18px;
+            box-shadow: 5px -5px black;
+            border-radius: 50%;
+            top: 0;
+            left: 197px;
+            transform: rotateZ(-90deg);
+        }
     </style>
 </head>
 <body>
@@ -139,6 +149,7 @@
         <div class="center-piece">
             <div class="camera"></div>
             <div class="speaker-grill"></div>
+            <div class="curve-right"></div>
         </div>
     </div>
 </body>