Last active
November 5, 2021 12:39
-
-
Save neno-tech/cd65af2f1a590ad51751a2b44ac0b4fe to your computer and use it in GitHub Desktop.
Responsive web app Book Store
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function doGet(e) { | |
| return HtmlService.createTemplateFromFile('index').evaluate() | |
| .addMetaTag('viewport','width=device-width , initial-scale=1') | |
| .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL) | |
| } | |
| function include(filename) { | |
| return HtmlService.createHtmlOutputFromFile(filename).getContent(); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| CSS | |
| <?!= include('css'); ?> | |
| Java | |
| <?!= include('js'); ?> | |
| Image | |
| <? var url = "https://drive.google.com/uc?id="?> | |
| <img src=<?= url ?> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ตัวอย่าง index ที่ครูอภิวัฒน์ ใส่ลิ้งค์รูปจาก Google Drive ครบทุกรูปแล้ว | |
| <!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"> | |
| <title>Complete Responsive Online Boot Store Website Design Tutorial</title> | |
| <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" /> | |
| <!-- font awesome cdn link --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> | |
| <?!= include('css'); ?> | |
| </head> | |
| <body> | |
| <!-- header section starts --> | |
| <header class="header"> | |
| <div class="header-1"> | |
| <a href="#" class="logo"> <i class="fas fa-book"></i> bookly </a> | |
| <form action="" class="search-form"> | |
| <input type="search" name="" placeholder="search here..." id="search-box"> | |
| <label for="search-box" class="fas fa-search"></label> | |
| </form> | |
| <div class="icons"> | |
| <div id="search-btn" class="fas fa-search"></div> | |
| <a href="#" class="fas fa-heart"></a> | |
| <a href="#" class="fas fa-shopping-cart"></a> | |
| <div id="login-btn" class="fas fa-user"></div> | |
| </div> | |
| </div> | |
| <div class="header-2"> | |
| <nav class="navbar"> | |
| <a href="#home">home</a> | |
| <a href="#featured">featured</a> | |
| <a href="#arrivals">arrivals</a> | |
| <a href="#reviews">reviews</a> | |
| <a href="#blogs">blogs</a> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- header section ends --> | |
| <!-- bottom navbar --> | |
| <nav class="bottom-navbar"> | |
| <a href="#home" class="fas fa-home"></a> | |
| <a href="#featured" class="fas fa-list"></a> | |
| <a href="#arrivals" class="fas fa-tags"></a> | |
| <a href="#reviews" class="fas fa-comments"></a> | |
| <a href="#blogs" class="fas fa-blog"></a> | |
| </nav> | |
| <!-- login form --> | |
| <div class="login-form-container"> | |
| <div id="close-login-btn" class="fas fa-times"></div> | |
| <form action=""> | |
| <h3>sign in</h3> | |
| <span>username</span> | |
| <input type="email" name="" class="box" placeholder="enter your email" id=""> | |
| <span>password</span> | |
| <input type="password" name="" class="box" placeholder="enter your password" id=""> | |
| <div class="checkbox"> | |
| <input type="checkbox" name="" id="remember-me"> | |
| <label for="remember-me"> remember me</label> | |
| </div> | |
| <input type="submit" value="sign in" class="btn"> | |
| <p>forget password ? <a href="#">click here</a></p> | |
| <p>don't have an account ? <a href="#">create one</a></p> | |
| </form> | |
| </div> | |
| <!-- home section starts --> | |
| <section class="home" id="home"> | |
| <div class="row"> | |
| <div class="content"> | |
| <h3>upto 75% off</h3> | |
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam deserunt nostrum accusamus. Nam alias sit necessitatibus, aliquid ex minima at!</p> | |
| <a href="#" class="btn">shop now</a> | |
| </div> | |
| <? var url = "https://drive.google.com/uc?id="?> | |
| <div class="swiper books-slider"> | |
| <div class="swiper-wrapper"> | |
| <a href="#" class="swiper-slide"><img src=<?= url ?>1Gfd3lPMwIlSjRb26oZ9RPudDl7kweLVk></a> | |
| <a href="#" class="swiper-slide"><img src=<?= url ?>1YBFUL7qNRXt01aY9jTca2KbfkIrsZx-Q></a> | |
| <a href="#" class="swiper-slide"><img src=<?= url ?>1Om1UsBRApKd1qMpd4jKP_sLNyird37VY></a> | |
| <a href="#" class="swiper-slide"><img src=<?= url ?>1U6kb0_91ZoGCFbiDx5Dh_fzWRIXKwCb0 ></a> | |
| <a href="#" class="swiper-slide"><img src=<?= url ?>1xp_oOAc-v9M1j4oQ6uM8Upu66bBUXyGi ></a> | |
| <a href="#" class="swiper-slide"><img src=<?= url ?>1xdF-xDwBEGcmqKSIQMVtS_8uDRa4OlTX ></a> | |
| </div> | |
| <img src=<?= url ?>11HasIVwW9LfT92sb3LxG-MXGlxa9biaI class="stand" alt=""> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- home section ense --> | |
| <!-- icons section starts --> | |
| <section class="icons-container"> | |
| <div class="icons"> | |
| <i class="fas fa-shipping-fast"></i> | |
| <div class="content"> | |
| <h3>free shipping</h3> | |
| <p>order over $100</p> | |
| </div> | |
| </div> | |
| <div class="icons"> | |
| <i class="fas fa-lock"></i> | |
| <div class="content"> | |
| <h3>secure payment</h3> | |
| <p>100 secure payment</p> | |
| </div> | |
| </div> | |
| <div class="icons"> | |
| <i class="fas fa-redo-alt"></i> | |
| <div class="content"> | |
| <h3>easy returns</h3> | |
| <p>10 days returns</p> | |
| </div> | |
| </div> | |
| <div class="icons"> | |
| <i class="fas fa-headset"></i> | |
| <div class="content"> | |
| <h3>24/7 support</h3> | |
| <p>call us anytime</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- icons section ends --> | |
| <!-- featured section starts --> | |
| <section class="featured" id="featured"> | |
| <h1 class="heading"> <span>featured books</span> </h1> | |
| <div class="swiper featured-slider"> | |
| <div class="swiper-wrapper"> | |
| <div class="swiper-slide box"> | |
| <div class="icons"> | |
| <a href="#" class="fas fa-search"></a> | |
| <a href="#" class="fas fa-heart"></a> | |
| <a href="#" class="fas fa-eye"></a> | |
| </div> | |
| <div class="image"> | |
| <img src=<?=url?>1xdF-xDwBEGcmqKSIQMVtS_8uDRa4OlTX alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>featured books</h3> | |
| <div class="price">$15.99 <span>$20.99</span></div> | |
| <a href="#" class="btn">add to cart</a> | |
| </div> | |
| </div> | |
| <div class="swiper-slide box"> | |
| <div class="icons"> | |
| <a href="#" class="fas fa-search"></a> | |
| <a href="#" class="fas fa-heart"></a> | |
| <a href="#" class="fas fa-eye"></a> | |
| </div> | |
| <div class="image"> | |
| <img src=<?= url ?>1YBFUL7qNRXt01aY9jTca2KbfkIrsZx-Q alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>featured books</h3> | |
| <div class="price">$15.99 <span>$20.99</span></div> | |
| <a href="#" class="btn">add to cart</a> | |
| </div> | |
| </div> | |
| <div class="swiper-slide box"> | |
| <div class="icons"> | |
| <a href="#" class="fas fa-search"></a> | |
| <a href="#" class="fas fa-heart"></a> | |
| <a href="#" class="fas fa-eye"></a> | |
| </div> | |
| <div class="image"> | |
| <img src=<?= url ?>1Om1UsBRApKd1qMpd4jKP_sLNyird37VY alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>featured books</h3> | |
| <div class="price">$15.99 <span>$20.99</span></div> | |
| <a href="#" class="btn">add to cart</a> | |
| </div> | |
| </div> | |
| <div class="swiper-slide box"> | |
| <div class="icons"> | |
| <a href="#" class="fas fa-search"></a> | |
| <a href="#" class="fas fa-heart"></a> | |
| <a href="#" class="fas fa-eye"></a> | |
| </div> | |
| <div class="image"> | |
| <img src=<?= url ?>1U6kb0_91ZoGCFbiDx5Dh_fzWRIXKwCb0 alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>featured books</h3> | |
| <div class="price">$15.99 <span>$20.99</span></div> | |
| <a href="#" class="btn">add to cart</a> | |
| </div> | |
| </div> | |
| <div class="swiper-slide box"> | |
| <div class="icons"> | |
| <a href="#" class="fas fa-search"></a> | |
| <a href="#" class="fas fa-heart"></a> | |
| <a href="#" class="fas fa-eye"></a> | |
| </div> | |
| <div class="image"> | |
| <img src=<?= url ?>1c_KBGtVXexgOwb98eiRrL5yVsG-drnRC alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>featured books</h3> | |
| <div class="price">$15.99 <span>$20.99</span></div> | |
| <a href="#" class="btn">add to cart</a> | |
| </div> | |
| </div> | |
| <div class="swiper-slide box"> | |
| <div class="icons"> | |
| <a href="#" class="fas fa-search"></a> | |
| <a href="#" class="fas fa-heart"></a> | |
| <a href="#" class="fas fa-eye"></a> | |
| </div> | |
| <div class="image"> | |
| <img src=<?= url ?>1xdF-xDwBEGcmqKSIQMVtS_8uDRa4OlTX alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>featured books</h3> | |
| <div class="price">$15.99 <span>$20.99</span></div> | |
| <a href="#" class="btn">add to cart</a> | |
| </div> | |
| </div> | |
| <div class="swiper-slide box"> | |
| <div class="icons"> | |
| <a href="#" class="fas fa-search"></a> | |
| <a href="#" class="fas fa-heart"></a> | |
| <a href="#" class="fas fa-eye"></a> | |
| </div> | |
| <div class="image"> | |
| <img src=<?= url ?>11U0L4X4SD3fwoc7r6Wq5Rd1m5ronjMOf alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>featured books</h3> | |
| <div class="price">$15.99 <span>$20.99</span></div> | |
| <a href="#" class="btn">add to cart</a> | |
| </div> | |
| </div> | |
| <div class="swiper-slide box"> | |
| <div class="icons"> | |
| <a href="#" class="fas fa-search"></a> | |
| <a href="#" class="fas fa-heart"></a> | |
| <a href="#" class="fas fa-eye"></a> | |
| </div> | |
| <div class="image"> | |
| <img src=<?= url ?>1exI2uKMZWHxi7Qg14WUdmTqCCyajTtkC alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>featured books</h3> | |
| <div class="price">$15.99 <span>$20.99</span></div> | |
| <a href="#" class="btn">add to cart</a> | |
| </div> | |
| </div> | |
| <div class="swiper-slide box"> | |
| <div class="icons"> | |
| <a href="#" class="fas fa-search"></a> | |
| <a href="#" class="fas fa-heart"></a> | |
| <a href="#" class="fas fa-eye"></a> | |
| </div> | |
| <div class="image"> | |
| <img src=<?= url ?>1Wh9CiNYBKPn0MXqoLzdWG3psQWnlfqMt alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>featured books</h3> | |
| <div class="price">$15.99 <span>$20.99</span></div> | |
| <a href="#" class="btn">add to cart</a> | |
| </div> | |
| </div> | |
| <div class="swiper-slide box"> | |
| <div class="icons"> | |
| <a href="#" class="fas fa-search"></a> | |
| <a href="#" class="fas fa-heart"></a> | |
| <a href="#" class="fas fa-eye"></a> | |
| </div> | |
| <div class="image"> | |
| <img src=<?= url ?>14ROJjpTI114zFPJUBIW66wHsjs6fS7_T alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>featured books</h3> | |
| <div class="price">$15.99 <span>$20.99</span></div> | |
| <a href="#" class="btn">add to cart</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="swiper-button-next"></div> | |
| <div class="swiper-button-prev"></div> | |
| </div> | |
| </section> | |
| <!-- featured section ends --> | |
| <!-- newsletter section starts --> | |
| <section class="newsletter"> | |
| <form action=""> | |
| <h3>subscribe for latest updates</h3> | |
| <input type="email" name="" placeholder="enter your email" id="" class="box"> | |
| <input type="submit" value="subscribe" class="btn"> | |
| </form> | |
| </section> | |
| <!-- newsletter section ends --> | |
| <!-- arrivals section starts --> | |
| <section class="arrivals" id="arrivals"> | |
| <h1 class="heading"> <span>new arrivals</span> </h1> | |
| <div class="swiper arrivals-slider"> | |
| <div class="swiper-wrapper"> | |
| <a href="#" class="swiper-slide box"> | |
| <div class="image"> | |
| <img src=<?= url ?>1Gfd3lPMwIlSjRb26oZ9RPudDl7kweLVk alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>new arrivals</h3> | |
| <div class="price">$15.99 <span>$20.99</span></div> | |
| <div class="stars"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="#" class="swiper-slide box"> | |
| <div class="image"> | |
| <img src=<?= url ?>1YBFUL7qNRXt01aY9jTca2KbfkIrsZx-Q alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>new arrivals</h3> | |
| <div class="price">$15.99 <span>$20.99</span></div> | |
| <div class="stars"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="#" class="swiper-slide box"> | |
| <div class="image"> | |
| <img src=<?= url ?>14LhxzA40MgJr4W18w67ObJphBfXXo9BB alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>new arrivals</h3> | |
| <div class="price">$15.99 <span>$20.99</span></div> | |
| <div class="stars"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="#" class="swiper-slide box"> | |
| <div class="image"> | |
| <img src=<?= url ?>1U6kb0_91ZoGCFbiDx5Dh_fzWRIXKwCb0 alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>new arrivals</h3> | |
| <div class="price">$15.99 <span>$20.99</span></div> | |
| <div class="stars"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="#" class="swiper-slide box"> | |
| <div class="image"> | |
| <img src=<?= url ?>1c_KBGtVXexgOwb98eiRrL5yVsG-drnRC alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>new arrivals</h3> | |
| <div class="price">$15.99 <span>$20.99</span></div> | |
| <div class="stars"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="swiper arrivals-slider"> | |
| <div class="swiper-wrapper"> | |
| <a href="#" class="swiper-slide box"> | |
| <div class="image"> | |
| <img src=<?= url ?>1xdF-xDwBEGcmqKSIQMVtS_8uDRa4OlTX alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>new arrivals</h3> | |
| <div class="price">$15.99 <span>$20.99</span></div> | |
| <div class="stars"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="#" class="swiper-slide box"> | |
| <div class="image"> | |
| <img src=<?= url ?>11U0L4X4SD3fwoc7r6Wq5Rd1m5ronjMOf alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>new arrivals</h3> | |
| <div class="price">$15.99 <span>$20.99</span></div> | |
| <div class="stars"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="#" class="swiper-slide box"> | |
| <div class="image"> | |
| <img src=<?= url ?>1exI2uKMZWHxi7Qg14WUdmTqCCyajTtkC alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>new arrivals</h3> | |
| <div class="price">$15.99 <span>$20.99</span></div> | |
| <div class="stars"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="#" class="swiper-slide box"> | |
| <div class="image"> | |
| <img src=<?= url ?>1Wh9CiNYBKPn0MXqoLzdWG3psQWnlfqMt alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>new arrivals</h3> | |
| <div class="price">$15.99 <span>$20.99</span></div> | |
| <div class="stars"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="#" class="swiper-slide box"> | |
| <div class="image"> | |
| <img src=<?= url ?>14ROJjpTI114zFPJUBIW66wHsjs6fS7_T alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>new arrivals</h3> | |
| <div class="price">$15.99 <span>$20.99</span></div> | |
| <div class="stars"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- arrivals section ends --> | |
| <!-- deal section starts --> | |
| <section class="deal"> | |
| <div class="content"> | |
| <h3>deal of the day</h3> | |
| <h1>upto 50% off</h1> | |
| <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde perspiciatis in atque dolore tempora quaerat at fuga dolorum natus velit.</p> | |
| <a href="#" class="btn">shop now</a> | |
| </div> | |
| <div class="image"> | |
| <img src=<?= url ?>14VB_ZdLC1cZ49cnwDZWmnY3_pAzmpOr0 alt=""> | |
| </div> | |
| </section> | |
| <!-- deal section ends --> | |
| <!-- reviews section starts --> | |
| <section class="reviews" id="reviews"> | |
| <h1 class="heading"> <span>client's reviews</span> </h1> | |
| <div class="swiper reviews-slider"> | |
| <div class="swiper-wrapper"> | |
| <div class="swiper-slide box"> | |
| <img src=<?= url ?>190st1tBCwDo69nqTuWNd6Bko1hQR6Y8B alt=""> | |
| <h3>john deo</h3> | |
| <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur nihil ipsa placeat. Aperiam at sint, eos ex similique facere hic.</p> | |
| <div class="stars"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| <div class="swiper-slide box"> | |
| <img src=<?= url ?>1HPX9AxGo1ZRgvlGF7vXhB12A-pmT_pxJ alt=""> | |
| <h3>john deo</h3> | |
| <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur nihil ipsa placeat. Aperiam at sint, eos ex similique facere hic.</p> | |
| <div class="stars"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| <div class="swiper-slide box"> | |
| <img src=<?= url ?>1P-Wr3qLEsLnajrBpR4NH_pPwEUOSUjlA alt=""> | |
| <h3>john deo</h3> | |
| <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur nihil ipsa placeat. Aperiam at sint, eos ex similique facere hic.</p> | |
| <div class="stars"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| <div class="swiper-slide box"> | |
| <img src=<?= url ?>15V3lhCatiFdKiGu3SqRxUHeJ6pZssoAq alt=""> | |
| <h3>john deo</h3> | |
| <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur nihil ipsa placeat. Aperiam at sint, eos ex similique facere hic.</p> | |
| <div class="stars"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| <div class="swiper-slide box"> | |
| <img src=<?= url ?>1e6djth6C98lPefcCtieZN3Yzb-ArU5ii alt=""> | |
| <h3>john deo</h3> | |
| <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur nihil ipsa placeat. Aperiam at sint, eos ex similique facere hic.</p> | |
| <div class="stars"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| <div class="swiper-slide box"> | |
| <img src=<?= url ?>11b6jKtU20lWXTGOrEdMoiAK2Q4V-8ttk alt=""> | |
| <h3>john deo</h3> | |
| <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur nihil ipsa placeat. Aperiam at sint, eos ex similique facere hic.</p> | |
| <div class="stars"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- reviews section ends --> | |
| <!-- blogs section starts --> | |
| <section class="blogs" id="blogs"> | |
| <h1 class="heading"> <span>our blogs</span> </h1> | |
| <div class="swiper blogs-slider"> | |
| <div class="swiper-wrapper"> | |
| <div class="swiper-slide box"> | |
| <div class="image"> | |
| <img src=<?= url ?>1oozBBRt2_Vxg4pGTKiuf9zVW-bsHpgFe alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>blog title goes here</h3> | |
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, odio.</p> | |
| <a href="#" class="btn">read more</a> | |
| </div> | |
| </div> | |
| <div class="swiper-slide box"> | |
| <div class="image"> | |
| <img src=<?= url ?>1CTBODJerqKoNAjwktj4QUQDNa5uR3_Wn alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>blog title goes here</h3> | |
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, odio.</p> | |
| <a href="#" class="btn">read more</a> | |
| </div> | |
| </div> | |
| <div class="swiper-slide box"> | |
| <div class="image"> | |
| <img src=<?= url ?>1YIgOB9xXvdF5PSyvPvH-FHw88amiqf-I alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>blog title goes here</h3> | |
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, odio.</p> | |
| <a href="#" class="btn">read more</a> | |
| </div> | |
| </div> | |
| <div class="swiper-slide box"> | |
| <div class="image"> | |
| <img src=<?= url ?>1inujbktcFynYfI8oVp8m9E7maIOE-mYt alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>blog title goes here</h3> | |
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, odio.</p> | |
| <a href="#" class="btn">read more</a> | |
| </div> | |
| </div> | |
| <div class="swiper-slide box"> | |
| <div class="image"> | |
| <img src=<?= url ?>1pwuzBtr7HfIJG4MKFdS8buCKdGgpTWMO alt=""> | |
| </div> | |
| <div class="content"> | |
| <h3>blog title goes here</h3> | |
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, odio.</p> | |
| <a href="#" class="btn">read more</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- blogs section ends --> | |
| <!-- footer section starts --> | |
| <section class="footer"> | |
| <div class="box-container"> | |
| <div class="box"> | |
| <h3>our locations</h3> | |
| <a href="#"> <i class="fas fa-map-marker-alt"></i> india </a> | |
| <a href="#"> <i class="fas fa-map-marker-alt"></i> USA </a> | |
| <a href="#"> <i class="fas fa-map-marker-alt"></i> russia </a> | |
| <a href="#"> <i class="fas fa-map-marker-alt"></i> france </a> | |
| <a href="#"> <i class="fas fa-map-marker-alt"></i> japan </a> | |
| <a href="#"> <i class="fas fa-map-marker-alt"></i> africa </a> | |
| </div> | |
| <div class="box"> | |
| <h3>quick links</h3> | |
| <a href="#"> <i class="fas fa-arrow-right"></i> home </a> | |
| <a href="#"> <i class="fas fa-arrow-right"></i> featured </a> | |
| <a href="#"> <i class="fas fa-arrow-right"></i> arrivals </a> | |
| <a href="#"> <i class="fas fa-arrow-right"></i> reviews </a> | |
| <a href="#"> <i class="fas fa-arrow-right"></i> blogs </a> | |
| </div> | |
| <div class="box"> | |
| <h3>extra links</h3> | |
| <a href="#"> <i class="fas fa-arrow-right"></i> account info </a> | |
| <a href="#"> <i class="fas fa-arrow-right"></i> ordered items </a> | |
| <a href="#"> <i class="fas fa-arrow-right"></i> privacy policy </a> | |
| <a href="#"> <i class="fas fa-arrow-right"></i> payment method </a> | |
| <a href="#"> <i class="fas fa-arrow-right"></i> our serivces </a> | |
| </div> | |
| <div class="box"> | |
| <h3>contact info</h3> | |
| <a href="#"> <i class="fas fa-phone"></i> +123-456-7890 </a> | |
| <a href="#"> <i class="fas fa-phone"></i> +111-222-3333 </a> | |
| <a href="#"> <i class="fas fa-envelope"></i> shaikhanas@gmail.com </a> | |
| <img src=<?= url ?>1ZMyGeDdXMhwnnpVicj71R6MDEK2FPefX class="map" alt=""> | |
| </div> | |
| </div> | |
| <div class="share"> | |
| <a href="#" class="fab fa-facebook-f"></a> | |
| <a href="#" class="fab fa-twitter"></a> | |
| <a href="#" class="fab fa-instagram"></a> | |
| <a href="#" class="fab fa-linkedin"></a> | |
| <a href="#" class="fab fa-pinterest"></a> | |
| </div> | |
| <div class="credit"> created by <span>mr. web designer</span> | all rights reserved! </div> | |
| </section> | |
| <!-- footer section ends --> | |
| <!-- loader --> | |
| <div class="loader-container"> | |
| <img src=<?= url ?>1Y6v3eAh4HLXhIuxdVvpmupZioso-ofYt alt=""> | |
| </div> | |
| <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script> | |
| <?!= include('js'); ?> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment