191 lines
3.7 KiB
CSS
191 lines
3.7 KiB
CSS
html {
|
||
background-image: url('resources/images/bg.png');
|
||
}
|
||
body {
|
||
font-family: Arial, Helvetica, sans-serif;
|
||
color: #333;
|
||
background: #fff;
|
||
width: 1240px;
|
||
margin: auto;
|
||
display: block;
|
||
}
|
||
.top-bar a {
|
||
color: #bbb;;
|
||
text-decoration: none;
|
||
margin-left: 5px;
|
||
font-weight: 600;
|
||
font-size: 15px;
|
||
}
|
||
.top-bar a:hover {
|
||
text-decoration: underline;
|
||
background: #2e2e2e;
|
||
}
|
||
/* верхний бар брбрбр */
|
||
.top-bar {
|
||
background: #3b3b3b;
|
||
color: #bbb;
|
||
font-size: 15pt;
|
||
padding: 10px 60px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 25px;
|
||
}
|
||
|
||
/* верхушка лол */
|
||
header {
|
||
background: linear-gradient(180deg,rgba(242, 96, 36, 1) 0%, rgba(235, 64, 24, 1) 100%);
|
||
padding-left: 50px;
|
||
padding-right: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 100px;
|
||
}
|
||
|
||
.logo-text {
|
||
font-size: 28px;
|
||
font-weight: 800;
|
||
color: #fff;
|
||
letter-spacing: 2px;
|
||
margin-right: 290px;
|
||
}
|
||
|
||
.logo-image {
|
||
background-image: url('resources/images/logo.svg');
|
||
width: 66px;
|
||
height: 76px;
|
||
position: relative;
|
||
}
|
||
|
||
nav a {
|
||
color: #fff;
|
||
text-decoration: none;
|
||
margin-left: 30px;
|
||
font-weight: 600;
|
||
font-size: 13pt;
|
||
padding-right: 30px;
|
||
}
|
||
|
||
nav a:hover {
|
||
text-decoration: underline;
|
||
background-color: #d94718;
|
||
}
|
||
|
||
/* говно основное */
|
||
.robot {
|
||
display: flex;
|
||
height: 540px;
|
||
}
|
||
|
||
.robot-text {
|
||
width: 380px;
|
||
padding: 35px 40px;
|
||
}
|
||
|
||
.robot-text h1 {
|
||
font-size: 21pt;
|
||
color: #f0531f;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.robot-text h1 span {
|
||
display: block;
|
||
}
|
||
|
||
.robot-text .subtitle {
|
||
font-size: 11pt;
|
||
color: #999;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.robot-text p {
|
||
line-height: 16pt;
|
||
font-size: 13pt;
|
||
color: #555;
|
||
}
|
||
|
||
.price {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 20px;
|
||
margin-top: 18px;
|
||
margin-bottom: 18px;
|
||
font-size: 32pt;
|
||
}
|
||
|
||
.price .old {
|
||
color: #bbb;
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.price .new {
|
||
font-weight: 700;
|
||
color: #333;
|
||
}
|
||
|
||
.btn {
|
||
display: inline-block;
|
||
background: linear-gradient(180deg,rgba(242, 96, 36, 1) 0%, rgba(235, 64, 24, 1) 100%);
|
||
color: #fff;
|
||
padding: 18px 79px;
|
||
border-radius: 4px;
|
||
text-decoration: none;
|
||
font-weight: 600;
|
||
font-size: 20pt;
|
||
}
|
||
|
||
.btn:hover {
|
||
background: #d94718;
|
||
}
|
||
|
||
/* картинка */
|
||
.robot-image {
|
||
width: 860px;
|
||
height: 540px;
|
||
background: #eee url('resources/images/robot.png') center/cover no-repeat;
|
||
position: relative;
|
||
}
|
||
|
||
.slider-arrows {
|
||
position: absolute;
|
||
bottom: 30px;
|
||
right: 30px;
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.arrow {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: #000;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 18px;
|
||
cursor: pointer;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.arrow:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 1024px) {
|
||
.hero {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.robot-text, .robot-image {
|
||
width: 100%;
|
||
}
|
||
|
||
.robot-text {
|
||
padding: 40px 30px;
|
||
}
|
||
|
||
.robot-image {
|
||
height: 400px;
|
||
}
|
||
} |