I am having trouble showing the main scrollbar of the page on hover.
I was working on my portfolio and I have hidden the page scrollbar. I tried to show the scrollbar while hovering over the main container.
I am attaching my portfolio page link and my code below. Any kind of help will be applicable!
Please note I want it to be in pure CSS, don't want to use JS or jQuery
::-webkit-scrollbar
display: none;
width: 15px
background-color: #fff
::-webkit-scrollbar-thumb
display: none;
.main-div:hover ::-webkit-scrollbar
display: inline;
.main-div:hover ::-webkit-scrollbar-thumb
display: inline;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<!-- Main Section Starts
======================== -->
<section>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-lg-4 col-sm-12 col-12">
<aside>
<div class="personal-info wow animated fadeInLeft">
<img src="assets/images/pp.jpg" alt="dp">
<p></p>
<div class="info">
<h2>Nazifa Rashid</h2>
<div id="typed-strings">
<h3><strong>Frontend Developer</strong></h3>
</div>
<span class="typed"></span>
</div>
<div class="icons">
<a data-toggle="tooltip" data-placement="left" title="Facebook" href="https://www.facebook.com/nnazeefaa" target="_blank" style="color: #395599;"><i class="fab fa-facebook"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Twitter" href="https://twitter.com/NazifaRashid2" target="_blank" class="color: #00A7E7;"><i class="fab fa-twitter"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Instagram" href="https://www.instagram.com/_nazifa_rashid/?hl=en" target="_blank" style="color: #A4358F;"><i class="fab fa-instagram"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Linkedin" href="https://www.linkedin.com/in/nazifa-rashid-681155164/" target="_blank" style="color: #0271AE;"><i class="fab fa-linkedin"></i></a>
<a data-toggle="tooltip" data-placement="right" title="Github" href="https://github.com/nazifa22?tab=repositories" target="_blank" style="color: #222;"><i class="fab fa-github"></i></a>
</div>
<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="top" title="Freelance">Hire Me </a></button>
<button type="button" class="btn btn-outline-success" data-toggle="tooltip" data-placement="bottom" title="Download">Download Resume</button>
</div>
</aside>
</div>
<div class="col-md-12 col-lg-8 col-sm-12 col-12">
<div class="main-div">
<!-- Slider Starts Here
======================= -->
<div class="slideshow-container">
<!-- About Section Starts
========================= -->
<div class="mySlides wow animated fadeInRight" id="about">
<div class="title">
<h3><span>a</span>bout Me</h3>
</div>
<p>
Hi, I am Nazifa Tasfia Rashid. I am a Frontend Developer at SJ Innovation. I have experience on working Wordpress Page Builders, Responsive email templates and Responsive PSD to Html converstion with Cross Browser Compatibility and well maintained coding standards.
</p>
<div class="info">
<div class="row">
<div class="col-12 col-md-6 col-sm-12 col-lg-6">
<h5>Date of birth : <span>22 October</span></h5>
<h5>Email : <span>nazifarashid1822#gmail.com</span></h5>
</div>
<div class="col-12 col-md-6 col-sm-12 col-lg-6">
<h5>Address : <span>House #2, abc street,
Bangladesh</span></h5>
<h5>Phone : <span>+123-4567-89</span></h5>
</div>
</div>
</div>
<div class="icons">
<span>Follow Me <i class="fas fa-angle-double-right"></i> </span>
<a data-toggle="tooltip" data-placement="left" title="Facebook" href="https://www.facebook.com/nnazeefaa" target="_blank" style="color: #395599;"><i class="fab fa-facebook"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Twitter" href="https://twitter.com/NazifaRashid2" target="_blank" class="color: #00A7E7;"><i class="fab fa-twitter"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Instagram" href="https://www.instagram.com/_nazifa_rashid/?hl=en" target="_blank" style="color: #A4358F;"><i class="fab fa-instagram"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Linkedin" href="https://www.linkedin.com/in/nazifa-rashid-681155164/" target="_blank" style="color: #0271AE;"><i class="fab fa-linkedin"></i></a>
<a data-toggle="tooltip" data-placement="right" title="Github" href="https://github.com/nazifa22?tab=repositories" target="_blank" style="color: #222;"><i class="fab fa-github"></i></a>
</div>
<button type="button" class="btn btn-outline-success" data-toggle="tooltip" data-placement="top" title="Download">Download Resume <i class="fas fa-long-arrow-alt-right"></i></button>
</div>
<!-- About Section Ends
======================= -->
<!-- Skills & Education Section Starts
====================================== -->
<div class="mySlides wow animated fadeInRight" id="SE">
<div class="title">
<h3><span>m</span>y skiils & education</h3>
</div>
<div class="row">
<div class="col-12">
<div id="skills">
<div class="row">
<div class="col-md-4 col-sm-12 col-lg-4 col-12">
<div class="row">
<div class="col-6 text_">Html5</div>
<div class="col-6 text-right">98%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar html progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-md-4 col-sm-12 col-lg-4 col-12">
<div class="row">
<div class="col text_">CSS3</div>
<div class="col text-right">98%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar css progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="97" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-md-4 col-sm-12 col-lg-4 col-12">
<div class="row">
<div class="col text_">SASS</div>
<div class="col text-right">90%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar sass progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="row">
<div class="col lg-4 col-md-4 col-sm-12 col-12">
<div class="row">
<div class="col text_">Bootatrap 4</div>
<div class="col text-right ">95%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar bootstrap progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col lg-4 col-md-4 col-sm-12 col-12">
<div class="row">
<div class="col text_">jQuery</div>
<div class="col text-right">90%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar jquery progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col lg-4 col-md-4 col-sm-12 col-12">
<div class="row">
<div class="col text_">JavaScript</div>
<div class="col text-right">60%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar js progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="row">
<div class="col text_">PHP</div>
<div class="col text-right">50%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar php progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="row">
<div class="col text_">MySQL</div>
<div class="col text-right">60%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar db progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="row">
<div class="col text_">C/C++</div>
<div class="col text-right">50%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar c progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div id="education">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<i class="fas fa-user-graduate"></i> University
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<ul>
<li>
<span>2014-2018</span>
<ul class="edu">
<li>
<h4>Leading University</h4>
</li>
<li>
<p>Bachelor Degree | Computer Science & Engineering</p>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<i class="fas fa-graduation-cap"></i> College
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
<ul>
<li>
<span>2013</span>
<ul>
<li>
<h4>Scholarshome</h4>
</li>
<li>
<p>HSC | Science</p>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<i class="fas fa-university"></i> School
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
<ul>
<li>
<span>2011</span>
<ul>
<li>
<h4>Blue Bird School & College</h4>
</li>
<li>
<p>SSC | Science</p>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Skills & Education Section Ends
==================================== -->
<!-- Service Section Starts
=========================== -->
<div class="mySlides wow animated fadeInRight" id="services">
<div class="title">
<h3><span>m</span>y services</h3>
</div>
<div class="services">
<div class="row">
<div class="col-12 col-md-4 col-sm-6 col-lg-4">
<div class="service-section">
<div><i class="fab fa-html5" style="color: #DE4B25;"></i></div>
<h3>PSD To HTML</h3>
<p>I can convert any PSD to HTML. It will be user friendly and work accross every devices. I can also use any kind of HTML CSS framework with proper support of jQuery and plugins.</p>
</div>
</div>
<div class="col-12 col-md-4 col-sm-6 col-lg-4">
<div class="service-section">
<div><i class="fab fa-mailchimp" style="color: rgb(80, 80, 80);"></i></div>
<h3>Email Template</h3>
<p>I will provide full responsive email templates that will support not only in browsers but also on gamil and outlook.</p>
</div>
</div>
<div class="col-12 col-md-4 col-sm-6 col-lg-4">
<div class="service-section">
<div><i class="fab fa-wordpress" style="color: #207297;"></i></div>
<h3>Wordpress</h3>
<p>I can do wordpress customization and able to work with any kind of page builders. Also I'll try to keep it as simple as the admin can easily customize the site whenever needed.</p>
</div>
</div>
<div class="col-12 col-md-4 col-sm-6 col-lg-4">
<div class="service-section">
<div><i class="fas fa-code" style="color: #816047"></i></div>
<h3>Clean & Optimized Code</h3>
<p>I'll write clean and optimized code and maintain proper coding structure and standard. I'll write proper commenting so that after me anyone can work on the code. It will also be seo friendly</p>
</div>
</div>
<div class="col-12 col-md-4 col-sm-6 col-lg-4">
<div class="service-section">
<div><i class="fab fa-firefox" style="color: #F86B0D;"></i></div>
<h3>Cross Browser Compatibility</h3>
<p>I'll write code that will work accross browsers.</p>
</div>
</div>
<div class="col-12 col-md-4 col-sm-6 col-lg-4">
<div class="service-section">
<div><i class="fas fa-users" style="color: #F36B6D;"></i></div>
<h3>User Friendly</h3>
<p>I can build user friendly websites that will help users to experience the best quality and service of the website.</p>
</div>
</div>
</div>
</div>
<div class="process">
<div class="row">
<div class="col-12">
<h4>My Work Process</h4>
</div>
</div>
<div class="row">
<div class="col-md-2 col-lg-2 col-sm-4 col-12">
<div class="wrapper">
<div class="icon">
<i class="fas fa-lightbulb"></i>
<p>idea</p>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2 col-sm-4 col-12">
<div class="wrapper">
<div class="icon">
<i class="fas fa-puzzle-piece"></i>
<p>concept</p>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2 col-sm-4 col-12">
<div class="wrapper">
<div class="icon">
<i class="fas fa-paint-brush"></i>
<p>design</p>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2 col-sm-4 col-12">
<div class="wrapper">
<div class="icon">
<i class="fas fa-cube"></i>
<p>develop</p>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2 col-sm-4 col-12">
<div class="wrapper">
<div class="icon">
<i class="fas fa-bug"></i>
<p>test</p>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2 col-sm-4 col-12">
<div class="wrapper">
<div class="icon">
<i class="fas fa-rocket"></i>
<p>lunch</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Service Section Ends
========================= -->
<div class="mySlides wow animated fadeInRight">
</div>
<!-- Contact Section Starts
=========================== -->
<div class="mySlides wow animated fadeInRight" id="contact">
<div class="title">
<h3><span>c</span>ontact me</h3>
</div>
<div class="row">
<div class="col-md-8 col-sm-12 col-12 col-lg-8">
<form>
<div class="form-group">
<input type="name" class="form-control" id="exampleInputName" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Leave a Message"></textarea>
</div>
<button type="submit" class="btn btn-outline-success">Send <i class="fas fa-paper-plane"></i> </button>
</form>
</div>
<div class="col-md-4 col-lg-4 col-sm-12 col-12">
<div class="personal-info">
<h5>Date of birth : <span>22 October</span></h5>
<h5>Email : <span>nazifarashid1822#gmail.com</span></h5>
<h5>Address : <span>House #2, abc street,
Bangladesh</span></h5>
<h5>Phone : <span>+123-4567-89</span></h5>
</div>
<div class="icons icons-contact">
<span>Follow Me <i class="fas fa-angle-double-right"></i> </span>
<a data-toggle="tooltip" data-placement="left" title="Facebook" href="https://www.facebook.com/nnazeefaa" target="_blank" style="color: #395599;"><i class="fab fa-facebook"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Twitter" href="https://twitter.com/NazifaRashid2" target="_blank" class="color: #00A7E7;"><i class="fab fa-twitter"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Instagram" href="https://www.instagram.com/_nazifa_rashid/?hl=en" target="_blank" style="color: #A4358F;"><i class="fab fa-instagram"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Linkedin" href="https://www.linkedin.com/in/nazifa-rashid-681155164/" target="_blank" style="color: #0271AE;"><i class="fab fa-linkedin"></i></a>
<a data-toggle="tooltip" data-placement="right" title="Github" href="https://github.com/nazifa22?tab=repositories" target="_blank" style="color: #222;"><i class="fab fa-github"></i></a>
</div>
</div>
</div>
</div>
<!-- Contact Section Ends
========================= -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<br>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
<!-- Slider Ends Here
===================== -->
</div>
</div>
</div>
</section>
<!-- Main Section Ends
====================== -->
</body>
</html>
Here is my portfolio link : https://nazifa22.github.io/Portfolio-2/
The answers I got was only for the div or a section, not for the whole page
Make scrollbars only visible when a Div is hovered over?
Add this CSS
.main-div{
overflow:hidden;
max-height:100vh;
}
.main-div:hover{
max-height:auto;
overflow:auto;
}
.main-div{
overflow:hidden;
max-height:100vh;
}
.main-div:hover{
max-height:auto;
overflow:auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<!-- Main Section Starts
======================== -->
<section>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-lg-4 col-sm-12 col-12">
<aside>
<div class="personal-info wow animated fadeInLeft">
<img src="assets/images/pp.jpg" alt="dp">
<p></p>
<div class="info">
<h2>Nazifa Rashid</h2>
<div id="typed-strings">
<h3><strong>Frontend Developer</strong></h3>
</div>
<span class="typed"></span>
</div>
<div class="icons">
<a data-toggle="tooltip" data-placement="left" title="Facebook" href="https://www.facebook.com/nnazeefaa" target="_blank" style="color: #395599;"><i class="fab fa-facebook"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Twitter" href="https://twitter.com/NazifaRashid2" target="_blank" class="color: #00A7E7;"><i class="fab fa-twitter"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Instagram" href="https://www.instagram.com/_nazifa_rashid/?hl=en" target="_blank" style="color: #A4358F;"><i class="fab fa-instagram"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Linkedin" href="https://www.linkedin.com/in/nazifa-rashid-681155164/" target="_blank" style="color: #0271AE;"><i class="fab fa-linkedin"></i></a>
<a data-toggle="tooltip" data-placement="right" title="Github" href="https://github.com/nazifa22?tab=repositories" target="_blank" style="color: #222;"><i class="fab fa-github"></i></a>
</div>
<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="top" title="Freelance">Hire Me </a></button>
<button type="button" class="btn btn-outline-success" data-toggle="tooltip" data-placement="bottom" title="Download">Download Resume</button>
</div>
</aside>
</div>
<div class="col-md-12 col-lg-8 col-sm-12 col-12">
<div class="main-div">
<!-- Slider Starts Here
======================= -->
<div class="slideshow-container">
<!-- About Section Starts
========================= -->
<div class="mySlides wow animated fadeInRight" id="about">
<div class="title">
<h3><span>a</span>bout Me</h3>
</div>
<p>
Hi, I am Nazifa Tasfia Rashid. I am a Frontend Developer at SJ Innovation. I have experience on working Wordpress Page Builders, Responsive email templates and Responsive PSD to Html converstion with Cross Browser Compatibility and well maintained coding standards.
</p>
<div class="info">
<div class="row">
<div class="col-12 col-md-6 col-sm-12 col-lg-6">
<h5>Date of birth : <span>22 October</span></h5>
<h5>Email : <span>nazifarashid1822#gmail.com</span></h5>
</div>
<div class="col-12 col-md-6 col-sm-12 col-lg-6">
<h5>Address : <span>House #2, abc street,
Bangladesh</span></h5>
<h5>Phone : <span>+123-4567-89</span></h5>
</div>
</div>
</div>
<div class="icons">
<span>Follow Me <i class="fas fa-angle-double-right"></i> </span>
<a data-toggle="tooltip" data-placement="left" title="Facebook" href="https://www.facebook.com/nnazeefaa" target="_blank" style="color: #395599;"><i class="fab fa-facebook"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Twitter" href="https://twitter.com/NazifaRashid2" target="_blank" class="color: #00A7E7;"><i class="fab fa-twitter"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Instagram" href="https://www.instagram.com/_nazifa_rashid/?hl=en" target="_blank" style="color: #A4358F;"><i class="fab fa-instagram"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Linkedin" href="https://www.linkedin.com/in/nazifa-rashid-681155164/" target="_blank" style="color: #0271AE;"><i class="fab fa-linkedin"></i></a>
<a data-toggle="tooltip" data-placement="right" title="Github" href="https://github.com/nazifa22?tab=repositories" target="_blank" style="color: #222;"><i class="fab fa-github"></i></a>
</div>
<button type="button" class="btn btn-outline-success" data-toggle="tooltip" data-placement="top" title="Download">Download Resume <i class="fas fa-long-arrow-alt-right"></i></button>
</div>
<!-- About Section Ends
======================= -->
<!-- Skills & Education Section Starts
====================================== -->
<div class="mySlides wow animated fadeInRight" id="SE">
<div class="title">
<h3><span>m</span>y skiils & education</h3>
</div>
<div class="row">
<div class="col-12">
<div id="skills">
<div class="row">
<div class="col-md-4 col-sm-12 col-lg-4 col-12">
<div class="row">
<div class="col-6 text_">Html5</div>
<div class="col-6 text-right">98%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar html progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-md-4 col-sm-12 col-lg-4 col-12">
<div class="row">
<div class="col text_">CSS3</div>
<div class="col text-right">98%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar css progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="97" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-md-4 col-sm-12 col-lg-4 col-12">
<div class="row">
<div class="col text_">SASS</div>
<div class="col text-right">90%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar sass progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="row">
<div class="col lg-4 col-md-4 col-sm-12 col-12">
<div class="row">
<div class="col text_">Bootatrap 4</div>
<div class="col text-right ">95%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar bootstrap progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col lg-4 col-md-4 col-sm-12 col-12">
<div class="row">
<div class="col text_">jQuery</div>
<div class="col text-right">90%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar jquery progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col lg-4 col-md-4 col-sm-12 col-12">
<div class="row">
<div class="col text_">JavaScript</div>
<div class="col text-right">60%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar js progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="row">
<div class="col text_">PHP</div>
<div class="col text-right">50%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar php progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="row">
<div class="col text_">MySQL</div>
<div class="col text-right">60%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar db progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="row">
<div class="col text_">C/C++</div>
<div class="col text-right">50%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar c progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div id="education">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<i class="fas fa-user-graduate"></i> University
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<ul>
<li>
<span>2014-2018</span>
<ul class="edu">
<li>
<h4>Leading University</h4>
</li>
<li>
<p>Bachelor Degree | Computer Science & Engineering</p>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<i class="fas fa-graduation-cap"></i> College
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
<ul>
<li>
<span>2013</span>
<ul>
<li>
<h4>Scholarshome</h4>
</li>
<li>
<p>HSC | Science</p>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<i class="fas fa-university"></i> School
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
<ul>
<li>
<span>2011</span>
<ul>
<li>
<h4>Blue Bird School & College</h4>
</li>
<li>
<p>SSC | Science</p>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Skills & Education Section Ends
==================================== -->
<!-- Service Section Starts
=========================== -->
<div class="mySlides wow animated fadeInRight" id="services">
<div class="title">
<h3><span>m</span>y services</h3>
</div>
<div class="services">
<div class="row">
<div class="col-12 col-md-4 col-sm-6 col-lg-4">
<div class="service-section">
<div><i class="fab fa-html5" style="color: #DE4B25;"></i></div>
<h3>PSD To HTML</h3>
<p>I can convert any PSD to HTML. It will be user friendly and work accross every devices. I can also use any kind of HTML CSS framework with proper support of jQuery and plugins.</p>
</div>
</div>
<div class="col-12 col-md-4 col-sm-6 col-lg-4">
<div class="service-section">
<div><i class="fab fa-mailchimp" style="color: rgb(80, 80, 80);"></i></div>
<h3>Email Template</h3>
<p>I will provide full responsive email templates that will support not only in browsers but also on gamil and outlook.</p>
</div>
</div>
<div class="col-12 col-md-4 col-sm-6 col-lg-4">
<div class="service-section">
<div><i class="fab fa-wordpress" style="color: #207297;"></i></div>
<h3>Wordpress</h3>
<p>I can do wordpress customization and able to work with any kind of page builders. Also I'll try to keep it as simple as the admin can easily customize the site whenever needed.</p>
</div>
</div>
<div class="col-12 col-md-4 col-sm-6 col-lg-4">
<div class="service-section">
<div><i class="fas fa-code" style="color: #816047"></i></div>
<h3>Clean & Optimized Code</h3>
<p>I'll write clean and optimized code and maintain proper coding structure and standard. I'll write proper commenting so that after me anyone can work on the code. It will also be seo friendly</p>
</div>
</div>
<div class="col-12 col-md-4 col-sm-6 col-lg-4">
<div class="service-section">
<div><i class="fab fa-firefox" style="color: #F86B0D;"></i></div>
<h3>Cross Browser Compatibility</h3>
<p>I'll write code that will work accross browsers.</p>
</div>
</div>
<div class="col-12 col-md-4 col-sm-6 col-lg-4">
<div class="service-section">
<div><i class="fas fa-users" style="color: #F36B6D;"></i></div>
<h3>User Friendly</h3>
<p>I can build user friendly websites that will help users to experience the best quality and service of the website.</p>
</div>
</div>
</div>
</div>
<div class="process">
<div class="row">
<div class="col-12">
<h4>My Work Process</h4>
</div>
</div>
<div class="row">
<div class="col-md-2 col-lg-2 col-sm-4 col-12">
<div class="wrapper">
<div class="icon">
<i class="fas fa-lightbulb"></i>
<p>idea</p>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2 col-sm-4 col-12">
<div class="wrapper">
<div class="icon">
<i class="fas fa-puzzle-piece"></i>
<p>concept</p>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2 col-sm-4 col-12">
<div class="wrapper">
<div class="icon">
<i class="fas fa-paint-brush"></i>
<p>design</p>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2 col-sm-4 col-12">
<div class="wrapper">
<div class="icon">
<i class="fas fa-cube"></i>
<p>develop</p>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2 col-sm-4 col-12">
<div class="wrapper">
<div class="icon">
<i class="fas fa-bug"></i>
<p>test</p>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2 col-sm-4 col-12">
<div class="wrapper">
<div class="icon">
<i class="fas fa-rocket"></i>
<p>lunch</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Service Section Ends
========================= -->
<div class="mySlides wow animated fadeInRight">
</div>
<!-- Contact Section Starts
=========================== -->
<div class="mySlides wow animated fadeInRight" id="contact">
<div class="title">
<h3><span>c</span>ontact me</h3>
</div>
<div class="row">
<div class="col-md-8 col-sm-12 col-12 col-lg-8">
<form>
<div class="form-group">
<input type="name" class="form-control" id="exampleInputName" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Leave a Message"></textarea>
</div>
<button type="submit" class="btn btn-outline-success">Send <i class="fas fa-paper-plane"></i> </button>
</form>
</div>
<div class="col-md-4 col-lg-4 col-sm-12 col-12">
<div class="personal-info">
<h5>Date of birth : <span>22 October</span></h5>
<h5>Email : <span>nazifarashid1822#gmail.com</span></h5>
<h5>Address : <span>House #2, abc street,
Bangladesh</span></h5>
<h5>Phone : <span>+123-4567-89</span></h5>
</div>
<div class="icons icons-contact">
<span>Follow Me <i class="fas fa-angle-double-right"></i> </span>
<a data-toggle="tooltip" data-placement="left" title="Facebook" href="https://www.facebook.com/nnazeefaa" target="_blank" style="color: #395599;"><i class="fab fa-facebook"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Twitter" href="https://twitter.com/NazifaRashid2" target="_blank" class="color: #00A7E7;"><i class="fab fa-twitter"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Instagram" href="https://www.instagram.com/_nazifa_rashid/?hl=en" target="_blank" style="color: #A4358F;"><i class="fab fa-instagram"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Linkedin" href="https://www.linkedin.com/in/nazifa-rashid-681155164/" target="_blank" style="color: #0271AE;"><i class="fab fa-linkedin"></i></a>
<a data-toggle="tooltip" data-placement="right" title="Github" href="https://github.com/nazifa22?tab=repositories" target="_blank" style="color: #222;"><i class="fab fa-github"></i></a>
</div>
</div>
</div>
</div>
<!-- Contact Section Ends
========================= -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<br>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
<!-- Slider Ends Here
===================== -->
</div>
</div>
</div>
</section>
<!-- Main Section Ends
====================== -->
</body>
</html>
Related
I have a problem with the Carousel (Bootstrap 5). The standard indicators work. I also have linked above the carousel. The link to the carousel's items works. Unfortunately, changing the class="active" does not work. I also tried various jQuery functions on this page.
The class active only works if you click on the next one but not the previous one. Then the active class just moves on to the next one and not back.
Code Snippet:
var myCarousel = $("#singles");
var myNav = myCarousel.prev();
myNav.find(".li > a").click(function() {
var newIndex = $(this).parent().index();
myCarousel.carousel(newIndex);
});
myCarousel.on("slide.bs.carousel", function() {
var newIndex = $(this).find(".carousel-inner>.active").index();
var newLI = myNav.children().eq(newIndex);
if (!newLI.hasClass("active")) {
myNav.find("li.active").removeClass("active");
newLI.addClass("active");
}
});
$(document).ready(function() {
$("#singles").on("slide.bs.carousel", function() {
$holder = $(".carousel-indicators-title .active");
$holder.next("a").addClass("active");
if ($holder.is(":last-child")) {
$holder.removeClass("active");
$(".carousel-indicators-title a:first").addClass("active");
}
$holder.removeClass("active");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<!--SINGLES START-->
<section class="section-singles">
<div class="container">
<div class="singles">
<div class="singles-headline">
<h1>SINGLES</h1>
</div>
<div id="singles" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators-title">
<div class="links-singles">
<div class="links-singles-list">
Auf gehts, ab gehts
Atmen
</div>
</div>
</div>
<div class="carousel-indicators">
<button type="button" data-bs-target="#singles" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Auf gehts, ab gehts"></button>
<button type="button" data-bs-target="#singles" data-bs-slide-to="1" aria-label="Atmen"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="release-single-image">
<img src="/assets/images/singles/2022_12_Auf_gehts_ab_gehts.png" alt="Auf gehts, ab gehts - dan3er">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="release-single-description">
<div class="release-single-description-releasedate">
<p class="releasedate-date">VÖ: 21.12.2022</p>
<p class="releasedate-single-description"><span class="single-title-description">Auf gehts, ab gehts</span></p>
<p class="releasedate-single-description">(prod. by TrapNinjaBoy)</p>
<div class="row button-padding">
<div class="col-xs-12 col-sm-12 col-md-6 d-flex align-items-center justify-content-center">
<div class="buttons button-left">
<a href="https://open.spotify.com/track/07BQNOiMSeSHkOncnI0rQy?si=59b1fddb5a2c4e28" target="_blank">
<div class="button_buy">
<p><i class="fab fa-spotify"></i> Spotify</p>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 d-flex align-items-center justify-content-center">
<div class="buttons button-right">
<a href="https://music.amazon.de/albums/B0BQ7RLCJ2?marketplaceId=A1PA6795UKMFR9&musicTerritory=DE&ref=dm_sh_2IPLe71BZH1W7DZsXV9XoBAoA&trackAsin=B0BQ7P6D1S" target="_blank">
<div class="button_buy">
<p><i class="fab fa-amazon"></i> Amazon</p>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 d-flex align-items-center justify-content-center">
<div class="buttons button-left">
<a href="https://www.youtube.com/watch?v=UVJDV-8gz9s" target="_blank">
<div class="button_buy">
<p><i class="fab fa-youtube"></i> YouTube</p>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 d-flex align-items-center justify-content-center">
<div class="buttons button-right">
<a href="https://music.apple.com/us/album/auf-gehts-ab-gehts/1660091129?i=1660091130" target="_blank">
<div class="button_buy">
<p><i class="fab fa-apple"></i> Apple Music</p>
</div>
</a>
</div>
</div>
<div class="release-vorschau">
<div class="buttons">
<a href="#" target="_blank">
<div class="vorschau">
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/07BQNOiMSeSHkOncnI0rQy?utm_source=generator" width="100%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="release-single-image">
<img src="/assets/images/singles/2022_11_Atmen.png" alt="Atmen - dan3er">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="release-single-description">
<div class="release-single-description-releasedate">
<p class="releasedate-date">VÖ: 15.11.2022</p>
<p class="releasedate-single-description"><span class="single-title-description">Atmen</span></p>
<p class="releasedate-single-description">(prod. by 7Ventus)</p>
<div class="row button-padding">
<div class="col-xs-12 col-sm-12 col-md-6 d-flex align-items-center justify-content-center">
<div class="buttons button-left">
<a href="https://open.spotify.com/track/7EILfdyUR56gLXvGznN5Dj?si=93a63262f54947c7" target="_blank">
<div class="button_buy">
<p><i class="fab fa-spotify"></i> Spotify</p>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 d-flex align-items-center justify-content-center">
<div class="buttons button-right">
<a href="https://music.amazon.de/albums/B0BM9QS96K?marketplaceId=A1PA6795UKMFR9&musicTerritory=DE&ref=dm_sh_pXrsR018TIJcTlBuIiGhTN4z8&trackAsin=B0BM9N44B9" target="_blank">
<div class="button_buy">
<p><i class="fab fa-amazon"></i> Amazon</p>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 d-flex align-items-center justify-content-center">
<div class="buttons button-left">
<a href="https://www.youtube.com/watch?v=SZERRNXNeGs" target="_blank">
<div class="button_buy">
<p><i class="fab fa-youtube"></i> YouTube</p>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 d-flex align-items-center justify-content-center">
<div class="buttons button-right">
<a href="https://music.apple.com/us/album/atmen-radio-edit-single/1654253315" target="_blank">
<div class="button_buy">
<p><i class="fab fa-apple"></i> Apple Music</p>
</div>
</a>
</div>
</div>
<div class="release-vorschau">
<div class="buttons">
<a href="#" target="_blank">
<div class="vorschau">
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/7EILfdyUR56gLXvGznN5Dj?utm_source=generator" width="100%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--SINGLES END-->
I have been trying to make a portfolio website for myself.
But for 'My works' div when I apply the Bootstrap class, I am not getting the result as I am expected to get. The alignment of the div is not in a grid.
Here's how it shows up:
I am not able to fix this problem.
The HTML code:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Responsive Portfolio Template">
<meta name="author" content="Suvrat Jain">
<title>Responsive Bootstrap Template for Portfolio</title>
<!-- Bootstrap core CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="menu">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><i class="fa fa-globe"></i></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div class="container-fluid splash" id="splash">
<div class="container">
<img src="https://s-media-cache-ak0.pinimg.com/736x/71/9e/59/719e59481d2be40a77ab6c3386fc0a45--photoshop-illustrator-illustrator-tutorials.jpg" alt="Portrait of Mr. Roboto" class="profile-image">
<h1>HELLO!</h1>
<h1 class="intro-text"><span class="lead" id="typed">I am a </span></h1>
<span class="continue"><i class="fa fa-angle-down"></i></span>
</div>
</div>
<!-- About Section -->
<section class="success" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>About Me</h2>
<hr class="star-light">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-2">
<p class="content-text" style="text-align:justify;">Hey there! I am a junior software developer based in Mumbai, India. I work with some of the popular front end technologies to create beautiful websites that get noticed. I seek experience to gain more knowledge in the web development field.
</p>
</div>
<div class="col-lg-4">
<p class="content-text">If you are in need of a beautiful simple website, I'm your guy. I look forward to talking to you soon!</p>
</div>
<div class="col-lg-8 col-lg-offset-2 text-center contact-button">
<a href="#contact" class="btn btn-lg btn-outline">
<i class="fa fa-envelope"></i> Contact Me
</a>
</div>
</div>
</div>
</section>
<div class="container-fluid portfolio-container-holder content-section" id="portfolio">
<div class="portfolio-container container">
<h1 class="text-center">My Portfolio</h1>
<hr class="star-portfolio">
<div class="row">
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/QFX1CKL/8705c160752271.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Quantum Computing and cryptocurrency</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/GVr9drm/illu-app-modernization-whtbg.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Logistic Regression in Machine Learning</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Introduction to Computer Vision</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/5vNfRC9/depositphotos-1245773-stock-photo-simple-math-example.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Addition of Two Numbers in Python</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/GVr9drm/illu-app-modernization-whtbg.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Logistic Regression in Machine Learning</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>AI: myths versus reality</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Introduction to Computer Vision</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Introduction to Computer Vision</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact form -->
<div class="container-fluid contact-me-container content-section" id="contact">
<div class="container">
<h1 class="intro-text text-center">Contact Me</h1>
<hr class="star-light">
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user"></i></div>
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-at"></i></div>
<input type="text" class="form-control" id="email" placeholder="Email ID">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-phone"></i></div>
<input type="text" class="form-control" id="phone" placeholder="Phone Number">
</div>
</div>
</div>
<div class="col-sm-12">
<textarea class="form-control" rows="5" placeholder="Message"></textarea>
</div>
</div>
<div class="text-center">
<button class="btn btn-default submit-button btn-lg btn-primary"><i class="fa fa-paper-plane"></i> Send</button>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="container footer-container">
<div class="row footer-row">
<div class="col-xs-12 col-sm-6 col-md-6 text-center">
<h4 class="text-center">Find me here</h4>
<address> <strong><i class="fa fa-location-arrow"></i> Monsters Inc.</strong><br>Lorem ipsum dolor, sir amet,<br>Aurangabad, India 431001<br><br><a class="tel" href="tel:9999988888" type="tel"><i class="fa fa-mobile"></i><span> +91 </span></a></address>
</div>
<div class="col-xs-12 col-md-6 col-sm-6 social-section">
<div class="text-center">
<h4 class="text-center">Also, I can be found here</h4>
<div class="text-center social-buttons">
<a href="https://www.linkedin.com/in/simplysuvi" class="btn btn-default btn-lg social-button link-linkedin"><i class="fa fa-linkedin"></i>
</a>
<a href="https://instagram.com/simplysuvi" class="btn btn-default btn-lg social-button link-instagram"><i class="fa fa-instagram"></i>
</a>
</div>
<hr class="footer-hr">
<h4 class="author">Made with <i class="fa fa-heart"></i> by <strong>Akshra Dube</strong></h4>
</div>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body>
</html>
Issue is with columns used for a single row.
Note that, each row can have only 12 columns. But you are using multiple columns in a single row. so it doesn't work like that.
Refer this more details - https://getbootstrap.com/docs/4.0/layout/grid/
You can try enclosing two cards per each row (assuming you wanted to show twoo cards per row). see below code. Hope this helps.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Responsive Portfolio Template">
<meta name="author" content="Suvrat Jain">
<title>Responsive Bootstrap Template for Portfolio</title>
<!-- Bootstrap core CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="menu">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><i class="fa fa-globe"></i></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div class="container-fluid splash" id="splash">
<div class="container">
<img src="https://s-media-cache-ak0.pinimg.com/736x/71/9e/59/719e59481d2be40a77ab6c3386fc0a45--photoshop-illustrator-illustrator-tutorials.jpg" alt="Portrait of Mr. Roboto" class="profile-image">
<h1>HELLO!</h1>
<h1 class="intro-text"><span class="lead" id="typed">I am a </span></h1>
<span class="continue"><i class="fa fa-angle-down"></i></span>
</div>
</div>
<!-- About Section -->
<section class="success" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>About Me</h2>
<hr class="star-light">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-2">
<p class="content-text" style="text-align:justify;">Hey there! I am a junior software developer based in Mumbai, India. I work with some of the popular front end technologies to create beautiful websites that get noticed. I seek experience to gain more knowledge in the web development field.
</p>
</div>
<div class="col-lg-4">
<p class="content-text">If you are in need of a beautiful simple website, I'm your guy. I look forward to talking to you soon!</p>
</div>
<div class="col-lg-8 col-lg-offset-2 text-center contact-button">
<a href="#contact" class="btn btn-lg btn-outline">
<i class="fa fa-envelope"></i> Contact Me
</a>
</div>
</div>
</div>
</section>
<div class="container-fluid portfolio-container-holder content-section" id="portfolio">
<div class="portfolio-container container">
<h1 class="text-center">My Portfolio</h1>
<hr class="star-portfolio">
<div class="row">
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/QFX1CKL/8705c160752271.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Quantum Computing and cryptocurrency</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/GVr9drm/illu-app-modernization-whtbg.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Logistic Regression in Machine Learning</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Introduction to Computer Vision</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/5vNfRC9/depositphotos-1245773-stock-photo-simple-math-example.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Addition of Two Numbers in Python</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/GVr9drm/illu-app-modernization-whtbg.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Logistic Regression in Machine Learning</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>AI: myths versus reality</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Introduction to Computer Vision</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Introduction to Computer Vision</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact form -->
<div class="container-fluid contact-me-container content-section" id="contact">
<div class="container">
<h1 class="intro-text text-center">Contact Me</h1>
<hr class="star-light">
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user"></i></div>
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-at"></i></div>
<input type="text" class="form-control" id="email" placeholder="Email ID">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-phone"></i></div>
<input type="text" class="form-control" id="phone" placeholder="Phone Number">
</div>
</div>
</div>
<div class="col-sm-12">
<textarea class="form-control" rows="5" placeholder="Message"></textarea>
</div>
</div>
<div class="text-center">
<button class="btn btn-default submit-button btn-lg btn-primary"><i class="fa fa-paper-plane"></i> Send</button>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="container footer-container">
<div class="row footer-row">
<div class="col-xs-12 col-sm-6 col-md-6 text-center">
<h4 class="text-center">Find me here</h4>
<address> <strong><i class="fa fa-location-arrow"></i> Monsters Inc.</strong><br>Lorem ipsum dolor, sir amet,<br>Aurangabad, India 431001<br><br><a class="tel" href="tel:9999988888" type="tel"><i class="fa fa-mobile"></i><span> +91 </span></a></address>
</div>
<div class="col-xs-12 col-md-6 col-sm-6 social-section">
<div class="text-center">
<h4 class="text-center">Also, I can be found here</h4>
<div class="text-center social-buttons">
<a href="https://www.linkedin.com/in/simplysuvi" class="btn btn-default btn-lg social-button link-linkedin"><i class="fa fa-linkedin"></i>
</a>
<a href="https://instagram.com/simplysuvi" class="btn btn-default btn-lg social-button link-instagram"><i class="fa fa-instagram"></i>
</a>
</div>
<hr class="footer-hr">
<h4 class="author">Made with <i class="fa fa-heart"></i> by <strong>Akshra Dube</strong></h4>
</div>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body>
</html>
I am stuck with a problem, I made a Contact Us page , it is properly working on desktop mode but when am trying to see in mobile view it is not responsive , can anyone help me to fix this error
This is the Contact Us page, I want its working on mobile view properly
Contact.html
<section id="contact">
<div class="row mt-5 mb-5">
<div class="col-6">
<div class="row text-white ">
<div class="col-6 ">
<div class="row ">
<div class="col-3 icon-fot">
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="col-9 text-form-footer">
<h3 class="font-weight-bold">Find Us</h3>
<p>Mreylebon Rd,Merylebon London,NW1SH,UK</p>
</div>
</div>
<br>
<div class="row">
<div class="col-3 icon-fot">
<i class="far fa-clock"></i>
</div>
<div class="col-9 text-form-footer">
<h3 class="font-weight-bold">Working Hour</h3>
<p style="display: inline;">Mon-Fri : 8AM-5PM</p>
<p>Sat-Sun : 8AM-2PM</p>
</div>
</div>
</div>
<div class="col-6 ">
<div class="row">
<div class="col-3 icon-fot">
<i class="fas fa-phone-alt"></i>
</div>
<div class="col-9 text-form-footer">
<h3 class="font-weight-bold">Call Us</h3>
<p style="display: inline;">+123 456 7890</p>
<p>+123 456 7890</p>
</div>
</div>
<br>
<div class="row">
<div class="col-3 icon-fot">
<i class="far fa-envelope"></i>
</div>
<div class="col-9 text-form-footer">
<h3 class="font-weight-bold">Write To Us</h3>
<p style="display: inline;">Office#noise.com</p>
<p>Press#noise.com</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<form>
<div class="form-row">
<div class="col">
<input type="text" class="w-100 p-2" placeholder="Your Name...">
</div>
<div class="col">
<input type="text" class="w-100 p-2" placeholder="Your Email...">
</div>
</div>
<textarea class="w-100 p-2 mt-2" placeholder="Your Message..." rows="5" cols="50"></textarea><br />
<button class="btn btn-outline-primary btn-block text-white font-weight-bold">Send</button>
</form>
</div>
</div>
</section>
Can you please check the below code? Hope it will work for you.
You need to use col-md-6 class instead of col-6 class in the parent column class like the below code.
<section id="contact">
<div class="row mt-5 mb-5">
<div class="col-md-6">
<div class="row text-white ">
<div class="col-6 ">
<div class="row ">
<div class="col-3 icon-fot">
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="col-9 text-form-footer">
<h3 class="font-weight-bold">Find Us</h3>
<p>Mreylebon Rd,Merylebon London,NW1SH,UK</p>
</div>
</div>
<br>
<div class="row">
<div class="col-3 icon-fot">
<i class="far fa-clock"></i>
</div>
<div class="col-9 text-form-footer">
<h3 class="font-weight-bold">Working Hour</h3>
<p style="display: inline;">Mon-Fri : 8AM-5PM</p>
<p>Sat-Sun : 8AM-2PM</p>
</div>
</div>
</div>
<div class="col-6 ">
<div class="row">
<div class="col-3 icon-fot">
<i class="fas fa-phone-alt"></i>
</div>
<div class="col-9 text-form-footer">
<h3 class="font-weight-bold">Call Us</h3>
<p style="display: inline;">+123 456 7890</p>
<p>+123 456 7890</p>
</div>
</div>
<br>
<div class="row">
<div class="col-3 icon-fot">
<i class="far fa-envelope"></i>
</div>
<div class="col-9 text-form-footer">
<h3 class="font-weight-bold">Write To Us</h3>
<p style="display: inline;">Office#noise.com</p>
<p>Press#noise.com</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<form>
<div class="form-row">
<div class="col">
<input type="text" class="w-100 p-2" placeholder="Your Name...">
</div>
<div class="col">
<input type="text" class="w-100 p-2" placeholder="Your Email...">
</div>
</div>
<textarea class="w-100 p-2 mt-2" placeholder="Your Message..." rows="5" cols="50"></textarea><br />
<button class="btn btn-outline-primary btn-block text-white font-weight-bold">Send</button>
</form>
</div>
</div>
</section>
HTML
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-2"></div>
<div class="col-2 Jumbooptions" id="create" onclick="location.href='#';">
<p class="efr">Create</p>
<i class="fas fa-plus fa-2x" id="ci"></i>
</div>
<div class="col-2 Jumbooptions" id="add" onclick="location.href='#';">
<p class="efr">Add</p>
<i class="fas fa-address-book fa-2x" id="ai"></i>
</div>
<div class="col-2 Jumbooptions" id="stats" onclick="location.href='#';">
<p class="efr">Statistics</p>
<i class="fas fa-chart-pie fa-2x" id="si"></i>
</div>
<div class="col-2 Jumbooptions" id="export" onclick="location.href='#';">
<p class="efr">Export</p>
<i class="fas fa-file-export fa-2x" id="ei"></i>
</div>
</div>
<div class="row" id="bigger">
<div class="col-2" id=""></div>
<div id="created" class="dropdown col-4">
<h2>CREATE</h2>
<p>as many sheets as you want with ease!</p>
</div>
<div id="addd" class="dropdown col-4">
</div>
<div id="statsd" class="dropdown col-4">
</div>
<div id="exportd" class="dropdown col-4">
</div>
</div>
</div>
</div>
CSS
height:70px !important;
width:700px;
margin-left:47px
}
If I make the "height" any more than 70 the rest of the row goes to the start of the jumbotron
When height is less than 70: https://gyazo.com/6601be928cb893b5355c78fbc792e694
When height is more than 70 (200): https://gyazo.com/6b6f96fa6eadcffc6db3dd427cac8d03
I'm really not sure what to do.
I'm currently struggling to figure out why the navigation tabs, do not scroll to the specified sections for one page site. Initially I assumed that the issue may have been result of simple syntax error, but from my perspective it seems perfectly fine. Below I have included minimal copy of code from my index.html. I would really appreciate, if some could let me know what the problem & solution could be. Thanks in advance.
<!-- Navigation -->
<header class="header scrolling-header">
<nav id="nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container clearfix">
<a class="toggle-button visible-xs-block" data-toggle="collapse" data-target="#navbar-collapse">
<i class="fa fa-navicon"></i>
</a>
<a class="navbar-brand scroll" href="index.html">
<img class="normal-logo " src="img/logo.png" alt="logo" />
<img class="scroll-logo hidden-xs" src="img/logo-dark.png" alt="logo" />
</a>
<div class="right-nav-block pull-right clearfix">
<div class="navbar-collapse collapse floated" id="navbar-collapse">
<ul class="main-menu nav navbar-nav clearfix navbar-with-inside vcenter">
<li class="">Services
</li>
<li class="">Work
</li>
<li class="">About
</li>
<li class="">Quote
</li>
<li class="">
Contact
<div class="wrap-inside-nav">
<div class="inside-col">
<ul class="inside-nav">
<li>Contact 1
</li>
<li>Contact 2
</li>
<li>Contact 3
</li>
</ul>
</div>
</div>
</li>
<li class=""><i class="fa fa-twitter"></i>
</li>
<li class=""><i class="fa fa-facebook"></i>
</li>
</ul>
<ul class="nav navbar-nav hidden-xs clearfix vcenter">
<li>
<a href="#" class="toggle-menu-button">
<div class="toggle-menu-button-icon">
</div>
</a>
</li>
<li class="no-hover">call us 1.800.12345
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="wrap-fixed-menu" id="fixedMenu">
<div class="top-items">
<a href="blog.html" class="top-menu-item menu-item">
<span class="subtitle">All The Latest</span>
<span class="title">Blog</span>
</a>
<a href="portfolio.html" class="top-menu-item menu-item">
<span class="subtitle">Awesome</span>
<span class="title">Portfolio</span>
</a>
</div>
<div class="bottom-items">
<a href="contact.html" class="bottom-menu-item menu-item">
<span class="subtitle">We Are Designers</span>
<span class="title">Contacts</span>
</a>
<div class="bottom-menu-item menu-item contact-info">
<div class="row">
<div class="col-md-12">
<i class="fa fa-home"></i>
<label>ADDRESS</label>
<p class="vcenter">746 Roberts Road Findlay, OH 45840</p>
</div>
<div class="col-md-12">
<i class="fa fa-phone"></i>
<label>PHONE</label>
<p class="vcenter">+201 126 216 88</p>
</div>
<div class="col-md-12">
<i class="fa fa-envelope"></i>
<label>EMAIL</label>
<p class="vcenter">support#CreativeBrick.com</p>
</div>
</div>
</div>
</div>
</div>
</header>
<!--./navigation -->
<!-- Slider header -->
<section class="section-header-slider">
</section>
<!-- Section intro -->
<section class="section-intro blue-dark ">
<div class="container dark-content">
<div class="row">
<div class="col-md-3 hidden-sm hidden-xs">
</div>
<div class="col-md-3 scrollme animateme" data-when="enter" data-from="0.5" data-to="0" data-crop="false" data-scale="1.5" data-opacity="0">
<div class="arrow hidden-sm hidden-xs">
<img src="img/arrow.png" alt="" />
</div>
<div class="intro-title">Intro</div>
</div>
<div class="col-md-5 col-sm-12">
<div class="intro-text">
</div>
<div class="under-intro-text">
</div>
</div>
</div>
</div>
</section>
<!-- Section intro 2 -->
<section class="section-intro-2 ">
<div class="container">
<div class="row">
</div>
</div>
</section>
<!-- ========================== -->
<!-- Section Services -->
<!-- ========================== -->
<section class="section-services">
<div class="container">
<div class="section-heading">
<div class="section-subtitle">creating awesomeness</div>
<div class="section-title">services we provide</div>
<div class="sep-element"></div>
</div>
</div>
<div class="wrap-services-tabs">
<div class="wrap-tabs">
</div>
<div class="wrap-tabs-content top-arrow-effect">
<div class="container">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane" id="support">
<div class="row">
<div class="col-md-10 col-md-offset-1 col-sm-12">
<div class="row">
<div class="col-md-12">
<h5 class="bold text-uppercase blue">Analytics details</h5>
<p>
TEXT HERE
</p>
<ul class="list list-round-check orange-list">
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane active" id="responsive">
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="row">
<div class="col-md-6 animateme scrollme" data-when="enter" data-from="0.75" data-to="0" data-opacity="0" data-translatex="-400">
<img src="img/sections/tab-image-1.png" alt="" />
</div>
<div class="col-md-6 animateme scrollme" data-when="enter" data-from="0.75" data-to="0" data-opacity="0" data-translatex="400">
<h5 class="bold text-uppercase blue">Analytics details</h5>
<p>
TEXT HERE
</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="analytics">
<div class="row">
<div class="col-md-10 col-md-offset-1 col-sm-12">
<div class="row">
<div class="col-md-6">
<h5 class="bold text-uppercase blue">Analytics details</h5>
<p>
TEXT HERE
</p>
<ul class="list list-round-check orange-list">
</ul>
<div class="designations clearfix">
<div class="last-year"><span></span>last year</div>
<div class="this-year"><span></span>this year</div>
</div>
</div>
<div class="col-md-6">
<div class="graph-line" id="graph-line3"></div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="customizable">
<div class="row">
<div class="col-md-10 col-md-offset-1 col-sm-12">
<div class="row">
<div class="col-md-12">
<h5 class="bold text-uppercase blue">Analytics details</h5>
<p>
TEXT HERE
</p>
<ul class="list list-round-check orange-list">
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="multipurpose">
<div class="row">
<div class="col-md-10 col-md-offset-1 col-sm-12">
<div class="row">
<div class="col-md-12">
<h5 class="bold text-uppercase blue">Analytics details</h5>
<p>
TEXT HERE
</p>
<ul class="list list-round-check orange-list">
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section-purchase orange-dark">
<div class="container dark-content">
<div class="row">
<div class="col-md-2 col-sm-3 text-right logo-block">
<img src="img/logo.png" alt="" />
<div>Creative Agency</div>
</div>
<div class="col-md-offset-1 col-md-6 col-sm-6">
<h3 class="bold">Drop us a line if you’d like to work with us</h3>
<p>We’re always looking for new talent so join our team now</p>
</div>
<div class="col-md-2 col-sm-3 text-right">
get in touch
</div>
</div>
</div>
</section>
<section class="section-skills">
<div class="feature-section dark dark-strong">
<div class="container dark-content">
<div class="row">
<div class="col-md-4">
<div class="feature-item text-right animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="-300">
<h5><span>01</span>Generate Ideas</h5>
<p>
TEXT HERE
</p>
</div>
<div class="feature-item feature-divider text-right animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="-300">
<div class="feature-divider-item"></div>
</div>
<div class="feature-item text-right animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="-300">
<h5><span>04</span>Launch & Deliver</h5>
<p>
TEXT HERE
</p>
</div>
</div>
<div class="col-md-4">
<div class="wrap-feature-content">
<img src="img/feature-background.png" alt="" />
<div class="feature-content">
<img src="img/logo-free.png" alt="" />
<div class="feature-text">
THE PROCESS
<span>We Follow</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="feature-item right-feature-item animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="300">
<h5>Preparing Briefs<span>02</span></h5>
<p>
TEXT HERE
</p>
</div>
<div class="feature-item right-feature-item feature-divider animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="300">
<div class="feature-divider-item"></div>
</div>
<div class="feature-item right-feature-item animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="300">
<h5>Project Development<span>03</span></h5>
<p>
TEXT HERE
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ========================== -->
<!-- Section trust -->
<!-- ========================== -->
<section class="section-trust-us clearfix">
<div class="trus-image">
<img src="img/sections/section-trust-us-image.png" alt="" />
</div>
<div class="container">
<div class="row">
<div class="col-md-offset-6 col-md-6">
<div class="section-heading">
<div class="section-title">why trust us</div>
<div class="section-subtitle">creating awesomeness</div>
</div>
</div>
<div class="col-md-offset-6 col-md-6" data-wow-duration="2s">
<div id="accordion-one" role="tablist" aria-multiselectable="true">
<div class="panel panel-default panel-alt-two">
<div class="panel-heading active" role="tab" id="headingOne">
<h5 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-one" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class="accordion-icon">
<span class="stacked-icon">
<i class="icon-bulb"></i>
</span>
</span>
TEXT HERE
</a>
</h5>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<p>
TEXT HERE
</p>
</div>
</div>
<div class="panel-heading" role="tab" id="headingTwo">
<h5 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion-one" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<span class="accordion-icon">
<span class="stacked-icon">
<i class="icon-rocket"></i>
</span>
</span>
<b>TEXT HERE</b>
</a>
</h5>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<p>
TEXT HERE
</p>
</div>
</div>
<div class="panel-heading" role="tab" id="headingThree">
<h5 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion-one" href="#collapseThree" aria-expanded="false" aria-controls="collapseTwo">
<b>TEXT HERE</b>
<span class="accordion-icon">
<span class="stacked-icon">
<i class="icon-badge"></i>
</span>
</span>
</a>
</h5>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<p>
TEXT HERE
</p>
</div>
</div>
</div>
<!--panel-->
</div>
<!--accordion-->
</div>
</div>
</div>
</section>
You are missing id="works-section", etc.
The way it works is you have a page anchor like
Some Title
Then later in the markup, where you want to the link to jump to, you place a corresponding ID, like:
<section id="someID">…</section>.
Makes sense?