index.html

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/vendors/bootstrap/css/bootstrap.min.css">
    <!-- animation CSS -->
    <link rel="stylesheet" href="assets/vendors/animation/animate.css">
    <!-- icon CSS -->
    <link rel="stylesheet" href="assets/vendors/elegant-icon/style.css">
    <!-- animation CSS -->
    <link rel="stylesheet" href="assets/vendors/slick/slick.css">
    <link rel="stylesheet" href="assets/vendors/slick/slick-theme.css">
    <link rel="stylesheet" href="assets/vendors/spilitting/splitting.css">
    <link rel="stylesheet" href="assets/vendors/nice-select/css/nice-select.css">
    <!-- Custome CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/responsive.css">
    <title> CSS3</title>
</head>

<body>
    <div class="body_wrapper dark_bg">
        <div id="preloader">
            <div class="product_name"> CSS3</div>
        </div>
        <header class="header_area">
            <div class="container">
                <div class="d-flex align-items-center justify-content-between">
                    <a href="#" class="logo">
                        <img src="assets/img/logo.png" alt="">
                        <img src="assets/img/logo.png" alt="">
                    </a>

                    <div class="burger_menu">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
        </header>
        <div class="offcanvas_menu">
            <ul class="navbar-nav side_menu">
                <li class="nav-item dropdown submenu active">
                    <a class="nav-link dropdown-toggle" href="index.html" role="button" aria-haspopup="true"
                        aria-expanded="false">
                        Home
                    </a>
                    <!-- <ul class="dropdown-menu"> -->

                    <!-- <li class="nav-item active"><a class="nav-link" href="index.html">Home Two</a>
                </li> -->
                    <!-- </ul> -->
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="about.html">
                        About
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="details.html">
                        Details
                    </a>
                </li>
            </ul>
        </div>
        <!-- main_slider_area -->
        <section class="main_slider_area">
            <div class="container">
                <div class="main_slider ">
                    <div class="slider_item">
                        <div class="row">
                            <div class="col-md-4 d-flex align-items-center">
                                <div class="slider_content">
                                    <h2 data-splitting>Animation <br>Example</h2>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="slider_img_info">
                                    <div class="slider_img">
                                        <img src="assets/img/home-one/slider_img.jpg" alt="">
                                    </div>
                                    <ul class="social_icon">
                                        <li><a href="#">Facebook</a></li>
                                        <li><a href="#">Twitter</a></li>
                                        <li><a href="#">Instagram</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="slider_item">
                        <div class="row">
                            <div class="col-md-4 d-flex align-items-center">
                                <div class="slider_content">
                                    <h2 data-splitting>Creative Fruit<br> Shop</h2>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="slider_img_info">
                                    <div class="slider_img">
                                        <img src="assets/img/home-one/slider_img.jpg" alt="">
                                    </div>
                                    <ul class="social_icon">
                                        <li><a href="#">Facebook</a></li>
                                        <li><a href="#">Twitter</a></li>
                                        <li><a href="#">Instagram</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slider_nav">
                    <a href="#" class="prev"><i class="arrow_left"></i></a>
                    <a href="#" class="next"><i class="arrow_right"></i></a>
                </div>
            </div>
        </section>
        <!-- main_slider_area -->
        <!-- about_area -->
        <section class="about_area">
            <div class="container">
                <div class="sec_title text-center wow fadeInUp">
                    <h2>Creative Animations <br>Fade In UP</h2>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="about_content text-right wow fadeInUp">
                            <p>Since we started, our greatest motivation was and is and will continue to be the
                                satisfaction of our customers. Our creations are constantly studying new solutions for
                                you.
                            </p>
                            <a href="#" class="theme_btn">Learn more about the way of working</a>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="fact_item wow fadeInUp" data-wow-delay="0.2s">
                            <div class="counter">68</div><i class="arrow_up"></i>
                            <p>Experts at work</p>
                        </div>
                        <div class="fact_item wow fadeInUp" data-wow-delay="0.3s">
                            <div class="counter">3.7</div>K<i class="arrow_up"></i>
                            <p>Experts at work</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- about_area -->
        <!-- portfolio_area -->
        <section class="portfolio_area">
            <div class="container">
                <div class="row portfolio_gallery">
                    <div class="col-lg-4 col-md-6">
                        <div class="portfolio_item">
                            <div class="overlay_img">
                                <img src="assets/img/home-one/02.jpg" alt="">
                                <div class="content">
                                    <a href="#">
                                        <h3>CSS3 Transform<br> design</h3>
                                    </a>
                                    <a href="#" class="theme_btn">See project</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="portfolio_item">
                            <div class="overlay_img">
                                <img src="assets/img/home-one/01.jpg" alt="">
                                <div class="content">
                                    <a href="#">
                                        <h3>CSS3 Transform<br> design</h3>
                                    </a>
                                    <a href="#" class="theme_btn">See project</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="portfolio_item">
                            <div class="overlay_img">
                                <img src="assets/img/home-one/03.jpg" alt="">
                                <div class="content">
                                    <a href="#">
                                        <h3>CSS3 Transform<br> design</h3>
                                    </a>
                                    <a href="#" class="theme_btn">See project</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="portfolio_item">
                            <div class="overlay_img">
                                <img src="assets/img/home-one/05.jpg" alt="">
                                <div class="content">
                                    <a href="#">
                                        <h3>CSS3 Transform<br> design</h3>
                                    </a>
                                    <a href="#" class="theme_btn">See project</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="portfolio_item">
                            <div class="overlay_img">
                                <img src="assets/img/home-one/06.jpg" alt="">
                                <div class="content">
                                    <a href="#">
                                        <h3>CSS3 Transform<br> design</h3>
                                    </a>
                                    <a href="#" class="theme_btn">See project</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="portfolio_item">
                            <div class="overlay_img">
                                <img src="assets/img/home-one/04.jpg" alt="">
                                <div class="content">
                                    <a href="#">
                                        <h3>CSS3 Transform<br> design</h3>
                                    </a>
                                    <a href="#" class="theme_btn">See project</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="portfolio_item">
                            <div class="overlay_img">
                                <img src="assets/img/home-one/08.jpg" alt="">
                                <div class="content">
                                    <a href="#">
                                        <h3>CSS3 Transform<br> design</h3>
                                    </a>
                                    <a href="#" class="theme_btn">See project</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="portfolio_item">
                            <div class="overlay_img">
                                <img src="assets/img/home-one/07.jpg" alt="">
                                <div class="content">
                                    <a href="#">
                                        <h3>CSS3 Transform<br> design</h3>
                                    </a>
                                    <a href="#" class="theme_btn">See project</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="portfolio_item">
                            <div class="overlay_img">
                                <img src="assets/img/home-one/09.jpg" alt="">
                                <div class="content">
                                    <a href="#">
                                        <h3>CSS3 Transform<br> design</h3>
                                    </a>
                                    <a href="#" class="theme_btn">See project</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text-right">
                    <a href="#" class="theme_btn">See all projects</a>
                </div>
            </div>
        </section>
        <!-- portfolio_area -->
        <!-- solution_area -->
        <section class="solution_area">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="sec_title wow fadeInDown">
                            <h2>Solutions We Offer</h2>
                        </div>
                    </div>
                    <div class="col-lg-3 offset-lg-1 col-sm-6 wow fadeInDown" data-wow-delay="0.2s">
                        <div class="solution_item first">
                            <h3>Marketing for your brand</h3>
                            <p>We create your brand from scratch, with a basis for its global expansion</p>
                            <div class="arrow_btn"><a href="#" class="theme_btn">See more<i class="arrow_right"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 offset-lg-1 col-sm-6 wow fadeInDown" data-wow-delay="0.4s">
                        <div class="solution_item">
                            <h3>Creation of trademark</h3>
                            <p>We create your brand from scratch, with a basis for its global expansion</p>
                            <div class="arrow_btn"><a href="#" class="theme_btn">See more<i class="arrow_right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- solution_area -->
        <!-- testimonial area -->
        <section class="testimonial_area">
            <div class="container">
                <div class="testimonial_slider">
                    <div class="item row">
                        <div class="col-lg-7">
                            <div class="testimonial_content">
                                <div class="icon">“</div>
                                <h3>CSS3 <span> is giving us wonderful results,</span> we will continue
                                    working together.</h3>
                                <div class="name">CSS3</div>
                            </div>
                        </div>
                        <div class="col-lg-5">
                            <div class="testimonial_img">
                                <img src="assets/img/home-one/testimonial1_img.jpg" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="item row">
                        <div class="col-lg-7">
                            <div class="testimonial_content">
                                <div class="icon">“</div>
                                <h3>CSS3 <span> is giving us wonderful results,</span> we will continue
                                    working together.</h3>
                                <div class="name">CSS3</div>
                            </div>
                        </div>
                        <div class="col-lg-5">
                            <div class="testimonial_img">
                                <img src="assets/img/home-one/testimonial_img.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- testimonial area -->

        <!-- contact area -->
        <section class="contact_area black_bg">
            <div class="container">
                <div class="row">
                    <div class="col-lg-5 wow fadeInDown" data-wow-delay="0.1s">
                        <div class="contact_info">
                            <h2>10 N Florida St, USA. USA.</h2>
                            <p>Our opening hours are from Mon - Fri 08:00 to 17:00 you can also contact us through our
                                online channel</p>
                        </div>
                    </div>
                    <div class="col-lg-6 offset-lg-1 wow fadeInDown" data-wow-delay="0.3s">
                        <form action="#" class="row contact_form">
                            <div class="col-lg-6 form-group">
                                <input type="text" class="form-control" placeholder="Your email *">
                            </div>
                            <div class="col-lg-6 form-group">
                                <input type="text" class="form-control" placeholder="Phone *">
                            </div>
                            <div class="col-lg-12 form-group">
                                <select class="form-control" id="exampleFormControlSelect1">
                                    <option>I need to do marketing for my brand</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <button type="submit" class="submit_btn">
                                    Send Message
                                </button>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
                                    <label class="form-check-label" for="defaultCheck1">
                                        I agree to receive information
                                    </label>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="border_bottom"></div>
            </div>
        </section>
        <!-- contact area -->
        <!-- footer area -->
        <footer class="black_bg">
            <div class="footer_top">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-delay="0.1s">
                            <div class="f_widget about-widget">
                                <a href="#" class="f_logo"><img src="assets/img/logo.png" alt=""></a>
                                <p>Our main objective is to help people achieve their business goals and make their
                                    business an efficient organization from all sides.</p>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-delay="0.3s">
                            <div class="f_widget social_widget">
                                <h3 class="f_title">Follow Us On</h3>
                                <ul class="list-unstyled">
                                    <li><a href="">Instagram</a></li>
                                    <li><a href="">Twitter</a></li>
                                    <li><a href="">Linkedin</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-4 wow fadeInDown" data-wow-delay="0.5s">
                            <div class="f_widget contact_widget">
                                <h3 class="f_title">Contact Us</h3>
                                <ul class="list-unstyled">
                                    <li>Phone: <a href="051958237851">+051 958 237 851</a>
                                        <a href="tel:051555222000">- +051 555 222 000</a>
                                    </li>
                                    <li>Email: <a href="#">support@ CSS3-design.com</a></li>
                                    <li>Address: 10 N Florida St, USA. Texas 9007, USA.</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer_bottom">
                <div class="container">
                    <div class="row">
                        <div class="col-md-7 col-sm-9">
                            <p>© Copyright 2020 CSS3 </p>
                        </div>
                        <div class="col-md-5 col-sm-3 text-right">
                            <a href="#" class="go_top">go back up <i class="arrow_up"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- footer area -->
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="assets/js/jquery-3.4.1.min.js"></script>
    <script src="assets/vendors/bootstrap/js/popper.min.js"></script>
    <script src="assets/vendors/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/vendors/slick/slick.min.js"></script>
    <script src="assets/vendors/isotope/imagesloaded.pkgd.min.js"></script>
    <script src="assets/vendors/isotope/isotope.pkgd.min.js"></script>
    <script src="assets/vendors/counterup/jquery.waypoints.min.js"></script>
    <script src="assets/vendors/counterup/jquery.counterup.min.js"></script>
    <script src="assets/vendors/spilitting/splitting.min.js"></script>
    <script src="assets/vendors/wow/wow.min.js"></script>
    <script src="assets/vendors/nice-select/js/jquery.nice-select.min.js"></script>
    <script src="assets/vendors/pace/pace.min.js"></script>
    <script src="assets/js/main.js"></script>
</body>

</html>