我在悬停时无法显示页面的主滚动条。 我正在处理我的投资组合，并且已经隐藏了页面滚动条。我试图将鼠标悬停在主容器上时显示滚动条。
我在下面附上我的投资组合页面链接和代码。任何帮助都将适用！
请注意，我希望它使用纯CSS，不想使用JS或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"><a href="https://drive.google.com/file/d/0Bz1hE-qIXO73Mlk1VWVyUW5nelVCMTNsYTdTYi1remJXMXhR/view?usp=sharing" download target="_blank">Download Resume</a></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"><a href="https://drive.google.com/file/d/0Bz1hE-qIXO73Mlk1VWVyUW5nelVCMTNsYTdTYi1remJXMXhR/view?usp=sharing" download target="_blank">Download Resume <i class="fas fa-long-arrow-alt-right"></i></a></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>
这是我的投资组合链接：https://nazifa22.github.io/Portfolio-2/
我得到的答案仅适用于div或部分，而不适用于整个页面 Make scrollbars only visible when a Div is hovered over?
答案 0 :(得分：0)
添加此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"><a href="https://drive.google.com/file/d/0Bz1hE-qIXO73Mlk1VWVyUW5nelVCMTNsYTdTYi1remJXMXhR/view?usp=sharing" download target="_blank">Download Resume</a></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"><a href="https://drive.google.com/file/d/0Bz1hE-qIXO73Mlk1VWVyUW5nelVCMTNsYTdTYi1remJXMXhR/view?usp=sharing" download target="_blank">Download Resume <i class="fas fa-long-arrow-alt-right"></i></a></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>