have mobile working, needs tidy up

This commit is contained in:
Robert McGovern 2022-10-23 23:08:35 +01:00
parent 8dc58d6e59
commit 076a16d32e
6 changed files with 333 additions and 33 deletions

View File

@ -1,8 +1,8 @@
/* /*
* Design sizes: * Design sizes:
* 375x2215 * 375x2215
* 768x540 * 768x2128
* 1440x308 * 1440x1895
*/ */
*, *,
@ -13,11 +13,18 @@
box-sizing: border-box; box-sizing: border-box;
} }
img {
width: 100%;
height: auto;
}
:root { :root {
/* General Colors */ /* General Colors */
--col-dark-cyan: hsla(192, 37%, 48%, 1); --col-dark-cyan: hsla(192, 37%, 48%, 1);
--col-lighter-cyan: hsla(192, 54%, 64%, 1);
--col-light-cyan: hsla(192, 90%, 77%, 1); --col-light-cyan: hsla(192, 90%, 77%, 1);
--col-dark-magenta: hsla(268, 34%, 53%, 1); --col-dark-magenta: hsla(268, 34%, 53%, 1);
--col-lighter-magenta: hsla(268, 55%, 71%, 1);
--col-light-magenta: hsla(268, 100%, 86%, 1); --col-light-magenta: hsla(268, 100%, 86%, 1);
--col-dark-blue-gray: hsla(240, 21%, 20%, 1); --col-dark-blue-gray: hsla(240, 21%, 20%, 1);
--col-light-gray: hsla(240, 10%, 57%, 1); --col-light-gray: hsla(240, 10%, 57%, 1);
@ -25,11 +32,13 @@
/* */ /* */
--col-background: var(--col-slightly-off-white); --col-background: var(--col-slightly-off-white);
--col-background-footer: var(--col-dark-cyan);
--col-headers: var(--col-dark-blue-gray); --col-headers: var(--col-dark-blue-gray);
--col-body: var(--col-light-gray); --col-body: var(--col-light-gray);
--col-button-text: white; --col-button-text: white;
--col-button-background: var(--col-dark-magenta); --col-button-download-ver-text: var(--col-light-magenta);
--col-button-background-hover: var(--col-light-magenta); --col-button-download-background: var(--col-dark-magenta);
--col-button-download-background-hover: var(--col-lighter-magenta);
/* Typography */ /* Typography */
--fs-page-header: 2.5rem; --fs-page-header: 2.5rem;
@ -61,13 +70,244 @@
--lh-button: 162%; --lh-button: 162%;
--fw-button: 900; --fw-button: 900;
--fs-circle-number: 1rem;
--lh-circle-number: 162%;
--padding-btn: 1rem 2.5rem; --padding-btn: 1rem 2.5rem;
--border-radius-btn: 1.8125rem;
--image-footer: url(../assets/mobile/image-footer.jpg);
--line-height: 5.25rem;
} }
body { body {
height: 100vh; height: 100vh;
font-family: "Red Hat Display", sans-serif; font-family: "Red Hat Display", sans-serif;
text-align: center;
}
.logo {
margin-top: 3rem;
width: unset;
height: 100%;
}
.hero-img {
/* height: 100%; */
}
.hero-img {
outline: 1px solid red;
margin-top: 3.175rem;
height: 153px;
object-fit: cover;
vertical-align: top;
}
.hero-img-left,
.hero-img-right {
display: none;
}
.hero-img-left img,
.hero-img-right img {
}
.primary-section__heading {
margin-top: 3rem;
margin-inline: auto;
width: 10ch;
color: var(--col-headers);
font-size: var(--fs-page-header);
line-height: var(--lh-page-header);
font-weight: var(--fw-page-header);
}
.primary-section__body {
margin-top: 1.5rem;
color: var(--col-body);
font-size: var(--fs-main-page-body);
line-height: var(--lh-main-page-body);
font-weight: var(--fw-main-page-body);
width: 30ch;
margin-inline: auto;
}
.btn-block {
display: flex;
flex-direction: column;
justify-content: center;
--col-button-download-ver-text: var(--col-light-cyan);
--col-button-download-background: var(--col-dark-cyan);
--col-button-download-background-hover: var(--col-lighter-cyan);
}
.btn {
padding: var(--padding-btn);
border-radius: var(--border-radius-btn);
font-size: var(--fs-button);
line-height: var(--lh-button);
font-weight: var(--fw-button);
text-decoration: none;
display: inline-block;
align-self: center;
color: var(--col-button-text);
}
.btn span {
margin-left: 0.25rem;
}
.btn-download {
margin-top: 2rem;
background-color: var(--col-button-download-background);
}
.btn-download span {
color: var(--col-button-download-ver-text);
}
.btn-download:where(:focus, :hover) {
background-color: var(--col-button-download-background-hover);
}
.btn-info {
--padding-btn: 1rem 1.8125rem;
margin-top: 1rem;
background-color: var(--col-dark-magenta);
}
.btn-info:where(:hover, :focus) {
background-color: var(--col-light-magenta);
}
.circle-plus-line {
margin-top: 4rem;
position: relative;
left: 50%;
border-left: 1px solid hsla(240, 10%, 57%, 0.25);
height: calc(var(--line-height) + 1.75rem);
width: 1px;
}
.circle-number {
position: relative;
border-radius: 50%;
padding: 15px 16px;
font-size: 1rem;
line-height: 162%;
font-weight: 900;
color: var(--col-body);
background-color: var(--col-background);
text-align: center;
border: 1px solid hsla(240, 10%, 57%, 0.25);
width: 3.5rem;
/* top: 1.75rem; */
top: var(--line-height);
left: calc(50% - 1.75rem);
}
.images-of-users {
margin-top: calc(4rem + 28px);
/* height: 19.375rem; */
/* display: flex;
justify-content: space-around;
flex-wrap: wrap; */
display: flex;
flex-flow: row wrap;
justify-content: center;
gap: 24px;
}
.images-of-users img {
/* width: auto; */
/* height: 100%; */
/* flex: 0 1 auto; */
flex: 0 0 40%;
width: 40%;
border-radius: 0.5rem;
}
.outline {
margin-top: 4rem;
text-transform: uppercase;
font-size: var(--fs-sell-tag);
line-height: var(--lh-sell-tag);
letter-spacing: var(--ls-sell-tag);
font-weight: var(--fw-sell-tag);
color: var(--col-dark-cyan);
}
.secondary-header {
margin-top: 1.5rem;
margin-inline: auto;
color: var(--col-headers);
font-size: var(--fs-second-heading);
line-height: var(--lh-second-heading);
font-weight: var(--fw-second-heading);
width: 14ch;
}
.secondary-body {
margin-top: 2rem;
margin-inline: auto;
width: 30ch;
color: var(--col-body);
font-size: var(--fs-main-page-body);
line-height: var(--lh-main-page-body);
font-weight: var(--fw-main-page-body);
}
.footer {
background: linear-gradient(
hsla(192, 37%, 48%, 0.9),
hsla(192, 37%, 48%, 0.9)
),
var(--image-footer) no-repeat top center;
background-size: contain;
color: var(--col-slightly-off-white);
padding: 58px 1.5rem 4.5rem 1.5rem;
}
.footer__header {
margin-top: 2.25rem;
font-size: var(--fs-footer-header);
line-height: var(--lh-footer-header);
font-weight: var(--fw-footer-header);
}
.footer__body {
margin-top: 1.5rem;
font-size: var(--fs-footer-body);
line-height: var(--lh-footer-body);
font-weight: var(--fw-footer-body);
} }
@media screen and (min-width: 48rem) { @media screen and (min-width: 48rem) {
@ -82,9 +322,51 @@ body {
--fs-main-page-body: 1.125rem; --fs-main-page-body: 1.125rem;
--lh-main-page-body: 144%; --lh-main-page-body: 144%;
--fs-footer-header: 2.5rem;
--lh-footer-header: 110%;
--image-footer: url(../assets/tablet/image-footer.jpg);
}
.btn-download {
margin-top: 2.5rem;
}
.footer {
margin: unset;
display: flex;
flex-direction: column;
align-items: center;
}
.footer__header {
width: 15ch;
}
.footer__body {
margin-top: 2rem;
width: 48ch;
} }
} }
@media screen and (min-width: 90rem) { @media screen and (min-width: 90rem) {
/* 1440px */ /* 1440px */
:root {
--image-footer: url(../assets/desktop/image-footer.jpg);
}
.circle-number {
}
.footer {
flex-direction: row;
justify-content: center;
gap: 4.6875rem;
text-align: left;
}
.footer__body {
width: 29ch;
}
} }

View File

@ -17,53 +17,71 @@
<body> <body>
<header> <header>
<picture> <picture>
<img src="assets/logo.svg" alt="Logo of Meet"> <img class="logo" src="assets/logo.svg" alt="Logo of Meet">
</picture> </picture>
</header> </header>
<main> <main>
<section> <section>
<picture> <!-- <picture class="hero-img"> -->
<img src="assets/tablet/image-hero.png" alt="Image of users of meet" aria-hidden="true"> <img class="hero-img" src="assets/tablet/image-hero.png" alt="Image of users of meet" aria-hidden="true">
</picture> <!-- </picture> -->
<picture> <!-- <picture class="hero-img-left"> -->
<img src="assets/desktop/image-hero-left.png" alt="Image of users of meet" aria-hidden="true"> <img class="hero-img-left" src="assets/desktop/image-hero-left.png" alt="Image of users of meet"
</picture> aria-hidden="true">
<section> <!-- </picture> -->
<h1>Group Chat for Everyone</h1> <section class="primary-section">
<p>Meet makes it easy to connect with others face-to-face virtually and collaborate across any device.</p> <h1 class="primary-section__heading">Group Chat for Everyone</h1>
<a href="">Download <span>v1.3</span></a> <p class="primary-section__body">Meet makes it easy to connect with others face-to-face virtually and
<a href="">What is it?</a> collaborate across any device.</p>
<p class="btn-block">
<a class="btn btn-download" href="#">Download <span>v1.3</span></a>
<a class="btn btn-info" href="#">What is it?</a>
</p>
</section> </section>
<picture> <!-- <picture class="hero-img-right"> -->
<img src="assets/desktop/image-hero-right.png" alt="Image of users of meet" aria-hidden="true"> <img class="hero-img-right" src="assets/desktop/image-hero-right.png" alt="Image of users of meet"
</picture> aria-hidden="true">
<!-- </picture> -->
</section> </section>
<section> <section>
<div>01</div> <div class="circle-plus-line">
<div class="circle-number">01</div>
</div>
<section> <section class="images-of-users">
<img src="assets/desktop/image-woman-in-videocall.jpg" alt="A Woman in a Videocall"> <img src="assets/shared/image-woman-in-videocall.jpg" alt="A Woman in a Videocall">
<img src="assets/desktop/image-women-videochatting.jpg" alt="A group of women video chatting"> <img src="assets/shared/image-women-videochatting.jpg" alt="A group of women video chatting">
<img src="assets/desktop/image-men-in-meeting.jpg" alt="A man in a meeting via video chat"> <img src="assets/shared/image-men-in-meeting.jpg" alt="A man in a meeting via video chat">
<img src="assets/desktop/image-man-texting.jpg" alt="A man sitting and texting"> <img src="assets/shared/image-man-texting.jpg" alt="A man sitting and texting">
</section> </section>
<h3>Built for modern use</h3> <p class="outline">Built for modern use</p>
<h2>Smarter meetings, all in one place</h2> <h2 class="secondary-header">Smarter meetings, all in one place</h2>
Send messages, share files, show your screen, and record your meetings — all in one
workspace. Control who can join with invite-only team access, data encryption, and data export. <p class="secondary-body">
Send messages, share files, show your screen, and record your meetings — all in one
workspace. Control who can join with invite-only team access, data encryption, and data export.
</p>
</section> </section>
</main> </main>
<footer> <footer>
<div>02</div> <div class="circle-plus-line">
<h2>Experience more together</h2> <div class="circle-number">02</div>
<p>Stay connected with reliable HD meetings and unlimited one-on-one and group video sessions.</p> </div>
<section class="footer">
<a href="">Download <span>v1.3</span></a> <h2 class="footer__header">Experience more together</h2>
<p class="footer__body">Stay connected with reliable HD meetings and unlimited one-on-one and group video
sessions.
</p>
<a class="btn btn-download" href="#">Download<span>v1.3</span></a>
</section>
</footer> </footer>
</body> </body>