Skip to content

Commit

Permalink
Merge pull request #291 from deepeshgupta3257/deepeshgupta3257/issue265
Browse files Browse the repository at this point in the history 
Add A Footer Section
  • Loading branch information
@agamjotsingh18
agamjotsingh18 committed May 30, 2023
2 parents 055c9a9 + 36da7a5 commit e7e8cb8
Show file tree
Hide file tree
Showing 2 changed files with 189 additions and 42 deletions.
147 changes: 146 additions & 1 deletion assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1181,4 +1181,149 @@ section {

::-webkit-scrollbar-thumb:hover{
background: linear-gradient(transparent, #99ccfb);
}
}

/* New Footer Starts */
.section{
background-color: black;
}
.wrapper{
text-align: center;
}

.section h3{
color: #ffffff;
text-align: center;
margin-bottom: 2.5rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
padding-left: 0px;
padding-right: 0px;
text-align: center;
font-family: Poppins, sans-serif;
font-size: 32px;
font-weight: 800;
letter-spacing: .1em;
}

.section h3 span{
color: rgb(0 159 157);
}

.wrapper .icon{
position: relative;
background-color: #ffffff;
border-radius: 50%;
margin: 10px;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 22px;
text-align:center ;
display: inline-flex;
flex-direction: column;
align-items: center;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
color: #333;
text-decoration: none;
}
.wrapper .tooltip {
position: absolute;
top: 0;
line-height: 1.5;
font-size: 14px;
background-color: #ffffff;
color: #ffffff;
padding: 10px 18px;
border-radius: 25px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
opacity: 0;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .tooltip::before {
position: absolute;
content: "";
height: 8px;
width: 8px;
background-color: #ffffff;
bottom: -3px;
left: 50%;
transform: translate(-50%) rotate(45deg);
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon:hover .tooltip {
top: -45px;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}
.wrapper .facebook:hover,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip::before {
background-color: #7289da;
color: #ffffff;
}
.wrapper .twitter:hover,
.wrapper .twitter:hover .tooltip,
.wrapper .twitter:hover .tooltip::before {
background-color: #eb1717;
color: #ffffff;
}
.wrapper .instagram:hover,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip::before {
background-color: #e1306c;
color: #ffffff;
}
.wrapper .github:hover,
.wrapper .github:hover .tooltip,
.wrapper .github:hover .tooltip::before {
background-color: #333333;
color: #ffffff;
}
.wrapper .linkedin:hover,
.wrapper .linkedin:hover .tooltip,
.wrapper .linkedin:hover .tooltip::before {
background-color: #003288;
color: #ffffff;
}

.scrollToTopContainer {
position: fixed;
bottom: 0;
right: 0;
margin: 0 2rem 2rem 0;

height: fit-content;
width: fit-content;
z-index: 100000;
}

.scrollToTopButton {
border-radius: 100%;
height: 42px;
width: 42px;
background-color: rgba(255, 255, 255, 0.9);

border: 0;
cursor: pointer;
box-shadow: 0px 0px 10px 1px #2980b9;
}

.footer-copyright {
text-align: center;
margin-top: 20px;
color: rgba(229, 228, 232, 0.58);
}
.footer-copyright a {
color: #1d0f44ad;
transition: all 0.3s ease;
}
/* New Footer Ends */
84 changes: 43 additions & 41 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,9 @@
<link rel="stylesheet" href="./assets/css/darkmode.css" />
<link href="./assets/css/enquiry-form.css" rel="stylesheet" />

<!-- Footer icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src=""></script>
</head>

Expand Down Expand Up @@ -446,45 +449,6 @@ <h2>Contact Us</h2>
height="90px"
width="260px"
/></a>
<h3>Connect With Us</h3>
<div class="social">
<a
href="https://www.linkedin.com/company/codesetgo/"
target="_blank"

><i class="bx bxl-linkedin" id="linked" style="font-size: 2rem;"></i
></a>
<a
href="https://instagram.com/codesetgo/"
target="_blank"
class="instagram"
><i class="bx bxl-instagram" style="font-size: 2rem;"></i
></a>
<a
href="https://www.youtube.com/channel/UC4dJIsV1bWwCwPFHFI6sY7Q?sub_confirmation=1"
target="_blank"
class="youtube"
><i class="bx bxl-youtube" style="font-size: 2rem;"></i
></a>
<a
href="https://discord.gg/yWhNysUEej"
target="_blank"
class="discord"
><i class="bx bxl-discord" style="font-size: 2rem;"></i
></a>
<a
href="https://t.me/Code_Set_Go"
target="_blank"
class="telegram"
><i class="bx bxl-telegram" style="font-size: 2rem;"></i
></a>
<a
href="https://github.com/CodeSetGo"
target="_blank"
class="github"
><i class="bx bxl-github" style="font-size: 2rem;"></i
></a>
</div>
</div>
</div>
<div class="col-md-6">
Expand Down Expand Up @@ -512,16 +476,54 @@ <h3>Email</h3>
<!-- End #main -->

<!-- ======= Footer ======= -->
<footer id="footer">
<!-- <footer id="footer">
<div class="container">
<div class="copyright text-center">
Made with <i class="bi bi-heart-fill" style="color: red"></i> by
<strong style="color: #2796ff">CodeSetGo Team</strong>
</div>
</div>
</footer>
</footer> -->
<!-- End Footer -->

<!-- New Footer Starts -->
<div class="section"><h3>Reach <span>US</span></h3>
<div class="wrapper">
<a href="https://discord.gg/yWhNysUEej" class="icon facebook" target="_blank">
<div class="tooltip">Discord</div>
<span><i class="fab fa-discord"></i></span>
</a>
<a href="https://www.youtube.com/channel/UC4dJIsV1bWwCwPFHFI6sY7Q?sub_confirmation=1" class="icon twitter" target="_blank">
<div class="tooltip">YouTube</div>
<span><i class='fab fa-youtube'></i></span>
</a>
<a href="https://instagram.com/codesetgo/" class="icon instagram" target="_blank">
<div class="tooltip">Instagram</div>
<span><i class="fab fa-instagram"></i></span>
</a>
<a href="https://github.com/CodeSetGo" class="icon github" target="_blank">
<div class="tooltip">Github</div>
<span><i class="fab fa-github"></i></span>
</a>
<a href="https://www.linkedin.com/company/codesetgo/" class="icon linkedin" target="_blank">
<div class="tooltip">Linkedin</div>
<span><i class="fab fa-linkedin"></i></span>
</a>
<a href="https://t.me/Code_Set_Go" class="icon linkedin" target="_blank">
<div class="tooltip">Telegram</div>
<span><i class='fab fa-telegram-plane'></i></span>
</a>
</div>
<hr>
<div>
<div class="footer-copyright">
<h4>Made with ❤️ by CodeSetGo Team</h4>
</div>
</div>
</div>

<!-- New Footer Ends -->

<a
href="#"
class="back-to-top d-flex align-items-center justify-content-center"
Expand Down

0 comments on commit e7e8cb8

Please sign in to comment.