CSS
Niyaz legenda1998bk*{
padding: 0;
margin: 0;
}
.wrapper{
display: flex;
flex-direction: column;
width: 100%;
}
.header {
display: flex;
flex-direction: row;
background-color: #f9f9f9;
}
.menu{
width: 100%;
}
.menu ul{
display: flex;
flex-direction: row;
list-style: none;
align-items: center;
height: 100%;
justify-content: flex-end;
}
.menu ul a{
color: white;
text-transform: uppercase;
text-decoration: none;
font-family: "Proxima Nova";
font-size: 18px;
}
.menu ul li{
margin: 10px;
font-family: "Proxima Nova";
font-size: 18px;
color: black;
}
.menu ul li button{
font-family: "Proxima Nova";
font-size: 18px;
border-radius: 30px;
background-color: #13c35e;
width: 130px;
height: 30px;
border: none;
color: white;
}
.logo img{
margin-left: 10px;
width: 200px;
height: 70px;
}
/*-слайдер (не работает)*/
.slider {
position: relative;
width: 900px;
margin: 50px auto;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
.slider input[name="switch"] {
display: none;
}
.switch {
position: absolute;
left: 0;
bottom: -40px;
text-align: center;
width: 100%;
}
.switch label {
display: inline-block;
width: 8px;
height: 8px;
cursor: pointer;
margin: 0 3px;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, .8);
border-radius: 50%;
border: 5px solid #2f363c;
background-color: #6bc564;
}
.slider-inner {
}
.slides {
width: 10%;
transition: all 0.5s;
}
.slides img {
float: center;
align-items: center;
}
#btn1:checked~slider-inner slides {
transform: translate(0);
}
#btn2:checked~.slider-inner .slides {
transform: translate(-900px);
}
#btn3:checked~.slider-inner .slides {
transform: translate(-1800px);
}
/*-Основной блок информации (особенности, консультанты(*/
.osobennos{
width: 100%;
}
.osob{
display: flex;
flex-direction: row;
justify-content: space-around;
}
.title_osob{
width: 100%;
background-color: #fff;
color: black;
height: 70px;
font-size: 30px;
font-family: "Proxima Nova";
display: flex;
align-items: center;
justify-content: center;
padding-top: 50px;
padding-bottom: 10px;
}
.tour{
margin-top: 30px;
display: flex;
flex-direction: column;
width: 300px;
text-align: center;
}
.tour p{
font-size: 15px;
font-family: "Proxima Nova";
margin-top: 5px;
}
.tour img{
width: 300px;
height: 300px;
}
/*--горячие туры*/
.hottour{
margin-top: 30px;
width: 100%;
}
.title_st{
width: 100%;
background-color: #fff;
color: black;
height: 70px;
font-size: 30px;
font-family: "Proxima Nova";
display: flex;
align-items: center;
justify-content: center;
padding-top: 50px;
padding-bottom: 10px;
}
/*катаог*/
.catalog {
margin:0;
text-align:center;
background:#eaf0ff;
}
.catalog label {
width: 23%;
float: left;
text-align: center;
background: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
color: #222222;
padding: 0.5%;
margin: 2%;
margin-bottom: 30px;
cursor: pointer;
}
input[type="radio"][id="gruz"]:checked + label {
background: #6666ff;
}
input[type="radio"][id="gruz"]:checked ~ .sport,
input[type="radio"][id="gruz"]:checked ~ .util
{
width: 0;
height: 0;
padding: 0;
margin: 0;
opacity: 0;
}
input[type="radio"][id="sport"]:checked + label {
background: #6666ff;
}
input[type="radio"][id="sport"]:checked ~ .gruz,
input[type="radio"][id="sport"]:checked ~ .util
{
width: 0;
height: 0;
padding: 0;
margin: 0;
opacity: 0;
}
input[type="radio"][id="util"]:checked + label {
background: #6666ff;
}
input[type="radio"][id="util"]:checked ~ .gruz,
input[type="radio"][id="util"]:checked ~ .sport
{
width: 0;
height: 0;
padding: 0;
margin: 0;
opacity: 0;
}
.sale{
width:23%;
max-height:620px;
float:left;
transition:all 1s;
margin:2%;
padding:2%;
text-align: center;
}
.sale img{
height: 200px;
}
.sale button{
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.sale button:hover {
opacity: 0.7;
}
.prod {
width:23%;
max-height:620px;
float:left;
transition:all 1s;
margin:1%;
padding:3%;
text-align: center;
}
.prod img {
height: 300px;
}
.price {
color: red;
font-size: 30px;
}
.prod button {
border: none;
outline: 0;
padding: 10px;
margin: 10px;
color: white;
background-color: #58aeb7;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.prod button:hover {
opacity: 0.7;
}
input[type="radio"] {
display:none;
}
/*---полезное*/
.priem {
position: relative;
display: inline-block;
}
.priem img {
height: 150%;
width: 139%;
}
.priem h2 {
left: 0;
position: absolute;
top: 100px;
width: 100%;
left: 130px;
}
.priem h2 span {
background: none repeat scroll 0 0 #222;
border-radius: 2px;
color: #fff;
font: 16px arial;
line-height: 29px;
padding: 3px 5px;
}
.title_priem{
width: 139%;
background-color: #fff;
color: black;
height: 70px;
font-size: 30px;
font-family: "Proxima Nova";
display: flex;
align-items: left;
justify-content: center;
padding-top: 50px;
padding-bottom: 10px;
}
/*--------------------ABOUT*/
.title_about_comp{
width: 100%;
background-color: #6bc564;
color: white;
height: 70px;
font-size: 30px;
font-family: "Proxima Nova";
display: flex;
align-items: center;
justify-content: center;
}
.about_block{
display: flex;
flex-direction: row;
margin-top: 20px;
padding: 10px;
}
.osn_inf_about{
display: flex;
flex-direction: column;
width: 100%;
text-align: center;
}
.osn_inf_about p{
margin-top: 10px;
font-family: "Proxima Nova";
font-size: 18px;
}
.adr{
display: flex;
flex-direction: column;
}
.forma_ras{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.forma_ras p{
font-family: "Proxima Nova";
font-size: 18px;
margin-top: 10px;
}
.forma_ras form h2{
text-align: center;
}
.forma_ras form button{
width: 140px;
height: 40px;
font-family: "Proxima Nova";
font-size: 18px;
background-color: #4CAF50;
color: white;
border-radius: 30px;
border: none;
}
.forma_ras form input{
font-family: "Proxima Nova";
font-size: 16px;
}
/*-----FOOOOOTEEERRRR*/
.footer{
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
height: 80px;
font-family: "Proxima Nova";
font-size: 30px;
color: white;
background-color: #3b3b3b;
align-items: center;
}
.topbutton {
width:100px;
border:2px solid #ccc;
background:#f7f7f7;
text-align:center;
padding:10px;
position:fixed;
bottom:50px;
right:50px;
color:#333;
font-family:verdana;
font-size:12px;
}