minor tidying, submitting so I can test again accessibilitycheck website and validator.nu
This commit is contained in:
parent
db2c8e2433
commit
58033f2d68
|
|
@ -87,6 +87,8 @@ body {
|
|||
font-family: "Red Hat Display", sans-serif;
|
||||
|
||||
text-align: center;
|
||||
|
||||
background-color: var(--col-background);
|
||||
}
|
||||
|
||||
.logo {
|
||||
|
|
@ -95,13 +97,9 @@ body {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.hero-img {
|
||||
/* height: 100%; */
|
||||
}
|
||||
|
||||
.hero-img {
|
||||
margin-top: 3.175rem;
|
||||
height: 153px;
|
||||
height: 9.5625rem;
|
||||
object-fit: cover;
|
||||
|
||||
vertical-align: top;
|
||||
|
|
@ -112,10 +110,6 @@ body {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.hero-img-left img,
|
||||
.hero-img-right img {
|
||||
}
|
||||
|
||||
.primary-section__heading {
|
||||
margin-top: 3rem;
|
||||
margin-inline: auto;
|
||||
|
|
@ -204,7 +198,7 @@ body {
|
|||
.circle-number {
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
padding: 15px 16px;
|
||||
padding: 0.9375rem 1rem;
|
||||
|
||||
font-size: 1rem;
|
||||
line-height: 162%;
|
||||
|
|
@ -217,34 +211,26 @@ body {
|
|||
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; */
|
||||
margin-top: calc(4rem + 1.75rem);
|
||||
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.images-of-users img {
|
||||
/* width: auto; */
|
||||
/* height: 100%; */
|
||||
/* flex: 0 1 auto; */
|
||||
flex: 0 0 40%;
|
||||
width: 40%;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.outline {
|
||||
.overline {
|
||||
margin-top: 4rem;
|
||||
text-transform: uppercase;
|
||||
|
||||
|
|
@ -258,7 +244,7 @@ body {
|
|||
.secondary-header {
|
||||
margin-top: 1.5rem;
|
||||
|
||||
margin-inline: 24px;
|
||||
margin-inline: 1.5rem;
|
||||
|
||||
color: var(--col-headers);
|
||||
font-size: var(--fs-second-heading);
|
||||
|
|
@ -268,7 +254,7 @@ body {
|
|||
|
||||
.secondary-body {
|
||||
margin-top: 2rem;
|
||||
margin-inline: 24px;
|
||||
margin-inline: 1.5rem;
|
||||
|
||||
color: var(--col-body);
|
||||
font-size: var(--fs-main-page-body);
|
||||
|
|
@ -286,7 +272,7 @@ body {
|
|||
|
||||
color: var(--col-slightly-off-white);
|
||||
|
||||
padding: 58px 1.5rem 4.5rem 1.5rem;
|
||||
padding: 3.625rem 1.5rem 4.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.footer__header {
|
||||
|
|
@ -309,7 +295,7 @@ body {
|
|||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 450px) {
|
||||
@media screen and (min-width: 28.125rem) {
|
||||
.primary-section__body,
|
||||
.secondary-body {
|
||||
width: 30ch;
|
||||
|
|
@ -342,19 +328,16 @@ body {
|
|||
}
|
||||
|
||||
.hero-img {
|
||||
margin-top: 60px;
|
||||
height: 303px;
|
||||
margin-top: 3.75rem;
|
||||
height: 18.9375rem;
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
margin-top: 32px;
|
||||
margin-top: 2rem;
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.btn-download {
|
||||
}
|
||||
|
||||
.primary-section__heading {
|
||||
margin-top: 4.5rem;
|
||||
}
|
||||
|
|
@ -373,24 +356,24 @@ body {
|
|||
}
|
||||
|
||||
.images-of-users {
|
||||
margin-top: 96px;
|
||||
margin-top: 6rem;
|
||||
|
||||
gap: 11px;
|
||||
gap: 0.6875rem;
|
||||
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
|
||||
.images-of-users img {
|
||||
width: 164px;
|
||||
width: 10.25rem;
|
||||
flex: unset;
|
||||
}
|
||||
|
||||
.outline {
|
||||
.overline {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.secondary-header {
|
||||
margin-top: 16px;
|
||||
margin-top: 1rem;
|
||||
|
||||
width: 16ch;
|
||||
}
|
||||
|
|
@ -407,7 +390,7 @@ body {
|
|||
}
|
||||
|
||||
.footer__header {
|
||||
/* margin-top: 4rem; */
|
||||
margin-top: 2.125rem;
|
||||
width: 14ch;
|
||||
}
|
||||
|
||||
|
|
@ -441,14 +424,15 @@ body {
|
|||
}
|
||||
|
||||
.logo {
|
||||
margin-top: 80px;
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
.top-section {
|
||||
margin-top: 60px;
|
||||
margin-top: 3.75rem;
|
||||
display: flex;
|
||||
gap: 115px;
|
||||
gap: 7.5rem;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-img {
|
||||
|
|
@ -458,23 +442,20 @@ body {
|
|||
.hero-img-left,
|
||||
.hero-img-right {
|
||||
display: block;
|
||||
width: 394px;
|
||||
width: 24.625rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.hero-img-left {
|
||||
align-self: flex-start;
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
.hero-img-right {
|
||||
align-self: flex-end;
|
||||
overflow: hidden;
|
||||
/* margin-top: 16px; */
|
||||
}
|
||||
|
||||
.primary-section__heading {
|
||||
margin-top: 44px;
|
||||
margin-top: 2.75rem;
|
||||
|
||||
justify-self: center;
|
||||
}
|
||||
|
|
@ -484,27 +465,24 @@ body {
|
|||
}
|
||||
|
||||
.circle-plus-line {
|
||||
margin-top: 117px;
|
||||
}
|
||||
|
||||
.circle-number {
|
||||
margin-top: 7.3125rem;
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
margin-top: 32px;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.images-of-users {
|
||||
gap: 30px;
|
||||
margin-top: 90px;
|
||||
gap: 1.875rem;
|
||||
margin-top: 5.625rem;
|
||||
}
|
||||
|
||||
.images-of-users img {
|
||||
width: 255px;
|
||||
width: 15.9375rem;
|
||||
}
|
||||
|
||||
.outline {
|
||||
margin-top: 80px;
|
||||
.overline {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
|
|
@ -513,11 +491,11 @@ body {
|
|||
gap: 5.5rem;
|
||||
text-align: left;
|
||||
|
||||
padding: 116px 0 104px 0;
|
||||
padding: 7.25rem 0 6.5rem 0;
|
||||
}
|
||||
|
||||
footer .circle-plus-line {
|
||||
margin-top: 72px;
|
||||
margin-top: 4.5rem;
|
||||
}
|
||||
|
||||
.footer__header {
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<picture>
|
||||
<img class="logo" src="assets/logo.svg" alt="Logo of Meet">
|
||||
|
|
@ -23,27 +24,27 @@
|
|||
|
||||
<main>
|
||||
<section class="top-section">
|
||||
<!-- <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>
|
||||
<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>
|
||||
<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 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>
|
||||
|
|
@ -51,38 +52,46 @@
|
|||
<div class="circle-number">01</div>
|
||||
</div>
|
||||
|
||||
<section class="images-of-users">
|
||||
<div 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>
|
||||
</div>
|
||||
|
||||
<p class="outline">Built for modern use</p>
|
||||
<h2 class="secondary-header">Smarter meetings, all in one place</h2>
|
||||
<p class="overline">
|
||||
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 class="circle-plus-line">
|
||||
<div class="circle-number">02</div>
|
||||
</div>
|
||||
<section class="footer">
|
||||
|
||||
<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.
|
||||
<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>
|
||||
<a class="btn btn-download" href="#">
|
||||
Download<span>v1.3</span>
|
||||
</a>
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
Loading…
Reference in New Issue