diff --git a/src/components/Contact-section/ContactForm.jsx b/src/components/Contact-section/ContactForm.jsx index eb43b69b..acb5a752 100644 --- a/src/components/Contact-section/ContactForm.jsx +++ b/src/components/Contact-section/ContactForm.jsx @@ -15,9 +15,15 @@ const ContactForm = () => { className="flex gap-x-12 justify-center md:justify-start" style={{ height: "min-content", alignItems: "baseline" }} > - Twitter-logo - Github-logo - Insta-logo + + Twitter-logo + + + Github-logo + + + Insta-logo + {/* Right hand side of the form */} @@ -27,7 +33,7 @@ const ContactForm = () => { { placeholder="Your message here" />
- +
diff --git a/src/components/Header-section/Header-section.css b/src/components/Header-section/Header-section.css index 122f88fb..0606aaaa 100644 --- a/src/components/Header-section/Header-section.css +++ b/src/components/Header-section/Header-section.css @@ -13,6 +13,11 @@ font-weight: 600; font-size: 18.5px; color: #262626; + transition: ease 200ms; +} + +.header-section li:hover { + color: #1abc9c; } .user-cta :last-child { @@ -53,9 +58,17 @@ width: 22%; height: 52px; background: #1abc9c; + transition: ease-in-out 0.3s; +} + +.btn:hover { + background: transparent; + border-color: #1abc9c; + border-width: 2px; + color: #1abc9c; } -@media (max-width:768px) { +@media (max-width: 768px) { .header-section { width: 100%; height: 1024px; @@ -90,7 +103,7 @@ } } -@media (max-width:580px) { +@media (max-width: 580px) { .navbar .logo { width: 170px; } @@ -118,7 +131,7 @@ } } -@media (max-width:468px) { +@media (max-width: 468px) { .btn { margin-top: 55px; border-radius: 8px;