index.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  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, shrink-to-fit=no">
  6. <title>Modul</title>
  7. <link rel="stylesheet" href="css/font-awesome.min.css">
  8. <link rel="stylesheet" href="css/styles.css">
  9. </head>
  10. <body>
  11. <header>
  12. <div class="container clearfix">
  13. <a href="/"><img src="images/logo.png" alt="Prechu"></a>
  14. <form>
  15. <label for="search">
  16. <input type="text" id="search" placeholder="Search">
  17. </label>
  18. <label for="search-btn"><i class="fa"></i></label>
  19. <input type="submit" id="search-btn">
  20. </form>
  21. </div>
  22. </header>
  23. <section class="banner">
  24. <div class="container">
  25. <div class="slider">
  26. <div class="arrows">
  27. <img src="images/slider-arrow-left.png" alt="img" id="arrow-left">
  28. <img src="images/slider-arrow-right.png" alt="img" id="arrow-right">
  29. </div>
  30. <div class="slides">
  31. <div class="slide">
  32. <img src="images/banner.jpg" alt="">
  33. </div>
  34. <div class="slide">
  35. <img src="images/img2.png" alt="">
  36. </div>
  37. <div class="slide">
  38. <img src="images/img3.png" alt="" style = "width: 356px; height: 350px; margin-top: 50px;">
  39. </div>
  40. <div class="slide">
  41. <img src="images/img4.gif" alt="" style = "width: 356px; height: 350px; margin-top: 50px">
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46. </section>
  47. <section class="circles">
  48. <div class="container circle-flex">
  49. <div class="circle-item">
  50. <div class="icon">
  51. <i class="fa"></i>
  52. </div>
  53. <div class="circle-text">
  54. <h3>Contrary to popular</h3>
  55. <p>Lorem Ipsum is not simply random text. It has roots in a piece </p>
  56. </div>
  57. </div>
  58. <div class="circle-item">
  59. <div class="icon">
  60. <i class="fa"></i>
  61. </div>
  62. <div class="circle-text">
  63. <h3>Contrary to popular</h3>
  64. <p>Lorem Ipsum is not simply random text. It has roots in a piece </p>
  65. </div>
  66. </div>
  67. <div class="circle-item">
  68. <div class="icon">
  69. <i class="fa"></i>
  70. </div>
  71. <div class="circle-text">
  72. <h3>Contrary to popular</h3>
  73. <p>Lorem Ipsum is not simply random text. It has roots in a piece </p>
  74. </div>
  75. </div>
  76. </div>
  77. </section>
  78. <section class="shopping-cart">
  79. <div class="container">
  80. <div class="header-h1">
  81. <h1>The Shopping cart</h1>
  82. </div>
  83. <div class="shop-flex">
  84. <div class="shop-img">
  85. <a href="#" class="shop-icon">
  86. <i class="fa"></i>
  87. </a>
  88. </div>
  89. <div class="shop-text">
  90. <div class="h2-header">
  91. <h2>Some Bullet text here</h2>
  92. </div>
  93. <p>Lorem Ipsum is simply dummy text of the printing and typesetting
  94. Lorem Ipsum has been the industry's standard dummy text ever
  95. When an unknown printer took a galley of type and scrambled
  96. It to make a type specimen book. It has survived not only five centuries
  97. But also the leap into electronic typesetting,
  98. Remaining essentially unchanged. It was popularised
  99. The release of Letraset sheets containing Lorem Ipsum passages
  100. </p>
  101. </div>
  102. </div>
  103. </div>
  104. </section>
  105. <footer>
  106. <span>Copyright © 2017 A-Level</span>
  107. </footer>
  108. <script src="slider-Animation.js"></script>
  109. </body>
  110. </html>