From 6c8923dfdeb3ae2bbb0088c16b6477d21f4fd492 Mon Sep 17 00:00:00 2001 From: Shinde-Suyog Date: Mon, 26 Jul 2021 00:01:26 +0530 Subject: [PATCH] modified footer --- assets/css/contact.css | 251 ++++++++++++++++++++++++++++++++++++++++- assets/css/style.css | 243 ++++++++++++++++++++++++++++++++++++++- contact.html | 62 +++++++++- index.html | 72 ++++++++++-- 4 files changed, 617 insertions(+), 11 deletions(-) diff --git a/assets/css/contact.css b/assets/css/contact.css index 8afdbd3..265e256 100644 --- a/assets/css/contact.css +++ b/assets/css/contact.css @@ -270,7 +270,14 @@ body{ width: 50%; margin-top: 6px; padding: 20px; + } + + #contact-form{ + display: inline-block; + +} + .column img{ height: 500px; @@ -294,5 +301,245 @@ body{ .contact-grid{ display: grid; grid-template-columns: 1fr; - } - } \ No newline at end of file + } + } + + + /*------- footer -----------*/ + + footer{ + width: 100%; + position: absolute; + bottom: 0; + /*background:linear-gradient( to right, hsl(280, 87%, 21%), hsl(356, 100%, 65%) );*/ + background: black; + color: rgb(0, 0, 0); + padding: 10px 0 5px; + /*border-top-left-radius: 125px ;*/ + position: sticky; + top: 100%; +} +.footer-row{ + width: 85%; + margin: auto; + display: flex; + flex-wrap: wrap; + align-items: flex-start; + justify-content: space-between; + +} +.footer-col{ + flex-basis: 30%; + padding: 10px; + +} +/*.col:nth-child(2), .col:nth-child(3){ + flex-basis: 15%; +}*/ +/* ------------col 1--------*/ +.footer-logo{ + width: 80px; + margin-bottom:30px ; +} +p{ + color: white; +} + +.animate-border { + text-decoration: solid; + position: relative; + display: block; + width: 222px; + height: 3.5px; + margin-top: -13px; + background: #007bff; + margin-bottom: 10px; +} + +.animate-border:after { + position: absolute; + content: ""; + width: 100px; + height: 3px; + left: 0; + bottom: 0; + border-left: 10px solid #fff; + border-right: 10px solid #fff; + -webkit-animation: animborder 2s linear infinite; + animation: animborder 2s linear infinite; +} + +@-webkit-keyframes animborder { + 0% { + -webkit-transform: translateX(0px); + transform: translateX(0px); + } + 100% { + -webkit-transform: translateX(113px); + transform: translateX(113px); + } +} + +@keyframes animborder { + 0% { + -webkit-transform: translateX(0px); + transform: translateX(0px); + } + 100% { + -webkit-transform: translateX(113px); + transform: translateX(113px); + } +} + +.animate-border.border-white:after { + border-color: #fff; +} + +.animate-border.border-yellow:after { + border-color: #F5B02E; +} + +.animate-border.border-orange:after { + border-right-color: #007bff; + border-left-color: #007bff; +} + +.animate-border.border-ash:after { + border-right-color: #EEF0EF; + border-left-color: #EEF0EF; +} + +.animate-border.border-offwhite:after { + border-right-color: #F7F9F8; + border-left-color: #F7F9F8; +} + + +.footer-col h2{ + width: fit-content; + margin-bottom: 20px; + position: relative; + color: white; +} + +/* ------------col 2 ---------*/ + +.footer-col ul li{ + list-style: none; + margin-bottom: 12px; +} +.footer-col ul li a { + text-decoration: none; + color: rgb(255, 255, 255); + +} +.links{ + margin-left: 50px; +} + + +/*-------------col 3-----------*/ + +form{ + padding-bottom: 15px; + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid rgb(255, 255, 255); + margin-bottom: 30px; + +} + +.form .fas{ + font-size: 18px; + margin-right: 10px; + color: #007bff; + +} + +.form input{ + width: 100%; + background: transparent; + color: rgb(255, 255, 255); + border: 0; + outline: none; +} + +.form button{ + background: transparent; + border: 0; + outline: none; + cursor: pointer; +} +.form button .fas{ + font-size: 16px; + color: #007bff; +} +.social-icons .fab{ + width: 40px; + height: 40px; + /*color: white;*/ + border-radius: 50%; + text-align: center; + line-height: 40px; + font-size: 20px; + /*background:hsl(280, 87%, 21%);*/ + background: #007bff; + margin-right: 15px; + cursor: pointer; +} +footer hr{ + width: 90%; + border: 0; + border-bottom: 2px solid rgb(255, 255, 255); + margin: 20px auto; +} +.copyright{ + text-align: center; + color: rgb(255, 255, 255); +} +.underline{ + width: 100%; + height: 5px; + background: #007bff; + border-radius: 3px; + position: absolute; + top: 25px; + left: 0; + margin-top: 15px; + overflow: hidden; + + +} +.underline span{ + width: 15px; + height: 100%; + background: #fff; + border-radius: 3px; + position: absolute; + top:0; + left: 10px; + animation: moving 2s linear infinite; +} +@keyframes moving { + 0%{ + left: -20px; + } + 100%{ + left: 100%; + } + +} + +@media (max-width:700px){ + footer{ + bottom: unset; + } + .col{ + flex-basis: 100%; + } + .col:nth-child(2), .col:nth-child(3){ + flex-basis: 100%; + } + +} diff --git a/assets/css/style.css b/assets/css/style.css index 6df2ca0..c6dd036 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -125,7 +125,7 @@ -/*********** Footer **********/ +/*********** Footer ********** footer { position: relative; width: 100%; @@ -329,6 +329,247 @@ p { border-left-color: #F7F9F8; } +*/ + + /*------- footer -----------*/ + + footer{ + width: 100%; + position: absolute; + bottom: 0; + /*background:linear-gradient( to right, hsl(280, 87%, 21%), hsl(356, 100%, 65%) );*/ + background: black; + color: rgb(0, 0, 0); + padding: 10px 0 5px; + /*border-top-left-radius: 125px ;*/ + position: sticky; + top: 100%; +} +.footer-row{ + width: 85%; + margin: auto; + display: flex; + flex-wrap: wrap; + align-items: flex-start; + justify-content: space-between; + +} +.footer-col{ + flex-basis: 30%; + padding: 10px; + +} +/*.col:nth-child(2), .col:nth-child(3){ + flex-basis: 15%; +}*/ +/* ------------col 1--------*/ +.footer-logo{ + width: 80px; + margin-bottom:30px ; +} +p{ + color: white; +} + +.animate-border { + text-decoration: solid; + position: relative; + display: block; + width: 222px; + height: 3.5px; + margin-top: -13px; + background: #007bff; + margin-bottom: 10px; +} + +.animate-border:after { + position: absolute; + content: ""; + width: 100px; + height: 3px; + left: 0; + bottom: 0; + border-left: 10px solid #fff; + border-right: 10px solid #fff; + -webkit-animation: animborder 2s linear infinite; + animation: animborder 2s linear infinite; +} + +@-webkit-keyframes animborder { + 0% { + -webkit-transform: translateX(0px); + transform: translateX(0px); + } + 100% { + -webkit-transform: translateX(113px); + transform: translateX(113px); + } +} + +@keyframes animborder { + 0% { + -webkit-transform: translateX(0px); + transform: translateX(0px); + } + 100% { + -webkit-transform: translateX(113px); + transform: translateX(113px); + } +} + +.animate-border.border-white:after { + border-color: #fff; +} + +.animate-border.border-yellow:after { + border-color: #F5B02E; +} + +.animate-border.border-orange:after { + border-right-color: #007bff; + border-left-color: #007bff; +} + +.animate-border.border-ash:after { + border-right-color: #EEF0EF; + border-left-color: #EEF0EF; +} + +.animate-border.border-offwhite:after { + border-right-color: #F7F9F8; + border-left-color: #F7F9F8; +} + + +.footer-col h2{ + width: fit-content; + margin-bottom: 20px; + position: relative; + color: white; +} + +/* ------------col 2 ---------*/ + +.footer-col ul li{ + list-style: none; + margin-bottom: 12px; +} +.footer-col ul li a { + text-decoration: none; + color: rgb(255, 255, 255); + +} +.links{ + margin-left: 50px; +} + + +/*-------------col 3-----------*/ + +form{ + padding-bottom: 15px; + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid rgb(255, 255, 255); + margin-bottom: 30px; + +} + +.form .fas{ + font-size: 18px; + margin-right: 10px; + color: #007bff; + +} + +.form input{ + width: 100%; + background: transparent; + color: rgb(255, 255, 255); + border: 0; + outline: none; +} + +.form button{ + background: transparent; + border: 0; + outline: none; + cursor: pointer; +} +.form button .fas{ + font-size: 16px; + color: #007bff; +} +.social-icons .fab{ + width: 40px; + height: 40px; + /*color: white;*/ + border-radius: 50%; + text-align: center; + line-height: 40px; + font-size: 20px; + /*background:hsl(280, 87%, 21%);*/ + background: #007bff; + margin-right: 15px; + cursor: pointer; +} +footer hr{ + width: 90%; + border: 0; + border-bottom: 2px solid rgb(255, 255, 255); + margin: 20px auto; +} +.copyright{ + text-align: center; + color: rgb(255, 255, 255); +} +.underline{ + width: 100%; + height: 5px; + background: #007bff; + border-radius: 3px; + position: absolute; + top: 25px; + left: 0; + margin-top: 15px; + overflow: hidden; + + +} +.underline span{ + width: 15px; + height: 100%; + background: #fff; + border-radius: 3px; + position: absolute; + top:0; + left: 10px; + animation: moving 2s linear infinite; +} +@keyframes moving { + 0%{ + left: -20px; + } + 100%{ + left: 100%; + } + +} + +@media (max-width:700px){ + footer{ + bottom: unset; + } + .col{ + flex-basis: 100%; + } + .col:nth-child(2), .col:nth-child(3){ + flex-basis: 100%; + } + +} + /* Animated heading border */ diff --git a/contact.html b/contact.html index c99b291..78d5594 100644 --- a/contact.html +++ b/contact.html @@ -11,6 +11,8 @@ + + @@ -47,7 +49,8 @@

Feel free to get in contact with us:

-
+
+
@@ -69,6 +72,63 @@

Feel free to get in contact with us:

+ + + + \ No newline at end of file diff --git a/index.html b/index.html index 2caeb13..2575dec 100644 --- a/index.html +++ b/index.html @@ -37,6 +37,8 @@ integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" /> + + CODERS EVOKE @@ -140,7 +142,7 @@

Networking and sharing ideas

- + + --> + +--> + + --> + + +