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.

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

Changes in Footer Contents Alignment and Hover Effects #485

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
8 changes: 8 additions & 0 deletions css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -815,6 +815,10 @@ HEAD .round-2 {
.box {
margin-bottom: 20px;
}
.container
{
flex-direction: column;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why changing the flex-direction?

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sir I thought it will make it responsive like in mobile size it will come to center. All other issues i have resolved today. Only this responsive issue is left to be resolved which I will complete soon...

}
}

@media (max-width: 720px) {
Expand All @@ -830,6 +834,10 @@ HEAD .round-2 {
.round-1 {
display: none;
}
.container
{
flex-direction: column;
}
}

@media (max-width: 576px) {
Expand Down
48 changes: 29 additions & 19 deletions index.html
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-3 col-sm-6 col-lg-4.5 col-12" style="margin-left:35%">
<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="subscribe-box py-5" >
<div class="mt-lg-4 pt-lg-2 offset-lg-1" style="margin-left:27%" >
<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" 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,52 @@ <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=" center col-lg-4.5 col-md-2 col-sm-6 col-12 offset-lg-1">
<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>
</li>
<hr style="margin-right: 40%;">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These hr's look very weird.

<li>
<a class="text-white mb-lg-3" href="./team.html">Our Team</a>
</li>
<hr style="margin-right: 40%;">
<li>
<a class="text-white mb-lg-3" href="#footer">Contact</a>
</li>
<hr style="margin-right: 40%;">
<li>
<a class="text-white mb-lg-3" href="./sitemap.html">SiteMap</a>
</li>
<hr style="margin-right: 40%;">
</ul>
</div>

<div class="col-lg-3 col-md-3 col-sm-6 col-12">
<div class="center col-lg-4.5 col-md-3 col-sm-6 col-12">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are no classes center and col-lg-4.5 either in bootstrap or in custom styles.

<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>
<hr style="margin-right: 60%;">
<a class="text-white mb-lg-3" href="https://www.geeksforgeeks.org/data-structure-gq/" target="_blank">Quizzes</a><br>
<hr style="margin-right: 60%;">
<a class="text-white mb-lg-3" href="https://dare2compete.com/" target="_blank">Opportunities</a><br>

<hr style="margin-right: 60%;">

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

<hr style="margin-right: 60%;">
</ul>
</div>

<div class="col-lg-3 col-md-3 col-sm-6 col-12 socialicons">
<div class="col-lg-4.5 col-md-3 col-sm-6 col-12 socialicons">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

col-lg-4.5 is an invalid class.

<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