project 2 html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inzel</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@400;700&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/4bea204677.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body data-spy="scroll" data-target="#scroll" data-offset="71">
    <header id="home">
        <div id="indicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#indicators" data-slide-to="0" class="active"></li>
                <li data-target="#indicators" data-slide-to="1"></li>
                <li data-target="#indicators" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner text-capitalize">
                <div class="carousel-item active">
                    <img src="img/slide1.jpg" alt="...">
                    <div class="carousel-caption font-weight-bold">
                        <h5 class="display-3">Welcome to inzel</h5>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente nam eum vel quam
                            eligendi!</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="img/slide2.jpg" alt="...">
                    <div class="carousel-caption font-weight-bold">
                        <h5 class="display-3">We help people to build successful business</h5>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente nam eum vel quam
                            eligendi!</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="img/slide3.jpg" alt="...">
                    <div class="carousel-caption font-weight-bold">
                        <h5 class="display-3">smart and effective solutions for business</h5>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente nam eum vel quam
                            eligendi!</p>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#indicators" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </a>
            <a class="carousel-control-next" href="#indicators" data-slide="next">
                <span class="carousel-control-next-icon"></span>
            </a>
        </div>
    </header>
    <nav class="navbar sticky-top navbar-expand-md navbar-dark bg-success" id="scroll">
        <div class="container">
            <a class="navbar-brand font-weight-bold" href="#">Inzel</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navid">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navid">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#home">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#team">Team</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#faq">F.A.Q</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <section id="about" class="about py-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-5 pt-2">
                    <img src="img/about.jpg" alt="">
                </div>
                <div class="col-lg-7 pt-5 pt-lg-0">
                    <h3 class="h2 font-weight-bold pb-2">Voluptatem dignissimos provident quasi</h3>
                    <p class="text-muted pb-2">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit
                    </p>
                    <div class="row">
                        <div class="col-md-6">
                            <i class="fas fa-file-invoice-dollar fa-2x float-left text-success"></i>
                            <div class="content">
                                <h5 class="font-weight-bold">Finance management</h5>
                                <p class="text-muted">Consequuntur sunt aut quasi enim aliquam quae harum pariatur
                                    laboris nisi ut aliquip
                                </p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <i class="fas fa-university fa-2x float-left text-success"></i>
                            <div class="content">
                                <h5 class="font-weight-bold">Banking investigations</h5>
                                <p class="text-muted">Consequuntur sunt aut quasi enim aliquam quae harum pariatur
                                    laboris nisi ut aliquip
                                </p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <i class="fas fa-wallet fa-2x float-left text-success"></i>
                            <div class="content">
                                <h5 class="font-weight-bold">Market research</h5>
                                <p class="text-muted">Consequuntur sunt aut quasi enim aliquam quae harum pariatur
                                    laboris nisi ut aliquip
                                </p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <i class="fas fa-dumbbell fa-2x float-left text-success"></i>
                            <div class="content">
                                <h5 class="font-weight-bold">Strong business</h5>
                                <p class="text-muted">Consequuntur sunt aut quasi enim aliquam quae harum pariatur
                                    laboris nisi ut aliquip
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="subscribe">
        <div class="jumbotron jumbotron-fluid">
            <div class="container text-center">
                <h2 class="font-weight-bold text-success">Join Our Newsletter</h2>
                <p class="lead mb-5">This is a modified jumbotron that occupies the entire horizontal space of its
                    parent.</p>
                <button class="btn btn-lg btn-success px-5" data-toggle="modal"
                    data-target="#subscribeform">SUBSCRIBE</button>
            </div>
        </div>
        <div class="modal fade" id="subscribeform">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header text-center bg-success text-white">
                        <h5 class="modal-title">Subscribe to our newsletter</h5>
                        <button type="button" class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <label class="col-form-label">Your Name:</label>
                                <input type="text" class="form-control">
                            </div>
                            <div class="form-group">
                                <label class="col-form-label">Email Address:</label>
                                <input type="email" class="form-control">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-success">Send message</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section class="team" id="team">
        <div class="container py-5">
            <div class="section-header text-center pb-5">
                <h2 class="text-success font-weight-bold h1">OUR TEAM</h2>
                <p class="text-muted">Sit sint consectetur velit quisquam cupiditate impedit suscipit alias</p>
            </div>
            <div class="row">
                <div class="single-card col-md-4 px-3">
                    <div class="card">
                        <img class="card-img-top" src="img/team-1.jpg" alt="Card image cap">
                        <div class="card-body">
                            <h4 class="card-title text-center text-success font-weight-bold">Walter White</h4>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk
                                of the card's content.</p>
                            <div class="social text-center bg-success py-1">
                                <a href="#" class="card-link text-white"><i class="fa fa-facebook"></i></a>
                                <a href="#" class="card-link text-white"><i class="fa fa-twitter"></i></a>
                                <a href="#" class="card-link text-white"><i class="fa fa-github"></i></a>
                                <a href="#" class="card-link text-white"><i class="fa fa-linkedin"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="single-card col-md-4 px-3">
                    <div class="card">
                        <img class="card-img-top" src="img/team-2.jpg" alt="Card image cap">
                        <div class="card-body">
                            <h4 class="card-title text-center text-success font-weight-bold">Sarah Jhonson</h4>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk
                                of the card's content.</p>
                            <div class="social text-center bg-success py-1">
                                <a href="#" class="card-link text-white"><i class="fa fa-facebook"></i></a>
                                <a href="#" class="card-link text-white"><i class="fa fa-twitter"></i></a>
                                <a href="#" class="card-link text-white"><i class="fa fa-github"></i></a>
                                <a href="#" class="card-link text-white"><i class="fa fa-linkedin"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="single-card col-md-4 px-3">
                    <div class="card">
                        <img class="card-img-top" src="img/team-3.jpg" alt="Card image cap">
                        <div class="card-body">
                            <h4 class="card-title text-center text-success font-weight-bold">William Anderson</h4>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk
                                of the card's content.</p>
                            <div class="social text-center bg-success py-1">
                                <a href="#" class="card-link text-white"><i class="fa fa-facebook"></i></a>
                                <a href="#" class="card-link text-white"><i class="fa fa-twitter"></i></a>
                                <a href="#" class="card-link text-white"><i class="fa fa-github"></i></a>
                                <a href="#" class="card-link text-white"><i class="fa fa-linkedin"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <section class="faq" id="faq">
        <div class="container py-5">
            <div class="section-header text-center pb-5">
                <h2 class="text-success font-weight-bold h1">F.A.Q </h2>
                <p class="text-muted">Frequently asked questions</p>
            </div>
            <div class="faq-list row">
                <ul class="list-unstyled col-md-9 mx-auto">
                    <li class="px-4 py-3 mb-3 bg-white rounded">
                        <i class="far fa-question-circle"></i>
                        <a data-toggle="collapse" href="#faq-list-1" class="pl-3 d-block">Feugiat scelerisque varius
                            morbi enunc?
                            <i class="fas fa-chevron-down icon-show"></i>
                            <i class="fas fa-chevron-up icon-close"></i>
                        </a>
                        <div id="faq-list-1" class="collapse show" data-parent=".faq-list">
                            <p class="pt-3">
                                Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Id interdum
                                velit laoreet id donec ultrices. Fringilla phasellus faucibus scelerisque eleifend donec
                                pretium. Est pellentesque elit ullamcorper dignissim. Mauris ultrices eros in cursus
                                turpis massa tincidunt dui.
                            </p>
                        </div>
                    </li>
                    <li class="px-4 py-3 mb-3 bg-white rounded">
                        <i class="far fa-question-circle"></i>
                        <a data-toggle="collapse" href="#faq-list-2" class="collapsed pl-3 d-block">Feugiat scelerisque
                            varius morbi enunc?
                            <i class="fas fa-chevron-down icon-show"></i>
                            <i class="fas fa-chevron-up icon-close"></i>
                        </a>
                        <div id="faq-list-2" class="collapse" data-parent=".faq-list">
                            <p class="pt-3">
                                Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Id interdum
                                velit laoreet id donec ultrices. Fringilla phasellus faucibus scelerisque eleifend donec
                                pretium. Est pellentesque elit ullamcorper dignissim. Mauris ultrices eros in cursus
                                turpis massa tincidunt dui.
                            </p>
                        </div>
                    </li>
                    <li class="px-4 py-3 mb-3 bg-white rounded">
                        <i class="far fa-question-circle"></i>
                        <a data-toggle="collapse" href="#faq-list-3" class="collapsed pl-3 d-block">Feugiat scelerisque
                            varius morbi enunc?
                            <i class="fas fa-chevron-down icon-show"></i>
                            <i class="fas fa-chevron-up icon-close"></i>
                        </a>
                        <div id="faq-list-3" class="collapse" data-parent=".faq-list">
                            <p class="pt-3">
                                Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Id interdum
                                velit laoreet id donec ultrices. Fringilla phasellus faucibus scelerisque eleifend donec
                                pretium. Est pellentesque elit ullamcorper dignissim. Mauris ultrices eros in cursus
                                turpis massa tincidunt dui.
                            </p>
                        </div>
                    </li>
                    <li class="px-4 py-3 mb-3 bg-white rounded">
                        <i class="far fa-question-circle"></i>
                        <a data-toggle="collapse" href="#faq-list-4" class="collapsed pl-3 d-block">Feugiat scelerisque
                            varius morbi enunc?
                            <i class="fas fa-chevron-down icon-show"></i>
                            <i class="fas fa-chevron-up icon-close"></i>
                        </a>
                        <div id="faq-list-4" class="collapse" data-parent=".faq-list">
                            <p class="pt-3">
                                Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Id interdum
                                velit laoreet id donec ultrices. Fringilla phasellus faucibus scelerisque eleifend donec
                                pretium. Est pellentesque elit ullamcorper dignissim. Mauris ultrices eros in cursus
                                turpis massa tincidunt dui.
                            </p>
                        </div>
                    </li>
                    <li class="px-4 py-3 mb-3 bg-white rounded">
                        <i class="far fa-question-circle"></i>
                        <a data-toggle="collapse" href="#faq-list-5" class="collapsed pl-3 d-block">Feugiat scelerisque
                            varius morbi enunc?
                            <i class="fas fa-chevron-down icon-show"></i>
                            <i class="fas fa-chevron-up icon-close"></i>
                        </a>
                        <div id="faq-list-5" class="collapse" data-parent=".faq-list">
                            <p class="pt-3">
                                Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Id interdum
                                velit laoreet id donec ultrices. Fringilla phasellus faucibus scelerisque eleifend donec
                                pretium. Est pellentesque elit ullamcorper dignissim. Mauris ultrices eros in cursus
                                turpis massa tincidunt dui.
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </section>
    <section id="contact" class="contact">
        <div class="container py-5">
            <div class="section-header text-center pb-5">
                <h2 class="text-success font-weight-bold h1">Contact</h2>
                <p class="text-muted">Get advice from our professionals</p>
            </div>
            <div class="row justify-content-center">
                <div class="col-lg-4 col-md-12">
                    <div class="info-box">
                        <i class="fas fa-map-marker-alt fa-2x text-success float-left pr-3"></i>
                        <h3>Our Address</h3>
                        <p class="text-muted pl-5 mb-0">A108 Adam Street, New York, NY 535022</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 mt-4 mt-lg-0">
                    <div class="info-box">
                        <i class="fa fa-envelope fa-2x text-success float-left pr-3"></i>
                        <h3>Email Us</h3>
                        <p class="text-muted pl-5 mb-0">info@example.com<br>contact@example.com</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 mt-4 mt-lg-0">
                    <div class="info-box">
                        <i class="fas fa-phone-alt fa-2x text-success float-left pr-3"></i>
                        <h3>Call Us</h3>
                        <p class="text-muted pl-5 mb-0">+1 5589 55488 55<br>+1 6678 254445 41</p>
                    </div>
                </div>
            </div>
            <form class="my-4">
                <div class="form-row">
                    <div class="col-md-6 form-group">
                        <input type="text" class="form-control" placeholder="Your Name">
                    </div>
                    <div class="col-md-6 form-group">
                        <input type="email" class="form-control" placeholder="Your Email">
                    </div>
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Subject">
                </div>
                <div class="form-group">
                    <textarea class="form-control" rows="5" placeholder="Message"></textarea>
                </div>
                <div class="text-center"><button type="submit" class=" btn btn-success">Send Message</button></div>
            </form>
        </div>
    </section>
    <footer class="bg-success">
        <div class="container py-4 pb-5 text-white">
            <div class="copyright float-left">
                © Copyright <strong>Inzel</strong>. All Rights Reserved
            </div>
            <div class="credits float-right">
                Designed by <a class="text-white font-weight-bold" href="https://digitshack.com/">Digitshack</a>
            </div>
        </div>
    </footer>
    <script src="jquery.js"></script>
    <script src="bootstrap.min.js"></script>
</body>

</html>

Leave a Reply

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