Merge pull request #10 from fuzue/3-phones-css-isnt-properly-configured

3 phones css isnt properly configured
fuzue · Aug 29, 2023 · bac27ed · bac27ed
2 parents 5ebfdca + 8131e10
commit bac27ed
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 48 deletions.
diff --git a/index.html b/index.html
@@ -25,7 +25,7 @@
 
   <body class="bg-[#f3ecf1] font-sans m-0 flex flex-col text-[#393232]">
     <header
-      class="bg-[#5a175d] z-50 sticky top-0 flex items-start md:justify-center w-screen flex-wrap text-white"
+      class="bg-[#5a175d] z-50 sticky top-0 flex items-start md:justify-center w-screen flex-wrap text-white "
     >
       <h3 class="p-4 md:p-3 font-display text-2xl md:text-4xl">Seasonal Food App</h3>
       <input
@@ -49,7 +49,7 @@ <h3 class="p-4 md:p-3 font-display text-2xl md:text-4xl">Seasonal Food App</h3>
     </header>
     <!-- MAIN SECTION OF THE WEBSITE -->
     <main
-      class="mt-4 w-full flex flex-col items-center gap-6 md:flex-row md:flex-grow"
+      class="w-full flex flex-col items-center gap-6 md:flex-row md:flex-grow"
     >
       <div
         class="py-20 text-[#074e67] h-full text-center flex items-center md:flex-1 md:order-2 md:text-left"
@@ -80,23 +80,30 @@ <h3 class="p-4 md:p-3 font-display text-2xl md:text-4xl">Seasonal Food App</h3>
         </div>
       </div>
       <div
-        class="w-full flex justify-center items-center  md:w-auto md:flex-1 md:h-full"
+        class="w-full flex justify-center items-center md:relative md:w-auto md:flex-1 md:h-full"
       >
         <div
-          class="iphone-x overflow-hidden min-w-[80%] md:min-w-[50%]"
+          class="relative phone overflow-hidden min-w-[80%] md:absolute md:min-w-0"
         >
+          <b>Camera</b>
           <div class="relative w-full h-full">
             <img
               class="absolute top-0 w-full h-full"
               src="./assets/phone-print.png"
             />
+            <i class="p-[3%]">
+              <div
+                class="h-[75%] aspect-square border-b border-l rotate-45"></div>
+              <div class="h-full aspect-square border rounded-full"></div>
+              <div class="h-full aspect-square border"></div>
+            </i>
           </div>
         </div>
       </div>
     </main>
     <!-- FEATURES -->
     <div
-      class="md:flex gap-6 md:gap-24 w-full bg-[#05878a] text-slate-50 text-center px-6 xl:px-56 py-5 pt-6 pb-8"
+      class=" z-10 md:flex gap-6 md:gap-24 w-full bg-[#05878a] text-slate-50 text-center px-6 xl:px-56 py-5 pt-6 pb-8"
     >
       <div class="flex flex-col md:basis-1/3 md:justify-center items-center">
         <img src="./assets/icon-month.svg" class="w-10 pt-8 md:pt-2 mb-1" />

diff --git a/style.css b/style.css
@@ -202,63 +202,40 @@ input[type=checkbox]:checked ~ #overlay-button span:after {
 }
 
 /* PHONE CSS */
-.iphone-x {
+.phone {
   /* position: relative; */
-  height: 80%;
+  height: 90%;
   aspect-ratio: calc(360/780);
   background-color: #7371ee;
   background-image: linear-gradient(60deg, #7371ee 1%, #a1d9d6 100%);
-  border-radius: 18px;
-  box-shadow: 0px 0px 0px 1vh #1f1f1f, 0px 0px 0px 1vh #191919,
-    0px 0px 0px max(1.5vh, 15px) #111;
+  border-radius: .5em;
+  box-shadow: 0px 0px 0px .5vh #1f1f1f, 0px 0px 0px .5vh #191919,
+    0px 0px 0px max(1vh, 5px) #111;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
 }
-.iphone-x .before,
-.iphone-x:after {
+.phone i {
   content: "";
   position: absolute;
-  z-index: 5;
-}
-.iphone-x:after {
-  bottom: 1%;
-  width: 30%;
-  height: .5%;
-  background-color: #f2f2f2;
-  border-radius: 10px;
-}
-.iphone-x .before {
-  top: 0px;
-  width: 56%;
-  height: 3%;
-  background-color: #1f1f1f;
-  border-radius: 0px 0px 40px 40px;
   display: flex;
-  justify-content: center;
+  justify-content: space-around;
+  align-items: center;
+  z-index: 5;
+  bottom: 0;
+  width: 100%;
+  height: 5%;
+  background-color: #191919;
 }
-.iphone-x i,
-.iphone-x b,
-.iphone-x s,
-.iphone-x span {
+.phone b {
   position: absolute;
   display: block;
   color: transparent;
   z-index: 100;
 }
-.iphone-x i {
-  left: 50%;
-  transform: translate(-50%, 6px);
-  height: 10%;
-  width: 30%;
-  background-color: #101010;
-  border-radius: 000px;
-  box-shadow: inset 0px -3px 3px 0px rgba(255, 255, 255, 0.2);
-}
-.iphone-x b {
-  top: 10%;
-  right: 25%;
+.phone b {
+  top: 2%;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -268,7 +245,7 @@ input[type=checkbox]:checked ~ #overlay-button span:after {
   border-radius: 999px;
   box-shadow: inset 0px -3px 2px 0px rgba(255, 255, 255, 0.2);
 }
-.iphone-x b:after {
+.phone b:after {
   content: "";
   position: absolute;
   background-color: #2d4d76;
@@ -277,6 +254,4 @@ input[type=checkbox]:checked ~ #overlay-button span:after {
   display: block;
   border-radius: 999px;
   box-shadow: inset 0px -2px 2px rgba(0, 0, 0, 0.5);
-}
-
-
+}