diff --git a/projects/FrontendMentor/newbie/meet-landing-page/assets/desktop/image-man-texting.jpg b/projects/FrontendMentor/newbie/meet-landing-page/assets/shared/image-man-texting.jpg similarity index 100% rename from projects/FrontendMentor/newbie/meet-landing-page/assets/desktop/image-man-texting.jpg rename to projects/FrontendMentor/newbie/meet-landing-page/assets/shared/image-man-texting.jpg diff --git a/projects/FrontendMentor/newbie/meet-landing-page/assets/desktop/image-men-in-meeting.jpg b/projects/FrontendMentor/newbie/meet-landing-page/assets/shared/image-men-in-meeting.jpg similarity index 100% rename from projects/FrontendMentor/newbie/meet-landing-page/assets/desktop/image-men-in-meeting.jpg rename to projects/FrontendMentor/newbie/meet-landing-page/assets/shared/image-men-in-meeting.jpg diff --git a/projects/FrontendMentor/newbie/meet-landing-page/assets/desktop/image-woman-in-videocall.jpg b/projects/FrontendMentor/newbie/meet-landing-page/assets/shared/image-woman-in-videocall.jpg similarity index 100% rename from projects/FrontendMentor/newbie/meet-landing-page/assets/desktop/image-woman-in-videocall.jpg rename to projects/FrontendMentor/newbie/meet-landing-page/assets/shared/image-woman-in-videocall.jpg diff --git a/projects/FrontendMentor/newbie/meet-landing-page/assets/desktop/image-women-videochatting.jpg b/projects/FrontendMentor/newbie/meet-landing-page/assets/shared/image-women-videochatting.jpg similarity index 100% rename from projects/FrontendMentor/newbie/meet-landing-page/assets/desktop/image-women-videochatting.jpg rename to projects/FrontendMentor/newbie/meet-landing-page/assets/shared/image-women-videochatting.jpg diff --git a/projects/FrontendMentor/newbie/meet-landing-page/css/style.css b/projects/FrontendMentor/newbie/meet-landing-page/css/style.css index 4ed37a9..40f76c3 100644 --- a/projects/FrontendMentor/newbie/meet-landing-page/css/style.css +++ b/projects/FrontendMentor/newbie/meet-landing-page/css/style.css @@ -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; + } } diff --git a/projects/FrontendMentor/newbie/meet-landing-page/index.html b/projects/FrontendMentor/newbie/meet-landing-page/index.html index 2c98576..bfb3982 100755 --- a/projects/FrontendMentor/newbie/meet-landing-page/index.html +++ b/projects/FrontendMentor/newbie/meet-landing-page/index.html @@ -17,53 +17,71 @@
- Logo of Meet +
- - - - - - -
-

Group Chat for Everyone

-

Meet makes it easy to connect with others face-to-face virtually and collaborate across any device.

- Download v1.3 - What is it? + + + + + + +
+

Group Chat for Everyone

+

Meet makes it easy to connect with others face-to-face virtually and + collaborate across any device.

+

+ + Download v1.3 + What is it? +

- - - + + +
-
01
+
+
01
+
-
- A Woman in a Videocall - A group of women video chatting - A man in a meeting via video chat - A man sitting and texting +
+ A Woman in a Videocall + A group of women video chatting + A man in a meeting via video chat + A man sitting and texting
-

Built for modern use

-

Smarter meetings, all in one place

- 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. +

Built for modern use

+

Smarter meetings, all in one place

+ +

+ 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. +