nearly finished mobile layout
This commit is contained in:
parent
c83cb021c7
commit
5249256339
|
@ -50,11 +50,11 @@
|
||||||
--fs-heading-l: 2.5rem;
|
--fs-heading-l: 2.5rem;
|
||||||
--lh-heading-l: 3.1875rem;
|
--lh-heading-l: 3.1875rem;
|
||||||
|
|
||||||
--fs-heading-m: 2rem;
|
--fs-heading-m: 24px;
|
||||||
--lh-heading-m: 2.5rem;
|
--lh-heading-m: 2rem;
|
||||||
|
|
||||||
--fs-heading-s: 1.5rem;
|
--fs-heading-s: 20px;
|
||||||
--lh-heading-s: 1.75rem;
|
--lh-heading-s: 25px;
|
||||||
|
|
||||||
--fs-body-m: 1.125rem;
|
--fs-body-m: 1.125rem;
|
||||||
--lh-body-m: 1.75rem;
|
--lh-body-m: 1.75rem;
|
||||||
|
@ -62,7 +62,7 @@
|
||||||
|
|
||||||
--fs-body-s: 1rem;
|
--fs-body-s: 1rem;
|
||||||
--lh-body-s: 1.625rem; /* design system says 28px / 1.75rem, but in the elements themselves its 26px / 1.625rem */
|
--lh-body-s: 1.625rem; /* design system says 28px / 1.75rem, but in the elements themselves its 26px / 1.625rem */
|
||||||
--fw-body-s: 700;
|
--fw-body-s: 500;
|
||||||
/* Sizing */
|
/* Sizing */
|
||||||
|
|
||||||
--border-radius: 1.75rem;
|
--border-radius: 1.75rem;
|
||||||
|
@ -70,13 +70,193 @@
|
||||||
/* Other */
|
/* Other */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
font-family: "Plus Jakarta Sans", sans-serif;
|
font-family: "Plus Jakarta Sans", sans-serif;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
background: var(--col-white-to-off-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
}
|
||||||
|
.banner {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 16px 16px 0px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 89px;
|
||||||
|
vertical-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner__logo {
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
font-size: var(--fs-body-s);
|
||||||
|
line-height: var(--lh-body-s);
|
||||||
|
font-weight: 700;
|
||||||
|
|
||||||
|
padding: 10px 24px;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner__getting-started {
|
||||||
|
background-color: var(--col-dark-purple);
|
||||||
|
color: var(--col-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner__getting-started:where(:focus, :hover) {
|
||||||
|
background-color: var(--col-medium-purple);
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro {
|
||||||
|
margin-top: 38px;
|
||||||
|
margin-inline: 16px;
|
||||||
|
/* overflow: hidden; */
|
||||||
|
}
|
||||||
|
.intro__header {
|
||||||
|
font-size: var(--fs-heading-l);
|
||||||
|
line-height: var(--lh-heading-l);
|
||||||
|
font-weight: var(--fw-headings);
|
||||||
|
|
||||||
|
color: var(--col-dark-purple);
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro__body,
|
||||||
|
.card__body {
|
||||||
|
font-size: var(--fs-body-s);
|
||||||
|
line-height: var(--lh-body-s);
|
||||||
|
font-weight: var(--fw-body-s);
|
||||||
|
|
||||||
|
color: var(--col-light-purple);
|
||||||
|
}
|
||||||
|
.intro__body {
|
||||||
|
margin-top: 26px;
|
||||||
|
}
|
||||||
|
.intro__getting-started {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 24px;
|
||||||
|
|
||||||
|
padding: 15px 37.5px;
|
||||||
|
|
||||||
|
background: var(--col-orange-to-pink);
|
||||||
|
color: var(--col-white);
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro__image {
|
||||||
|
display: block;
|
||||||
|
margin-top: 30px;
|
||||||
|
/* width: 100%; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro__image img {
|
||||||
|
display: block;
|
||||||
|
margin-left: -13%;
|
||||||
|
width: 125%;
|
||||||
|
}
|
||||||
|
.hero_img {
|
||||||
|
}
|
||||||
|
.cards {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
margin-top: -60px;
|
||||||
|
margin-inline: 16px;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
border-radius: 10px;
|
||||||
|
background: white;
|
||||||
|
|
||||||
|
margin-top: 42px;
|
||||||
|
padding-inline: 28px;
|
||||||
|
|
||||||
|
max-width: 350px;
|
||||||
|
}
|
||||||
|
.cards__header {
|
||||||
|
font-size: var(--fs-heading-m);
|
||||||
|
line-height: var(--lh-heading-m);
|
||||||
|
font-weight: var(--fw-headings);
|
||||||
|
|
||||||
|
color: var(--col-white);
|
||||||
|
background: var(--col-orange-to-pink);
|
||||||
|
padding: 24px 30px 32px 27px;
|
||||||
|
}
|
||||||
|
.card__image {
|
||||||
|
position: relative;
|
||||||
|
width: 56px;
|
||||||
|
top: -28px;
|
||||||
|
}
|
||||||
|
.card__header {
|
||||||
|
margin-top: 0px;
|
||||||
|
|
||||||
|
font-size: var(--fs-heading-s);
|
||||||
|
line-height: var(--lh-heading-s);
|
||||||
|
font-weight: var(--fw-headings);
|
||||||
|
|
||||||
|
color: var(--col-dark-purple);
|
||||||
|
}
|
||||||
|
.card__body {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
.card__getting-started {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
padding: unset;
|
||||||
|
margin-top: 24px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
|
||||||
|
color: var(--col-hot-pink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__getting-started:where(:focus, :hover) {
|
||||||
|
color: var(--col-light-pink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin-top: 80px;
|
||||||
|
background: var(--col-dark-purple);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 36px 16px;
|
||||||
|
}
|
||||||
|
.footer__logo {
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__getting-started {
|
||||||
|
background: var(--col-purple-to-pink);
|
||||||
|
color: var(--col-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__getting-started:where(:focus, :hover) {
|
||||||
|
background: var(--col-purple-to-pink-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 768px) {
|
@media screen and (min-width: 768px) {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 1440px) {
|
@media screen and (min-width: 1440px) {
|
||||||
|
:root {
|
||||||
|
--fs-heading-m: 2rem;
|
||||||
|
--lh-heading-m: 2.5rem;
|
||||||
|
|
||||||
|
--fs-heading-s: 24px;
|
||||||
|
--lh-heading-s: 30px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -21,21 +21,21 @@
|
||||||
|
|
||||||
<header class="header">
|
<header class="header">
|
||||||
|
|
||||||
<div>
|
<div class="banner">
|
||||||
<img class="logo header__logo" src="assets/logo-dark.svg" alt="skilled logo">
|
<img class="logo banner__logo" src="assets/logo-dark.svg" alt="skilled logo">
|
||||||
<a class="btn header__getting-started" href="">Get Started</a>
|
<a class="btn banner__getting-started" href="">Get Started</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div class="intro">
|
||||||
<h1>Maximize skill, minimize budget</h1>
|
<h1 class="intro__header">Maximize skill, minimize budget</h1>
|
||||||
<p>
|
<p class="intro__body">
|
||||||
Our modern courses across a range of in-demand skills will give you the
|
Our modern courses across a range of in-demand skills will give you the
|
||||||
knowledge you need to live the life you want.
|
knowledge you need to live the life you want.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<a href="">Get Started</a>
|
<a class="btn intro__getting-started" href="">Get Started</a>
|
||||||
|
|
||||||
<picture>
|
<picture class="intro__image">
|
||||||
<source media="(min-width: 1440px)"
|
<source media="(min-width: 1440px)"
|
||||||
srcset="assets/image-hero-desktop@2x.webp 2x, assets/image-hero-desktop.webp" type="image/webp">
|
srcset="assets/image-hero-desktop@2x.webp 2x, assets/image-hero-desktop.webp" type="image/webp">
|
||||||
<source media="(min-width: 1440px)" srcset="assets/image-hero-desktop@2x.png 2x, assets/image-hero-desktop.png">
|
<source media="(min-width: 1440px)" srcset="assets/image-hero-desktop@2x.png 2x, assets/image-hero-desktop.png">
|
||||||
|
@ -78,68 +78,68 @@
|
||||||
|
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<section>
|
<section class="cards">
|
||||||
|
|
||||||
<h2>Check out our most popular courses!</h2>
|
<h2 class="card cards__header">Check out our most popular courses!</h2>
|
||||||
|
|
||||||
<article>
|
<article class="card">
|
||||||
<img src="assets/icon-animation.svg"
|
<img class="card__image" src="assets/icon-animation.svg"
|
||||||
alt="Stylised image of Person running, inside a circle with a gradient from orange to pink"
|
alt="Stylised image of Person running, inside a circle with a gradient from orange to pink"
|
||||||
aria-hidden="true">
|
aria-hidden="true">
|
||||||
<h3>Animation</h3>
|
<h3 class="card__header">Animation</h3>
|
||||||
<p>
|
<p class="card__body">
|
||||||
Learn the latest animation techniques to create stunning motion design and captivate your audience.
|
Learn the latest animation techniques to create stunning motion design and captivate your audience.
|
||||||
</p>
|
</p>
|
||||||
<a href="">Get Started</a>
|
<a class="btn card__getting-started" href="">Get Started</a>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article>
|
<article class="card">
|
||||||
<img src="assets/icon-design.svg"
|
<img class="card__image" src="assets/icon-design.svg"
|
||||||
alt="Stylised image of Picture, inside a circle with a gradient from orange to pink" aria-hidden="true">
|
alt="Stylised image of Picture, inside a circle with a gradient from orange to pink" aria-hidden="true">
|
||||||
<h3>Design</h3>
|
<h3 class="card__header">Design</h3>
|
||||||
<p>
|
<p class="card__body">
|
||||||
Create beautiful, usable interfaces to help shape the future of how the web looks.
|
Create beautiful, usable interfaces to help shape the future of how the web looks.
|
||||||
</p>
|
</p>
|
||||||
<a href="">Get Started</a>
|
<a class="btn card__getting-started" href="">Get Started</a>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article>
|
<article class="card">
|
||||||
<img src="assets/icon-photography.svg"
|
<img class="card__image" src="assets/icon-photography.svg"
|
||||||
alt="Stylised image of a Camera, inside a circle with a gradient from orange to pink" aria-hidden="true">
|
alt="Stylised image of a Camera, inside a circle with a gradient from orange to pink" aria-hidden="true">
|
||||||
<h3>Photography</h3>
|
<h3 class="card__header">Photography</h3>
|
||||||
<p>
|
<p class="card__body">
|
||||||
Explore critical fundamentals like lighting, composition, and focus to capture exceptional photos.
|
Explore critical fundamentals like lighting, composition, and focus to capture exceptional photos.
|
||||||
</p>
|
</p>
|
||||||
<a href="">Get Started</a>
|
<a class="btn card__getting-started" href="">Get Started</a>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article>
|
<article class="card">
|
||||||
<img src="assets/icon-crypto.svg"
|
<img class="card__image" src="assets/icon-crypto.svg"
|
||||||
alt="Stylised image of 8 dots, inside a circle with a gradient from orange to pink" aria-hidden="true">
|
alt="Stylised image of 8 dots, inside a circle with a gradient from orange to pink" aria-hidden="true">
|
||||||
<h3>Crypto</h3>
|
<h3 class="card__header">Crypto</h3>
|
||||||
<p>
|
<p class="card__body">
|
||||||
All you need to know to get started investing in crypto. Go from beginner to advanced with this 54 hour
|
All you need to know to get started investing in crypto. Go from beginner to advanced with this 54 hour
|
||||||
course.
|
course.
|
||||||
</p>
|
</p>
|
||||||
<a href="">Get Started</a>
|
<a class="btn card__getting-started" href="">Get Started</a>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article>
|
<article class="card">
|
||||||
<img src="assets/icon-business.svg"
|
<img class="card__image" src="assets/icon-business.svg"
|
||||||
alt="Stylised image of Bag with handles, inside a circle with a gradient from orange to pink"
|
alt="Stylised image of Bag with handles, inside a circle with a gradient from orange to pink"
|
||||||
aria-hidden="true">
|
aria-hidden="true">
|
||||||
<h3>Business</h3>
|
<h3 class="card__header">Business</h3>
|
||||||
<p>
|
<p class="card__body">
|
||||||
A step-by-step playbook to help you start, scale, and sustain your business without outside investment.
|
A step-by-step playbook to help you start, scale, and sustain your business without outside investment.
|
||||||
</p>
|
</p>
|
||||||
<a href="">Get Started</a>
|
<a class="btn card__getting-started" href="">Get Started</a>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<img class="logo footer_logo" src="assets/logo-light.svg" alt="skilled logo">
|
<img class="logo footer__logo" src="assets/logo-light.svg" alt="skilled logo">
|
||||||
<a class="btn footer__getting-started" href="">Get Started</a>
|
<a class="btn footer__getting-started" href="">Get Started</a>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue