<!DOCTYPE html>
<htlm>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;1,400&display=swap" rel="stylesheet">
<title>Отзывы</title>
</head>
<body>
<header class="header">
<div class="container">
<div class="header_inner">
<div class="logo"> <img src="images/bikada.png" alt="BiKADA"></div>
<nav class="nav">
<a href="index.html" class="nav_link">Главная</a>
<a href="reviews.html" class="nav_link">Отзывы</a>
<a href="about.html" class="nav_link">Контакты</a>
</nav>
</div>
<div id="mc-review"></div>
<script type="text/javascript">
cackle_widget = window.cackle_widget || [];
cackle_widget.push({widget: 'Review', id: 79879});
(function() {
var mc = document.createElement('script');
mc.type = 'text/javascript';
mc.async = true;
mc.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://cackle.me/widget.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(mc, s.nextSibling);
})();
</script>
<a id="mc-link" href="https://cackle.me">Отзывы для сайта <b style="color:#4FA3DA">Cackl</b><b style="color:#F65077">e</b></a>
<div class="wrapper">
<h1>Рейтинг</h1>
<form action="#" class="form form_margin">
<div class="form_item">
<div class="form_label"></div>
<div class="simple-rating">
<div class="simple-rating_items">
<input id="simple-rating_5" type="radio" class="simple-rating_item" name="simple-rating" value="5">
<label for="simple-rating_5" class="simple-rating_label"></label>
<input id="simple-rating_4" type="radio" class="simple-rating_item" name="simple-rating" value="4">
<label for="simple-rating_4" class="simple-rating_label"></label>
<input id="simple-rating_3" type="radio" class="simple-rating_item" name="simple-rating" value="3">
<label for="simple-rating_3" class="simple-rating_label"></label>
<input id="simple-rating_2" type="radio" class="simple-rating_item" name="simple-rating" value="2">
<label for="simple-rating_2" class="simple-rating_label"></label>
<input id="simple-rating_1" type="radio" class="simple-rating_item" name="simple-rating" value="1">
<label for="simple-rating_1" class="simple-rating_label"></label>
</div>
</div>
</div>
</form>
</div>
</div>
</header>
<div class="intro">
<div class="container">
<script src="https://res.smartwidgets.ru/app.js" defer></script>
<div class="sw-app" data-app="80215d1166e8324da366a342d45701bf"></div>
</div>
</div>
</body>
</htlm>body {
margin: 0;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
color: #333;
line-height: 1.6;
}
*{
margin: 0;
padding: 0;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6 {
margin: 0;
}
/*container */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/*intro*/
.intro {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100vh;
background: url("../HTML/images/patern2.jpg") center
no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
.intro_title {
font-family: 'Montserrat', sans-serif;
color: #fff;
font-size: 100px;
font-weight: 700;
text-transform: uppercase;
line-height: 1;
}
.intro_title:after {
content: "";
display: block;
width: 60px;
height: 3px;
margin: 60px auto 60px;
background-color: #fff;
}
.intro_inner {
width: 100%;
max-width: 880px;
margin: 0 auto;
text-align: center;
}
/*Header*/
.header {
width: 100%;
padding-top: 30px;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1000;
}
.header_inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.header-logo {
font-size: 30px;
font-weight: 700;
color: #fff;
}
/*nav*/
.nav {
font-size: 25px;
text-transform: uppercase;
}
.nav_link {
display: inline-block;
vertical-align: top;
margin: 10px;
position: relative;
color: #fff;
text-decoration: none;
transition: color 0.2s linear;
}
.nav_link:after {
content: "";
display: block;
width: 100%;
height: 3px;
display: none;
background-color:#fce38a;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
}
.nav_link:hover {
color: #fce38a;
}
.nav_link:hover:after {
display: block;
color: #fce38a;
}
/*button*/
.btn {
display: inline-block;
vertical-align: top;
padding: 8px 30px;
border: 2px solid #fff;
font-size: 14px;
font-weight: 700px;
color: #fff;
text-transform: uppercase;
text-decoration: none;
transition: background 0.1s
linear, solo 0.1s linear;
}
.btn:hover {
background-color: #fff;
color: #333;
}
/*rating*/
.simple-rating {
position: relative;
font-size: 80px;
display: inline-block;
}
.simple-rating::before {
content: "★★★★★";
display: block;
}
.simple-rating_items {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
flex-direction: row-reverse;
overflow: hidden;
}
.simple-rating_item {
position: absolute;
width: 0%;
height: 0%;
opacity: 0;
visibility: hidden;
top: 0;
left: 0;
}
.simple-rating_label {
flex: 0 0 20%;
height: 100%;
cursor: pointer;
color: #fff;
}
.simple-rating_label::before {
content: "★";
display: block;
transition: color 0.3s ease 0x;
}
.simple-rating_item:checked,
.simple-rating_item:checked ~ .simple-rating_label {
color: #fce38a;
}
.simple-reating_label:hover,
.simple-reating_label:hover ~ .simple-rating_label,
.simple-reating_label:checked ~ .simple-reating_label:hover {
color: #ffef9f;
}
Простой
Простой
Простой
Простой
Простой
