initial version of mobile for order summary

This commit is contained in:
Robert McGovern 2022-01-30 23:23:06 +00:00
parent e679e817eb
commit dc715a96d3
2 changed files with 152 additions and 33 deletions

View File

@ -1,9 +1,15 @@
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap'); @import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap");
/*
Mobile 375 x 709
Box roughly: 327 x 567
Ratio 0.872 x 0.7997179126
Desktop: 1440 x 900
Box roughly: 450 x 697
Ratio 0.3125 x 0.7744444444
*/
:root { :root {
box-sizing: border-box;
margin: 0;
/* colors */ /* colors */
--clr-pale-blue: hsl(225, 100%, 94%); --clr-pale-blue: hsl(225, 100%, 94%);
@ -18,31 +24,126 @@
--fw-500: 500; --fw-500: 500;
--fw-700: 700; --fw-700: 700;
--fw-900: 900; --fw-900: 900;
/* Border Radius */
--br-11: 11px;
--br-20: 20px;
}
*,
::before,
::after {
margin: 0;
padding: 0;
box-sizing: border-box;
} }
/* General Formating */ /* General Formating */
body { body {
font-family: 'Red Hat Display', sans-serif; font-family: "Red Hat Display", sans-serif;
width: 100vw;
height: 100vh;
background-color: var(--clr-pale-blue);
}
main {
background-image: url(../images/pattern-background-mobile.svg);
background-repeat: no-repeat;
/* margin: 0 auto; */
width: 100%;
height: 100%;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
} }
.card { .card {
width: 87.2%;
border-radius: var(--br-20);
background-color: white;
text-align: center;
} }
.hero-image { .hero-image img {
width: 100%;
border-radius: var(--br-20) var(--br-20) 0 0;
margin-bottom: 2rem;
} }
.card h1 {
font-weight: var(--fw-900);
font-size: 1.375rem;
line-height: 1.2;
margin-bottom: 1rem;
color: var(--clr-dark-blue);
}
.card p {
font-weight: var(--fw-500);
color: var(--clr-desaturated-blue);
margin: 0 2rem;
font-size: 0.9375rem;
margin-bottom: 1.5rem;
line-height: 25px;
}
.price-plan { .price-plan {
display: flex;
justify-content: space-around;
align-items: center;
width: 85%;
margin: 0 auto 1.5rem auto;
padding: 1rem 0;
border-radius: var(--br-11);
background-color: var(--clr-very-pale-blue);
} }
.icon {
}
.plan-type-area {
}
.plan-type { .plan-type {
color: var(--clr-dark-blue);
font-size: 0.875rem;
font-weight: var(--fw-900);
margin-bottom: 0.1875rem;
} }
.plan-price { .plan-price {
color: var(--clr-desaturated-blue);
font-size: 0.875rem;
font-weight: 500;
} }
.change-button { .change-button {
font-size: 0.8125rem;
font-weight: var(--fw-700);
color: var(--clr-bright-blue);
}
.button-area a {
display: block;
text-decoration: none;
font-weight: var(--fw-900);
font-size: 0.9375rem;
line-height: 20px;
} }
.payment-button { .payment-button {
color: white;
/* margin-bottom: 1.5rem; */
background-color: var(--clr-bright-blue);
width: 85%;
margin: 0 auto 1.5rem auto;
box-shadow: 0px 20px 20px rgba(56, 42, 225, 0.190291);
border-radius: var(--br-11);
padding: 15px 0;
} }
.cancel-button { .cancel-button {
color: var(--clr-desaturated-blue);
margin-bottom: 2rem;
}
@media screen and (min-width: 376px) {
main {
background-image: url(../images/pattern-background-desktop.svg);
}
} }

View File

@ -1,44 +1,62 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device --> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/style.css">
<title>Frontend Mentor | Order summary card</title> <title>Frontend Mentor | Order summary card</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 --> <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style> <style>
.attribution { font-size: 11px; text-align: center; } .attribution {
.attribution a { color: hsl(228, 45%, 44%); } font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style> </style>
</head> </head>
<body> <body>
<div class="card"> <main>
<div class="hero-image"></div> <div class="card">
<h1>Order Summary</h1> <div class="hero-image">
<p> <img src="./images/illustration-hero.svg"
You can now listen to millions of songs, audiobooks, and podcasts on any alt="Hero Image Person holding an audio device and wearing headphones">
device anywhere you like! </div>
</p> <h1>Order Summary</h1>
<div class="price-plan"> <p>
<div class="icon"></div> You can now listen to millions of songs, audiobooks, and podcasts on any
<div class="plan-type-area"> device anywhere you like!
<div class="plan-type">Annual Plan</div> </p>
<div class="plan-price">$59.99/year</div> <div class="price-plan">
<img class="icon" src="./images/icon-music.svg" alt="Music icon" aria-hidden="true">
<div class="plan-type-area">
<div class="plan-type">Annual Plan</div>
<div class="plan-price">$59.99/year</div>
</div>
<a href="#" class="change-button">Change</a>
</div>
<div class="button-area">
<a href="#" class="payment-button">Proceed to Payment</a>
<a href="#" class="cancel-button">Cancel Order</a>
</div> </div>
<div class="change-button">Change</div>
</div> </div>
<div class="payment-button">Proceed to Payment</div> </main>
<div class="cancel-button">Cancel Order</div>
</div>
<!-- <div class="attribution"> <!-- <div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>. Coded by <a href="#">Your Name Here</a>.
</div> --> </div> -->
</body> </body>
</html> </html>