From ffff219602ad95b5b4fdba023cbd0d4801043bf1 Mon Sep 17 00:00:00 2001 From: Shaifullah Arfan Date: Mon, 26 Jul 2021 18:45:43 +0600 Subject: [PATCH] =?UTF-8?q?=E2=9C=85=20adding=20newsletter=20&=20footer=20?= =?UTF-8?q?v1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components.css | 56 +++++++++++++++++++++++ home.css | 83 +++++++++++++++++++++++++++++++++ index.html | 122 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 261 insertions(+) diff --git a/components.css b/components.css index 3796dd6..5213bf8 100644 --- a/components.css +++ b/components.css @@ -1,3 +1,4 @@ +/* Global Button Styles */ .btn { color: var(--green-1); font-family: Poppins; @@ -16,3 +17,58 @@ font-size: 2rem; } } +/* End Global Button Styles */ + + +/* Footer Styles */ +footer{ + background: var(--lightGreen-1); + padding-top: 5rem; + padding-bottom: 2rem; +} +.footer__wrapper{ + display: flex; + flex-direction: column; + gap: 3rem; +} +.footer__logo{ + width: 150px; + margin-bottom: 2rem; +} +.footer__desc{ + font-size: 1.4rem; + color: var(--black-2); + margin-bottom: 2rem; +} +.footer__socials__title{ + font-size: 1.8rem; + color: var(--black-1); + margin-bottom: 1rem; +} +.footer__socials li{ + display: inline-block; + margin-right: .5rem; +} +.footer__socials a{ + padding: .5rem .8rem; + background-color: var(--white-1); + border: 1px solid var(--green-2); + border-radius: 8px; +} +.footer__socials svg{ + width: 20px; + color: var(--black-2); +} +.footer__text__title{ + font-size: 1.8rem; + margin-bottom: 1rem; + color: var(--black-1); + font-weight: 600; +} +.footer__text a{ + font-size: 1.4rem; + margin-bottom: .5rem; + color: var(--black-2); + font-family: Poppins; +} +/* End Footer Styles */ diff --git a/home.css b/home.css index 704d076..96968e6 100644 --- a/home.css +++ b/home.css @@ -678,3 +678,86 @@ } } /* End Testimonial Section */ + +/* Newsletter Section */ +.newsletter__wrapper{ + display: flex; + flex-direction: column; + background-color: var(--green-2); + padding: 1.5rem; + border-radius: 8px; + gap: 2rem; +} +.newsletter__title{ + font-size: 1.8rem; + color: var(--black-1); + font-weight: 600; + margin-bottom: 1.3rem; +} +.newsletter__text{ + font-size: 1.4rem; + color: var(--black-2); + font-weight: 500; +} +.newsletter__form form{ + position: relative; + width: 100%; + border-radius: 8px; + overflow: hidden; +} +.newsletter__form label{ + width: 100%; +} +.newsletter__form input{ + width: 100%; + font-size: 1.4rem; + padding: 1.5rem 1rem; + border: none; +} +.newsletter__form input::placeholder{ + color: rgb(168, 166, 166); +} +.newsletter__form button[type=submit]{ + background-color: var(--green-1); + color: var(--white-1); + border: none; + font-size: 1.4rem; + padding: 0 2rem; + height: 100%; + /* width: 100%; */ + position: absolute; + right: 0; + top: 0; +} +@media only screen and (min-width: 768px){ + .newsletter__wrapper{ + flex-direction: row; + padding: 5rem; + align-items: center; + } + .newsletter__info, + .newsletter__form{ + flex: 1; + } + .newsletter__title{ + font-size: 3.6rem; + margin-bottom: 2rem; + } + .newsletter__text{ + font-size: 1.8rem; + max-width: 400px; + } + .newsletter__form{ + max-width: 450px; + border-radius: 12px; + } + .newsletter__form input{ + font-size: 1.8rem; + padding: 2rem; + } + .newsletter__form button[type=submit]{ + font-size: 1.8rem; + padding: 0 3rem; + } +} +/* End Newsletter Section */ diff --git a/index.html b/index.html index bfc92b5..1cf545c 100644 --- a/index.html +++ b/index.html @@ -395,6 +395,128 @@

Sayed Ahmed

+ +
+
+ +
+
+ + + + + \ No newline at end of file