Skip to content

Commit

Permalink
centered the phone and moved its css to the style.css file
Browse files Browse the repository at this point in the history
  • Loading branch information
@elenavolpato
elenavolpato committed Jul 31, 2023
1 parent a7c3073 commit 48ff98a
Show file tree
Hide file tree
Showing 2 changed files with 115 additions and 114 deletions.
122 changes: 8 additions & 114 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,113 +20,7 @@
href="https://cdn.tailgrids.com/tailgrids-fallback.css"
/>
<title>Seasonal Food App</title>
<style>
html, body {
width: 100%;
overflow-x: hidden;
}
.iphone-x {
position: relative;
margin: -10px auto;
max-width: 360px;
width: 100%;
min-width: 20vw;
aspect-ratio: calc(360/780);
background-color: #7371ee;
background-image: linear-gradient(60deg, #7371ee 1%, #a1d9d6 100%);
border-radius: 40px;
box-shadow: 0px 0px 0px 11px #1f1f1f, 0px 0px 0px 13px #191919,
0px 0px 0px 20px #111;
z-index: 100;
}
.iphone-x:before,
.iphone-x:after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 5;
}
.iphone-x:after {
bottom: 7px;
width: 140px;
height: 4px;
background-color: #f2f2f2;
border-radius: 10px;
}
.iphone-x:before {
top: 0px;
width: 56%;
height: 30px;
background-color: #1f1f1f;
border-radius: 0px 0px 40px 40px;
}
.iphone-x i,
.iphone-x b,
.iphone-x s,
.iphone-x span {
position: absolute;
display: block;
color: transparent;
z-index: 10;
}
.iphone-x i {
top: 0px;
left: 50%;
transform: translate(-50%, 6px);
height: 8px;
width: 15%;
background-color: #101010;
border-radius: 8px;
box-shadow: inset 0px -3px 3px 0px rgba(255, 255, 255, 0.2);
}
.iphone-x b {
left: 10%;
top: 0px;
transform: translate(180px, 4px);
width: 12px;
height: 12px;
background-color: #101010;
border-radius: 12px;
box-shadow: inset 0px -3px 2px 0px rgba(255, 255, 255, 0.2);
}
.iphone-x b:after {
content: "";
position: absolute;
background-color: #2d4d76;
width: 6px;
height: 6px;
top: 2px;
left: 2px;
top: 3px;
left: 3px;
display: block;
border-radius: 4px;
box-shadow: inset 0px -2px 2px rgba(0, 0, 0, 0.5);
}
.iphone-x s {
top: 50px;
color: #fff;
text-align: center;
text-decoration: none;
width: 100%;
font-size: 70px;
font-weight: 100;
padding-top: 60px;
}
.iphone-x span {
bottom: 50px;
width: 40px;
height: 40px;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
left: 30px;
}
.iphone-x span + span {
left: auto;
right: 30px;
}
</style>

</head>

<body class="bg-[#f3ecf1] font-sans m-0 flex flex-col text-[#393232]">
Expand Down Expand Up @@ -159,13 +53,13 @@ <h3 class="font-display text-2xl md:text-4xl text-center my-5">
</header>
<!-- MAIN SECTION OF THE WEBSITE -->
<main
class="mt-4 w-full flex flex-col md:flex-row items-center justify-center md:gap-8"
class="mt-4 w-full flex flex-col md:flex-row items-center gap-6"
>
<div
class="py-20 text-[#074e67] h-full md:order-2 text-center md:text-left md:flex-grow"
class="md:basis-1/2 py-20 text-[#074e67] h-full md:order-2 text-center md:text-left"
>
<div>
<p class="mx-7 text-4xl md:text-6xl">
<p class="mx-7 text-4xl md:text-6xl justify-start">
Find out when <br />
it's best to buy <br />
<strong>your local produce </strong>
Expand All @@ -188,10 +82,10 @@ <h3 class="font-display text-2xl md:text-4xl text-center my-5">
</div>
</div>
</div>
<div class="w-full md:w-auto md:flex-grow">
<div class="iphone-x overflow-hidden">
<div class="md:relative w-full md:w-auto md:basis-1/2 md:min-h-[760px] md:top-4 ">
<div class="md:absolute relative md:right-[10px] iphone-x overflow-hidden ">
<img
class="absolute top-0 w-full h-full"
class="absolute top-0 w-full h-full "
src="./assets/phone-print.png"
/>
<i>Speaker</i>
Expand All @@ -206,7 +100,7 @@ <h3 class="font-display text-2xl md:text-4xl text-center my-5">
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"
>
<div class="flex flex-col md:basis-1/3 md:justify-center items-center">
<img src="./assets/icon-month.svg" class="w-10 mt-2 mb-1" />
<img src="./assets/icon-month.svg" class="w-10 pt-8 md:pt-2 mb-1" />
<h3 class="text-xl font-display">Monthly view</h3>
<article class="">
An easy to use app to check the seasonality of fruits and vegetables.
Expand Down
107 changes: 107 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,4 +195,111 @@ input[type=checkbox]:checked ~ #overlay-button span:after {
text-decoration: none;

}
/* PHONE CSS */
html, body {
width: 100%;
overflow-x: hidden;
}
.iphone-x {
/* position: relative; */
margin: -10px auto;
max-width: 360px;
width: 100%;
min-width: 20vw;
aspect-ratio: calc(360/780);
background-color: #7371ee;
background-image: linear-gradient(60deg, #7371ee 1%, #a1d9d6 100%);
border-radius: 40px;
box-shadow: 0px 0px 0px 11px #1f1f1f, 0px 0px 0px 13px #191919,
0px 0px 0px 20px #111;
z-index: 100;
}
.iphone-x:before,
.iphone-x:after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 5;
}
.iphone-x:after {
bottom: 7px;
width: 140px;
height: 4px;
background-color: #f2f2f2;
border-radius: 10px;
}
.iphone-x:before {
top: 0px;
width: 56%;
height: 30px;
background-color: #1f1f1f;
border-radius: 0px 0px 40px 40px;
}
.iphone-x i,
.iphone-x b,
.iphone-x s,
.iphone-x span {
position: absolute;
display: block;
color: transparent;
z-index: 10;
}
.iphone-x i {
top: 0px;
left: 50%;
transform: translate(-50%, 6px);
height: 8px;
width: 15%;
background-color: #101010;
border-radius: 8px;
box-shadow: inset 0px -3px 3px 0px rgba(255, 255, 255, 0.2);
}
.iphone-x b {
left: 10%;
top: 0px;
transform: translate(180px, 4px);
width: 12px;
height: 12px;
background-color: #101010;
border-radius: 12px;
box-shadow: inset 0px -3px 2px 0px rgba(255, 255, 255, 0.2);
}
.iphone-x b:after {
content: "";
position: absolute;
background-color: #2d4d76;
width: 6px;
height: 6px;
top: 2px;
left: 2px;
top: 3px;
left: 3px;
display: block;
border-radius: 4px;
box-shadow: inset 0px -2px 2px rgba(0, 0, 0, 0.5);
}
.iphone-x s {
top: 50px;
color: #fff;
text-align: center;
text-decoration: none;
width: 100%;
font-size: 70px;
font-weight: 100;
padding-top: 60px;
}
.iphone-x span {
bottom: 50px;
width: 40px;
height: 40px;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
left: 30px;
}
.iphone-x span + span {
left: auto;
right: 30px;
}


0 comments on commit 48ff98a

Please sign in to comment.