Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>jeetu's Diary</title>
- <link rel="stylesheet" href="bootstrap.css">
- <style>
- * {box-sizing: border-box;}
- body {font-family: Verdana, sans-serif;}
- .mySlides {display: none;}
- img {vertical-align: middle;width: 600px;height: 500px;}
- /* Slideshow container */
- .slideshow-container {
- max-width: 1000px;
- padding: 20px;
- margin: auto;
- }
- /* Number text (1/3 etc) */
- .numbertext {
- color: #f2f2f2;
- font-size: 12px;
- padding: 8px 12px;
- position: absolute;
- top: 0;
- }
- /* The dots/bullets/indicators */
- .dot {
- height: 15px;
- width: 15px;
- margin: 0 2px;
- background-color: #bbb;
- border-radius: 50%;
- display: inline-block;
- transition: background-color 0.6s ease;
- }
- .active {
- background-color: #717171;
- }
- /* Fading animation */
- .fade {
- -webkit-animation-name: fade;
- -webkit-animation-duration: 1.5s;
- animation-name: fade;
- animation-duration: 1.5s;
- }
- @-webkit-keyframes fade {
- from {opacity: .4}
- to {opacity: 1}
- }
- @keyframes fade {
- from {opacity: .4}
- to {opacity: 1}
- }
- /* On smaller screens, decrease text size */
- @media only screen and (max-width: 300px) {
- .text {font-size: 11px}
- }
- </style>
- </head>
- <body>
- <div class="pos-f-t">
- <div class="collapse" id="navbarToggleExternalContent">
- <div class="bg-dark p-4">
- <h5 class="text-white h4">Welcome To Jeetu's Diary</h5>
- <span class="text-muted">@javedmirjeetu.</span>
- </div>
- </div>
- <nav class="navbar navbar-dark bg-dark">
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
- </nav>
- </div>
- <nav class="navbar navbar-dark bg-dark">
- <a class="navbar-brand" href="#">Javed Mir Jeetu</a>
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
- <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
- <li class="nav-item active">
- <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Social Media Link</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">LogOut</a>
- </li>
- </ul>
- <form class="form-inline my-2 my-lg-0">
- <input class="form-control mr-sm-2" type="search" placeholder="Search">
- <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
- </form>
- </div>
- </nav>
- <div class="slideshow-container">
- <div class="mySlides fade">
- <div class="numbertext">1 / 3</div>
- <img src="img/1.jpg" style="width:100%">
- <div class="text">Caption Text</div>
- </div>
- <div class="mySlides fade">
- <div class="numbertext">2 / 3</div>
- <img src="img/2.jpg" style="width:100%">
- <div class="text">Caption Two</div>
- </div>
- <div class="mySlides fade">
- <div class="numbertext">3 / 3</div>
- <img src="img_mountains_wide.jpg" style="width:100%">
- <div class="text">Caption Three</div>
- </div>
- </div>
- <br>
- <div style="text-align:center">
- <span class="dot"></span>
- <span class="dot"></span>
- <span class="dot"></span>
- </div>
- <script>
- var slideIndex = 0;
- showSlides();
- function showSlides() {
- var i;
- var slides = document.getElementsByClassName("mySlides");
- var dots = document.getElementsByClassName("dot");
- for (i = 0; i < slides.length; i++) {
- slides[i].style.display = "none";
- }
- slideIndex++;
- if (slideIndex > slides.length) {slideIndex = 1}
- for (i = 0; i < dots.length; i++) {
- dots[i].className = dots[i].className.replace(" active", "");
- }
- slides[slideIndex-1].style.display = "block";
- dots[slideIndex-1].className += " active";
- setTimeout(showSlides, 2000); // Change image every 2 seconds
- }
- </script>
- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
- <script src="js/bootstrap.bundle.js" ></script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement