Created
August 24, 2022 06:10
-
-
Save LaunchedBerry07/094d794d0de274f09752a57039eba099 to your computer and use it in GitHub Desktop.
Well Designed Footer | Rawnge
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <footer> | |
| <div class="f-item-con"> | |
| <div class="app-info"> | |
| <span class='app-name'> | |
| <span class='app-initial'>R</span>awnge | |
| </span> | |
| <p>We provides you with <strong>Well organised</strong> and <strong>SEO friendly</strong> Website Designs.</p> | |
| </div> | |
| <div class="useful-links"> | |
| <div class="footer-title">Useful Links</div> | |
| <ul> | |
| <li>Courses</li> | |
| <li>Sign In</li> | |
| <li>About Us</li> | |
| <li>Become an Affiliate</li> | |
| <li>Advertise with Us</li> | |
| <li>Terms and Conditions</li> | |
| </ul> | |
| </div> | |
| <div class="help-sec"> | |
| <div class="footer-title">Help</div> | |
| <ul> | |
| <li>Help Me</li> | |
| <li>Feedback</li> | |
| <li>Report a Issue / Bug</li> | |
| </ul> | |
| </div> | |
| <div class="g-i-t"> | |
| <div class="footer-title">Get in Touch</div> | |
| <form action="/" method="post" class="space-y-2"> | |
| <input type="text" name="g-name" class="g-inp" id="g-name" placeholder='Name' /> | |
| <input type="email" name="g-email" class="g-inp" id="g-email" placeholder='Email' /> | |
| <textarea type="text" name="g-msg" class="g-inp h-40 resize-none" id="g-msg" | |
| placeholder='Message...'></textarea> | |
| <button type="submit" class='f-btn'>Submit</button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class='cr-con'>Copyright © 2022 | Made by Rawnge</div> | |
| </footer> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *{ | |
| margin: 0; padding: 0; | |
| border: 0; outline: 0; | |
| font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |
| list-style: none; | |
| text-decoration: none; | |
| } | |
| :root{ | |
| --theme-col: #2d4bf0; | |
| } | |
| .space-y-2 > :not([hidden]) ~ :not([hidden]) { | |
| --tw-space-y-reverse: 0; | |
| margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); | |
| margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); | |
| } | |
| footer{ | |
| background-color: #111010; | |
| } | |
| .f-item-con{ | |
| padding: 1.5rem 4rem; | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| grid-gap: 2rem; | |
| } | |
| footer .app-name{ | |
| color: white; | |
| border-left: 4px solid var(--theme-col); | |
| padding-left: 1.5rem; | |
| font-size: 1.875rem; | |
| line-height: 2.25rem; | |
| font-weight: 700; | |
| } | |
| .app-name .app-initial{ | |
| color: var(--theme-col); | |
| } | |
| footer .app-info p{ | |
| color: white; | |
| padding-left: 1.65rem; | |
| } | |
| footer .footer-title{ | |
| font-size: 1.25rem; | |
| line-height: 1.75rem; | |
| color: white; | |
| border-left: 4px solid var(--theme-col); | |
| padding-left: 1.5rem; | |
| height: fit-content; | |
| } | |
| footer ul{ | |
| padding-left: 1.75rem; | |
| color: white; | |
| font-size: 0.875rem/* 14px */; | |
| line-height: 1.25rem; | |
| margin-top: .5rem; | |
| } | |
| footer ul li{ | |
| margin: .25rem 0; | |
| cursor: pointer; | |
| color: #d4d4d4; | |
| width: fit-content; | |
| } | |
| footer ul li:hover{ | |
| color: white; | |
| } | |
| footer .help-sec{ | |
| grid-column-start: 2; | |
| } | |
| footer .cr-con{ | |
| background-color: #232127; | |
| color: white; | |
| padding: 1rem 4rem; | |
| text-align: center; | |
| } | |
| .g-i-t{ | |
| display: grid; | |
| grid-column-start: 3; | |
| grid-row-start: 1; | |
| grid-row-end: 3; | |
| } | |
| .g-i-t form{ | |
| display: flex; | |
| flex-direction: column; | |
| margin-top: 1rem; | |
| --tw-space-y-reverse: 0; | |
| margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); | |
| margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); | |
| } | |
| form .g-inp{ | |
| padding: .25rem .5rem; | |
| font-size: 16px; | |
| } | |
| .g-inp textarea{ | |
| height: 150px; | |
| } | |
| .f-btn{ | |
| padding: .25rem 1rem; | |
| background-color: var(--theme-col); | |
| border-radius: .25rem; | |
| font-size: 16px; | |
| color: white; | |
| font-weight: 500; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment