have mobile working, needs tidy up
This commit is contained in:
parent
8dc58d6e59
commit
076a16d32e
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
|
|
@ -1,8 +1,8 @@
|
|||
/*
|
||||
* Design sizes:
|
||||
* 375x2215
|
||||
* 768x540
|
||||
* 1440x308
|
||||
* 768x2128
|
||||
* 1440x1895
|
||||
*/
|
||||
|
||||
*,
|
||||
|
|
@ -13,11 +13,18 @@
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* General Colors */
|
||||
--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-dark-magenta: hsla(268, 34%, 53%, 1);
|
||||
--col-lighter-magenta: hsla(268, 55%, 71%, 1);
|
||||
--col-light-magenta: hsla(268, 100%, 86%, 1);
|
||||
--col-dark-blue-gray: hsla(240, 21%, 20%, 1);
|
||||
--col-light-gray: hsla(240, 10%, 57%, 1);
|
||||
|
|
@ -25,11 +32,13 @@
|
|||
|
||||
/* */
|
||||
--col-background: var(--col-slightly-off-white);
|
||||
--col-background-footer: var(--col-dark-cyan);
|
||||
--col-headers: var(--col-dark-blue-gray);
|
||||
--col-body: var(--col-light-gray);
|
||||
--col-button-text: white;
|
||||
--col-button-background: var(--col-dark-magenta);
|
||||
--col-button-background-hover: var(--col-light-magenta);
|
||||
--col-button-download-ver-text: var(--col-light-magenta);
|
||||
--col-button-download-background: var(--col-dark-magenta);
|
||||
--col-button-download-background-hover: var(--col-lighter-magenta);
|
||||
|
||||
/* Typography */
|
||||
--fs-page-header: 2.5rem;
|
||||
|
|
@ -61,13 +70,244 @@
|
|||
--lh-button: 162%;
|
||||
--fw-button: 900;
|
||||
|
||||
--fs-circle-number: 1rem;
|
||||
--lh-circle-number: 162%;
|
||||
|
||||
--padding-btn: 1rem 2.5rem;
|
||||
--border-radius-btn: 1.8125rem;
|
||||
|
||||
--image-footer: url(../assets/mobile/image-footer.jpg);
|
||||
|
||||
--line-height: 5.25rem;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
|
||||
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) {
|
||||
|
|
@ -82,9 +322,51 @@ body {
|
|||
|
||||
--fs-main-page-body: 1.125rem;
|
||||
--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) {
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,53 +17,71 @@
|
|||
<body>
|
||||
<header>
|
||||
<picture>
|
||||
<img src="assets/logo.svg" alt="Logo of Meet">
|
||||
<img class="logo" src="assets/logo.svg" alt="Logo of Meet">
|
||||
</picture>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section>
|
||||
<picture>
|
||||
<img src="assets/tablet/image-hero.png" alt="Image of users of meet" aria-hidden="true">
|
||||
</picture>
|
||||
<picture>
|
||||
<img src="assets/desktop/image-hero-left.png" alt="Image of users of meet" aria-hidden="true">
|
||||
</picture>
|
||||
<section>
|
||||
<h1>Group Chat for Everyone</h1>
|
||||
<p>Meet makes it easy to connect with others face-to-face virtually and collaborate across any device.</p>
|
||||
<a href="">Download <span>v1.3</span></a>
|
||||
<a href="">What is it?</a>
|
||||
<!-- <picture class="hero-img"> -->
|
||||
<img class="hero-img" src="assets/tablet/image-hero.png" alt="Image of users of meet" aria-hidden="true">
|
||||
<!-- </picture> -->
|
||||
<!-- <picture class="hero-img-left"> -->
|
||||
<img class="hero-img-left" src="assets/desktop/image-hero-left.png" alt="Image of users of meet"
|
||||
aria-hidden="true">
|
||||
<!-- </picture> -->
|
||||
<section class="primary-section">
|
||||
<h1 class="primary-section__heading">Group Chat for Everyone</h1>
|
||||
<p class="primary-section__body">Meet makes it easy to connect with others face-to-face virtually and
|
||||
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>
|
||||
<picture>
|
||||
<img src="assets/desktop/image-hero-right.png" alt="Image of users of meet" aria-hidden="true">
|
||||
</picture>
|
||||
<!-- <picture class="hero-img-right"> -->
|
||||
<img class="hero-img-right" src="assets/desktop/image-hero-right.png" alt="Image of users of meet"
|
||||
aria-hidden="true">
|
||||
<!-- </picture> -->
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div>01</div>
|
||||
<div class="circle-plus-line">
|
||||
<div class="circle-number">01</div>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<img src="assets/desktop/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/desktop/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">
|
||||
<section class="images-of-users">
|
||||
<img src="assets/shared/image-woman-in-videocall.jpg" alt="A Woman in a Videocall">
|
||||
<img src="assets/shared/image-women-videochatting.jpg" alt="A group of women video chatting">
|
||||
<img src="assets/shared/image-men-in-meeting.jpg" alt="A man in a meeting via video chat">
|
||||
<img src="assets/shared/image-man-texting.jpg" alt="A man sitting and texting">
|
||||
</section>
|
||||
|
||||
<h3>Built for modern use</h3>
|
||||
<h2>Smarter meetings, all in one place</h2>
|
||||
<p class="outline">Built for modern use</p>
|
||||
<h2 class="secondary-header">Smarter meetings, all in one place</h2>
|
||||
|
||||
<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>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
|
||||
<div>02</div>
|
||||
<h2>Experience more together</h2>
|
||||
<p>Stay connected with reliable HD meetings and unlimited one-on-one and group video sessions.</p>
|
||||
<div class="circle-plus-line">
|
||||
<div class="circle-number">02</div>
|
||||
</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>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue