API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Oct 8th, 2023
23
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.51 KB | None | 0 0
raw download clone embed print report
  1. html:
  2. <!DOCTYPE html>
  3. <html lang="ru">
  4.  
  5. <head>
  6. <meta charset="UTF-8" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8. <title>Мир Обоев</title>
  9. <link rel="stylesheet" href="https://code.s3.yandex.net/web-code/fonts/fonts.css" />
  10. <link rel="stylesheet" href="styles/style.css" />
  11. </head>
  12.  
  13. <body>
  14. <header class="overlay">
  15.  
  16. <div class="title-icons">
  17. <h1 class="header-title"> Мир Обоев </h1>
  18. <img src="https://www.svgrepo.com/show/178197/fabric-material.svg" alt="Обои">
  19. <img src="https://www.svgrepo.com/show/17547/paint-roller.svg" alt="Валик">
  20. <img src="https://library.kissclipart.com/20180830/zfw/kissclipart-paint-bucket-drawing-easy-clipart-drawing-paint-cl-4ba76cb2a6a5fa60.png" alt="Краска">
  21. <img src="https://cdn1.iconfinder.com/data/icons/household-items-2/100/glue-1024.png" alt="Клей">
  22. <p class="main-text">Интернет магазин<br>от эконом до премиум</p>
  23. </div>
  24.  
  25. <div class="site-info" >
  26. <a class="phone" href="tel:+79289063707"> <img src="https://i.ibb.co/6FV2Mqb/pngtree-phone-icon-png-image-1817554-Photo-Room-png-Photo-Room.png" alt="Обои">+7 (928) 906-37-07</a>
  27. <p><img src="https://i.ibb.co/D7Vkf5p/png-transparent-computer-icons-clock-angle-illustrator-time-Photo-Room-png-Photo-Room.png" alt="Обои">ежедневно 9:00 — 19:00</p>
  28. </div>
  29.  
  30. <div class="contact-info">
  31. <a href="#" class="word">О компании</a>
  32. <span class="separator"></span>
  33. <a href="#" class="word">Новости</a>
  34. <span class="separator"></span>
  35. <a href="#" class="word">Услуги</a>
  36. <span class="separator"></span>
  37. <a href="#" class="word">Интересное</a>
  38. <span class="separator"></span>
  39. <a href="#" class="word">Контакты</a>
  40. </div>
  41.  
  42. <div class="shop-menu">
  43. <button class="button1"><img src="https://i.ibb.co/FDrPTry/Location-Larger.png" alt="Обои"> Город</button>
  44. <button class="button2"><img src="https://cdn1.iconfinder.com/data/icons/digital-symbols/100/ECommerce_Digital_Website_Media_Interface_Online-130-1024.png" alt="Обои"> Вход</button>
  45. <button class="button3"><img src="https://i.ibb.co/D11L2Ss/shopping-cart-computer-icons-white-png-favpng-CUXn-L8s3z-Zy-EZLunnr3-Dd-TEQX-removebg-preview.png" alt="Обои"> Корзина</button>
  46. </div>
  47.  
  48. <!--
  49.  
  50. <div class="links">
  51. <a href=""><img src="https://cdn.worldvectorlogo.com/logos/telegram-2019-logo.svg"></a>
  52. <a href=""><img src="https://deskmed.ru/wp-content/files/photo-1-1536x1536.png"></a>
  53. </div>
  54.  
  55. <div class="search">
  56. <input type="search" id="site-search" name="q" />
  57. <button></button>
  58. </div>
  59. -->
  60.  
  61. </header>
  62.  
  63. <div class="container">
  64. <section class="menu">
  65. <div class="catalog">
  66. <div class="catalog-header"><span>Категории</span></div>
  67. <ul class="catalog-list">
  68. <li class="catalog-item">
  69. <label class="catalog-link">
  70. <img src="https://www.svgrepo.com/show/178197/fabric-material.svg" alt="Обои" >
  71. <p class="list">Обои<p>
  72. </label>
  73. <input type="checkbox" id="sub-menu-1" class="sub-menu-checkbox">
  74. <div class="catalog-subcatalog">
  75. <ul>
  76. <li><a href="#" class="catalog-subcatalog-link">Россия</a></li>
  77. <li><a href="#" class="catalog-subcatalog-link">Германия</a></li>
  78. <li><a href="#" class="catalog-subcatalog-link">Италия</a></li>
  79. <li><a href="#" class="catalog-subcatalog-link">Нидерланды</a></li>
  80. <li><a href="#" class="catalog-subcatalog-link">Франция</a></li>
  81. <li><a href="#" class="catalog-subcatalog-link">Китай</a></li>
  82. <li><a href="#" class="catalog-subcatalog-link">Англия</a></li>
  83. <li><a href="#" class="catalog-subcatalog-link">Турция</a></li>
  84. </ul>
  85. </div>
  86. </li>
  87. <li class="catalog-item">
  88. <label class="catalog-link">
  89. <img src="https://i.ibb.co/t2KNtpb/650-6500238-png-file-removebg-preview.png" alt="Фотообои">
  90. <p>Фотообои</p>
  91. </label>
  92. <input type="checkbox" id="sub-menu-1" class="sub-menu-checkbox">
  93. <div class="catalog-subcatalog">
  94. <ul>
  95. <li><a href="#" class="catalog-subcatalog-link">Пейзажи и природа</a></li>
  96. <li><a href="#" class="catalog-subcatalog-link">Города и архитектура</a></li>
  97. <li><a href="#" class="catalog-subcatalog-link">Искусство и абстракция</a></li>
  98. <li><a href="#" class="catalog-subcatalog-link">Детская комната</a></li>
  99. <li><a href="#" class="catalog-subcatalog-link">Космос и наука</a></li>
  100. <li><a href="#" class="catalog-subcatalog-link">Еда и напитки</a></li>
  101. <li><a href="#" class="catalog-subcatalog-link">Интерьер и дизайн</a></li>
  102. <li><a href="#" class="catalog-subcatalog-link">Праздники и события</a></li>
  103. </ul>
  104. </li>
  105. <li class="catalog-item">
  106. <label class="catalog-link">
  107. <img src="https://www.svgrepo.com/show/24636/parquet.svg" alt="Настенные покрытия" >
  108. <p>Настенные покрытия</p>
  109. </label>
  110. <input type="checkbox" id="sub-menu-1" class="sub-menu-checkbox">
  111. <div class="catalog-subcatalog">
  112. <ul>
  113. <li><a href="#" class="catalog-subcatalog-link">3D обои</a></li>
  114. <li><a href="#" class="catalog-subcatalog-link">Текстурные покрытия</a></li>
  115. <li><a href="#" class="catalog-subcatalog-link">Обои с объемными узорами</a></li>
  116. <li><a href="#" class="catalog-subcatalog-link">Спецэффекты на стенах</a></li>
  117. <li><a href="#" class="catalog-subcatalog-link">Флоуресцентные и светящиеся обои</a></li>
  118. </ul>
  119. </li>
  120. <li class="catalog-item">
  121. <label class="catalog-link">
  122. <img src="https://www.svgrepo.com/show/178197/fabric-material.svg" alt="Жидкие обои">
  123. <p>Жидкие обои</p>
  124. </label>
  125. <input type="checkbox" id="sub-menu-1" class="sub-menu-checkbox">
  126. <div class="catalog-subcatalog">
  127. <ul>
  128. <li><a href="#" class="catalog-subcatalog-link">Текстурные</a></li>
  129. <li><a href="#" class="catalog-subcatalog-link">Металлические</a></li>
  130. <li><a href="#" class="catalog-subcatalog-link">Цветные</a></li>
  131. <li><a href="#" class="catalog-subcatalog-link">С эффектом мрамора</a></li>
  132. <li><a href="#" class="catalog-subcatalog-link">Глянцевые</a></li>
  133. <li><a href="#" class="catalog-subcatalog-link">Декоративные</a></li>
  134. <li><a href="#" class="catalog-subcatalog-link">С эффектом стекла</a></li>
  135. </ul>
  136. </li>
  137. <li class="catalog-item">
  138. <label class="catalog-link">
  139. <img src="https://cdn1.iconfinder.com/data/icons/household-items-2/100/glue-1024.png" alt="Клей" >
  140. <p>Клей</p>
  141. </label>
  142. <input type="checkbox" id="sub-menu-1" class="sub-menu-checkbox">
  143. <div class="catalog-subcatalog">
  144. <ul>
  145. <li><a href="#" class="catalog-subcatalog-link">Универсальный</a></li>
  146. <li><a href="#" class="catalog-subcatalog-link">Для бумажных обоев</a></li>
  147. <li><a href="#" class="catalog-subcatalog-link">Для виниловых обоев</a></li>
  148. <li><a href="#" class="catalog-subcatalog-link">Для текстильных обоев</a></li>
  149. </ul>
  150. </li>
  151. <li class="catalog-item">
  152. <label class="catalog-link">
  153. <img src="https://cdn.onlinewebfonts.com/svg/img_551306.png" alt="Ламинат" >
  154. <p>Ламинат</p>
  155. </label>
  156. <input type="checkbox" id="sub-menu-1" class="sub-menu-checkbox">
  157. <div class="catalog-subcatalog">
  158. <ul>
  159. <li><a href="#" class="catalog-subcatalog-link">Paradise</a></li>
  160. <li><a href="#" class="catalog-subcatalog-link">Ritter</a></li>
  161. <li><a href="#" class="catalog-subcatalog-link">Winlerk</a></li>
  162. <li><a href="#" class="catalog-subcatalog-link">WesterHof</a></li>
  163. <li><a href="#" class="catalog-subcatalog-link">Egger Pro</a></li>
  164. <li><a href="#" class="catalog-subcatalog-link">GreenWald</a></li>
  165. <li><a href="#" class="catalog-subcatalog-link">EuroHome</a></li>
  166. <li><a href="#" class="catalog-subcatalog-link">AGT</a></li>
  167. </ul>
  168.  
  169. </li>
  170. <li class="catalog-item">
  171. <label class="catalog-link">
  172. <img src="https://library.kissclipart.com/20180830/zfw/kissclipart-paint-bucket-drawing-easy-clipart-drawing-paint-cl-4ba76cb2a6a5fa60.png" alt="Краска" >
  173. <p>Краска</p>
  174. </label>
  175. <input type="checkbox" id="sub-menu-1" class="sub-menu-checkbox">
  176. <div class="catalog-subcatalog">
  177. <ul>
  178. <li><a href="#" class="catalog-subcatalog-link">Paradise</a></li>
  179. <li><a href="#" class="catalog-subcatalog-link">Ritter</a></li>
  180. <li><a href="#" class="catalog-subcatalog-link">Winlerk</a></li>
  181. <li><a href="#" class="catalog-subcatalog-link">WesterHof</a></li>
  182. <li><a href="#" class="catalog-subcatalog-link">Egger Pro</a></li>
  183. <li><a href="#" class="catalog-subcatalog-link">GreenWald</a></li>
  184. <li><a href="#" class="catalog-subcatalog-link">EuroHome</a></li>
  185. <li><a href="#" class="catalog-subcatalog-link">AGT</a></li>
  186. </ul>
  187.  
  188. </li>
  189. <li class="catalog-item">
  190. <label class="catalog-link">
  191. <img src="https://www.svgrepo.com/show/178197/fabric-material.svg" alt="Лепной декор" >
  192. <p>Лепной декор</p>
  193. </label>
  194. <input type="checkbox" id="sub-menu-1" class="sub-menu-checkbox">
  195. <div class="catalog-subcatalog">
  196. <ul>
  197. <li><a href="#" class="catalog-subcatalog-link">Перфект</a></li>
  198. <li><a href="#" class="catalog-subcatalog-link">EuroWood</a></li>
  199. </ul>
  200.  
  201. </li>
  202. </ul>
  203. </div>
  204. </section>
  205.  
  206. <section class="content">
  207.  
  208. <div class="card">
  209. <img class="card-image" src="https://i.ibb.co/xhDqN50/1879.png" />
  210. <p class="card-text">Marburg Empire (Германия)</p>
  211. <h5 class="card-art">Арт. 4747</h5>
  212. <h5 class="card-width">Ширина: 1.06 м</h5>
  213. <h3 class="card-price">1150 Р</h3>
  214. <button>Купить</button>
  215. </div>
  216.  
  217. <div class="card">
  218. <img class="card-image" src="https://i.ibb.co/F8VPmFq/1878.png" />
  219. <p class="card-text">Zambaiti Parati Canova (Италия)</p>
  220. <h5 class="card-art">Арт. 4772</h5>
  221. <h5 class="card-width">Ширина: 1.06 м</h5>
  222. <h3 class="card-price">1500 Р</h3>
  223. <button>Купить</button>
  224. </div>
  225.  
  226. <div class="card">
  227. <img class="card-image"src="https://i.ibb.co/hKzLVHM/1880.png"/>
  228. <p class="card-text">Primo Parati TESORO (Италия)</p>
  229. <h5 class="card-art">Арт. 5243</h5>
  230. <h5 class="card-width">Ширина: 1.06 м</h5>
  231. <h3 class="card-price">1800 Р</h3>
  232. <button>Купить</button>
  233. </div>
  234.  
  235. <div class="card">
  236. <img class="card-image" src="https://i.ibb.co/2g4c5rk/1877.png"/>
  237. <p class="card-text">Erismann Erismann (Россия)</p>
  238. <h5 class="card-art">Арт. 4725</h5>
  239. <h5 class="card-width">Ширина: 1.06 м</h5>
  240. <h3 class="card-price">2400 Р</h3>
  241. <button>Купить</button>
  242. </div>
  243.  
  244. <div class="card">
  245. <img class="card-image" src="https://i.ibb.co/zNd0mKT/1876.png"/>
  246. <p class="card-text">Zambaiti Parati Melodia (Италия)</p>
  247. <h5 class="card-art">Арт. 4245</h5>
  248. <h5 class="card-width">Ширина: 1.06 м</h5>
  249. <h3 class="card-price">999 Р</h3>
  250. <button>Купить</button>
  251. </div>
  252.  
  253. <div class="card">
  254. <img class="card-image" src="https://i.ibb.co/HVpqLbS/1875.png" />
  255. <p class="card-text">Zambaiti Parati Melodia (Италия)</p>
  256. <h5 class="card-art">Арт. 4443</h5>
  257. <h5 class="card-width">Ширина: 1.06 м</h5>
  258. <h3 class="card-price">999 Р</h3>
  259. <button>Купить</button>
  260. </div>
  261.  
  262. </section>
  263.  
  264. </div>
  265. <footer class="footer">
  266. <div class="footer-content">
  267. <h4 class="footer-author">Мир Обоев © 2023. All Rights Reserved</h4>
  268. <a class="email" href="mailto:makleo2002@gmail.com">Email: makleo2002@gmail.com</a>
  269. </div>
  270. </footer>
  271. </body>
  272. </html>
  273.  
  274.  
  275.  
  276. css:
  277. * {
  278. box-sizing: border-box;
  279. }
  280. body,
  281. h1,
  282. h2,
  283. h3,
  284. h4,
  285. p {
  286. margin: 0;
  287. font-weight: normal;
  288. font-size: 100%;
  289. }
  290. body {
  291. font-family: 'Open Sans', Arial, sans-serif;
  292. }
  293. a:hover{
  294. color: #FFFF00;
  295. }
  296. a{
  297. text-decoration: none;
  298. }
  299. .header {
  300. display: flex;
  301. height: 200px;
  302. background-color: rgb(95 13 238 / 0.5);
  303. text-align: center;
  304. }
  305. .overlay {
  306. display: flex;
  307. height: 200px;
  308. background-color: rgb(95 13 238 / 0.5);
  309. }
  310. .overlay h1 {
  311. color: white;
  312. font-weight: 800;
  313. font-size: 26px;
  314. }
  315. .title-icons{
  316. margin: 2% 0 0 5%;
  317. width: 20%;
  318. height:50%;
  319. }
  320. .title-icons img {
  321. width: 15%;
  322. }
  323. .title-icons p{
  324. text-align: center;
  325. margin: 0 40% 0 0
  326. }
  327. .site-info{
  328. margin: 3% 0 0 0%;
  329. width: 20%;
  330. height: 30%;
  331. }
  332. .site-info img{
  333. width: 10%;
  334. }
  335. .phone {
  336. color: white;
  337. font-size: 22px;
  338. font-weight: 900;
  339. }
  340. .phone:hover{
  341. color: #FFFF00;
  342. }
  343. .contact-info{
  344. width: 35%;
  345. height: 50px;
  346. display: flex;
  347. align-items: center;
  348. }
  349.  
  350. .contact-info img{
  351. position: relative;
  352. width: 100px;
  353. height: 100px;
  354. top: 95%;
  355. right: 50%;
  356. }
  357. .word {
  358. margin: 0 5px;
  359. color: white; /* Цвет текста */
  360. }
  361. .separator {
  362. width: 2px;
  363. height: 20px;
  364. background-color: white;
  365. margin: 0 5px;
  366. }
  367. .search{
  368. display: flex;
  369. align-items: center;
  370. width: 80%;
  371. height: 100%;
  372. }
  373. .search input{
  374. margin: 5% 0;
  375. width: 320px;
  376. height: 30px;
  377. }
  378. .search button{
  379. width: 40px;
  380. height: 40px;
  381. background-image: url(https://cdn-icons-png.flaticon.com/512/3936/3936453.png);
  382. background-position: center;
  383. background-size: cover;
  384. padding: 0;
  385. }
  386. .shop-menu{
  387. width: 20%;
  388. height: 100%;
  389. display: inline-flex;
  390. margin: 0 auto;
  391. }
  392. .shop-menu img{
  393. width: 35%;
  394. margin: 5% auto;
  395. }
  396. .button1{
  397. width: 80px;
  398. height: 30px;
  399. background-color: rgb(95 13 238 / 0);
  400. border: 2px solid rgb(95 13 238 / 0);
  401. cursor: pointer;
  402. font-weight: bold;
  403. color: #FFFFFF;
  404. text-align: center; /* Выравнивание текста по центру */
  405. display: flex; /* Используем flex для центрирования текста и изображения */
  406. justify-content: center; /* Центрирование по горизонтали */
  407. align-items: center; /* Центрирование по вертикали */
  408. margin: 50% 1% 0 0;
  409. }
  410. .button2{
  411. width: 80px;
  412. height: 30px;
  413. background-color: rgb(95 13 238 / 0);
  414. border: 2px solid rgb(95 13 238 / 0);
  415. cursor: pointer;
  416. font-weight: bold;
  417. color: #FFFFFF;
  418. text-align: center; /* Выравнивание текста по центру */
  419. display: flex; /* Используем flex для центрирования текста и изображения */
  420. justify-content: center; /* Центрирование по горизонтали */
  421. align-items: center; /* Центрирование по вертикали */
  422. margin: 50% 5% 0 0;
  423. }
  424. .button3 {
  425. width: 100px;
  426. height: 30px;
  427. background: linear-gradient(45deg, #FFD700, #FFFF00);
  428. border: 2px solid #FFD700;
  429. color: #FFFFFF;
  430. text-align: center;
  431. line-height: 30px;
  432. cursor: pointer;
  433. font-weight: bold;
  434. transition: background 0.3s ease;
  435. text-align: center; /* Выравнивание текста по центру */
  436. display: flex; /* Используем flex для центрирования текста и изображения */
  437. justify-content: center; /* Центрирование по горизонтали */
  438. align-items: center; /* Центрирование по вертикали */
  439. margin: 50% 5% 0 0;
  440. }
  441. .button1:hover {
  442. background: linear-gradient(45deg, #FFFF00, #FFD700);
  443. }
  444. .button2:hover {
  445. background: linear-gradient(45deg, #FFFF00, #FFD700);
  446. }
  447. .button3:hover {
  448. background: linear-gradient(45deg, #FFFF00, #FFD700);
  449. }
  450. .container {
  451. display: flex; /* Установите контейнеру flex-контейнером */
  452. background-color: #f0fbfe;
  453. }
  454. .menu {
  455. width: 30%;
  456. height: 100%;
  457. margin: 3% 5% 0 1%;
  458. background: linear-gradient(135deg, #3399FF, #9933CC);
  459. text-align: center;
  460. color: white; /* Цвет текста в меню */
  461. }
  462. .catalog-header{
  463. margin: 5% 0 0 0;
  464. }
  465.  
  466. .content {
  467. width: 770px;
  468. margin: 5% 0 0 0 ;
  469. font-size: 0;
  470. flex:1;
  471. }
  472. .card {
  473. display: inline-block;
  474. width: 250px;
  475. height: 450px;
  476. margin-right: 50px;
  477. margin-bottom: 50px;
  478. border: 1px solid black;
  479. padding: 25px 25px 30px;
  480. box-shadow: 4px 4px 0 black;
  481. position:relative;
  482. }
  483. .card button{
  484. width: 80px;
  485. height: 30px;
  486. background-color: #ff3f46;
  487. border: #ff3f46;
  488. cursor: pointer;
  489. font-weight: bold;
  490. color: #FFFFFF;
  491. position: absolute;
  492. bottom: 5%;
  493. right: 5%;
  494. }
  495. .card button:hover {
  496. background: linear-gradient(45deg, #ff0102, #ff0102);
  497. }
  498. .no-right-margin {
  499. margin-right: 0;
  500. }
  501. .card-price {
  502. font-weight: 800;
  503. font-size: 25px;
  504. text-transform: uppercase;
  505. position: absolute;
  506. bottom: 4.5%;
  507. left:5%;
  508. }
  509. .card-text {
  510. font-size: 18px;
  511. text-align: center;
  512. }
  513. .card-image {
  514. width: 100%;
  515. margin-bottom: 20px;
  516. border: 1px solid black;
  517. }
  518. .card-width{
  519. font-size: 14px;
  520. font-weight: 300;
  521. position: absolute;
  522. bottom: 10%;
  523. left: 5%;
  524. }
  525. .card-art{
  526. font-size: 14px;
  527. font-weight: 300;
  528. position: absolute;
  529. bottom: 17%;
  530. left: 5%;
  531. }
  532. .footer {
  533. display: flex;
  534. justify-content: center; /* Центрировать содержимое по горизонтали */
  535. align-items: center; /* Центрировать содержимое по вертикали */
  536. height: 200px;
  537. background-color: #5f0dee;
  538. }
  539. .footer-content {
  540. text-align: center; /* Центрировать текст по центру */
  541. color: white;
  542. font-weight: 800;
  543. font-size: 25px;
  544. }
  545. .email {
  546. margin-top: 10px; /* Добавить отступ между названием и почтой */
  547. display: block; /* Перенести почту на следующую строку */
  548. color: white;
  549. font-size: 18px; /* Уменьшить размер шрифта для почты (по желанию) */
  550. }
  551. .footer-author {
  552. margin: auto;
  553. color: white;
  554. font-weight: 800;
  555. font-size: 25px;
  556. }
  557. .catalog-link {
  558. display: flex;
  559. align-items: center;
  560. text-decoration: none;
  561. color: #333;
  562. cursor: pointer;
  563. margin: 0 0 10px 0;
  564. }
  565. .catalog-link img{
  566. width: 10%;
  567. margin: 0 5% 0 0;
  568. }
  569. .catalog-subcatalog {
  570. max-height: 0;
  571. overflow: hidden;
  572. text-align: left;
  573. margin-left: 10%;
  574. }
  575. .catalog-subcatalog-link {
  576. color: white;
  577. }
  578. .catalog-subcatalog-link:hover {
  579. color: #FFD700; /* Желтый цвет текста при наведении */
  580. }
  581. /* Стили для отображения подменю при наведении */
  582. .catalog-item:hover .catalog-subcatalog {
  583. max-height: 200px; /* Высота подменю */
  584. }
  585. /* Скрытие чекбоксов */
  586. .sub-menu-checkbox {
  587. display: none;
  588. }
  589. .catalog-link:hover {
  590. color: #FFD700; /* Желтый цвет текста при наведении */
  591. }
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!