gympus html

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gympus</title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <script src="https://kit.fontawesome.com/4bea204677.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/responsive.css">
</head>

<body data-spy="scroll" data-target="#navbar" data-offset="0">
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light py-md-3 py-0" id="navbar">
            <div class="container">
                <a class="navbar-brand font-weight-bolder font-italic" href="#"><span
                        class="text-danger">Gym</span>pus</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ml-auto font-weight-bolder text-uppercase">
                        <li class="nav-item">
                            <a class="nav-link" href="#home">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#services">Services</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#classes">Classes</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#testimonial">Testimonials</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#gallery">Gallery</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div id="home" class="home">
            <div class="container">
                <div class="home-content">
                    <h1 class="font-weight-bolder font-italic text-uppercase text-white">
                        join us <br> to be stronger <br> than you
                    </h1>
                </div>
            </div>
        </div>
    </header>
    <section class="speciality">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-3 col-md-6 bg-secondary">
                    <div class="text-center p-5">
                        <div class="py-4">
                            <img src="assets/img/1.png" alt="icon">
                        </div>
                        <div class="features-content">
                            <h2 class="text-uppercase text-white font-weight-bolder font-italic pb-4">equipments</h2>
                            <p class="text-white-50">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                                officia deserunt mollit anim id est laborum.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 bg-dark">
                    <div class="text-center p-5">
                        <div class="py-4">
                            <img src="assets/img/2.png" alt="icon">
                        </div>
                        <div class="features-content">
                            <h2 class="section-title text-uppercase text-white font-weight-bolder font-italic pb-4">great pt</h2>
                            <p class="text-white-50">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                                officia deserunt mollit anim id est laborum.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 bg-secondary">
                    <div class="text-center p-5">
                        <div class="py-4">
                            <img src="assets/img/3.png" alt="icon">
                        </div>
                        <div class="features-content">
                            <h2 class="text-uppercase text-white font-weight-bolder font-italic pb-4">heart rate</h2>
                            <p class="text-white-50">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                                officia deserunt mollit anim id est laborum.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 bg-dark">
                    <div class="text-center p-5">
                        <div class="py-4">
                            <img src="assets/img/2.png" alt="icon">
                        </div>
                        <div class="features-content">
                            <h2 class="text-uppercase text-white font-weight-bolder font-italic pb-4">and more</h2>
                            <p class="text-white-50">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                                officia deserunt mollit anim id est laborum.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="service text-center" id="services">
        <h2 class="section-title text-uppercase font-weight-bolder font-italic display-3 pb-5">what you'll get</h2>
        <div class="container">
            <div class="row">
                <div class="col-lg-4">
                    <div class="card mb-4">
                        <img class="card-img-top" src="assets/img/service1.jpg" alt="Card image cap">
                        <div class="card-body py-5">
                            <h3 class="card-title font-weight-bolder font-italic pb-4">STRENGTH</h3>
                            <p class="card-text text-muted px-4">Some quick example text to build on the card title and
                                make up the bulk of the card's content.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card mb-4">
                        <img class="card-img-top" src="assets/img/service2.jpg" alt="Card image cap">
                        <div class="card-body py-5">
                            <h3 class="card-title font-weight-bolder font-italic pb-4">KICKBOXING</h3>
                            <p class="card-text text-muted px-4">Some quick example text to build on the card title and
                                make up the bulk of the card's content.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card mb-4">
                        <img class="card-img-top" src="assets/img/service3.jpg" alt="Card image cap">
                        <div class="card-body py-5">
                            <h3 class="card-title font-weight-bolder font-italic pb-4">FAT BURNING</h3>
                            <p class="card-text text-muted px-4">Some quick example text to build on the card title and
                                make up the bulk of the card's content.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="classes" id="classes">
        <h2 class="section-title text-center text-uppercase font-weight-bolder font-italic display-3 pb-5">the classes</h2>
        <div class="container">
            <div class="row">
                <div class="col-md-6 mb-5">
                    <div class="bg-white classes-item d-lg-flex d-block text-center text-lg-left">
                        <div class="thumb">
                            <img src="assets/img/class1.jpg" alt="thumb">
                        </div>
                        <div class="classes-info p-5">
                            <h3 class="font-weight-bold font-italic">YOGA</h3>
                            <p class="text-muted font-weight-bolder">Maximum: 10 people</p>
                            <h4 class="text-danger font-italic pb-5">$500/year</h4>
                            <a class="btn btn-outline-danger" href="#">JOIN NOW</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-5">
                    <div class="bg-white classes-item d-lg-flex d-block text-center text-lg-left">
                        <div class="thumb">
                            <img src="assets/img/class2.jpg" alt="thumb">
                        </div>
                        <div class="classes-info p-5">
                            <h3 class="font-weight-bold font-italic">AEROBIC</h3>
                            <p class="text-muted font-weight-bolder">Maximum: 10 people</p>
                            <h4 class="text-danger font-italic pb-5">$250/year</h4>
                            <a class="btn btn-outline-danger" href="#">JOIN NOW</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-5">
                    <div class="bg-white classes-item d-lg-flex d-block text-center text-lg-left">
                        <div class="thumb">
                            <img src="assets/img/class3.jpg" alt="thumb">
                        </div>
                        <div class="classes-info p-5">
                            <h3 class="font-weight-bold font-italic">ZUMBA</h3>
                            <p class="text-muted font-weight-bolder">Maximum: 10 people</p>
                            <h4 class="text-danger font-italic pb-5">$600/year</h4>
                            <a class="btn btn-outline-danger" href="#">JOIN NOW</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-5">
                    <div class="bg-white classes-item d-lg-flex d-block text-center text-lg-left">
                        <div class="thumb">
                            <img src="assets/img/class4.jpg" alt="thumb">
                        </div>
                        <div class="classes-info p-5">
                            <h3 class="font-weight-bold font-italic">DANCE SPORT</h3>
                            <p class="text-muted font-weight-bolder">Maximum: 10 people</p>
                            <h4 class="text-danger font-italic pb-5">$500/year</h4>
                            <a class="btn btn-outline-danger" href="#">JOIN NOW</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="testimonial" class="pt-5 container-fluid">
        <div id="indicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#indicators" data-slide-to="0" class=""></li>
                <li data-target="#indicators" data-slide-to="1" class=""></li>
                <li data-target="#indicators" data-slide-to="2" class="active"></li>
            </ol>
            <div class="carousel-inner pt-5 text-center text-white">
                <div class="carousel-item">
                    <img class="rounded-circle mb-5 border border-danger" src="assets/img/face1.jpg"
                        alt="First slide">
                    <blockquote class="blockquote">
                        <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
                            ante.</p>
                        <p class="blockquote-footer">Someone very popular!</p>
                    </blockquote>
                </div>
                <div class="carousel-item">
                    <img class="rounded-circle mb-5 border border-danger" src="assets/img/face2.jpg"
                        alt="Second slide">
                    <blockquote class="blockquote">
                        <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
                            ante.</p>
                        <p class="blockquote-footer">Someone very popular!</p>
                    </blockquote>
                </div>
                <div class="carousel-item active">
                    <img class="rounded-circle mb-5 border border-danger" src="assets/img/face3.jpg"
                        alt="Third slide">
                    <blockquote class="blockquote">
                        <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
                            ante.</p>
                        <p class="blockquote-footer">Someone very popular!</p>
                    </blockquote>
                </div>
            </div>
            <a class="carousel-control-prev" href="#indicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </a>
            <a class="carousel-control-next" href="#indicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon"></span>
            </a>
        </div>
    </section>
    <div class="gallery-section" id="gallery">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <a class="gallery-item" href="assets/img/1.jpg">
                        <img class="img-fluid" src="assets/img/1.jpg" alt="thumb">
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <a class="gallery-item" href="assets/img/2.jpg">
                        <img class="img-fluid" src="assets/img/2.jpg" alt="thumb">
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <a class="gallery-item" href="assets/img/3.jpg">
                        <img class="img-fluid" src="assets/img/3.jpg" alt="thumb">
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <a class="gallery-item" href="assets/img/4.jpg">
                        <img class="img-fluid" src="assets/img/4.jpg" alt="thumb">
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <a class="gallery-item" href="assets/img/5.jpg">
                        <img class="img-fluid" src="assets/img/5.jpg" alt="thumb">
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <a class="gallery-item" href="assets/img/6.jpg">
                        <img class="img-fluid" src="assets/img/6.jpg" alt="thumb">
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <a class="gallery-item" href="assets/img/7.jpg">
                        <img class="img-fluid" src="assets/img/7.jpg" alt="thumb">
                    </a>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6">
                    <a class="gallery-item" href="assets/img/8.jpg">
                        <img class="img-fluid" src="assets/img/8.jpg" alt="thumb">
                    </a>
                </div>
            </div>
        </div>
    </div>
    <footer id="contact">
        <div class="contact-widget py-5">
            <div class="container">
                <div class="text-center font-weight-bold font-italic text-uppercase small">
                    <a class="navbar-brand font-weight-bolder font-italic text-white" href="#"><span
                            class="text-danger">Gym</span>pus</a>
                    <p class="py-3">lounge 10 - palace building - 221b baker street - <br>london - united kingdom</p>
                    <ul class="info list-unstyled">
                        <li><span class="text-white">e :</span> <a
                                href="mailto:info@yourdomain.com">info@yourdomain.com</a></li>
                        <li><span class="text-white">p :</span> (+01). 234. 567. 890</li>
                    </ul>
                    <ul class="footer-social-share list-inline pt-4">
                        <li class="list-inline-item"><a href="#"><i class="fab fa-facebook fa-2x"></i></a></li>
                        <li class="list-inline-item"><a href="#"><i class="fas fa-basketball-ball fa-2x"></i></a></li>
                        <li class="list-inline-item"><a href="#"><i class="fab fa-skype fa-2x"></i></a></li>
                        <li class="list-inline-item"><a href="#"><i class="fab fa-youtube fa-2x"></i></a></li>
                        <li class="list-inline-item"><a href="#"><i class="fab fa-twitter fa-2x"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer-copyright-area py-4">
            <div class="container">
                <div class="text-center">
                    <ul class="list-inline mb-0">
                        <li class="list-inline-item">© Canopus. All right reserved</li>
                        <li class="list-inline-item"><a href="#">Terms &amp; coditions</a></li>
                        <li class="list-inline-item"><a href="#">Our policies</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>

    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/jquery.magnific-popup.min.js"></script>
    <script src="assets/js/script.js"></script>
</body>

</html>

Leave a Reply

Your email address will not be published. Required fields are marked *