API tools faq
paste
Ammarsami

Locksmith Clayton

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