https://pastein.ru/t/DUq
Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<div class="autopointmenu">
<title>AUTO</title>
</div>
<link rel="stylesheet" href="css/reset/css">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="images/baybibon.ico">
</head>
<body>
<div class="verh">
<div class="levo">
<img src="images/favicon.png" alt="">
<span class="vepoint">AUTO</span>
<span>POINT</span>
</div>
<div class="pravo">
<a href="#">MY ACCOUNT</a>
<a href="#">LOG IN</a>
<a href="#">ENGLISH</a>
<a href="#">USD</a>
<img src="images/cart.png" alt="" class="korzina">
</div>
</div>
<div class="osnova">
<div class="gor-menu">
<a href="#">HOME</a>
<a href="#">ABOUT US</a>
<a href="#">SPECIALS</a>
<a href="#">MANUFACTURERS</a>
<a href="#">BLOG</a>
<a href="#">CONTACTS US</a>
</div>
<div class="glav-foto">
<img src="images/slide-1.jpg" alt="фото bmw">
</div>
<div class="dve-kolonki">
<div class="lev-kol">
<div class="spisok">
<ul>
<li>EXHAUST TIPS</li>
<li>BUMPER & COMPONENTS</li>
<li>MIRRORS & COMPONENTS</li>
<li>GRILLES & COMPONENTS</li>
<li>BRAKE SISCS</li>
<li>CALIPERS</li>
<li>SHOCKS, STRUTS</li>
<li>CAR COVER</li>
<li>SEATS, SEAT COVERS</li>
<li>CARRPET KITS</li>
</ul>
</div>
<div class="akciya">
<img src="images/banner-sale.jpg" alt="фото тормозного диска">
<div class="tekst-na-akciyu">
<div class="verh-tekst">SPECIAL OFFER</div>
<div class="niz-tekst">
<div class="skidka">SAVE UP TO 30%</div>
<div class="podskidka">ON BRAKE SYSTEM</div>
</div>
</div>
</div>
</div>
<div class="prav-kol">
<div class="setka-bannerov">
<div class="banner1">
<img src="images/banner-1.jpg" alt="фото SUSPENSION пружин">
<div class="txt-na-banere">
<h2>SUSPENSION</h2>
<h3>SYSTEM</h3>
<p>The racing brake system is lower and firmer for better vehicle dynamics</p>
</div>
</div>
<div class="banner1">
<img src="images/banner-2.jpg" alt="фото тормозных brake колодок">
<div class="txt-na-banere">
<h2>BRAKE</h2>
<h3>SYSTEM</h3>
<p>Carbon ceramic brakes provide superior braking performance and less overheating.</p>
</div>
</div>
<div class="banner1">
<img src="images/banner-3.jpg" alt="фото halo фар">
<div class="txt-na-banere">
<h2>HALO</h2>
<h3>HEADLIGHTS</h3>
<p>Halogen headlights provide excellent road illumination and look beautiful.</p>
</div>
</div>
<div class="banner1">
<img src="images/banner-4.jpg" alt="фото air воздухана">
<div class="txt-na-banere">
<h2>AIR</h2>
<h3>INTAKES</h3>
<p>The zero air filter allows the engine to draw air with less resistance</p>
</div>
</div>
<div class="banner1">
<img src="images/banner-5.jpg" alt="фото турбины">
<div class="txt-na-banere">
<h2>TURBINE</h2>
<h3>SYSTEM</h3>
<p>The supercharging system forces air into the engine, increasing its power.</p>
</div>
</div>
<div class="banner1">
<img src="images/banner-6.jpg" alt="фото выхлопа">
<div class="txt-na-banere">
<h2>EXHAUST</h2>
<h3>SYSTEM</h3>
<p>The dual exhaust allows more exhaust gases to escape, thereby adding power and a beautiful sound.</p>
</div>
</div>
</div>
<div class="poloska">FEATURED PRODUCT</div>
<div class="tovary">
<div class="tovar">
<img src="images/product-5.png" alt="фото оранжевых фар">
<div class="info-tovara">
<div class="cena-knopka">
<span>$258.96</span>
<button>BUY</button>
</div>
<h4>yellow angel eyes</h4>
<p>headlights with the ability to switch the light mode to fog</p>
</div>
</div>
<div class="tovar">
<img src="images/product-34.png" alt="фото запчасть">
<div class="cena-knopka">
<span>$467.19</span>
<button>BUY</button>
</div>
<div class="info-tovara">
<h4>rear axle gear</h4>
<p>transmits engine torque to the rear axle</p>
</div>
</div>
<div class="tovar">
<img src="images/product-29.png" alt="фото белых ангельских глазок">
<div class="info-tovara">
<span>$293.99</span>
<button>BUY</button>
</div>
<h4>white angel eyes</h4>
<p>very bright headlights with round marker rings and smooth turn signals</p>
<div class="cena-knopka">
</div>
</div>
</div>
<div class="dlioefotoconteiner">
<div class="dlin-foto">
<img src="images/parallax.jpg">
<div class="carparallax">
<h2>AUTO LIGH</h2>
<h3>SYSTEM</h3>
<p>The racing brake system is lower and firmer for better vehicle dynamics</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="podval">
<div class="podval-bloki">
<div class="blok">
<ul>
<li><h5>INFORMATION</h5></li>
<li>About us</li>
<li>Delivery Information</li>
<li>Primary Policy</li>
<li>Terms & Conditions</li>
</ul>
</div>
<div class="blok">
<ul>
<li><h5>MY ACCOUNT</h5></li>
<li>My account</li>
<li>Order history</li>
<li>Gift Certificates</li>
<li>Return</li>
</ul>
</div>
<div class="blok">
<ul>
<li><h5>FOLLOW US</h5></li>
<li>FaceBook</li>
<li>Twitter</li>
<li>RSS</li>
</ul>
</div>
<div class="blok">
<ul>
<li><h5>CONTACTS</h5></li>
<li><p>My Company, 4578 Marmora Road,</p></li>
<li><p>Glasgow D04 89GR</p></li>
<li><p>Call us now: 0123-345-789</p></li>
<li><p>Email: info@demolink.org</p></li>
</ul>
</div>
</div>
<div class="podval-niz">(Alex) Power By OpenCart Auto Point ©2026</div>
</div>
</body>
</html>
ксс -
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #ffffff;
font-family: Arial;
}
.verh {
background: black;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 30px;
font-weight: bold;
}
.levo {
display: flex;
align-items: center;
gap: 5px;
}
.vepoint {
color: rgb(251, 218, 17);
}
.levo img {
width: 30px;
}
.pravo {
display: flex;
align-items: center;
gap: 20px;
}
.pravo a {
color: white;
text-decoration: none;
}
.korzina {
width: 24px;
}
.osnova {
width: 1100px;
margin: 20px auto;
background: #ffffff;
padding: 20px;
}
.gor-menu {
background: #ffffff;
padding: 10px 20px;
margin-bottom: 20px;
}
.gor-menu a {
margin-right: 30px;
text-decoration: none;
color: #333;
font-weight: bold;
}
.glav-foto img {
width: 100%;
margin-bottom: 20px;
}
.dve-kolonki {
display: flex;
gap: 30px;
}
.lev-kol {
width: 280px;
}
.spisok ul {
list-style: none;
}
.spisok li {
background: white;
border: 1px solid #aaa;
padding: 8px;
margin-bottom: 5px;
cursor: pointer;
font-weight: bold;
max-width: 100%;
}
.spisok li:hover {
background: rgb(253, 217, 19);
}
.akciya {
position: relative;
margin-top: 15px;
}
.akciya img {
width: 100%;
display: block;
}
.tekst-na-akciyu {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 15px;
text-align: center;
}
.verh-tekst {
color: white;
font-weight: bold;
font-size: 20px;
}
.niz-tekst {
text-align: center;
}
.skidka {
color: rgb(253, 217, 19);
font-size: 20px;
font-weight: bold;
margin-bottom: 5px;
}
.podskidka {
color: white;
font-size: 14px;
}
.prav-kol {
flex: 1;
}
.setka-bannerov {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.banner1 {
position: relative;
border: 1px solid #999;
}
.banner1 img {
width: 100%;
display: block;
}
.txt-na-banere {
position: absolute;
bottom: 15px;
left: 15px;
color: rgb(0, 0, 0);
max-width: 53%;
}
.txt-na-banere h2 {
color: rgb(255, 220, 56);
font-size: 24px;
}
.txt-na-banere h3 {
font-size: 16px;
}
.txt-na-banere p {
font-size: 11px;
margin-top: 5px;
}
.poloska {
background: rgb(255, 219, 19);
padding: 10px;
margin: 20px 0;
font-weight: bold;
}
.tovary {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.tovar {
background: white;
border: 1px solid #ddd;
flex: 1;
text-align: center;
padding: 15px;
}
.tovar img {
max-width: 100%;
}
.info-tovara h4 {
margin: 10px 0 5px;
}
.info-tovara p {
font-size: 12px;
color: #666;
margin-bottom: 10px;
}
.cena-knopka {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
margin-top: 10px;
visibility: hidden;
}
.tovar:hover .cena-knopka {
visibility: visible;
}
.cena-knopka span {
font-size: 20px;
font-weight: bold;
color: rgb(225, 219, 20);
}
.cena-knopka button {
background: black;
color: white;
border: none;
padding: 6px 12px;
cursor: pointer;
}
.cena-knopka button:hover {
background: rgb(255, 219, 20);
color: black;
}
.dlin-foto img {
width: 100%;
margin-top: 10px;
object-fit: cover;
height: 200px;
object-position: 50% 6%;
display: block;
}
.podval {
background: #f7f7f7;
margin-top: 30px;
}
.podval-bloki {
display: flex;
justify-content: space-between;
max-width: 1100px;
margin: 0 auto;
padding: 30px 20px;
gap: 30px;
}
.blok ul {
list-style: none;
}
.blok li {
color: #ffdb19;
margin-top: 8px;
font-size: 14px;
}
.blok h5 {
color: black;
font-size: 18px;
}
.podval-niz {
background: black;
color: #ccc;
padding: 15px 30px;
text-align: left;
}
.autopointmenu {
color: rgb(255,222, 19);
}
.imagedlphoto {
position: relative;
display: inline-block;
}
.carparallax {
background-image: url(images/parallax.jpg);
}