0

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"><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 : &nbsp; <span>22 October</span></h5>
                    <h5>Email : &nbsp; <span>nazifarashid1822@gmail.com</span></h5> 
                  </div>
                  <div class="col-12 col-md-6 col-sm-12 col-lg-6">
                    <h5>Address : &nbsp; <span>House #2, abc street, 
                      Bangladesh</span></h5> 
                    <h5>Phone : &nbsp; <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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 : &nbsp; <span>22 October</span></h5>
                    <h5>Email : &nbsp; <span>nazifarashid1822@gmail.com</span></h5> 
                    <h5>Address : &nbsp; <span>House #2, abc street, 
                      Bangladesh</span></h5> 
                    <h5>Phone : &nbsp; <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)">&#10094;</a> 
            <br>
            <a class="next" onclick="plusSlides(1)">&#10095;</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?

nazifa rashid
  • 1,469
  • 1
  • 9
  • 20
  • ::-webkit-scrollbar fix will only work in chrome and safari(webkit browsers) and not in Mozilla, IE or opera. Since I don't have a webkit browser in the present pc, I am not able to test. But I suggest to have a try changing the webkit scroll bar width. like width:0 in normal stage and width:15 on :hover of the content. – Pons Purushothaman Sep 02 '19 at 11:53
  • i'll create a fallback for the other browsers. Thanks for the solution, will let you know if it works @PonsPurushothaman – nazifa rashid Sep 02 '19 at 12:00

1 Answers1

0

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"><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 : &nbsp; <span>22 October</span></h5>
                    <h5>Email : &nbsp; <span>nazifarashid1822@gmail.com</span></h5> 
                  </div>
                  <div class="col-12 col-md-6 col-sm-12 col-lg-6">
                    <h5>Address : &nbsp; <span>House #2, abc street, 
                      Bangladesh</span></h5> 
                    <h5>Phone : &nbsp; <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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 : &nbsp; <span>22 October</span></h5>
                    <h5>Email : &nbsp; <span>nazifarashid1822@gmail.com</span></h5> 
                    <h5>Address : &nbsp; <span>House #2, abc street, 
                      Bangladesh</span></h5> 
                    <h5>Phone : &nbsp; <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)">&#10094;</a> 
            <br>
            <a class="next" onclick="plusSlides(1)">&#10095;</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>
Lalji Tadhani
  • 14,041
  • 3
  • 23
  • 40
  • Thanks for the answer but i don't want that scrollbar i have already hidden the main scrollbar of the page just i want to show that while hovering https://www.screencast.com/t/cILrukdUpNbV See this scrennshot – nazifa rashid Sep 02 '19 at 11:46