-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path0-homepage.html
1 lines (1 loc) · 21.5 KB
/
0-homepage.html
1
<!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"><link rel="icon" type="image/png" href="images/favicon.png"><link rel="icon" type="image/x-icon" href="images/favicon.ico"><link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Coiny&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><link rel="stylesheet" href="styles.css"><title>Smile School - Homepage</title></head><body><div class="container-fluid p-0"><header class="container-fluid p-4"><nav class="container d-flex p-3 justify-content-between align-items-sm-center flex-sm-row flex-column position-relative"><input type="checkbox" name="nav-toggle" id="nav-toggle" class="d-none"><label for="nav-toggle" id="nav-menu-btn" class="d-block d-sm-none"></label><a href="0-homepage.html"><div class="logo d-flex align-items-center flex-sm-row flex-column"><img src="images/smile_off.png" alt="Smile School Logo" class="logo-smile mb-3 mb-sm-0"><img src="images/logo.png" alt="Smile School Logo" class="logo-words mx-3"></div></a><ul class="nav header-nav text-uppercase font-weight-bold mx-auto mx-md-0 flex-column flex-sm-row text-center mt-3 mt-sm-0"><li class="nav-item mx-3"><a href="0-courses.html" class="nav-link text-light">Courses</a></li><li class="nav-item mx-3"><a href="0-pricing.html" class="nav-link text-light">Pricing</a></li><li class="nav-item mx-3"><a href="#" class="nav-link text-light" data-toggle="modal" data-target="#loginModal">Login</a></li></ul></nav><div class="container hero-content d-flex justify-content-center flex-wrap"><h1 class="display-1 text-light font-weight-bold text-center hero-title">Get schooled</h1><div class="subtitle container font-weight-bold text-uppercase d-flex justify-content-center text-light"><span class="mx-4">Smiles</span><span class="mx-4">Grin</span><span class="mx-4">Laugh</span></div><button class="btn btn-primary rounded-pill px-4 py-2 mt-4 mb-5 text-uppercase font-weight-bold shadow-lg">Register for Free</button><div class="container pros-section text-center"><h2 class="h2 text-light text-center"><span class="learn font-weight-bold">Learn</span>from the pros</h2><div class="row text-light pros"><div class="col-6 col-sm-3 d-flex align-items-center flex-column"><img src="images/profile_1.jpg" alt="Phillip Massey Icon" class="rounded-circle"><h3 class="h5 mt-3 mb-1 font-weight-bold">Phillip Massey</h3><p class="font-italic my-1">‹‹ Smile of the year ››</p><p class="font-italic">2018-2019</p></div><div class="col-6 col-sm-3 d-flex align-items-center flex-column"><img src="images/profile_2.jpg" alt="Nannie Lawrence Icon" class="rounded-circle"><h3 class="h5 mt-3 mb-1 font-weight-bold">Nannie Lawrence</h3><p class="font-italic my-1">Best ‹‹ little smile ››</p><p class="font-italic">2017</p></div><div class="w-100 d-block d-sm-none"></div><div class="col-6 col-sm-3 d-flex align-items-center flex-column"><img src="images/profile_3.jpg" alt="Bruce Walters Icon" class="rounded-circle"><h3 class="h5 mt-3 mb-1 font-weight-bold">Bruce Walters</h3><p class="font-italic my-1">Best ‹‹ Friend Smile ››</p><p class="font-italic">live performance 2019</p></div><div class="col-6 col-sm-3 d-flex align-items-center flex-column"><img src="images/profile_4.jpg" alt="Henry Hughes Icon" class="rounded-circle"><h3 class="h5 mt-3 mb-1 font-weight-bold">Henry Hughes</h3><p class="font-italic my-1">‹‹ 24h smiles ›› winner</p><p class="font-italic">2016-2019</p></div></div></div></div></header><main class="container-fluid p-0"><div class="container-fluid p-0 testimonials"><div class="container"><div class="row"><div class="col-sm-12"><div id="testimonial-carousel" class="carousel slide w-100" data-ride="carousel"><div class="carousel-inner w-100" role="listbox"><div class="carousel-item active"><div class="row align-items-center pt-5"><img src="images/profile_5.jpg" alt="Person Name Avatar" class="rounded-circle"><div class="text-white testimonial-text"><h4>‹‹ Those tutorials are concise and go straight to the point. I can't think of a better place to learn smiling. And it's so fun!</h4><p class="font-weight-bold">Person Name</p><p class="font-italic">weather presenter</p></div></div></div><div class="carousel-item"><div class="d-flex align-items-center pt-5"><img src="images/profile_5.jpg" alt="Person Name Avatar" class="rounded-circle"><div class="text-white testimonial-text"><h4>‹‹ Those tutorials are concise and go straight to the point. I can't think of a better place to learn smiling. And it's so fun!</h4><p class="font-weight-bold">Person Name</p><p class="font-italic">weather presenter</p></div></div></div><div class="carousel-item"><div class="d-flex align-items-center pt-5"><img src="images/profile_5.jpg" alt="Person Name Avatar" class="rounded-circle"><div class="text-white testimonial-text"><h4>‹‹ Those tutorials are concise and go straight to the point. I can't think of a better place to learn smiling. And it's so fun!</h4><p class="font-weight-bold">Person Name</p><p class="font-italic">weather presenter</p></div></div></div></div><a href="#testimonial-carousel" class="carousel-control-prev" role="button" data-slide="prev"><img src="images/arrow_white_left.png" alt="" width="40"><span class="sr-only">Previous</span></a><a href="#testimonial-carousel" class="carousel-control-next" role="button" data-slide="next"><img src="images/arrow_white_right.png" alt="" width="40"><span class="sr-only">Next</span></a></div></div></div></div></div><div class="container-fluid py-5" id="tutorial-section"><div class="container my-3"><h2 class="font-weight-light text-center mb-5">Most <span class="learn">popular</span>tutorials</h2><div class="row mx-auto my-auto"><div id="popular-carousel" class="carousel slide w-100" data-ride="carousel"><div class="carousel-inner w-100" role="listbox"><div class="carousel-item active"><div class="col-md-6 col-lg-3"><div class="card card-body"><div class="video"><img class="img-fluid" src="images/thumbnail_1.jpg" alt=""><img src="images/play.png" alt="" class="play-btn"></div><h5 class="card-title font-weight-bold mt-3">Diagonal Smile</h5><p class="card-text">Lorem ipsum dolor sit amet, sonsect adipiscing elit, sed do eiusmod.</p><div class="tutorial-author d-flex align-items-center"><img src="images/profile_1.jpg" alt="" class="rounded-circle"><span class="ml-2 font-weight-bold">Phillip Massey</span></div><div class="mt-3 tutorial-info d-flex justify-content-between align-items-center"><span class="rating"><img src="images/star_on.png" alt=""><img src="images/star_on.png" alt=""><img src="images/star_on.png" alt=""><img src="images/star_on.png" alt=""><img src="images/star_off.png" alt=""></span><span class="length font-weight-bold">8 min</span></div></div></div></div><div class="carousel-item"><div class="col-md-6 col-lg-3"><div class="card card-body"><div class="video"><img class="img-fluid" src="images/thumbnail_2.jpg" alt=""><img src="images/play.png" alt="" class="play-btn"></div><h5 class="card-title font-weight-bold mt-3">Diagonal Smile</h5><p class="card-text">Lorem ipsum dolor sit amet, sonsect adipiscing elit, sed do eiusmod.</p><div class="tutorial-author d-flex align-items-center"><img src="images/profile_1.jpg" alt="" class="rounded-circle"><span class="ml-2 font-weight-bold">Phillip Massey</span></div><div class="mt-3 tutorial-info d-flex justify-content-between align-items-center"><span class="rating"><img src="images/star_on.png" alt=""><img src="images/star_on.png" alt=""><img src="images/star_on.png" alt=""><img src="images/star_on.png" alt=""><img src="images/star_off.png" alt=""></span><span class="length font-weight-bold">8 min</span></div></div></div></div><div class="carousel-item"><div class="col-md-6 col-lg-3"><div class="card card-body"><div class="video"><img class="img-fluid" src="images/thumbnail_3.jpg" alt=""><img src="images/play.png" alt="" class="play-btn"></div><h5 class="card-title font-weight-bold mt-3">Diagonal Smile</h5><p class="card-text">Lorem ipsum dolor sit amet, sonsect adipiscing elit, sed do eiusmod.</p><div class="tutorial-author d-flex align-items-center"><img src="images/profile_1.jpg" alt="" class="rounded-circle"><span class="ml-2 font-weight-bold">Phillip Massey</span></div><div class="mt-3 tutorial-info d-flex justify-content-between align-items-center"><span class="rating"><img src="images/star_on.png" alt=""><img src="images/star_on.png" alt=""><img src="images/star_on.png" alt=""><img src="images/star_on.png" alt=""><img src="images/star_off.png" alt=""></span><span class="length font-weight-bold">8 min</span></div></div></div></div><div class="carousel-item"><div class="col-md-6 col-lg-3"><div class="card card-body"><div class="video"><img class="img-fluid" src="images/thumbnail_4.jpg" alt=""><img src="images/play.png" alt="" class="play-btn"></div><h5 class="card-title font-weight-bold mt-3">Diagonal Smile</h5><p class="card-text">Lorem ipsum dolor sit amet, sonsect adipiscing elit, sed do eiusmod.</p><div class="tutorial-author d-flex align-items-center"><img src="images/profile_1.jpg" alt="" class="rounded-circle"><span class="ml-2 font-weight-bold">Phillip Massey</span></div><div class="mt-3 tutorial-info d-flex justify-content-between align-items-center"><span class="rating"><img src="images/star_on.png" alt=""><img src="images/star_on.png" alt=""><img src="images/star_on.png" alt=""><img src="images/star_on.png" alt=""><img src="images/star_off.png" alt=""></span><span class="length font-weight-bold">8 min</span></div></div></div></div></div><a class="carousel-control-prev w-auto" href="#popular-carousel" role="button" data-slide="prev"><img src="images/arrow_black_left.png" alt="" width="20"><span class="sr-only">Previous</span></a><a class="carousel-control-next w-auto" href="#popular-carousel" role="button" data-slide="next"><img src="images/arrow_black_right.png" alt="" width="20"><span class="sr-only">Next</span></a></div></div></div></div><div class="container-fluid bg-section text-white py-5"><div class="container d-flex justify-content-center flex-wrap text-center"><h2 class=" w-100"><span class="learn">Free</span>membership</h2><div class="row membership-section mt-5 w-100"><div class="col-md-6 col-lg-3 d-flex align-items-center flex-column my-5 w-50 mx-auto"><img src="images/smile_on.png" alt="Phillip Massey Icon"><h3 class="h5 mt-3 mb-1 font-weight-bold">Lorem ipsum</h3><p class="my-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div class="col-md-6 col-lg-3 d-flex align-items-center flex-column my-5 w-50 mx-auto"><img src="images/smile_on.png" alt="Phillip Massey Icon"><h3 class="h5 mt-3 mb-1 font-weight-bold">Lorem ipsum</h3><p class="my-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div class="w-100 d-block d-sm-none"></div><div class="col-md-6 col-lg-3 d-flex align-items-center flex-column my-5 w-50 mx-auto"><img src="images/smile_on.png" alt="Phillip Massey Icon"><h3 class="h5 mt-3 mb-1 font-weight-bold">Lorem ipsum</h3><p class="my-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div class="col-md-6 col-lg-3 d-flex align-items-center flex-column my-5 w-50 mx-auto"><img src="images/smile_on.png" alt="Phillip Massey Icon"><h3 class="h5 mt-3 mb-1 font-weight-bold">Lorem ipsum</h3><p class="my-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div><button class="btn btn-primary rounded-pill px-4 py-2 mt-5 text-uppercase font-weight-bold shadow-lg">Register for Free</button></div></div><div class="container-fluid py-5" id="latest-section"><div class="container my-3"><h2 class="font-weight-light text-center mb-5"><span class="learn">Latest</span>videos</h2><div class="row mx-auto my-auto"><div id="latest-carousel" class="carousel slide w-100" data-ride="carousel"><div class="carousel-inner w-100" role="listbox"><div class="carousel-item active"><div class="col-md-6 col-lg-3"><div class="card card-body"><div class="video"><img class="img-fluid" src="images/thumbnail_1.jpg" alt=""><img src="images/play.png" alt="" class="play-btn"></div><h5 class="card-title font-weight-bold mt-3">Diagonal Smile</h5><p class="card-text">Lorem ipsum dolor sit amet, sonsect adipiscing elit, sed do eiusmod.</p><div class="tutorial-author d-flex align-items-center"><img src="images/profile_1.jpg" alt="" class="rounded-circle"><span class="ml-2 font-weight-bold">Phillip Massey</span></div><div class="mt-3 tutorial-info d-flex justify-content-between align-items-center"><span class="rating"><img src="images/star_on.png" alt=""><img src="images/star_on.png" alt=""><img src="images/star_on.png" alt=""><img src="images/star_on.png" alt=""><img src="images/star_off.png" alt=""></span><span class="length font-weight-bold">8 min</span></div></div></div></div><div class="carousel-item"><div class="col-md-6 col-lg-3"><div class="card card-body"><div class="video"><img class="img-fluid" src="images/thumbnail_2.jpg" alt=""><img src="images/play.png" alt="" class="play-btn"></div><h5 class="card-title font-weight-bold mt-3">Diagonal Smile</h5><p class="card-text">Lorem ipsum dolor sit amet, sonsect adipiscing elit, sed do eiusmod.</p><div class="tutorial-author d-flex align-items-center"><img src="images/profile_1.jpg" alt="" class="rounded-circle"><span class="ml-2 font-weight-bold">Phillip Massey</span></div><div class="mt-3 tutorial-info d-flex justify-content-between align-items-center"><span class="rating"><img src="images/star_on.png" alt=""><img src="images/star_on.png" alt=""><img src="images/star_on.png" alt=""><img src="images/star_on.png" alt=""><img src="images/star_off.png" alt=""></span><span class="length font-weight-bold">8 min</span></div></div></div></div><div class="carousel-item"><div class="col-md-6 col-lg-3"><div class="card card-body"><div class="video"><img class="img-fluid" src="images/thumbnail_3.jpg" alt=""><img src="images/play.png" alt="" class="play-btn"></div><h5 class="card-title font-weight-bold mt-3">Diagonal Smile</h5><p class="card-text">Lorem ipsum dolor sit amet, sonsect adipiscing elit, sed do eiusmod.</p><div class="tutorial-author d-flex align-items-center"><img src="images/profile_1.jpg" alt="" class="rounded-circle"><span class="ml-2 font-weight-bold">Phillip Massey</span></div><div class="mt-3 tutorial-info d-flex justify-content-between align-items-center"><span class="rating"><img src="images/star_on.png" alt=""><img src="images/star_on.png" alt=""><img src="images/star_on.png" alt=""><img src="images/star_on.png" alt=""><img src="images/star_off.png" alt=""></span><span class="length font-weight-bold">8 min</span></div></div></div></div><div class="carousel-item"><div class="col-md-6 col-lg-3"><div class="card card-body"><div class="video"><img class="img-fluid" src="images/thumbnail_4.jpg" alt=""><img src="images/play.png" alt="" class="play-btn"></div><h5 class="card-title font-weight-bold mt-3">Diagonal Smile</h5><p class="card-text">Lorem ipsum dolor sit amet, sonsect adipiscing elit, sed do eiusmod.</p><div class="tutorial-author d-flex align-items-center"><img src="images/profile_1.jpg" alt="" class="rounded-circle"><span class="ml-2 font-weight-bold">Phillip Massey</span></div><div class="mt-3 tutorial-info d-flex justify-content-between align-items-center"><span class="rating"><img src="images/star_on.png" alt=""><img src="images/star_on.png" alt=""><img src="images/star_on.png" alt=""><img src="images/star_on.png" alt=""><img src="images/star_off.png" alt=""></span><span class="length font-weight-bold">8 min</span></div></div></div></div></div><a class="carousel-control-prev w-auto" href="#latest-carousel" role="button" data-slide="prev"><img src="images/arrow_black_left.png" alt="" width="20"><span class="sr-only">Previous</span></a><a class="carousel-control-next w-auto" href="#latest-carousel" role="button" data-slide="next"><img src="images/arrow_black_right.png" alt="" width="20"><span class="sr-only">Next</span></a></div></div></div></div></main><footer class="font-small bg-section text-white"><div class="container-fluid text-center px-5"><div class="row align-items-center justify-content-space-between mt-4"><div class="col-sm-3 mr-auto my-4"><a class="navbar-brand text-white font-weight-bold" href="0-homepage.html"><img class="logo-smile mr-2" src="images/smile_off.png"/><img class="logo-smile" src="images/logo.png"/></a></div><div class="col-sm-3 ml-auto"><div class="list-unstyled d-flex justify-content-center my-4"><div><a href="https://www.linkedin.com/in/carlos-andres-garcia-morales-036992183/"><span class="social text-white font-weight-normal m-2"><svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="25" height="25"><title>Follow in Facebook </title><path d="M23.998 12c0-6.628-5.372-12-11.999-12C5.372 0 0 5.372 0 12c0 5.988 4.388 10.952 10.124 11.852v-8.384H7.078v-3.469h3.046V9.356c0-3.008 1.792-4.669 4.532-4.669 1.313 0 2.686.234 2.686.234v2.953H15.83c-1.49 0-1.955.925-1.955 1.874V12h3.328l-.532 3.469h-2.796v8.384c5.736-.9 10.124-5.864 10.124-11.853z"/></svg></span></a></div><div><a href="https://twitter.com/karlgarmor"><span class="social text-white font-weight-normal m-2"><svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="25" height="25"><title>Follow in Twitter</title><path d="M23.954 4.569a10 10 0 0 1-2.825.775 4.958 4.958 0 0 0 2.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 0 0-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 0 0-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 0 1-2.228-.616v.061a4.923 4.923 0 0 0 3.946 4.827 4.996 4.996 0 0 1-2.212.085 4.937 4.937 0 0 0 4.604 3.417 9.868 9.868 0 0 1-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 0 0 7.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 0 0 2.46-2.548l-.047-.02z"/></svg></span></a></div><div><a href="https://www.instagram.com/karlgarmor/?hl=es-la"><span class="social text-white font-weight-normal m-2"><svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="25" height="25"><title>Follow in Instagram</title><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913a5.885 5.885 0 0 0 1.384 2.126A5.868 5.868 0 0 0 4.14 23.37c.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558a5.898 5.898 0 0 0 2.126-1.384 5.86 5.86 0 0 0 1.384-2.126c.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913a5.89 5.89 0 0 0-1.384-2.126A5.847 5.847 0 0 0 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227a3.81 3.81 0 0 1-.899 1.382 3.744 3.744 0 0 1-1.38.896c-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421a3.716 3.716 0 0 1-1.379-.899 3.644 3.644 0 0 1-.9-1.38c-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 1 0 0-12.324zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405a1.441 1.441 0 0 1-2.88 0 1.44 1.44 0 0 1 2.88 0z"/></svg></span></a></div></div></div></div><div class="text-center py-3 text-secondary"><small>©smileschool 2020</small></div></div></footer><div id="loginModal" class="modal" tabindex="-1"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header testimonials"><h5 class="modal-title"><img class="logo-smile mr-2" src="images/smile_off.png"/><img class="logo-smile" src="images/logologin.png"/></h5><button type="button" class="close text-white" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body"><form><div class="form-group row"><label for="staticEmail" class="col-sm-2 col-form-label font-weight-bolder">Email</label><div class="col-sm-10"><input type="text" class="form-control-plaintext" id="staticEmail" placeholder="Carlos@example.com"></div></div><div class="form-group row"><label for="inputPassword" class="col-sm-2 col-form-label font-weight-bolder">Password</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword"></div></div></form></div><div class="modal-footer"><button type="button" class="btn p-3 px-5 text-white mx-auto font-weight-bolder">ACCESS</button></div></div></div></div></div><script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="scripts.js"></script></body></html>