Merge pull request #107 from Vanshiii203/footer

Created footer

index.html

@@ -60,20 +60,37 @@ <h4 id="your-tasks">Your Tasks :</h4>
  </section>
 
  <footer>
- <div class="row" style="margin-top: 55px; font-weight:bold; color:rgb(195, 202, 202)">
- <p>
- Copyright &copy; 2022 by Sharanya. All rights reserved.
- </p>
- <p class="footer-desc">This project is a part of <a class="footer-desc"
- href="https://hacktoberfest.digitalocean.com/" target="_blank"
- rel="noopener noreferrer">Hacktoberfest
- 2022</a>
- </p>
-
- </div>
- </footer>
+
+
 
+ </footer>
  </main>
+<section class="footer">
+ <div><a class="navbar-brand brand-name" href="#"><img src="images/favicon.png" alt="Brand-iamge" class="brand"></a>
+ <div class="row" style="margin-top: 19px; font-weight:bold; color:rgb(195, 202, 202)">
+ <span class="span">Created By <a href="https://github.com/Rick-mad-lab" target="_blank"
+ style="color: #337ab7; text-decoration: none;"> Sharanya
+ </a>| <span class="far fa-copyright"></span> 2022 All rights reserved.</span>
+ <p class="footer-desc">This project is a part of <a class="footer-desc"
+ href="https://hacktoberfest.digitalocean.com/" target="_blank"
+ rel="noopener noreferrer">Hacktoberfest
+ 2022</a></p>
+<a class="social" id="linkedin" href="https://linkedin.com/in/sharanya-mitra-988512224/" target="_blank">
+ <span class="icon"><i class="fab fa-linkedin"></i></span>
+</a>
+<a class="social" id="insta" href="https://www.instagram.com/sharanya__mitra/" target="_blank">
+ <span class="icon"><i class="fab fa-instagram"></i></span>
+</a>
+<a class="social" id="github" href="https://github.com/Rick-mad-lab" target="_blank">
+ <span class="icon"><i class="fab fa-github-square"></i></span>
+</a>
+<a class="social" id="twitter" href="https://twitter.com/@sharanyamitra2" target="_blank">
+ <span class="icon"><i class="fab fa-twitter-square"></i></span>
+</a>
+
+ </div>
+
+</section>
 
  <!-- Project -->
  <script src="main.js"></script>

style.css

@@ -7,14 +7,14 @@ body {
  background: rgb(2,0,36);
  background: linear-gradient(30deg, rgba(2,0,36,1) 0%, rgb(92, 92, 187) 19%, rgba(0,212,255,1) 100%); 
  font-family: 'Poppins', sans-serif;
- overflow: hidden;
+ overflow-x: hidden;
 }
 
 main {
  display: flex;
  justify-content: center;
  align-items: flex-start;
- height: 100vh;
+ height: auto;
 }
 .container{
  text-align: center;
@@ -375,4 +375,56 @@ font-family: 'Scope One', serif;
 .err-msg{
  padding-top: 8rem;
  color: #000;
+}
+
+.footer{
+ height: 150px;
+ width:100%;
+ text-align: center;
+ background-color: white;
+}
+.social{
+ font-size: 30px;
+ color: #fcfcfc;
+ float: right;
+ margin-right: 15px;
+ margin-top: -35px;
+ background: #000;
+ padding:4px 10px ;
+ border-radius: 70%;
+}
+.brand{
+ margin-top: -20px;
+ width: 60px;
+ height: 60px;
+}
+#linkedin:hover{
+ color: #fcfcfc;
+ background-color: #04669A;
+}
+#github:hover{
+ color: #fcfcfc;
+ background-color: #000;
+}
+#twitter:hover{
+ color: #fcfcfc;
+ background-color: #00acee;
+}
+#insta:hover{
+ color: #fcfcfc;
+ background: linear-gradient(
+ 45deg,
+ #f09433 0%,
+ #e6683c 25%,
+ #dc2743 50%,
+ #cc2366 75%,
+ #bc1888 100%
+ );
+}
+.span{
+ font-size: 18px;
+}
+.footer-desc{
+ font-size: 12px;
+ margin-top: 5px;
 }