|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" href="style.css">
- <title>Document</title>
- </head>
- <body>
- <input type="checkbox" id="menu">
- <label for="menu" class="hamburger-menu">
- <div class="patty"></div>
- </label>
- <section class="upfold">
- <div class="upfold-container">
- <nav class="navbar">
- <a href="" class="action">Home</a>
- <a href="">About Us</a>
- <a href="">Shop</a>
- <a href="">Blog</a>
- <a href="">Contact</a>
- </nav>
- <div class="upfold-info-card">
- <div class="branding">
- <figure class="brand-image">
- <img src="images/logo.svg" alt="">
- </figure>
- <h2 class="brand-name">Woodlands</h2>
- </div>
- <figure class="upfold-floating-image">
- <img src="images/pngegg.png" alt="">
- </figure>
- <div class="upfold-info-card-content">
- <div class="upfold-info-card-header-image">
- <h1>Specialty Wood Product</h1>
- <div class="upfold-info-card-images">
- <figure>
- <img src="images/upfold-image-1.jpg" alt="">
- </figure>
- <figure>
- <img src="images/upfold-image-2.jpg" alt="">
- </figure>
- <figure>
- <img src="images/upfold-image-3.jpg" alt="">
- </figure>
- </div>
- </div>
- <div class="upfold-info-card-descriprion">
- <article>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
- labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
- laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
- voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
- cupidatat.
- </article>
- <a href="" class="upfold-info-card-descriprion-button">Contact Us</a>
- </div>
- </div>
- </div>
- </div>
- </section>
- <section class="our-products">
- <div class="our-products-container">
- <h1 class="product-heading">Our Products</h1>
- <div class="product-info-card">
- <div class="product-info">
- <figure class="product-image">
- <img src="images/product-1.jpg" alt="">
- </figure>
- <div class="product-info-description">
- <article>
- <h2>Furniture</h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
- ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
- ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
- sint occaecat cupidatat.</p>
- </article>
- <a href="" class="product-info-descriprion-button">Shop Online</a>
- </div>
- </div>
- <div class="product-info">
- <figure class="product-image">
- <img src="images/product-2.jpg" alt="">
- </figure>
- <div class="product-info-description">
- <article>
- <h2>Features</h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
- ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
- ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
- sint occaecat cupidatat.</p>
- </article>
- <a href="" class="product-info-descriprion-button">Shop Online</a>
- </div>
- </div>
- <div class="product-info">
- <figure class="product-image">
- <img src="images/product-3.jpg" alt="">
- </figure>
- <div class="product-info-description">
- <article>
- <h2>Flooring</h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
- ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
- ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
- sint occaecat cupidatat.</p>
- </article>
- <a href="" class="product-info-descriprion-button">Shop Online</a>
- </div>
- </div>
- </div>
- </div>
- </section>
- <section class="meterials-list">
- <div class="meterials-container">
- <h1 class="meterials-list-heading">Meterials</h1>
- <a href="" class="meterial">
- <figure>
- <img src="images/maple.jpg" alt="">
- </figure>
- <p>Maple</p>
- </a>
- <a href="" class="meterial">
- <figure>
- <img src="images/walnut.jpg" alt="">
- </figure>
- <p>Walnut</p>
- </a>
- <a href="" class="meterial">
- <figure>
- <img src="images/cherry.jpg" alt="">
- </figure>
- <p>Cherry</p>
- </a>
- <a href="" class="meterial">
- <figure>
- <img src="images/pine.jpg" alt="">
- </figure>
- <p>Pine</p>
- </a>
- <a href="" class="meterial">
- <figure>
- <img src="images/oak.jpg" alt="">
- </figure>
- <p>Oak</p>
- </a>
- <a href="" class="meterial">
- <figure>
- <img src="images/cedar.jpg" alt="">
- </figure>
- <p>Cedar</p>
- </a>
- </div>
- </section>
- <footer>
- <div class="contact-card">
- <h1 class="contact-card-header">Contact</h1>
- <form action="" class="contact-card-form">
- <div class="contact-card-form-inputs-holder">
- <input type="text" placeholder="Your Name">
- <input type="email" name="" id="" class="Email ID">
- </div>
- <textarea name="" id="" cols="30" rows="10" placeholder="Message"></textarea>
- <button>Submit</button>
- </form>
- </div>
- <div class="social-media-icons">
- <a href="">
- <figure>
- <img src="images/facebook.svg" alt="">
- </figure>
- </a>
- <a href="">
- <figure>
- <img src="images/twitter.svg" alt="">
- </figure>
- </a>
- <a href="">
- <figure>
- <img src="images/google.svg" alt="">
- </figure>
- </a>
- </div>
- <p class="copyrights">© 2022 Brand Name. All Rights Reserved</p>
- </footer>
- </body>
- </html>
|
