API tools faq
paste
Advertisement
moozxxx555

HTML project

moozxxx555
Nov 4th, 2023
1,113
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
C++ 10.30 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title> Book Store </title>
  7.     <link rel="stylesheet" href="style.css">
  8.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  9. </head>
  10. <body>
  11.  
  12.     <nav>
  13.         <div class="nav-container">
  14.             <a href="index.html">
  15.                 <img src="./imgs/bookicon.png" class="logonav">
  16.             </a>
  17.             <p class="top-massage" >Book Store</p>
  18.            
  19.             <div class="nav-profile" >
  20.                  <p class="nav-profile-name" > Order </p>
  21.                  <div class="nav-profile-cart">
  22.                     <i class="fas fa-cart-shopping">
  23.                         <div class="cartcount">
  24.                              5
  25.                         </div>
  26.                     </i>
  27.                  </div>
  28.             </div>
  29.  
  30.  
  31.         </div>
  32.  
  33.     </nav>
  34.  
  35.     <div class="container">
  36.          <div class="sidebar">
  37.                 <input type="text" class="sidebar-search" placeholder="Search...something" >  
  38.                
  39.                 <a href="#" class="sidebar-items">
  40.                     Fantasy
  41.                 </a>
  42.                 <a href="#" class="sidebar-items" >
  43.                     Science
  44.                 </a>
  45.                 <a href="#" class="sidebar-items">
  46.                     Mystery
  47.                 </a>
  48.                 <a href="#" class="sidebar-items">
  49.                     Commedy
  50.                 </a>
  51.                 <a href="#" class="sidebar-items">
  52.                     History
  53.                 </a>
  54.          </div>
  55.          <div class="product">
  56.                 <div class="product-items">
  57.                     <img class="product-img1" src="https://i0.wp.com/www.themarginalian.org/wp-content/uploads/2012/01/topten.jpg?w=680&ssl=1" alt="">
  58.                     <p style="font-size: 1.2vw"> name </p>
  59.                     <p style="font-size: 0.9vw"> 500 Baht </p>
  60.                 </div>
  61.  
  62.                 <div class="product-items">
  63.                     <img class="product-img2" src="https://www.investopedia.com/thmb/WUd4U1luNBy5sveLZUqj11yeUYc=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/IntelligentInvestor-7efda17958e844e8bbd9a692a3e970d3.jpg" alt="">
  64.                     <p style="font-size: 1.2vw"> name </p>
  65.                     <p style="font-size: 0.9vw"> 500 Baht </p>
  66.                 </div>
  67.  
  68.                 <div class="product-items">
  69.                     <img class="product-img3" src="https://storage.naiin.com/system/application/bookstore/resource/product/202104/524404/1000240484_front_XXL.jpg?imgname=%E0%B9%82%E0%B8%8A%E0%B8%84%E0%B8%94%E0%B8%B5%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B8%A1%E0%B8%B6%E0%B8%87%E0%B9%84%E0%B8%94%E0%B9%89%E0%B8%AD%E0%B9%88%E0%B8%B2%E0%B8%99" alt="">
  70.                     <p style="font-size: 1.2vw"> name </p>
  71.                     <p style="font-size: 0.9vw"> 500 Baht </p>
  72.                 </div>
  73.  
  74.                 <div class="product-items">
  75.                     <img class="product-img4" src="./imgs/1paul.png" alt="">
  76.                     <p style="font-size: 1.2vw"> name </p>
  77.                     <p style="font-size: 0.9vw"> 500 Baht </p>
  78.                 </div>
  79.  
  80.                 <div class="product-items">
  81.                     <img class="product-img5" src="./imgs/วัยรุ่น.png" alt="">
  82.                     <p style="font-size: 1.2vw"> name </p>
  83.                     <p style="font-size: 0.9vw"> 500 Baht </p>
  84.                 </div>
  85.  
  86.                 <div class="product-items">
  87.                     <img class="product-img6" src="./imgs/sepien.png" alt="">
  88.                     <p style="font-size: 1.2vw"> name </p>
  89.                     <p style="font-size: 0.9vw"> 500 Baht </p>
  90.                 </div>
  91.  
  92.                 <div class="product-items">
  93.                     <img class="product-img7" src="https://images-se-ed.com/ws/Storage/Originals/978999/011/9789990116724L.jpg?h=6fb8d8a6f1bd062f83ebc38188106b74" alt="">
  94.                     <p style="font-size: 1.2vw"> name </p>
  95.                     <p style="font-size: 0.9vw"> 500 Baht </p>
  96.                 </div>
  97.  
  98.                 <div class="product-items">
  99.                     <img class="product-img8" src="https://storage.naiin.com/system/application/bookstore/resource/product/202206/549945/1000249407_front_XXL.jpg?imgname=%E0%B9%80%E0%B8%82%E0%B8%B5%E0%B8%A2%E0%B8%99-Content-SEO-%E0%B9%83%E0%B8%AB%E0%B9%89%E0%B8%9B%E0%B8%B1%E0%B8%87%E0%B8%94%E0%B8%B1%E0%B8%87%E0%B8%AA%E0%B8%99%E0%B8%B1%E0%B9%88%E0%B8%99%E0%B8%97%E0%B8%B1%E0%B9%89%E0%B8%87-Google" alt="">
  100.                     <p style="font-size: 1.2vw"> name </p>
  101.                     <p style="font-size: 0.9vw"> 500 Baht </p>
  102.                 </div>
  103.  
  104.                 <div class="product-items">
  105.                     <img class="product-img9" src="https://upload.wikimedia.org/wikipedia/en/4/4a/Just_My_Type.jpg" alt="">
  106.                     <p style="font-size: 1.2vw"> name </p>
  107.                     <p style="font-size: 0.9vw"> 500 Baht </p>
  108.                 </div>
  109.  
  110.                 <div class="product-items">
  111.                     <img class="product-img10" src="https://positioningmag.com/wp-content/uploads/2016/06/559000006192903.jpeg" alt="">
  112.                     <p style="font-size: 1.2vw"> name </p>
  113.                     <p style="font-size: 0.9vw"> 500 Baht </p>
  114.                 </div>
  115.  
  116.                 <div class="product-items">
  117.                     <img class="product-img11" src="./imgs/เเก้.png" alt="">
  118.                     <p style="font-size: 1.2vw"> name </p>
  119.                     <p style="font-size: 0.9vw"> 500 Baht </p>
  120.                 </div>
  121.  
  122.                 <div class="product-items">
  123.                     <img class="product-img12" src="https://storage.naiin.com/system/application/bookstore/resource/product/202304/577274/1000260516_front_XXL.jpg?imgname=%E0%B8%88%E0%B8%B4%E0%B8%95%E0%B8%A7%E0%B8%B4%E0%B8%97%E0%B8%A2%E0%B8%B2%E0%B8%AA%E0%B8%B2%E0%B8%A2%E0%B8%94%E0%B8%B2%E0%B8%A3%E0%B9%8C%E0%B8%81" alt="">
  124.                     <p style="font-size: 1.2vw"> name </p>
  125.                     <p style="font-size: 0.9vw"> 500 Baht </p>
  126.                 </div>
  127.  
  128.          </div>
  129.     </div>
  130.  
  131.     <div class="modal" style="display : none" >
  132.         <div class="modal-bg"></div>
  133.         <div class="modal-page">
  134.             <h2> Detail </h2>
  135.             <br>
  136.             <div class="modaldesc-content">
  137.                 <img class="modaldesc-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQcDPHaxx8Dt6GZfABw0U2l0_ol2BpgthWsPg&usqp=CAU" alt="">
  138.                 <div class="modaldesc-detail">
  139.                     <p style="font-size: 1.5vw"> Product name </p>
  140.                     <p style="font-size: 1.2vw"> 500 THB </p>
  141.                     <p style="color: #adadad"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis debitis provident iste ad voluptas distinctio, magni doloremque itaque blanditiis nostrum. </p>
  142.                     <br>
  143.                     <div class="btn-control">
  144.                         <button class="btn" >
  145.                             Close
  146.                         </button>
  147.                         <button class ="btn btn-buy">
  148.                             Add to cart
  149.                         </button>
  150.                     </div>
  151.                 </div>
  152.             </div>
  153.         </div>
  154.     </div>
  155.  
  156.     <div class="modal" style="display : none">
  157.         <div class="modal-bg"></div>
  158.         <div class="modal-page">
  159.             <h2> My Cart </h2>
  160.             <br>
  161.             <div class="cartlist">
  162.                 <div class="cartlist-items">
  163.                     <div class="cartlist-left">
  164.                         <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQcDPHaxx8Dt6GZfABw0U2l0_ol2BpgthWsPg&usqp=CAU" alt="">
  165.                         <div class="cartlist-detail">
  166.                             <p style="font-size: 1.5;" > Product name </p>
  167.                             <p style="font-size: 1.2;" > 500 THB </p>
  168.                         </div>
  169.                     </div>
  170.                     <div class="cartlist-right">
  171.                             <p class="btnc"> - </p>
  172.                             <p class="count"> 3 </p>
  173.                             <p class="btnc"> + </p>
  174.                     </div>
  175.                 </div>
  176.  
  177.                 <div class="cartlist-items">
  178.                     <div class="cartlist-left">
  179.                         <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQcDPHaxx8Dt6GZfABw0U2l0_ol2BpgthWsPg&usqp=CAU" alt="">
  180.                         <div class="cartlist-detail">
  181.                             <p style="font-size: 1.5;" > Product name </p>
  182.                             <p style="font-size: 1.2;" > 500 THB </p>
  183.                         </div>
  184.                     </div>
  185.                     <div class="cartlist-right">
  186.                             <p class="btnc"> - </p>
  187.                             <p class="count"> 3 </p>
  188.                             <p class="btnc"> + </p>
  189.                     </div>
  190.                 </div>
  191.  
  192.                 <div class="cartlist-items">
  193.                     <div class="cartlist-left">
  194.                         <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQcDPHaxx8Dt6GZfABw0U2l0_ol2BpgthWsPg&usqp=CAU" alt="">
  195.                         <div class="cartlist-detail">
  196.                             <p style="font-size: 1.5;" > Product name </p>
  197.                             <p style="font-size: 1.2;" > 500 THB </p>
  198.                         </div>
  199.                     </div>
  200.                     <div class="cartlist-right">
  201.                             <p class="btnc"> - </p>
  202.                             <p class="count"> 3 </p>
  203.                             <p class="btnc"> + </p>
  204.                     </div>
  205.                 </div>
  206.            
  207.                
  208.             </div>
  209.             <div class="btn-control">
  210.               <button class="btn" >
  211.                    Cancle
  212.               </button>
  213.               <button class="btn btn-buy">
  214.                     Buy
  215.               </button>
  216.             </div>
  217.         </div>
  218.     </div>
  219.  
  220. </body>
  221. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!