diff --git a/index.html b/index.html index ca43846..8c9e2b8 100644 --- a/index.html +++ b/index.html @@ -25,7 +25,7 @@

Seasonal Food App

Seasonal Food App
Seasonal Food App
+ Camera
+ +
+
+
+
diff --git a/style.css b/style.css index b9507fb..49fff97 100644 --- 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); -} - - +} \ No newline at end of file