Ammarsami

Locksmith Whittie

Apr 26th, 2016
74
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 15.79 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>Zazor</title>
  6.    
  7.   </head>
  8.   <body>
  9.     <div class="wrapper">
  10.  
  11.       <header class="clearfix">
  12.         <div class="telephone">
  13.           <ul>
  14.             <li>
  15.               <div class="circle">
  16.                 <img src="img/telephone.png" alt="telephone"/>
  17.               </div>
  18.             </li>
  19.             <li>(044)123-45-67</li>
  20.             <li>(044)567-89-10</li>
  21.           </ul>
  22.         </div>
  23.         <div class="avtoriz">
  24.           <ul>
  25.             <li>
  26.               <img src="img/avtoriz.png" alt="human"/>
  27.             </li>
  28.             <li>
  29.               <form class="" action="#" method="post">
  30.                 <input type="text" name="login" placeholder="логин">
  31.                 <input type="password" name="password" placeholder="пароль">
  32.               </form>
  33.             </li>
  34.             <li>
  35.               <a href="#">вход</a>
  36.             </li>
  37.             <li>
  38.               <a href="#">регистрация</a>
  39.             </li>
  40.             <li>
  41.               <a href="#">забыли пароль?</a>
  42.             </li>
  43.           </ul>
  44.         </div>
  45.         <nav>
  46.           <ul>
  47.             <li>
  48.               <a href="#"><img src="img/home.png" alt="home"/></a>
  49.             </li>
  50.             <li>
  51.               <a href="#"><img src="img/map.png" alt="map"/></a>
  52.             </li>
  53.             <li>
  54.               <a href="#"><img src="img/letter.png" alt="letter"/></a>
  55.             </li>
  56.           </ul>
  57.         </nav>
  58.       </header>
  59.       <section class="clearfix">
  60.         <img src="img/main_pic.png" alt="main picture"/>
  61.         <menu class="clearfix">
  62.           <ul class="menu">
  63.             <li>
  64.               <a href="#"></a>
  65.             </li>
  66.             <li>
  67.              <a href="#"></a>
  68.             </li>
  69.             <li>
  70.              <a href="#"></a>
  71.             </li>
  72.             <li>
  73.              <a href="#"></a>
  74.             </li>
  75.             <li>
  76.               <a href="#"></a>
  77.             </li>
  78.           </ul>
  79.           <ul class="korzina">
  80.             <li><img src="img/korzina.png" alt="korzina"/></li>
  81.             <li>товаров:</li>
  82.             <li>0</li>
  83.             <li>на сумму:</li>
  84.             <li>0,00 грн.</li>
  85.           </ul>
  86.         </menu>
  87.         <div class="select">
  88.           <aside class="find_auto">
  89.             <div class="labels">
  90.                 <h3>Диски:</h3>
  91.                 <h1>Поиск по автомобилю</h1>
  92.                 <h3>Шины:</h3>
  93.             </div>
  94.             <div class="disk">
  95.               <form class="po_avto" action="#" method="post">
  96.                 <div class="marka">
  97.                   <label for="marka">Марка
  98.                     <span>авто:</span>
  99.                   </label>
  100.                   <select class="marka" name="">
  101.                     <option value="marka"></option>
  102.                   </select>
  103.                 </div>
  104.                 <div class="model">
  105.                   <label for="model">Модель
  106.                     <span>автомобиля:</span>
  107.                   </label>
  108.                   <select class="model" name="">
  109.                     <option value="model"></option>
  110.                   </select>
  111.                 </div>
  112.                 <div class="year">
  113.                   <label for="year">Год выпуска
  114.                     <span>автомобиля:</span>
  115.                   </label>
  116.                   <select class="year" name="">
  117.                     <option value="year"></option>
  118.                   </select>
  119.                 </div>
  120.                 <div class="komplekt">
  121.                   <label for="komplekt">Комплектация:</label>
  122.                   <select class="komplekt" name="">
  123.                     <option value="komplekt"></option>
  124.                   </select>
  125.                 </div>
  126.               </form>
  127.             </div>
  128.             <div class="shiny">
  129.               <form class="po_avto" action="#" method="post">
  130.                 <div class="marka">
  131.                   <label for="marka">Марка
  132.                     <span>авто:</span>
  133.                   </label>
  134.                   <select class="marka" name="">
  135.                     <option value="marka"></option>
  136.                   </select>
  137.                 </div>
  138.                 <div class="model">
  139.                   <label for="model">Модель
  140.                     <span>автомобиля:</span>
  141.                   </label>
  142.                   <select class="model" name="">
  143.                     <option value="model"></option>
  144.                   </select>
  145.                 </div>
  146.                 <div class="year">
  147.                   <label for="year">Год выпуска
  148.                     <span>автомобиля:</span>
  149.                   </label>
  150.                   <select class="year" name="">
  151.                     <option value="year"></option>
  152.                   </select>
  153.                 </div>
  154.                 <div class="komplekt">
  155.                   <label for="komplekt">Комплектация:</label>
  156.                   <select class="komplekt" name="">
  157.                     <option value="komplekt"></option>
  158.                   </select>
  159.                 </div>
  160.               </form>
  161.             </div>
  162.             <a href="#" class="select__link">поиск...</a>
  163.           </aside>
  164.           <aside class="find_tires">
  165.             <h1>поиск шин</h1>
  166.             <form class="poisk_shin" action="index.html" method="post">
  167.               <div class="size">
  168.                 <label for="size">Размер:</label>
  169.                 <select class="size" name="">
  170.                   <option value="size">145</option>
  171.                 </select>
  172.                 <span>/</span>
  173.                 <select class="size" name="">
  174.                   <option value="size"></option>
  175.                 </select>
  176.               </div>
  177.               <div class="radius">
  178.                 <label for="radius">R</label>
  179.                 <select class="radius" name="">
  180.                   <option value="radius">12</option>
  181.                 </select>
  182.               </div>
  183.               <div class="sezon">
  184.                 <label for="sezon">Сезон:</label>
  185.                 <div class="sezon_type">
  186.                 <div class="leto">
  187.                   <input type="checkbox" name="" id="sezon">
  188.                   <label for="leto">лето</label>
  189.                 </div>
  190.                 <div class="zima">
  191.                   <input type="checkbox" name="" id="sezon">
  192.                   <label for="zima">зима</label>
  193.                 </div>
  194.                 <div class="vsesez">
  195.                   <input type="checkbox" name="" id="sezon">
  196.                   <label for="vsesez">всесез</label>
  197.                 </div>
  198.               </div>
  199.               </div>
  200.             </form>
  201.             <a href="#" class="select__link">поиск...</a>
  202.           </aside>
  203.           <aside class="find_disk">
  204.             <div class="left">
  205.               <h1>поиск дисков</h1>
  206.               <form class="disk_poisk" action="index.html" method="post">
  207.                 <div class="diametr_d">
  208.                   <label for="diametr_d">Диаметр
  209.                     <span>диска:</span>
  210.                   </label>
  211.                   <select class="diametr_d" name="">
  212.                     <option value="diametr_d">14</option>
  213.                   </select>
  214.                 </div>
  215.                 <div class="kol_ot">
  216.                   <label for="kol_ot">Количество
  217.                     <span>крепёжных отверстий: </span>
  218.                   </label>
  219.                   <select class="kol_ot" name="">
  220.                     <option value="kol_ot">3</option>
  221.                   </select>
  222.                 </div>
  223.                 <div class="diam_krep">
  224.                   <label for="diam_krep"> Диаметр
  225.                     <span>расположения крепёжных отверстий: </span>
  226.                   </label>
  227.                   <select class="diam_krep" name="">
  228.                     <option value="diam_krep">12</option>
  229.                   </select>
  230.                 </div>
  231.               </form>
  232.             </div>
  233.             <div class="right">
  234.               <form class="dop_opt" action="index.html" method="post">
  235.                 <div class="dzo">
  236.                   <label for="dzo">ДЦО
  237.                     <span>(диаметр центрального отверстия):</span>
  238.                   </label>
  239.                   <select class="dzo" name="">
  240.                     <option value="dzo">12</option>
  241.                   </select>
  242.                 </div>
  243.                 <div class="et">
  244.                   <label for="et">ET
  245.                     <span>(вылет диска):</span>
  246.                   </label>
  247.                   <select class="et" name="">
  248.                     <option value="et">12</option>
  249.                   </select>
  250.                 </div>
  251.               </form>
  252.             </div>
  253.             <a href="#" class="select__link">поиск...</a>
  254.           </aside>
  255.         </div>
  256.       </section>
  257.  
  258.       <main class="clearfix">
  259.         <div class="catalog">
  260.           <figcaption class="main_capt1">
  261.             <img src="img/copy.png" alt="copy sign"/>
  262.             <span>каталог продукции:</span>
  263.           </figcaption>
  264.           <figcaption class="next_capt">
  265.             <img src="img/mark.png" alt="mark sign"/>
  266.             <span>шины</span>
  267.           </figcaption>
  268.           <ul>
  269.             <li>
  270.               <a href="#">Наименование 1</a>
  271.             </li>
  272.             <li>
  273.               <a href="#">Наименование 2</a>
  274.             </li>
  275.             <li>
  276.               <a href="#">Наименование 3</a>
  277.             </li>
  278.             <li>
  279.               <a href="#">Наименование 4</a>
  280.             </li>
  281.           </ul>
  282.           <figcaption class="next_capt">
  283.             <img src="img/mark.png" alt="mark sign"/>
  284.             <span>диски</span>
  285.           </figcaption>
  286.           <ul>
  287.             <li>
  288.               <a href="#">Наименование 1</a>
  289.             </li>
  290.             <li>
  291.               <a href="#">Наименование 2</a>
  292.             </li>
  293.             <li>
  294.               <a href="#">Наименование 3</a>
  295.             </li>
  296.             <li>
  297.               <a href="#">Наименование 4</a>
  298.             </li>
  299.           </ul>
  300.           <figcaption class="next_capt">
  301.             <img src="img/mark.png" alt="mark sign"/>
  302.             <span>болты</span>
  303.           </figcaption>
  304.           <ul>
  305.             <li>
  306.               <a href="#">Наименование 1</a>
  307.             </li>
  308.             <li>
  309.               <a href="#">Наименование 2</a>
  310.             </li>
  311.             <li>
  312.               <a href="#">Наименование 3</a>
  313.             </li>
  314.             <li>
  315.               <a href="#">Наименование 4</a>
  316.             </li>
  317.           </ul>
  318.         </div>
  319.  
  320.         <article class="tovary clearfix">
  321.           <div class="line">
  322.             <a href="#" class="tovar">
  323.               <h4>Goodyear</h4>
  324.               <p>Ultra Grip Extreme</p>
  325.               <figure><img src="img/pic1.png" alt="pic1"></figure>
  326.               <p>90.00 грн</p>
  327.             </a>
  328.             <a href="#" class="tovar">
  329.               <h4>Nokian</h4>
  330.               <p>Hakkapeliitta R</p>
  331.               <figure><img src="img/pic2.png" alt="pic2"></figure>
  332.               <p>115.00 грн</p>
  333.             </a>
  334.             <a href="#" class="tovar">
  335.               <h4>Hankook</h4>
  336.               <p class="move">K 708 155/65 R14</p>
  337.               <figure><img src="img/pic3.png" alt="pic3"></figure>
  338.               <p>393.00 грн</p>
  339.             </a>
  340.           </div>
  341.           <div class="line">
  342.             <a href="#" class="tovar">
  343.               <h4>Goodyear</h4>
  344.               <p>Ultra Grip Extreme</p>
  345.               <figure><img src="img/pic1.png" alt="pic1"></figure>
  346.               <p>90.00 грн</p>
  347.             </a>
  348.             <a href="#" class="tovar">
  349.               <h4>Nokian</h4>
  350.               <p>Hakkapeliitta R</p>
  351.               <figure><img src="img/pic2.png" alt="pic2"></figure>
  352.               <p>115.00 грн</p>
  353.             </a>
  354.             <a href="#" class="tovar">
  355.               <h4>Hankook</h4>
  356.               <p class="move">K 708 155/65 R14</p>
  357.               <figure><img src="img/pic3.png" alt="pic3"></figure>
  358.               <p>393.00 грн</p>
  359.             </a>
  360.           </div>
  361.           <div class="line">
  362.             <a href="#" class="tovar">
  363.               <h4>Goodyear</h4>
  364.               <p>Ultra Grip Extreme</p>
  365.               <figure><img src="img/pic1.png" alt="pic1"></figure>
  366.               <p>90.00 грн</p>
  367.             </a>
  368.             <a href="#" class="tovar">
  369.               <h4>Nokian</h4>
  370.               <p>Hakkapeliitta R</p>
  371.               <figure><img src="img/pic2.png" alt="pic2"></figure>
  372.               <p>115.00 грн</p>
  373.             </a>
  374.             <a href="#" class="tovar">
  375.               <h4>Hankook</h4>
  376.               <p class="move">K 708 155/65 R14</p>
  377.               <figure><img src="img/pic3.png" alt="pic3"></figure>
  378.               <p>393.00 грн</p>
  379.             </a>
  380.           </div>
  381.  
  382.         </article>
  383.  
  384.         <div class="brend">
  385.           <figcaption class="main_capt2">
  386.             <img src="img/copy.png" alt="copy sign"/>
  387.             <span>бренды:</span>
  388.           </figcaption>
  389.           <figcaption class="sec_capt">
  390.             <img src="img/mark.png" alt="mark sign"/>
  391.             <span>шины</span>
  392.           </figcaption>
  393.           <form class="shiny" action="#" method="post">
  394.             <div>
  395.               <input type="checkbox" id="brend">
  396.               <label for="brend">Бренд 1</label>
  397.             </div>
  398.             <div>
  399.               <input type="checkbox" id="brend">
  400.               <label for="brend">Бренд 2</label>
  401.             </div>
  402.             <div>
  403.               <input type="checkbox" id="brend">
  404.               <label for="brend">Бренд 3</label>
  405.             </div>
  406.           </form>
  407.           <figcaption class="sec_capt">
  408.             <img class="to_move" src="img/mark.png" alt="mark sign"/>
  409.             <span>диски</span>
  410.           </figcaption>
  411.           <form class="disk" action="#" method="post">
  412.             <div>
  413.               <input type="checkbox" id="brend">
  414.               <label for="brend">Бренд 1</label>
  415.             </div>
  416.             <div>
  417.               <input type="checkbox" id="brend">
  418.               <label for="brend">Бренд 2</label>
  419.             </div>
  420.             <div>
  421.               <input type="checkbox" id="brend">
  422.               <label for="brend">Бренд 3</label>
  423.             </div>
  424.             <div>
  425.               <button type="submit">выбрать</button>
  426.             </div>
  427.           </form>
  428.         </div>
  429.       </main>
  430.  
  431.       <figure class="logos clearfix">
  432.         <img src="img/logo.png" alt="logos"/>
  433.       </figure>
  434.       <footer>
  435.         <div class="nav">
  436.           <ul>
  437.             <li>
  438.               <a href="http://24locksmithwhittier.com/">Locksmith Whittier</a>
  439.             </li>
  440.             <li>
  441.               <a href="http://24locksmithwhittier.com/">Locksmith Whittier</a>
  442.             </li>
  443.             <li>
  444.                <a href="http://24locksmithwhittier.com/">Locksmith Whittier</a>
  445.             </li>
  446.             <li>
  447.               <a href="http://24locksmithwhittier.com/">Locksmith Whittier</a>
  448.             </li>
  449.           </ul>
  450.         </div>
  451.         <p>
  452.           Создание сайта &copy; Global Vision
  453.         </p>
  454.       </footer>
  455.     </div>
  456.   </body>
  457. </html>
Advertisement
Add Comment
Please, Sign In to add comment