Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Proper Alignment of Content and Hover Effect - Required Changes #502

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Proper Alignment of Content and Hover Effect - Required Changes #502

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e1064cd
Changes in Footer Contents Alignment and Hover Effects
project2023 May 15, 2021
9cbd7cd
Made Required Changes
project2023 May 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -634,6 +634,12 @@ HEAD .round-2 {
background-image: linear-gradient(130deg, #05272e 40%, #183a36 100%);
/* background-image:linear-gradient(130deg, #ffa159 10%, #ff39b4 51%, #ffa159 100%); */
}

#links:hover
{
padding-left: 5px
}

/*styling social icons*/
.socialicon{
color: #fff;
Expand Down Expand Up @@ -753,6 +759,9 @@ HEAD .round-2 {
.nav-item:hover hr:nth-child(2) {
display: none;
}
.container{
margin-right: 27%;
}
}

@media (min-width: 460px) and (max-width: 574px) {
Expand All @@ -771,6 +780,9 @@ HEAD .round-2 {
.nav-item:hover hr:nth-child(2) {
display: none;
}
.container{
margin-right: 27%;
}
}

@media (max-width: 479px) {
Expand Down Expand Up @@ -815,6 +827,10 @@ HEAD .round-2 {
.box {
margin-bottom: 20px;
}
.input-group {
width: 400px;
}

}

@media (max-width: 720px) {
Expand All @@ -830,6 +846,10 @@ HEAD .round-2 {
.round-1 {
display: none;
}
.input-group {
width: 400px;
}

}

@media (max-width: 576px) {
Expand Down Expand Up @@ -857,13 +877,20 @@ HEAD .round-2 {
.box i {
font-size: 15px;
}

.input-group {
width: 380px;
}
}

@media (max-width: 380px) {
.wrapper {
max-width: 30px;
flex-direction: column;
}
#footer{
width: 100%;
}
.round-1 {
display: none;
}
Expand All @@ -887,6 +914,9 @@ HEAD .round-2 {
.box i {
font-size: 15px;
}
.input-group {
width: 380px;
}
}

.bg-black {
Expand Down
69 changes: 39 additions & 30 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -328,13 +328,21 @@ <h5 class="mb-0">
</section>

<!--Footer starts-->
<footer id="footer">
<div class="container">
<div class="row subscribe-box py-5">
<div class="col-lg-4 col-md-4 col-sm-12 col-12 offset-lg-1">
<!--Shifted logo container from bottom to top. Align the content to center. made horizontal lines in the contents down.-->
<footer id="footer" class="">
<div class="container ">
<div class="col-md-4 col-sm-4 col-lg-4 col-12 logo" style="margin-left:30%">
<div class="">
<img src="./images/icon.png" alt="" class="img-fluid mb-lg-4" width="100" height="100" style="margin-left:32%">

</div>
<p class="text-white">An Open Source organization focuses on Data Structure and Algorithms.</p>
</div>
<div class="subscribe-box py-5" >
<div class="mt-lg-4 pt-lg-2 offset-lg-1" style="margin-left:36%" >
<h2 class="text-white font-weight-bold py-2">Contact Us</h2>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-12">
<div class="col-lg-6 col-md-6 col-sm-12 col-12 contact-section" style="margin-left:25%">
<form action="mailto:[email protected]">
<div class="input-group">
<input type="email" class="form-control py-3" placeholder="Enter your Email" required>
Expand All @@ -348,50 +356,51 @@ <h2 class="text-white font-weight-bold py-2">Contact Us</h2>
</div>
</div>
</div>
<div class="container mt-5 pt-lg-5">
<div class="row">
<div class="col-md-3 col-sm-6 col-lg-3 col-12">
<div class="">
<img src="./images/icon.png" alt="" class="img-fluid mb-lg-4" width="100" height="100">

</div>
<p class="text-white">An Open Source organization focuses on Data Structure and Algorithms.</p>
</div>
<div class="col-lg-2 col-md-2 col-sm-6 col-12 offset-lg-1">
<div class="container col-lg-16 col-lg-offset-16" >
<div class="row" style="margin-left:20%;">

<div class=" col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12 ">
<h5 class="font-weight-bold text-white mb-lg-4 pb-2 margin-top-mobile">Useful Links</h5>
<ul>
<li>
<a class="text-white mb-lg-3" href="#about">About</a>
<a class="text-white mb-lg-3" id="links" href="#about">About</a>
</li>

<li>
<a class="text-white mb-lg-3" href="./team.html">Our Team</a>
<a class="text-white mb-lg-3" id="links" href="./team.html">Our Team</a>
</li>

<li>
<a class="text-white mb-lg-3" href="#footer">Contact</a>
<a class="text-white mb-lg-3" id="links" href="#footer">Contact</a>
</li>

<li>
<a class="text-white mb-lg-3" href="./sitemap.html">SiteMap</a>
<a class="text-white mb-lg-3" id="links" href="./sitemap.html">SiteMap</a>
</li>

</ul>
</div>

<div class="col-lg-3 col-md-3 col-sm-6 col-12">
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
<h5 class="font-weight-bold text-white mb-lg-4 pb-2 margin-top-mobile">Features</h5>

<ul>
<a class="text-white mb-lg-3" href="https://www.codechef.com/ide" target="_blank">Code Editor</a><br>
<a class="text-white mb-lg-3" href="https://www.geeksforgeeks.org/data-structure-gq/" target="_blank">Quizzes</a><br>
<a class="text-white mb-lg-3" href="https://dare2compete.com/" target="_blank">Opportunities</a><br>


<a class="text-white mb-lg-3" href="https://www.geeksforgeeks.org/computer-science-projects/?ref=shm" target="_blank">Project Ideas</a><br>
<a class="text-white mb-lg-3" href="DSA.html" >RoadMap to your DSA</a><br>
<a class="text-white mb-lg-3" href="practicedsa.html" >DSA Problems</a><br>

<a class="text-white mb-lg-3" id="links" href="https://www.codechef.com/ide" target="_blank">Code Editor</a><br>

<a class="text-white mb-lg-3" id="links" href="https://www.geeksforgeeks.org/data-structure-gq/" target="_blank">Quizzes</a><br>

<a class="text-white mb-lg-3" id="links" href="https://dare2compete.com/" target="_blank">Opportunities</a><br>

<a class="text-white mb-lg-3" id="links" href="https://www.geeksforgeeks.org/computer-science-projects/?ref=shm" target="_blank">Project Ideas</a><br>

<a class="text-white mb-lg-3" id="links" href="DSA.html" >RoadMap to your DSA</a><br>

<a class="text-white mb-lg-3" id="links" href="practicedsa.html" >DSA Problems</a><br>

</ul>
</div>

<div class="col-lg-3 col-md-3 col-sm-6 col-12 socialicons">
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12 socialicons">
<h5 class="font-weight-bold text-white mb-lg-4 pb-2 margin-top-mobile">Follow Us</h5>
<a href="https://github.com/Algo-Phantoms" target="_blank"><i class="fa fa-github p-2 socialicon " aria-hidden="true"
></i>
Expand Down