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

Jump to bottom

sliding function,responsiveness,linked the whole box #516

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

sliding function,responsiveness,linked the whole box #516

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
43f4cff
ADDED THE SLIDING FUNCTION AND MADE IT RESPONSIVE
saswatsam786 May 27, 2021
b1c943d
Merge branch 'master' of https://github.com/saswatsam786/Algo-Phantom…
saswatsam786 May 27, 2021
6f7d846
sliding function,responsiveness,link to whole
saswatsam786 May 27, 2021
64d452c
fixed the social sidebar issue
saswatsam786 May 28, 2021
e6bed00
chnaged the id,and also the font
saswatsam786 May 28, 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
66 changes: 66 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -582,6 +582,71 @@ HEAD .round-2 {
color: #ffffff90;
}

/* skills section */

.skills-section{
height: 375px;
}

.text-center{
Copy link
Collaborator

Choose a reason for hiding this comment

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

don't change the font-weight to a bootstrap class instead use .font-weight-bold to the tag where you need bold.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

fixed that

Copy link
Collaborator

Choose a reason for hiding this comment

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

Still this exists

font-weight: bold;
font-size: 50px;
}

.slide1{
display: flex !important;
justify-content: space-between;
align-items: center;
}

.slide1 a div{
margin: 15px 120px;
width:200px;
height: 100px;
text-align: center;
padding: 35px;
background-color: #05272e;
border-radius: 15px;
box-shadow: 5px 5px 10px rgba(13, 87, 13, 0.384);

}

.slide1 a div:hover{
background-color: #123840;
}

.slide1 a{
text-decoration: none;
color: white;
font-weight: 700;
font-size: 16px;
}

.slide1 a:hover{
color: var(--teal);
}

.carousel-indicators{
position: absolute;
height: 20px;
width: 110px;
margin: -100px auto;
background-color: #05272e;
border-radius: 5px;
box-shadow: 1px 20px 20px rgba(13, 87, 13, 0.384);
}

@media (max-width: 1456px){
.slide1{
flex-direction: column;
justify-content: center;
}

.skills-section{
height: 600px;
}
}

/*********** footer ***********/

.email {
Expand Down Expand Up @@ -897,6 +962,7 @@ HEAD .round-2 {
#social-sidebar {
left: 0;
position: fixed;
padding-left: 0;
top: 30%;
z-index: +2;
}
Expand Down
89 changes: 33 additions & 56 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!doctype html>
<!doctype html>
<html lang="en">

<head>
Expand All @@ -9,6 +9,9 @@

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
Copy link
Collaborator

Choose a reason for hiding this comment

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

Already bootstrap 4 is present don't add another bootstrap version.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

sliding function will not work if i remove bootstrap 5 version

Copy link
Contributor Author

Choose a reason for hiding this comment

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

and also bootstrap 4 sliding function is not so smooth compared to bootstrap 5

Copy link
Collaborator

Choose a reason for hiding this comment

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

Yes, but using 2 bootstrap versions is never recommended.


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
Expand Down Expand Up @@ -195,62 +198,36 @@ <h1 class="text-center">About Us</h1>
<!--Section-Sharpen your skills starts-->
<section id="sharpen-skills" class="skills-section">
<div class="container">
<h1 class="text-center">Sharpen Your Skills</h1>
<hr><br><br>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="card skill-card">
<h5><i class="fas fa-atom"></i>&nbsp; <a href="https://www.geeksforgeeks.org/data-structures/"target="_blank">Data Structures</a></h5>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="card skill-card">
<h5><i class="fas fa-project-diagram"></i>&nbsp; <a href="https://leetcode.com/problemset/algorithms/" target="_blank">Algorithms</a></h5>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="card skill-card">
<h5><i class="fab fa-python"></i>&nbsp; <a href="https://docs.python.org/3/tutorial/index.html" target="_blank">Python</a></h5>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="card skill-card">
<h5><i class="fab fa-cuttlefish"></i>&nbsp; <a href="https://www.youtube.com/watch?v=KJgsSFOSQv0" target="_blank">C</a></h5>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="card skill-card">
<h5><i class="devicon-cplusplus-line-wordmark fa-lg"></i>&nbsp; <a href="https://www.cplusplus.com/" target="_blank">C++</a></h5>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="card skill-card">
<h5><i class="fab fa-java fa-lg"></i>&nbsp; <a href="https://www.youtube.com/watch?v=eTXd89t8ngI&list=PLd3UqWTnYXOmx_J1774ukG_rvrpyWczm0" target="_blank">Java</a></h5>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="card skill-card">
<h5><i class="far fa-gem"></i>&nbsp; <a href="https://www.youtube.com/watch?v=t_ispmWmdjY" target="_blank">Ruby</a></h5>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="card skill-card">
<h5><i class="fab fa-gofore"></i>&nbsp; <a href="https://www.youtube.com/watch?v=YS4e4q9oBaU" target="_blank">Golang</a></h5>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="card skill-card">
<h5><i class="fab fa-swift"></i>&nbsp; <a href="https://www.youtube.com/watch?v=Ulp1Kimblg0" target="_blank">Swift</a></h5>
</div>
</div>
</div>
<h1 class="text-center">Sharpen Your Skills</h1>
<hr>
<br><br>
<div id="indicators" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#indicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#indicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#indicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="slide1 carousel-item active">
<a href="https://www.geeksforgeeks.org/data-structures/" target="_blank"><div class="slide-card">Data Structures</div></a>
<a href="https://leetcode.com/problemset/algorithms/" target="_blank"><div class="slide-card">Algorithms</div></a>
<a href="https://docs.python.org/3/tutorial/index.html" target="_blank"><div class="slide-card">Python</div></a>
</div>
<div class="carousel-item slide1">
<a href="https://www.youtube.com/watch?v=KJgsSFOSQv0" target="_blank"><div class="slide-card">C</div></a>
<a href="https://www.cplusplus.com/" target="_blank"><div class="slide-card">C++</div></a>
<a href="https://www.youtube.com/watch?v=eTXd89t8ngI&list=PLd3UqWTnYXOmx_J1774ukG_rvrpyWczm0" target="_blank"><div class="slide-card">Java</div></a>
</div>
<div class="carousel-item slide1">
<a href="https://www.youtube.com/watch?v=t_ispmWmdjY" target="_blank"><div class="slide-card">Ruby</div></a>
<a href="https://www.youtube.com/watch?v=YS4e4q9oBaU" target="_blank"><div class="slide-card">Golang</div></a>
<a href="https://www.youtube.com/watch?v=Ulp1Kimblg0" target="_blank"><div class="slide-card">Swift</div></a>
</div>
</div>
</section>
</div>
</div>
</div>
</section>
<span class="span"></span>

<!--Section-Sharpen your skills ends-->

Expand Down