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

sliding function,responsiveness,linked the whole box #516

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 3 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
64 changes: 64 additions & 0 deletions css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -582,6 +582,70 @@ 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: bolder;
}

.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
89 changes: 33 additions & 56 deletions index.html
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="carouselExampleIndicators" class="carousel slide carousel-fade" data-bs-ride="carousel">
harikesh409 marked this conversation as resolved.
Show resolved Hide resolved
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" 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