diff --git a/fylo-dark-theme-landing-page-master/images/icon-fb.svg b/fylo-dark-theme-landing-page-master/images/icon-fb.svg new file mode 100644 index 0000000..75c38bc --- /dev/null +++ b/fylo-dark-theme-landing-page-master/images/icon-fb.svg @@ -0,0 +1,5 @@ + + + + -
+
- quotes
-

Get early access today

-

- It only takes a minute to sign up and our free starter tier is - extremely generous. If you have any questions, our support team would - be happy to help you. -

-
-
+
+
+

Get early access today

+

+ It only takes a minute to sign up and our free starter tier is + extremely generous. If you have any questions, our support team would + be happy to help you. +

+
+ Get early access today Please enter a valid email address -
- + +
-
@@ -519,7 +472,6 @@

Get early access today

>Icons created by Stockio & Payungkead - Flaticon
- diff --git a/fylo-dark-theme-landing-page-master/style.css b/fylo-dark-theme-landing-page-master/style.css index 7608878..d1f325c 100644 --- a/fylo-dark-theme-landing-page-master/style.css +++ b/fylo-dark-theme-landing-page-master/style.css @@ -41,7 +41,7 @@ input, button, textarea, select { /* 7. Avoid text overflows */ -p, h1, h2, h3, h4, h5, h6 { +h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } @@ -100,8 +100,7 @@ a { } section { - padding: 2em; - + padding-inline: 2em; } .nav { @@ -171,9 +170,9 @@ section { filter: brightness(1.3); } -.main { +/* .main { position: relative; -} +} */ .features { background-color: var(--dark-blue-2); @@ -263,16 +262,12 @@ section { .social { background-color: var(--dark-blue-2); - padding: 5em 5em 20em 7.5em; - position: relative; - z-index: 1; + background-image: url(images/bg-quotes.png); + background-repeat: no-repeat; + background-position: 10px 30px; + padding: 0.8em 3em; } -.social .quotes { - position: absolute; - z-index: -1; - transform: translateY(5%); -} .social__card { background-color: var(--dark-blue-1); @@ -315,52 +310,49 @@ section { } .early-access { - position: absolute; - z-index: 1; - transform: translateY(-50%) translateX(5%); + background-color: var(--dark-blue-2); +} + +.early-access__main { + position: relative; + width: 100%; padding: 2em; - background-color: var(--dark-blue-1); - width: 90%; - border-radius: 20px; + text-align: center; + background-color: var(--dark-blue-2); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 2px 2px rgba(0, 0, 0, 0.20), 0 4px 4px rgba(0, 0, 0, 0.15), 0 8px 8px rgba(0, 0, 0, 0.10), 0 16px 16px rgba(0, 0, 0, 0.05); + top: 100px; + } .early-access__title { font-size: 2rem; font-weight: var(--fw-500); - text-align: center; margin: 1em; } .early-access__text { font-size: 1rem; font-weight: var(--fw-300); - text-align: center; margin: 1em; } .early-access form { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - + margin-inline: 1.5em; } .early-access form input[type="email"] { - width: 90%; - margin: 1em 1.5em; + width: 100%; padding: 1em; border: none; border-radius: 120px; } .early-access__submit { - width: 90%; + width: 100%; padding: 0.8em; border: none; border-radius: 120px; @@ -374,73 +366,71 @@ section { filter: brightness(1.3); } +.early-access form .error-message { + color: var(--light-red); + font-weight: var(--fw-700); + margin-left: 2.5em; + visibility: hidden; +} + footer { background-color: var(--dark-blue-3); - padding: 3.5em; } -.footer__logo { - margin: 20em 0 3em 0; +.footer__container { + padding: 10em 5em; } -.footer__links { - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; - gap: 2.5em; - margin: 1em 0; +.footer__location img, +.footer__phone img, +.footer__email img { + height: 20px; } - -.footer__link { +.footer__location { display: flex; - justify-content: flex-start; - align-items: baseline; gap: 1em; - font-size: 1rem; - font-weight: var(--fw-300); -} - -.footer__link--text { - text-align: left; - max-width: 40ch; + padding: 1em 0; } -.footer__about { +.footer__contact { display: flex; flex-direction: column; - gap: 1.5em; - margin: 8em 0 4em 0; + gap: 1em; + margin: 1em 0; +} +.footer__phone { + display: flex; + gap: 1em; } -.footer__contact { +.footer__email { display: flex; - flex-direction: column; - gap: 1.5em; - margin: 8em 0 4em 0; + gap: 1em; +} +.footer__about { + margin-top: 5em; } -.footer__about--link a { - font-size: 1rem; - font-weight: var(--fw-300); +.footer__contact--us { + margin-top: 5em; } -.footer__contact--link a { +.footer__link { font-size: 1rem; font-weight: var(--fw-300); } .footer__social { display: flex; - justify-content: center; + justify-content: space-evenly; align-items: center; - gap: 1em; + margin-top: 3em; } -.footer__social--link { +.footer__social a { border: 2px solid white; padding: 1em; width: 50px; @@ -448,14 +438,7 @@ footer { margin-bottom: 1em; } -.error-message { - color: var(--light-red); - font-weight: var(--fw-700); - margin-left: 2.5em; - visibility: hidden; -} - -.footer__social--link:hover { +.footer__social a:hover { border: 2px solid var(--cyan); } @@ -479,6 +462,15 @@ footer { align-items: center; } +@media(min-width: 375px) { + .early-access form { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } +} + @media(min-width: 768px) { .hero__text { @@ -505,7 +497,6 @@ footer { display: grid; grid-template-columns: repeat(3, 400px); gap: 3em; - } .social .quotes { @@ -513,68 +504,74 @@ footer { } .early-access { + display: flex; + place-content: center; + } + + .early-access__main { width: 60%; - padding: 1.5em 3em; - transform: translate(35%, -50%); } .early-access form { display: flex; flex-direction: row; - align-items: baseline; + justify-content: center; + } + + .early-access form input[type="email"] { + min-width: 70%; } .early-access__submit { - width: 25%; + min-width: 27%; } - .footer { + .footer__info { + display: grid; + grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto; + gap: 5em; + padding-top: 2.5em; + } + + .footer__location { display: flex; - flex-direction: column; - justify-content: center; - align-items: start; - padding: 4em 10em; + justify-content: flex-start; + gap: 1em; } - .footer__info { + .footer__contact { display: flex; - justify-content: space-between; - align-items: baseline; - gap: 3em; + flex-direction: column; + gap: 1em; } - .footer__logo { - margin: 8em 0 1em 0; + .footer__phone, + .footer__email { + display: flex; + gap: 1.5em; + } - .footer__links { + .footer__about { display: flex; flex-direction: column; - justify-content: center; - align-items: flex-start; - gap: 3em; - margin: 1em 0; + gap: 1em; } - .footer__link { + .footer__contact-us { display: flex; - justify-content: flex-start; - align-items: baseline; + flex-direction: column; gap: 1em; - font-size: 1rem; - font-weight: var(--fw-300); } .footer__social { display: flex; - justify-content: center; + justify-content: space-between; + align-items: center; gap: 1em; - } .footer__social--link { - display: flex; - justify-content: center; margin-left: 2em; } } \ No newline at end of file diff --git a/test.html b/test.html new file mode 100644 index 0000000..bd6a852 --- /dev/null +++ b/test.html @@ -0,0 +1,16 @@ +{# + +#}