HTML5系列代码：个人网站-校园

技术2025-07-13 17

<!DOCTYPE html> <html lang="zxx"> <head> <title>About Us</title>  <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="UTF-8" /> <meta name="keywords" content="" /> <script> addEventListener("load", function () { setTimeout(hideURLbar, 0); }, false); function hideURLbar() { window.scrollTo(0, 1); } </script>   <link rel="stylesheet" href="css/bootstrap.css">  <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />  <link href="css/font-awesome.min.css" rel="stylesheet">    <link href="programb.com" rel="stylesheet"> <link href="programb.com" rel="stylesheet">  </head> <body>  <div class="main-banner-2" id="home">  <header> <div class="container"> <div class="header d-md-flex justify-content-between align-items-center py-3">  <div id="logo"> <h1><a href="index.html" class="font-weight-bold">Dance School <span class="text-capitalize">Let'sDance With Us</span> </a> </h1> </div>   <div class="nav_w3ls"> <nav> <label for="drop" class="toggle">Menu</label> <input type="checkbox" id="drop" /> <ul class="menu"> <li>  <label for="drop-2" class="toggle toogle-2">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span> </label> <a href="#"> <span class="fa fa-bars" aria-hidden="true"></span></a> <input type="checkbox" id="drop-2" /> <ul> <li><a href="index.html" class="drop-text">Dance Classes</a></li> <li><a href="#trainers" class="drop-text">Trainers</a></li> <li><a href="#testi" class="drop-text">Testimonials</a></li> <li><a href="gallery.html" class="drop-text">Gallery</a></li> <li><a href="contact.html" class="drop-text">Contact Us</a></li> </ul> </li> <li><a href="index.html">Home</a></li> <li><a href="about.html">About Us</a></li> </ul> </nav> </div>  </div> </div> </header>  </div>   <div class="breadcrumb-w3ls py-1"> <div class="container"> <ol class="breadcrumb m-0"> <li class="breadcrumb-item"> <a href="index.html">Home</a> </li> <li class="breadcrumb-item active" aria-current="page">About Us</li> </ol> </div> </div>   <section class="about py-5"> <div class="container pt-xl-5 pt-lg-3"> <h3 class="title-w3 mb-5 text-wh font-weight-bold">About Us</h3> <div class="row"> <div class="col-lg-6 w3lsits_works-grid mt-xl-4"> <div class="wthree-bottom"> <h6 class="subheading-w3ls text-uppercase text-bl mb-4">Let’s dance with us and hold your beloved moments.</h6> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, eaque ipsa quae ab illo inventore veritatis et quasi architecto.</p> </div> </div> <div class="col-lg-6 w3lsits_works-grid1 mt-lg-0 mt-sm-5 mt-4"> <img src="images/about.jpg" alt="" class="img-fluid" /> </div> </div> </div> </section>   <section class="what-w3ls"> <div class="container py-xl-5 py-lg-3"> <div class="offset-lg-6"> <div class="grids-whtas"> <h3 class="tittle mb-5 text-wh font-weight-bold">Welcome to Dance School</h3> <p class="lead text-li">Donec consequat sapien ut leo cursus rhoncus. Nullam dui mi, vulputate ac metus at, semper varius orci. Nulla accumsan ac elit in congue.</p> <hr class="my-4"> <p class="text-li">Rerum hic tenetur a sapiente delectus reiciendis maiores alias consequatur aut consequat sapien ut leo cursus rhoncus.Nullam dui mi, vulputate ac metus .</p> <a href="about.html" class="btn button-style mt-sm-5 mt-4">Read More</a> </div> </div> </div> <div class="ab-w3-img"> <img src="images/b2.png" alt="" class="img-fluid"> </div> </section>   <section class="team pb-5 pt-lg-0 pt-5" id="trainers"> <div class="container pb-xl-5 pb-lg-3"> <h3 class="title-w3 mb-5 font-weight-bold">Our Trainers</h3> <div class="row inner-sec-w3layouts-w3pvt-lauinfo"> <div class="col-md-4 team-grids text-center"> <img src="images/team1.jpg" class="img-fluid" alt=""> <div class="team-info"> <div class="caption mb-3"> <h4>John Doe</h4> </div> <div class="social-icons-section"> <a class="fac" href="#"> <span class="fa fa-facebook"></span> </a> <a class="twitter mx-2" href="#"> <span class="fa fa-twitter"></span> </a> <a class="google" href="#"> <span class="fa fa-google-plus"></span> </a> </div> </div> </div> <div class="col-md-4 team-grids my-md-0 my-4 text-center"> <img src="images/team3.jpg" class="img-fluid" alt=""> <div class="team-info"> <div class="caption mb-3"> <h4>Adam Ster</h4> </div> <div class="social-icons-section"> <a class="fac" href="#"> <span class="fa fa-facebook"></span> </a> <a class="twitter mx-2" href="#"> <span class="fa fa-twitter"></span> </a> <a class="google" href="#"> <span class="fa fa-google-plus"></span> </a> </div> </div> </div> <div class="col-md-4 team-grids text-center"> <img src="images/team2.jpg" class="img-fluid" alt=""> <div class="team-info"> <div class="caption mb-3"> <h4>Chris Tina</h4> </div> <div class="social-icons-section"> <a class="fac" href="#"> <span class="fa fa-facebook"></span> </a> <a class="twitter mx-2" href="#"> <span class="fa fa-twitter"></span> </a> <a class="google" href="#"> <span class="fa fa-google-plus"></span> </a> </div> </div> </div> </div> </div> </section>   <div class="testimonials py-5" id="testi"> <div class="container py-xl-5 py-lg-3"> <h3 class="title-w3 mb-5 font-weight-bold">What Our Students Say</h3> <div class="row"> <div class="col-lg-6 w3_testimonials_grid"> <div class="bg-white rounded p-5"> <p class="sub-test-w3ls">Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod possimus, omnis voluptas. </p> <div class="row mt-5"> <div class="col-3 testi-img-res"> <img src="images/te1.jpg" alt=" " class="img-fluid" /> </div> <div class="col-9 w3_testi_grid mt-xl-3 mt-lg-2 mt-md-4 mt-2"> <h5 class="mb-2">Thomas Carl</h5> <p>Sed do eiusmod</p> </div> </div> </div> </div> <div class="col-lg-6 w3_testimonials_grid mt-lg-0 mt-4"> <div class="bg-white rounded p-5"> <p class="sub-test-w3ls">Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod possimus, omnis voluptas. </p> <div class="row mt-5"> <div class="col-3 testi-img-res"> <img src="images/te2.jpg" alt=" " class="img-fluid" /> </div> <div class="col-9 w3_testi_grid mt-xl-3 mt-lg-2 mt-md-4 mt-2"> <h5 class="mb-2">Adam Ster</h5> <p>Sed do eiusmod</p> </div> </div> </div> </div> </div> </div> </div>   <footer class="py-5"> <div class="container pt-xl-5 pt-lg-3">  <div class="newsletter_right_w3w3pvt-lau pb-5"> <h2 class="tittle text-wh mb-5 font-weight-bold">Subscribe Newsletter</h2> <div class="n-right-w3ls pt-3"> <form action="#" method="post"> <div class="row"> <div class="col-md-4 form-group"> <input class="form-control" type="text" name="Name" placeholder="Name" required=""> </div> <div class="col-md-4 form-group px-md-0"> <input class="form-control" type="email" name="Email" placeholder="Email Address" required=""> </div> <div class="col-md-4 form-group mt-md-0 mt-3"> <button class="form-control submit text-uppercase btn" type="submit">Subscribe</button> </div> </div> </form> </div> </div>   <div class="row pt-xl-5 pt-lg-3">  <div class="col-lg-5 col-md-7 w3l-footer mt-lg-3 text-md-left text-center"> <ul class="list-unstyled footer-nav-wthree"> <li> <a href="index.html" class="active">Home</a> </li> <li> <a href="about.html">About Us</a> </li> <li> <a href="gallery.html">Gallery</a> </li> <li> <a href="contact.html">Contact Us</a> </li> </ul> </div>   <div class="col-lg-7 col-md-5 w3social-icons text-md-right text-center mt-md-0 mt-3"> <ul> <li> <a href="#" class="rounded-circle"> <span class="fa fa-facebook-f"></span> </a> </li> <li> <a href="#" class="rounded-circle"> <span class="fa fa-google-plus"></span> </a> </li> <li> <a href="#" class="rounded-circle"> <span class="fa fa-twitter"></span> </a> </li> </ul> </div>  </div>   <div class="pt-lg-4 pt-3 text-md-left text-center"> <p class="copy-right-grids mt-lg-1">Copyright © 2019.Company name All rights reserved.<a target="_blank" href="http://www.programb.com/moban/">网页模板</a></p> </div>  </div> </footer>  </body> </html> <!DOCTYPE html> <html lang="zxx"> <head> <title>Contact Us</title>  <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="UTF-8" /> <meta name="keywords" content="" /> <script> addEventListener("load", function () { setTimeout(hideURLbar, 0); }, false); function hideURLbar() { window.scrollTo(0, 1); } </script>   <link rel="stylesheet" href="css/bootstrap.css">  <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />  <link href="css/font-awesome.min.css" rel="stylesheet">    <link href="program.com" rel="stylesheet"> <link href="program.com" rel="stylesheet">  </head> <body>  <div class="main-banner-2" id="home">  <header> <div class="container"> <div class="header d-md-flex justify-content-between align-items-center py-3">  <div id="logo"> <h1><a href="index.html" class="font-weight-bold">Dance School <span class="text-capitalize">Let'sDance With Us</span> </a> </h1> </div>   <div class="nav_w3ls"> <nav> <label for="drop" class="toggle">Menu</label> <input type="checkbox" id="drop" /> <ul class="menu"> <li>  <label for="drop-2" class="toggle toogle-2">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span> </label> <a href="#"> <span class="fa fa-bars" aria-hidden="true"></span></a> <input type="checkbox" id="drop-2" /> <ul> <li><a href="index.html" class="drop-text">Dance Classes</a></li> <li><a href="about.html" class="drop-text">Trainers</a></li> <li><a href="index.html" class="drop-text">Testimonials</a></li> <li><a href="gallery.html" class="drop-text">Gallery</a></li> <li><a href="contact.html" class="drop-text">Contact Us</a></li> </ul> </li> <li><a href="index.html">Home</a></li> <li><a href="about.html">About Us</a></li> </ul> </nav> </div>  </div> </div> </header>  </div>   <div class="breadcrumb-w3ls py-1"> <div class="container"> <ol class="breadcrumb m-0"> <li class="breadcrumb-item"> <a href="index.html">Home</a> </li> <li class="breadcrumb-item active" aria-current="page">Contact Us</li> </ol> </div> </div>   <section class="contact py-5"> <div class="container py-xl-5 py-lg-3"> <h3 class="title-w3 mb-5 font-weight-bold">Contact Us</h3> <div class="row">  <div class="col-lg-6 contact-us1-bottom w3layouts-w3ls"> <form action="#" method="post"> <div class="form-group"> <input type="text" class="form-control" placeholder="Name" name="name" required=""> </div> <div class="form-group"> <input type="email" class="form-control" placeholder="Email" name="email" required=""> </div> <div class="form-group"> <textarea class="form-control" placeholder="Message" name="message" required=""></textarea> </div> <button type="submit" class="btn">Submit</button> </form> </div>   <div class="col-lg-6 home-radio-clock mt-lg-0 mt-5"> <h3 class="tittle text-bl mb-5 font-weight-bold">Get In Touch</h3> <div class="row"> <div class="col-4"> <ul class="list-unstyled"> <li><span class="fa fa-envelope mr-2" aria-hidden="true"></span>Address</li> <li class="mt-5"><span class="fa fa-phone mr-2" aria-hidden="true"></span>Call Us</li> <li class="mt-5"><span class="fa fa-clock-o mr-2" aria-hidden="true"></span>Opening Time </li> </ul> </div> <div class="col-8"> <div class="home-radio-clock-right"> <ul class="list-unstyled"> <li>4978 Diamond Circle, <br>NJ 07087, USA</li> <li class="my-4">(012) 123-456-78 <br>(012) 123-456-78 </li> <li>Mon-Sat:<br>07h-16h</li> </ul> </div> </div> </div> </div>  </div> </div> </section>  <div class="map p-2"> <iframe src="programb.com" style="border:0" allowfullscreen=""></iframe> </div>    <footer class="py-5"> <div class="container pt-xl-5 pt-lg-3">  <div class="newsletter_right_w3w3pvt-lau pb-5"> <h2 class="tittle text-wh mb-5 font-weight-bold">Subscribe Newsletter</h2> <div class="n-right-w3ls pt-3"> <form action="#" method="post"> <div class="row"> <div class="col-md-4 form-group"> <input class="form-control" type="text" name="Name" placeholder="Name" required=""> </div> <div class="col-md-4 form-group px-md-0"> <input class="form-control" type="email" name="Email" placeholder="Email Address" required=""> </div> <div class="col-md-4 form-group mt-md-0 mt-3"> <button class="form-control submit text-uppercase btn" type="submit">Subscribe</button> </div> </div> </form> </div> </div>   <div class="row pt-xl-5 pt-lg-3">  <div class="col-lg-5 col-md-7 w3l-footer mt-lg-3 text-md-left text-center"> <ul class="list-unstyled footer-nav-wthree"> <li> <a href="index.html" class="active">Home</a> </li> <li> <a href="about.html">About Us</a> </li> <li> <a href="gallery.html">Gallery</a> </li> <li> <a href="contact.html">Contact Us</a> </li> </ul> </div>   <div class="col-lg-7 col-md-5 w3social-icons text-md-right text-center mt-md-0 mt-3"> <ul> <li> <a href="#" class="rounded-circle"> <span class="fa fa-facebook-f"></span> </a> </li> <li> <a href="#" class="rounded-circle"> <span class="fa fa-google-plus"></span> </a> </li> <li> <a href="#" class="rounded-circle"> <span class="fa fa-twitter"></span> </a> </li> </ul> </div>  </div>   <div class="pt-lg-4 pt-3 text-md-left text-center"> <p class="copy-right-grids mt-lg-1">Copyright © 2019.Company name All rights reserved.<a target="_blank" href="http://www.programb.com/moban/">网页模板</a></p> </div>  </div> </footer>  </body> </html> <!DOCTYPE html> <html lang="zxx"> <head> <title>Gallery</title>  <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="UTF-8" /> <meta name="keywords" content="" /> <script> addEventListener("load", function () { setTimeout(hideURLbar, 0); }, false); function hideURLbar() { window.scrollTo(0, 1); } </script>   <link rel="stylesheet" href="css/bootstrap.css">  <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />  <link href="css/font-awesome.min.css" rel="stylesheet">    <link href="programb.com" rel="stylesheet"> <link href="programb.com" rel="stylesheet">  </head> <body>  <div class="main-banner-2" id="home">  <header> <div class="container"> <div class="header d-md-flex justify-content-between align-items-center py-3">  <div id="logo"> <h1><a href="index.html" class="font-weight-bold">Dance School <span class="text-capitalize">Let'sDance With Us</span> </a> </h1> </div>   <div class="nav_w3ls"> <nav> <label for="drop" class="toggle">Menu</label> <input type="checkbox" id="drop" /> <ul class="menu"> <li>  <label for="drop-2" class="toggle toogle-2">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span> </label> <a href="#"> <span class="fa fa-bars" aria-hidden="true"></span></a> <input type="checkbox" id="drop-2" /> <ul> <li><a href="index.html" class="drop-text">Dance Classes</a></li> <li><a href="about.html" class="drop-text">Trainers</a></li> <li><a href="index.html" class="drop-text">Testimonials</a></li> <li><a href="gallery.html" class="drop-text">Gallery</a></li> <li><a href="contact.html" class="drop-text">Contact Us</a></li> </ul> </li> <li><a href="index.html">Home</a></li> <li><a href="about.html">About Us</a></li> </ul> </nav> </div>  </div> </div> </header>  </div>   <div class="breadcrumb-w3ls py-1"> <div class="container"> <ol class="breadcrumb m-0"> <li class="breadcrumb-item"> <a href="index.html">Home</a> </li> <li class="breadcrumb-item active" aria-current="page">Gallery</li> </ol> </div> </div>   <section class="gallery py-5"> <div class="container py-xl-5 py-lg-3"> <h3 class="title-w3 mb-5 font-weight-bold">Our Gallery</h3> <div class="row news-grids text-center no-gutters"> <div class="col-md-4 gal-img"> <a href="#gal1"><img src="images/d1.jpg" alt="Gallery Image" class="img-fluid"></a> </div> <div class="col-md-4 gal-img"> <a href="#gal2"><img src="images/d2.jpg" alt="Gallery Image" class="img-fluid"></a> </div> <div class="col-md-4 gal-img"> <a href="#gal3"><img src="images/d3.jpg" alt="Gallery Image" class="img-fluid"></a> </div> </div> <div class="row news-grids text-center no-gutters"> <div class="col-md-4 gal-img"> <a href="#gal4"><img src="images/d4.jpg" alt="Gallery Image" class="img-fluid"></a> </div> <div class="col-md-4 gal-img"> <a href="#gal5"><img src="images/d5.jpg" alt="Gallery Image" class="img-fluid"></a> </div> <div class="col-md-4 gal-img"> <a href="#gal6"><img src="images/d6.jpg" alt="Gallery Image" class="img-fluid"></a> </div> </div>   <div id="gal1" class="pop-overlay animate text-center"> <div class="popup"> <img src="images/d1.jpg" alt="Popup Image" class="img-fluid" /> <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p> <a class="close" href="#gallery">×</a> </div> </div>   <div id="gal2" class="pop-overlay animate text-center"> <div class="popup"> <img src="images/d2.jpg" alt="Popup Image" class="img-fluid" /> <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p> <a class="close" href="#gallery">×</a> </div> </div>   <div id="gal3" class="pop-overlay animate text-center"> <div class="popup"> <img src="images/d3.jpg" alt="Popup Image" class="img-fluid" /> <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p> <a class="close" href="#gallery">×</a> </div> </div>   <div id="gal4" class="pop-overlay animate text-center"> <div class="popup"> <img src="images/d4.jpg" alt="Popup Image" class="img-fluid" /> <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p> <a class="close" href="#gallery">×</a> </div> </div>   <div id="gal5" class="pop-overlay animate text-center"> <div class="popup"> <img src="images/d5.jpg" alt="Popup Image" class="img-fluid" /> <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p> <a class="close" href="#gallery">×</a> </div> </div>   <div id="gal6" class="pop-overlay animate text-center"> <div class="popup"> <img src="images/d6.jpg" alt="Popup Image" class="img-fluid" /> <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p> <a class="close" href="#gallery">×</a> </div> </div>   </div> </section>   <footer class="py-5"> <div class="container pt-xl-5 pt-lg-3">  <div class="newsletter_right_w3w3pvt-lau pb-5"> <h2 class="tittle text-wh mb-5 font-weight-bold">Subscribe Newsletter</h2> <div class="n-right-w3ls pt-3"> <form action="#" method="post"> <div class="row"> <div class="col-md-4 form-group"> <input class="form-control" type="text" name="Name" placeholder="Name" required=""> </div> <div class="col-md-4 form-group px-md-0"> <input class="form-control" type="email" name="Email" placeholder="Email Address" required=""> </div> <div class="col-md-4 form-group mt-md-0 mt-3"> <button class="form-control submit text-uppercase btn" type="submit">Subscribe</button> </div> </div> </form> </div> </div>   <div class="row pt-xl-5 pt-lg-3">  <div class="col-lg-5 col-md-7 w3l-footer mt-lg-3 text-md-left text-center"> <ul class="list-unstyled footer-nav-wthree"> <li> <a href="index.html" class="active">Home</a> </li> <li> <a href="about.html">About Us</a> </li> <li> <a href="gallery.html">Gallery</a> </li> <li> <a href="contact.html">Contact Us</a> </li> </ul> </div>   <div class="col-lg-7 col-md-5 w3social-icons text-md-right text-center mt-md-0 mt-3"> <ul> <li> <a href="#" class="rounded-circle"> <span class="fa fa-facebook-f"></span> </a> </li> <li> <a href="#" class="rounded-circle"> <span class="fa fa-google-plus"></span> </a> </li> <li> <a href="#" class="rounded-circle"> <span class="fa fa-twitter"></span> </a> </li> </ul> </div>  </div>   <div class="pt-lg-4 pt-3 text-md-left text-center"> <p class="copy-right-grids mt-lg-1">Copyright © 2019.Company name All rights reserved.<a target="_blank" href="http://www.programb.com/moban/">网页模板</a></p> </div>  </div> </footer>  </body> </html> <!DOCTYPE html> <html lang="zxx"> <head> <title>Home</title>  <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="UTF-8" /> <meta name="keywords" content="" /> <script> addEventListener("load", function () { setTimeout(hideURLbar, 0); }, false); function hideURLbar() { window.scrollTo(0, 1); } </script>   <link rel="stylesheet" href="css/bootstrap.css">  <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />  <link href="css/font-awesome.min.css" rel="stylesheet">    <link href="programb" rel="stylesheet"> <link href="programb" rel="stylesheet">  </head> <body>  <div class="main-banner" id="home">  <header> <div class="container"> <div class="header d-md-flex justify-content-between align-items-center py-3">  <div id="logo"> <h1><a href="index.html" class="font-weight-bold">Dance School <span class="text-capitalize">Let'sDance With Us</span> </a> </h1> </div>   <div class="nav_w3ls"> <nav> <label for="drop" class="toggle">Menu</label> <input type="checkbox" id="drop" /> <ul class="menu"> <li>  <label for="drop-2" class="toggle toogle-2">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span> </label> <a href="#"> <span class="fa fa-bars" aria-hidden="true"></span></a> <input type="checkbox" id="drop-2" /> <ul> <li><a href="#classes" class="drop-text">Dance Classes</a></li> <li><a href="about.html" class="drop-text">Trainers</a></li> <li><a href="#testi" class="drop-text">Testimonials</a></li> <li><a href="gallery.html" class="drop-text">Gallery</a></li> <li><a href="contact.html" class="drop-text">Contact Us</a></li> </ul> </li> <li><a href="index.html">Home</a></li> <li><a href="about.html">About Us</a></li> </ul> </nav> </div>  </div> </div> </header>   <div class="main-w3pvt"> <div class="container"> <div class="style-banner"> <h3 class="text-wh font-weight-bold text-uppercase">Be in the <span>Spotlight</span> </h3> <p class="mt-5 text-li">Let’s dance with us and hold your beloved moments, sunt in culpa qui officia id est laborum.</p> <a href="about.html" class="btn button-style mt-sm-5 mt-4">Read More</a> </div> </div> </div> <div class="img-banner-w3"> <img src="images/b1.png" alt="" class="img-fluid"> </div>  </div>   <section class="py-5 team-w3ls" id="classes"> <div class="container py-xl-5 py-lg-3"> <h3 class="title-w3 pt-sm-5 mb-5 tittle-2 font-weight-bold">We offer adults to achieve the best</h3> <div class="d-flex team-w3ls-row pt-xl-5 pt-md-3"> <div class="col-lg-4 col-sm-6"> <div class="box20"> <img src="images/d1.jpg" alt="" class="img-fluid" /> <div class="box-content"> <h3 class="title">Ballet</h3> <span class="post">Dance</span> </div> </div> </div> <div class="col-lg-4 col-sm-6 my-sm-0 my-4"> <div class="box20 active"> <img src="images/d2.jpg" alt="" class="img-fluid" /> <div class="box-content active"> <h3 class="title">Salsa</h3> <span class="post">Dance</span> </div> </div> </div> <div class="col-lg-4 col-sm-6 mt-lg-0 mt-sm-4 mx-auto"> <div class="box20"> <img src="images/d3.jpg" alt="" class="img-fluid" /> <div class="box-content"> <h3 class="title">Hip Hop</h3> <span class="post">Dance</span> </div> </div> </div> </div> <div class="d-flex team-w3ls-row pt-lg-5 mt-lg-0 mt-4"> <div class="col-lg-4 col-sm-6"> <div class="box20"> <img src="images/d4.jpg" alt="" class="img-fluid" /> <div class="box-content"> <h3 class="title">Break</h3> <span class="post">Dance</span> </div> </div> </div> <div class="col-lg-4 col-sm-6 mt-sm-0 mt-4"> <div class="box20"> <img src="images/d5.jpg" alt="" class="img-fluid" /> <div class="box-content"> <h3 class="title">Zumba</h3> <span class="post">Dance</span> </div> </div> </div> <div class="col-lg-4 col-sm-6 mt-lg-0 mt-4 mx-auto"> <div class="box20"> <img src="images/d6.jpg" alt="" class="img-fluid" /> <div class="box-content"> <h3 class="title">Group</h3> <span class="post">Dance</span> </div> </div> </div> </div> </div> </section>   <section class="what-w3ls"> <div class="container py-xl-5 py-lg-3"> <div class="offset-lg-6"> <div class="grids-whtas"> <h3 class="tittle mb-5 text-wh font-weight-bold">Welcome to Dance School</h3> <p class="lead text-li">Donec consequat sapien ut leo cursus rhoncus. Nullam dui mi, vulputate ac metus at, semper varius orci. Nulla accumsan ac elit in congue.</p> <hr class="my-4"> <p class="text-li">Rerum hic tenetur a sapiente delectus reiciendis maiores alias consequatur aut consequat sapien ut leo cursus rhoncus.Nullam dui mi, vulputate ac metus .</p> <a href="about.html" class="btn button-style mt-sm-5 mt-4">Read More</a> </div> </div> </div> <div class="ab-w3-img"> <img src="images/b2.png" alt="" class="img-fluid"> </div> </section>   <div class="testimonials py-5" id="testi"> <div class="container py-xl-5 py-lg-3"> <h3 class="title-w3 mb-5 font-weight-bold">What Our Students Say</h3> <div class="row"> <div class="col-lg-6 w3_testimonials_grid"> <div class="bg-white rounded p-5"> <p class="sub-test-w3ls">Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod possimus, omnis voluptas. </p> <div class="row mt-5"> <div class="col-3 testi-img-res"> <img src="images/te1.jpg" alt=" " class="img-fluid" /> </div> <div class="col-9 w3_testi_grid mt-xl-3 mt-lg-2 mt-md-4 mt-2"> <h5 class="mb-2">Thomas Carl</h5> <p>Sed do eiusmod</p> </div> </div> </div> </div> <div class="col-lg-6 w3_testimonials_grid mt-lg-0 mt-4"> <div class="bg-white rounded p-5"> <p class="sub-test-w3ls">Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod possimus, omnis voluptas. </p> <div class="row mt-5"> <div class="col-3 testi-img-res"> <img src="images/te2.jpg" alt=" " class="img-fluid" /> </div> <div class="col-9 w3_testi_grid mt-xl-3 mt-lg-2 mt-md-4 mt-2"> <h5 class="mb-2">Adam Ster</h5> <p>Sed do eiusmod</p> </div> </div> </div> </div> </div> </div> </div>   <div class="slide-imaes"> </div>   <footer class="py-5"> <div class="container pt-xl-5 pt-lg-3">  <div class="newsletter_right_w3w3pvt-lau pb-5"> <h2 class="tittle text-wh mb-5 font-weight-bold">Subscribe Newsletter</h2> <div class="n-right-w3ls pt-3"> <form action="#" method="post"> <div class="row"> <div class="col-md-4 form-group"> <input class="form-control" type="text" name="Name" placeholder="Name" required=""> </div> <div class="col-md-4 form-group px-md-0"> <input class="form-control" type="email" name="Email" placeholder="Email Address" required=""> </div> <div class="col-md-4 form-group mt-md-0 mt-3"> <button class="form-control submit text-uppercase btn" type="submit">Subscribe</button> </div> </div> </form> </div> </div>   <div class="row pt-xl-5 pt-lg-3">  <div class="col-lg-5 col-md-7 w3l-footer mt-lg-3 text-md-left text-center"> <ul class="list-unstyled footer-nav-wthree"> <li> <a href="index.html" class="active">Home</a> </li> <li> <a href="about.html">About Us</a> </li> <li> <a href="gallery.html">Gallery</a> </li> <li> <a href="contact.html">Contact Us</a> </li> </ul> </div>   <div class="col-lg-7 col-md-5 w3social-icons text-md-right text-center mt-md-0 mt-3"> <ul> <li> <a href="#" class="rounded-circle"> <span class="fa fa-facebook-f"></span> </a> </li> <li> <a href="#" class="rounded-circle"> <span class="fa fa-google-plus"></span> </a> </li> <li> <a href="#" class="rounded-circle"> <span class="fa fa-twitter"></span> </a> </li> </ul> </div>  </div>   <div class="pt-lg-4 pt-3 text-md-left text-center"> <p class="copy-right-grids mt-lg-1">Copyright © 2019.Company name All rights reserved.<a target="_blank" href="http://www.programb.com/moban/">网页模板</a></p> </div>  </div> </footer>  </body> </html>

Processed: 0.013, SQL: 9