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