mobile version mostly styled

This commit is contained in:
Robert McGovern 2022-10-11 23:12:25 +01:00
parent 7b0b8f2dc6
commit 43f4096b2d
2 changed files with 232 additions and 15 deletions

View File

@ -17,6 +17,57 @@
} }
:root { :root {
/* Colors */
--col-cyan: hsla(177, 68%, 64%, 1);
--col-orange: hsla(33, 100%, 70%, 1);
--col-orangey-red: hsla(12, 94%, 65%, 1);
--col-off-white: hsla(20, 33%, 98%, 1);
--col-black: hsla(244, 23%, 12%, 1);
/* Typography */
--fw-400: 400;
--fw-700: 700;
--fs-header-page: 2.5rem;
--lh-header-page: 3rem;
--ls-header-page: -0.0284rem;
--fw-header-page: var(--fw-700);
--fs-header-card: 2rem;
--lh-header-card: 2.5rem;
--fw-header-card: var(--fw-700);
--fs-body-page: 1rem;
--lh-body-page: 1.625rem;
--fw-body-page: var(--fw-400);
--fs-body-card: 1.125rem;
--lh-body-card: 1.75rem;
--fw-body-card: var(--fw-400);
--fs-footer: 1rem;
--lh-footer: 1.625rem;
--fw-footer: var(--fw-400);
--fs-price: 4.0625rem;
--lh-price: 3.25rem;
--fw-price: var(--fw-700);
--fs-term: 1.25rem;
--lh-term: 2rem;
--fw-term: var(--fw-400);
--ls-term: -0.0125rem;
--fs-button: 1.125rem;
--lh-button: 2rem;
--ls-button: -0.0112rem;
--fw-button: var(--fw-700);
/* Other */
--image-background: url(../assets/bg-main-mobile.png);
--image-page-background: none;
--image-card-background: url(../assets/bg-pattern-2.svg);
--border-radius: 0.75rem;
} }
body { body {
@ -25,8 +76,169 @@ body {
font-family: "IBM Plex Sans", sans-serif; font-family: "IBM Plex Sans", sans-serif;
} }
header {
position: relative;
background-position: right;
background-image: var(--image-background);
padding: 0 1.5rem;
}
.logo {
margin-top: 2.5rem;
}
.intro-section {
margin-top: 3.6875rem; /* per design ...4rem; */
padding: 0 1.5rem;
}
.page-header {
font-size: var(--fs-header-page);
line-height: var(--lh-header-page);
letter-spacing: var(--ls-header-page);
font-weight: var(--fw-header-page);
}
.main-body {
margin-top: 1.25rem;
font-size: var(--fs-body-page);
line-height: var(--lh-body-page);
font-weight: var(--fw-body-page);
}
.product-card {
margin-top: 34.125rem; /* ehh */
padding: 3rem 2.25rem 3rem 2.25rem;
color: var(--col-off-white);
background-color: var(--col-orangey-red);
border-radius: var(--border-radius);
}
.product-card__header {
font-size: var(--fs-header-card);
line-height: var(--lh-header-card);
font-weight: var(--fw-header-card);
}
.product-card__body {
margin-top: 0.75rem;
font-size: var(--fs-body-card);
line-height: var(--lh-body-card);
font-weight: var(--fw-body-card);
}
.price-block {
margin-top: 2.25rem;
padding-left: 0.5rem;
display: flex;
align-items: center;
gap: 1rem;
}
.price-block__price {
font-size: var(--fs-price);
line-height: var(--lh-price);
font-weight: var(--fw-price);
}
.price-block__term {
font-size: var(--fs-term);
line-height: var(--lh-term);
letter-spacing: var(--ls-term);
font-weight: var(--fw-term);
}
.button-block {
margin-top: 2rem;
padding-left: 0.5rem;
}
.button + .button {
margin-top: 1rem;
}
.button {
font-size: var(--fs-button);
line-height: var(--lh-button);
font-weight: var(--fw-button);
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
padding: 0.9375rem 0;
border-radius: var(--border-radius);
}
.button-ios {
background-color: var(--col-black);
color: var(--col-off-white);
}
.button-android {
background-color: var(--col-off-white);
color: var(--col-black);
}
.button-ios:is(:hover, :focus) {
background-color: var(--col-cyan);
}
.button-android:is(:hover, :focus) {
background-color: var(--col-orange);
}
footer {
margin-top: 3.75rem; /* per design 4rem; */
padding: 0 1.5rem;
}
.logo-footer {
margin-bottom: 1.8125rem; /* per design 2rem; */
}
.footer__body {
font-size: var(--fs-footer);
font-weight: var(--fw-footer);
line-height: var(--lh-footer);
width: 30ch;
margin-bottom: 4rem;
}
.footer__email {
font-weight: var(--fw-700);
}
.social-image-block {
display: flex;
gap: 1.25rem;
}
@media screen and (min-width: 700px) { @media screen and (min-width: 700px) {
:root {
--fs-header-page: 4rem;
--lh-header-page: 4rem;
--ls-header-page: -0.0456rem;
--fs-body-page: 1.125rem;
--lh-body-page: 1.75rem;
--image-background: url(../assets/bg-main-tablet.png);
--image-page-background: url(../assets/bg-pattern-1.svg);
}
} }
@media screen and (min-width: 1400px) { @media screen and (min-width: 1400px) {
:root {
--fs-header-page: 5.5rem;
--lh-header-page: 5.5rem;
--ls-header-page: -0.0625rem;
--fs-header-card: 2.5rem;
--lh-header-card: 3.25rem;
--fs-body: 1.25rem;
--lh-body: 2.125rem;
--image-background: url(../assets/bg-main-desktop.png);
}
} }

View File

@ -14,35 +14,39 @@
<body> <body>
<header> <header>
<img src="assets/logo.svg" alt="equalizer company logo"> <img class="logo" src="assets/logo.svg" alt="equalizer company logo">
</header> </header>
<main> <main>
<section> <section class="intro-section">
<h1>We make your music sound extraordinary.</h1> <h1 class="page-header">We make your music sound extraordinary.</h1>
<p> <p class="main-body">
A system audio equalizer specifically designed for Android and iOS. Freely tune the A system audio equalizer specifically designed for Android and iOS. Freely tune the
way your music sounds with a professional grade parametric EQ & volume mixer. Control way your music sounds with a professional grade parametric EQ & volume mixer. Control
bass, mids, treble, gain control, reverb, and more! bass, mids, treble, gain control, reverb, and more!
</p> </p>
</section> </section>
<section> <section class="product-card">
<h2>Premium EQ</h2> <h2 class="product-card__header">Premium EQ</h2>
<p> <p class="product-card__body">
Get expert-level control with a robust equalizer, volume mixer, and spatial audio. Take Get expert-level control with a robust equalizer, volume mixer, and spatial audio. Take
your listening experience to a whole new level and access all our incredible features! your listening experience to a whole new level and access all our incredible features!
</p> </p>
<div class="price-block"> <p class="price-block">
$4 <span>/ month</span> <span class="price-block__price">$4</span> <span class="price-block__term">/ month</span>
</div> </p>
<div class="button-block"> <div class="button-block">
<a href="#">iOS Download</a> <a class="button button-ios" href="#">
<a href="#">Android Download</a> <img src="assets/icon-apple.svg" alt="Apple Logo" aria-hidden="true">
iOS Download</a>
<a class="button button-android" href="#">
<img src="assets/icon-android.svg" alt="Android Logo" aria-hidden="true">
Android Download</a>
</div> </div>
</section> </section>
</main> </main>
@ -50,11 +54,12 @@
<footer> <footer>
<img src="assets/logo.svg" alt="equalizer company logo"> <img class="logo-footer" src="assets/logo.svg" alt="equalizer company logo">
<p> <p class="footer__body">
All rights reserved © Equalizer 2021 All rights reserved © Equalizer 2021
Have any problems? Contact us via social media or email us at <span>equalizer@example.com</span> Have any problems? Contact us via social media or email us at <span
class="footer__email">equalizer@example.com</span>
</p> </p>
<div class="social-image-block"> <div class="social-image-block">