tarasis
/
rmcg.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

minor tidying, submitting so I can test again accessibilitycheck website and validator.nu

This commit is contained in:
Robert McGovern 2022-10-24 19:51:11 +01:00
parent db2c8e2433
commit 58033f2d68
5 changed files with 66 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
projects/FrontendMentor/newbie/meet-landing-page/css/style.css
View File

@ -87,6 +87,8 @@ body {
font-family: "Red Hat Display", sans-serif; font-family: "Red Hat Display", sans-serif;
text-align: center; text-align: center;
background-color: var(--col-background);
} }
.logo { .logo {
@ -95,13 +97,9 @@ body {
height: 100%; height: 100%;
} }
.hero-img {
/* height: 100%; */
}
.hero-img { .hero-img {
margin-top: 3.175rem; margin-top: 3.175rem;
height: 153px; height: 9.5625rem;
object-fit: cover; object-fit: cover;
vertical-align: top; vertical-align: top;
@ -112,10 +110,6 @@ body {
display: none; display: none;
} }
.hero-img-left img,
.hero-img-right img {
}
.primary-section__heading { .primary-section__heading {
margin-top: 3rem; margin-top: 3rem;
margin-inline: auto; margin-inline: auto;
@ -204,7 +198,7 @@ body {
.circle-number { .circle-number {
position: relative; position: relative;
border-radius: 50%; border-radius: 50%;
padding: 15px 16px; padding: 0.9375rem 1rem;
font-size: 1rem; font-size: 1rem;
line-height: 162%; line-height: 162%;
@ -217,34 +211,26 @@ body {
border: 1px solid hsla(240, 10%, 57%, 0.25); border: 1px solid hsla(240, 10%, 57%, 0.25);
width: 3.5rem; width: 3.5rem;
/* top: 1.75rem; */
top: var(--line-height); top: var(--line-height);
left: calc(50% - 1.75rem); left: calc(50% - 1.75rem);
} }
.images-of-users { .images-of-users {
margin-top: calc(4rem + 28px); margin-top: calc(4rem + 1.75rem);
/* height: 19.375rem; */
/* display: flex;
justify-content: space-around;
flex-wrap: wrap; */
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: center; justify-content: center;
gap: 24px; gap: 1.5rem;
} }
.images-of-users img { .images-of-users img {
/* width: auto; */
/* height: 100%; */
/* flex: 0 1 auto; */
flex: 0 0 40%; flex: 0 0 40%;
width: 40%; width: 40%;
border-radius: 0.5rem; border-radius: 0.5rem;
} }
.outline { .overline {
margin-top: 4rem; margin-top: 4rem;
text-transform: uppercase; text-transform: uppercase;
@ -258,7 +244,7 @@ body {
.secondary-header { .secondary-header {
margin-top: 1.5rem; margin-top: 1.5rem;
margin-inline: 24px; margin-inline: 1.5rem;
color: var(--col-headers); color: var(--col-headers);
font-size: var(--fs-second-heading); font-size: var(--fs-second-heading);
@ -268,7 +254,7 @@ body {
.secondary-body { .secondary-body {
margin-top: 2rem; margin-top: 2rem;
margin-inline: 24px; margin-inline: 1.5rem;
color: var(--col-body); color: var(--col-body);
font-size: var(--fs-main-page-body); font-size: var(--fs-main-page-body);
@ -286,7 +272,7 @@ body {
color: var(--col-slightly-off-white); 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 { .footer__header {
@ -309,7 +295,7 @@ body {
margin-top: 2rem; margin-top: 2rem;
} }
@media screen and (min-width: 450px) { @media screen and (min-width: 28.125rem) {
.primary-section__body, .primary-section__body,
.secondary-body { .secondary-body {
width: 30ch; width: 30ch;
@ -342,19 +328,16 @@ body {
} }
.hero-img { .hero-img {
margin-top: 60px; margin-top: 3.75rem;
height: 303px; height: 18.9375rem;
} }
.btn-block { .btn-block {
margin-top: 32px; margin-top: 2rem;
flex-direction: row; flex-direction: row;
gap: 1rem; gap: 1rem;
} }
.btn-download {
}
.primary-section__heading { .primary-section__heading {
margin-top: 4.5rem; margin-top: 4.5rem;
} }
@ -373,24 +356,24 @@ body {
} }
.images-of-users { .images-of-users {
margin-top: 96px; margin-top: 6rem;
gap: 11px; gap: 0.6875rem;
flex-flow: row nowrap; flex-flow: row nowrap;
} }
.images-of-users img { .images-of-users img {
width: 164px; width: 10.25rem;
flex: unset; flex: unset;
} }
.outline { .overline {
margin-top: 3rem; margin-top: 3rem;
} }
.secondary-header { .secondary-header {
margin-top: 16px; margin-top: 1rem;
width: 16ch; width: 16ch;
} }
@ -407,7 +390,7 @@ body {
} }
.footer__header { .footer__header {
/* margin-top: 4rem; */ margin-top: 2.125rem;
width: 14ch; width: 14ch;
} }
@ -441,14 +424,15 @@ body {
} }
.logo { .logo {
margin-top: 80px; margin-top: 5rem;
} }
.top-section { .top-section {
margin-top: 60px; margin-top: 3.75rem;
display: flex; display: flex;
gap: 115px; gap: 7.5rem;
justify-content: center; justify-content: center;
overflow: hidden;
} }
.hero-img { .hero-img {
@ -458,23 +442,20 @@ body {
.hero-img-left, .hero-img-left,
.hero-img-right { .hero-img-right {
display: block; display: block;
width: 394px; width: 24.625rem;
object-fit: cover; object-fit: cover;
} }
.hero-img-left { .hero-img-left {
align-self: flex-start; align-self: flex-start;
margin-left: -30px;
} }
.hero-img-right { .hero-img-right {
align-self: flex-end; align-self: flex-end;
overflow: hidden;
/* margin-top: 16px; */
} }
.primary-section__heading { .primary-section__heading {
margin-top: 44px; margin-top: 2.75rem;
justify-self: center; justify-self: center;
} }
@ -484,27 +465,24 @@ body {
} }
.circle-plus-line { .circle-plus-line {
margin-top: 117px; margin-top: 7.3125rem;
}
.circle-number {
} }
.btn-block { .btn-block {
margin-top: 32px; margin-top: 2rem;
} }
.images-of-users { .images-of-users {
gap: 30px; gap: 1.875rem;
margin-top: 90px; margin-top: 5.625rem;
} }
.images-of-users img { .images-of-users img {
width: 255px; width: 15.9375rem;
} }
.outline { .overline {
margin-top: 80px; margin-top: 5rem;
} }
.footer { .footer {
@ -513,11 +491,11 @@ body {
gap: 5.5rem; gap: 5.5rem;
text-align: left; text-align: left;
padding: 116px 0 104px 0; padding: 7.25rem 0 6.5rem 0;
} }
footer .circle-plus-line { footer .circle-plus-line {
margin-top: 72px; margin-top: 4.5rem;
} }
.footer__header { .footer__header {

53
projects/FrontendMentor/newbie/meet-landing-page/index.html
View File

@ -15,6 +15,7 @@
</head> </head>
<body> <body>
<header> <header>
<picture> <picture>
<img class="logo" src="assets/logo.svg" alt="Logo of Meet"> <img class="logo" src="assets/logo.svg" alt="Logo of Meet">
@ -23,27 +24,27 @@
<main> <main>
<section class="top-section"> <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"> <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" <img class="hero-img-left" src="assets/desktop/image-hero-left.png" alt="Image of users of meet"
aria-hidden="true"> aria-hidden="true">
<!-- </picture> -->
<section class="primary-section"> <section class="primary-section">
<h1 class="primary-section__heading">Group Chat for Everyone</h1> <h1 class="primary-section__heading">
<p class="primary-section__body">Meet makes it easy to connect with others face-to-face virtually and Group Chat for Everyone
collaborate across any device.</p> </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"> <p class="btn-block">
<a class="btn btn-download" href="#">
<a class="btn btn-download" href="#">Download <span>v1.3</span></a> Download<span>v1.3</span>
<a class="btn btn-info" href="#">What is it?</a> </a>
<a class="btn btn-info" href="#">
What is it?
</a>
</p> </p>
</section> </section>
<!-- <picture class="hero-img-right"> -->
<img class="hero-img-right" src="assets/desktop/image-hero-right.png" alt="Image of users of meet" <img class="hero-img-right" src="assets/desktop/image-hero-right.png" alt="Image of users of meet"
aria-hidden="true"> aria-hidden="true">
<!-- </picture> -->
</section> </section>
<section> <section>
@ -51,38 +52,46 @@
<div class="circle-number">01</div> <div class="circle-number">01</div>
</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-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-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-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"> <img src="assets/shared/image-man-texting.jpg" alt="A man sitting and texting">
</section> </div>
<p class="outline">Built for modern use</p> <p class="overline">
<h2 class="secondary-header">Smarter meetings, all in one place</h2> Built for modern use
</p>
<h2 class="secondary-header">
Smarter meetings, all in one place
</h2>
<p class="secondary-body"> <p class="secondary-body">
Send messages, share files, show your screen, and record your meetings — all in one 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. workspace. Control who can join with invite-only team access, data encryption, and data export.
</p> </p>
</section> </section>
</main> </main>
<footer> <footer>
<div class="circle-plus-line"> <div class="circle-plus-line">
<div class="circle-number">02</div> <div class="circle-number">02</div>
</div> </div>
<section class="footer"> <section class="footer">
<h2 class="footer__header">
<h2 class="footer__header">Experience more together</h2> Experience more together
<p class="footer__body">Stay connected with reliable HD meetings and unlimited one-on-one and group video </h2>
sessions. <p class="footer__body">
Stay connected with reliable HD meetings and unlimited one-on-one and group video sessions.
</p> </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> </section>
</footer> </footer>
</body> </body>
</html> </html>

BIN
projects/FrontendMentor/newbie/meet-landing-page/screenshots/desktop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 MiB

BIN
projects/FrontendMentor/newbie/meet-landing-page/screenshots/mobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
projects/FrontendMentor/newbie/meet-landing-page/screenshots/tablet.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 MiB