Figma HTML

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

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

<body>
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light bg-transparent pt-4">
            <div class="container">
                <a class="navbar-brand" href="#"><img src="img/LOGO.png" alt=""></a>
                <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse"
                    data-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="collapsibleNavId">
                    <ul class="navbar-nav mx-auto">
                        <li class="nav-item active mr-4">
                            <a class="nav-link" href="#">About</a>
                        </li>
                        <li class="nav-item mr-4">
                            <a class="nav-link" href="#">Help</a>
                        </li>
                        <li class="nav-item mr-4">
                            <a class="nav-link" href="#">Features</a>
                        </li>
                        <li class="nav-item mr-4">
                            <a class="nav-link" href="#">Signup</a>
                        </li>
                    </ul>
                    <a class="btn btn-demo">
                        Request Demo
                    </a>
                </div>
            </div>
        </nav>
        <div class="header-content container">
            <div class="row">
                <div class="col-lg-6">
                    <h1 class="site-header">Save your data storage here.</h1>
                    <h6 class="site-sub pt-4">Data warehouse is a data storage area that has been tested for security.
                        So, you can store your data here safely but not be afraid of being stolen by others.</h6>
                    <a href="#" class="learn-more btn mt-5">Learn More</a>
                </div>
                <div class="col-lg-6 position-relative header-img d-lg-block d-none">
                    <img src="img/header.png" alt="" class="img-fluid position-absolute">
                </div>
            </div>
        </div>
    </header>
    <section class="about pt-120 pb-120">
        <div class="container">
            <div class="row about-content py-4">
                <div class="col-lg-4">
                    <img src="img/image2 .png" alt="" class="img-fluid">
                </div>
                <div class="col-lg-7 offset-1 d-flex flex-column justify-content-center">
                    <h2 class="about-title pb-3">We are high-level data storage bank</h2>
                    <p class="about-des">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dolor sit donec
                        gravida viverra sollicitudin. Cursus ornare pretium praesent erat lorem massa urna vel.
                        Dignissim faucibus sapien venenatis massa eget dignissim tristique vel cras. Sit potenti mattis
                        odio egestas. A, nisl lorem scelerisque gravida. Sodales magna metus urna est suscipit.</p>
                </div>
            </div>
        </div>
    </section>
    <section class="features pb-120">
        <div class="container">
            <div class="row">
                <div class="section-header text-center col-md-8 mx-auto pb-5">
                    <h2>Features</h2>
                    <p class="py-4">Some of the features and advantages that we provide to those who stores data in this
                        Data Storage.</p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 mb-5">
                    <div class="d-flex single-feature feature-1 py-5 px-3">
                        <div><img src="img/feature1.png" alt="" class="img-fluid d-sm-block d-none"></div>      
                        <div class="feature-text pr-2">
                            <h3>Search Data</h3>
                            <p class="pt-1 pb-3">Don't worry if your data is very large, the data warehouse provides a search engine, which is useful for making it easier to find data effectively saving time.</p>
                            <a href="#">Learn more</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 mb-5">
                    <div class="d-flex single-feature feature-2 py-5 px-3">
                        <div><img src="img/feature2.png" alt="" class="img-fluid d-sm-block d-none"></div>      
                        <div class="feature-text pr-2">
                            <h3>Search Data</h3>
                            <p class="pt-1 pb-3">Don't worry if your data is very large, the data warehouse provides a search engine, which is useful for making it easier to find data effectively saving time.</p>
                            <a href="#">Learn more</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 mb-5">
                    <div class="d-flex single-feature feature-3 py-5 px-3">
                        <div><img src="img/feature3.png" alt="" class="img-fluid d-sm-block d-none"></div>      
                        <div class="feature-text pr-2">
                            <h3>Search Data</h3>
                            <p class="pt-1 pb-3">Don't worry if your data is very large, the data warehouse provides a search engine, which is useful for making it easier to find data effectively saving time.</p>
                            <a href="#">Learn more</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 mb-5">
                    <div class="d-flex single-feature feature-4 py-5 px-3">
                        <div><img src="img/feature4.png" alt="" class="img-fluid d-sm-block d-none"></div>      
                        <div class="feature-text pr-2">
                            <h3>Search Data</h3>
                            <p class="pt-1 pb-3">Don't worry if your data is very large, the data warehouse provides a search engine, which is useful for making it easier to find data effectively saving time.</p>
                            <a href="#">Learn more</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="testimonial pb-120">
        <div class="container testimonial-content py-5">
            <div class="row">
                <div class="col-10 offset-1">
                    <h2 class="testimonail-header pb-5">Testimonials</h2>
                    <div class="testimonail-items py-5">
                        <div class="testimonial-inner d-flex py-3 px-5">
                            <img src="img/testimonial1.png" class="img-fluid">
                            <div class="testimonial-text pl-4">
                                <h4>John Feng</h4>
                                <p class="small">UX/UI Designer</p>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, corrupti illo. Neque, non consectetur. Cupiditate.</p>
                            </div>
                        </div>
                        <div class="testimonial-inner d-flex py-3 px-5">
                            <img src="img/testimonial2.png" class="img-fluid">
                            <div class="testimonial-text pl-4">
                                <h4>John Feng</h4>
                                <p class="small">UX/UI Designer</p>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, corrupti illo. Neque, non consectetur. Cupiditate.</p>
                            </div>
                        </div>
                        <div class="testimonial-inner d-flex py-3 px-5">
                            <img src="img/testimonial1.png" class="img-fluid">
                            <div class="testimonial-text pl-4">
                                <h4>John Feng</h4>
                                <p class="small">UX/UI Designer</p>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, corrupti illo. Neque, non consectetur. Cupiditate.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="sign-up container pt-120 text-lg-left text-center">
        <div class="d-lg-flex justify-content-between align-items-center">
            <div class="left-text p-lg-o pb-3">
                <h3>Try for free!</h3>
                <p>Try our features for free for limited times.</p>
            </div>
            <div class="left-right">
                <a href="#" class="learn-more-2 btn">Learn More</a>
                <a href="#" class="btn btn-demo ml-3 mb-1">Request Demo</a>
            </div>
        </div>
    </div>
    <footer>
        <div class="footer-widgets container pt-120 pb-120 text-center text-md-left">
            <div class="row">
                <div class="col-md-5 widget">
                    <h3 class="widget-title pb-5">
                        <img src="img/LOGO.png" alt="">
                        DataWareHouse
                    </h3>
                    <ul class="list-inline">
                        <li class="list-inline-item d-block">
                            <p class="font-weight-bold">Ware Society, 234</p>
                        </li>
                        <li class="list-inline-item pb-3">
                            <p class="font-weight-bold">Bahagia Ave Street PRBW 29281</p>
                        </li>
                        <li class="list-inline-item d-block">
                            <p>info@warehouse.project</p>   
                        </li>
                        <li class="list-inline-item">
                           <p>1-232-3434</p> 
                        </li>
                    </ul>
                </div>
                <div class="col-md-2 widget">
                    <h3 class="widget-title pb-5">About</h3>
                    <ul class="list-unstyled">
                        <li><a href="#">Profile</a></li>
                        <li><a href="#">Features</a></li>
                        <li><a href="#">Careers</a></li>
                        <li><a href="#">News</a></li>
                    </ul>
                </div>
                <div class="col-md-2 widget">
                    <h3 class="widget-title pb-5">Help</h3>
                    <ul class="list-unstyled">
                        <li><a href="#">Support</a></li>
                        <li><a href="#">Sign Up</a></li>
                        <li><a href="#">Guides</a></li>
                        <li><a href="#">Reports</a></li>
                        <li><a href="#">Q & A</a></li>
                    </ul>
                </div>
                <div class="col-md-3 widget social">
                    <h3 class="widget-title pb-5">Social Media</h3>
                    <ul class="list-inline">
                        <li class="list-inline-item"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                        <li class="list-inline-item"><a href="#"><i class="fab fa-twitter"></i></a></li>
                        <li class="list-inline-item"><a href="#"><i class="fab fa-instagram"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>



    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/slick.min.js"></script>
    <script src="js/script.js"></script>
</body>

</html>

Leave a Reply

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