Radaev_A._V._PI-23_IP-Lab/Lab2/public/styles/style.css
Arkadiy Radaev 8a5d83a2c2 lab2
2023-12-01 20:48:02 +04:00

244 lines
3.6 KiB
CSS

@charset "UTF-8";
/*Обнуление*/
* {
padding: 0;
margin: 0;
border: 0;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:focus, :active {
outline: none;
}
a:focus, a:active {
outline: none;
}
nav, footer, header, aside {
display: block;
}
html, body {
height: 100%;
width: 100%;
font-size: 100%;
line-height: 1;
font-size: 14px;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
input, button, textarea {
font-family: inherit;
}
input::-ms-clear {
display: none;
}
button {
cursor: pointer;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
a, a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
ul li {
list-style: none;
}
img {
vertical-align: top;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: 400;
}
/* ----Обнуление конец--- */
.header__image {
width: 100%;
height: auto;
}
.wraper{
min-width: 100%;
display: flex;
flex-direction: column;
}
.main{
flex: 1 1 auto;
}
.title {
margin: 100px 0px;
text-align: center;
font-size: 60px;
}
.car__img{
max-width: 800px;
width: 100%;
height: auto;
border: 2px;
border-radius: 20px;
}
.car {
border: 3px solid black;
gap: 30px;
margin-top: 100px;
}
button {
width: 150px;
height: 50px;
background-color: #E0CA00;
border-radius: 20px;
margin-top: auto;
margin-left: auto;
text-align: center;
}
button:hover{
background-color:aquamarine;
}
.subtitle {
font-size: 40px;
margin: 0px;
margin-top: 40px;
}
/* car */
footer {
background-color: blue;
width: 100%;
margin-top: 130px;
}
.foot__list{
display: flex;
align-items: center;
gap: 20px;
}
/* --------3--------- */
.diler__image {
max-width: 600px;
width: 100%;
height: auto;
border-radius: 10px;
}
.diler__item {
width: 100%;
height: auto;
}
.diler__text {
margin-right: auto;
}
/* -----------4------- */
.box {
background-color: gray;
height: auto;
width: 100%;
border-radius: 20px;
}
.box__text {
height: auto;
}
.box__img {
min-width: 600px;
max-width: 900px;
margin: auto 0px;
width: 100%;
height: auto;
border-radius: 20px;
}
/* ------5------------- */
.text_block {
width: 100%;
height: auto;
}
.text{
font-size: 21px;
line-height: 30px;
text-align: justify;
}
.subtitle_five {
font-size: 35px;
}
/* --adaptiv-------- */
@media (max-width: 960px) {
.car {
flex-direction: column;
height: 100%;
margin-top: 50px;
}
.title {
margin-top: 10px;
}
.car__txt{
font-size: 30px;
}
.subtitle {
font-size: 40px;
margin-bottom: 20px;
}
.dilers{
flex-direction: column;
}
.box__img{
min-width: 350px;
}
}
@media (max-width: 680px) {
.diler__image{
max-width: 400;
}
.box{
flex-direction: column;
}
.box__img{
min-width: 300px;
}
h2 {
margin-top: 10px;
font-size: 30px;
}
}
@media (max-width: 500px) {
.text {
font-size: 15px;
width: 100%;
height: 100%;
}
.subtitle_ {
font-size: 22px;
}
}
@media (max-width: 400px) {
.title {
margin-top: 10px;
font-size: 30px;
}
.car__txt{
font-size: 20px;
}
.subtitle {
font-size: 25px;
margin-bottom: 20px;
}
.foot__li{
max-width: 25px;
height: auto;
}
}