П_Лаба_7
.docx</div>
</div>
</div>
<div class="col-lg-4">
<div class="w_block">
<img src="img/bl3.jpg" alt="пример 1" width="300" height="300">
<div class="w_block_text">
<h4 class="w_text_tit">Сайт Второй</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="review" class="review">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h3 class="ab-text text-center">Отзывы клиентов</h3>
</div>
</div>
<div class="row slideshow">
<div class="col-lg-12">
<div id="carousel" class="carousel slide d-inline-block" data-ride="carousel">
<!-- Индикаторы -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner slide ">
<div class="carousel-item active">
<img class="img-fluid" src="img/rv1.jpg" alt="Отзыв 1" height="800" width="800">
<div class="carousel-caption ">
<h5 id="text-slide">Vladimir Pupin</h5>
<p id="text-slide2">Отличный гражданин.Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item ">
<img class="img-fluid" src="img/rv2.jpg" alt="Отзыв 2" height="800" width="800">
<div class="carousel-caption">
<h5 id="text-slide">Doctor Pupkin</h5>
<p id="text-slide2">Отличный пациент.Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
<div class="carousel-item ">
<img class="img-fluid" src="img/rv3.jpg" alt="Отзыв 3" height="800" width="800">
<div class="carousel-caption">
<h5 id="text-slide">Leonard Dicaprio</h5>
<p id="text-slide2">Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<!-- Элементы управления -->
<a class="carousel-control-prev but" href="#carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Предыдущий</span>
</a>
<a class="carousel-control-next but" href="#carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Следующий</span>
</a>
</div>
</div>
</div>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<div class="row ">
<div class="col-lg-12">
<h3 class="w_text">Связаться со мной</h3>
</div>
</div>
<div class="row ">
<div class="col-lg-3">
<h4 class="con_text2">E-mail</h4>
<p class="con_text">Contact@official.com Contact@official.com </p>
<h4 class="con_text2">Address</h4>
<p class="con_text">BolshayaMorskay dom 22 Saint-Petesburg, Russia</p>
</div>
<div class="col-lg-9">
<form id="contact" action="#" method="post" name="contact" class="form">
<input id="name" class="txt" type="name" placeholder="Ваше имя">
<input id="phone" class="txt" type="phone" placeholder="Ваш телефон">
<input id="email" class="txt" type="email" placeholder="Ваш e-mail">
<textarea id="msg" class="txtarea" name="msg" placeholder="Ваше сообщение:"></textarea>
<button id="send" class="knop">Отправить</button>
</form>
</div>
</div>
</div>
</section>
</body>
</html>
body {
font-family: 'Source Sans Pro', sans-serif;
background:#242525 repeat-y;
}
.hidden{
opacity:0;
}
.visible{
opacity:1;
}
ul,li{
display: block;
padding: 0;
margin:0;
}
.menu_item {
text-decoration: none;
font-weight: 700;
font-size: 20px;
text-transform: uppercase;
}
.menu_item a{
color: #fff;
}
.menu {
margin-top: 50px;
}
.book{
margin-top: 43px;
background: #ffcc33;
color: #000;
font-size: 14px;
border-radius: 3px;
text-transform: uppercase;
padding: 12px ;
font-weight: 700;
cursor:pointer;
width: 250;
border:0;
}
.book:hover {
background: #fff ;
tansition: all .3s linear;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
}
.main-header{
padding: 25px;
}
.inf{
/*background: url('../img/bg.jpg');*/
background: #000;
}
video {
margin-top: 320px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.title{
padding: 255px;
}
.title_heading{
color: #ffcc33;
text-transform: uppercase;
font-weight: 700;
font-size: 60px;
}
.title_desc{
color: #fff;
font-size: 30px;
margin-top: -10px;
}
.about{
background: #fff;
}
.skill{
margin-top: 30px;
}
.skl{
margin-top: 30px;
}
.ab-text{
margin-top: 15px;
font-weight: 700;
text-transform: uppercase;
font-size: 50px;
}
.b_skl{
margin-top: 10px;
background: #ffcc33;
color: #000;
font-size: 14px;
border-radius: 10px;
text-transform: uppercase;
padding: 12px ;
font-weight: 700;
cursor:pointer;
width: 250;
border:0;
}
.b_skl:hover {
background: #fff ;
tansition: all .3s linear;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
}
.w_text{
margin-top: 20px;
margin-bottom: 30px;
color: #ffcc33;
font-size: 40px;
text-transform: uppercase;
font-weight: 700;
text-align: center;
}
.nav{
margin-top: 40px;
color: #000;
}
.nav-mytabs a {
position: relative;
top: 4px;
padding: 10px 25px;
border-radius: 2px 2px 0 0;
background: white;
color: black;
opacity: 0.7;
transition: all 0.1s ease-in-out;
}
.tab-content {
position: relative;
z-index: 2;
padding: 25px;
border-radius: 0 4px 4px 4px;
background: white;
}
.a_img{
margin-top: 40px;
margin-bottom: 50px;
}
figcaption {
text-align: center;
margin-top: 10px;
text-transform: uppercase;
font-weight: bold;
font-size: 15px;
}
figure:hover {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
filter: grayscale(1);
tansition: all .15s linear;
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
}
.w_block{
margin-left: auto;
margin-right: auto;
position:relative;
}
.w_block_text{
text-align: center;
width: 300px;
height: 300px;
position:absolute;
left:0;
bottom:0;
right:0;
top:0;
background:#ffcc33;
display:none;
}
.w_block:hover .w_block_text{
display:block;
}
.w_text_tit{
margin-top: 10px;
color: ;
text-transform: uppercase;
font-weight: bold;
}
.review{
margin-top: 20px;
background: #fff;
}
.img-fluid {
margin-bottom: 200px;
}
.slideshow{
margin: 0 auto;
width: 400px;
}
#text-slide{
color: #000;
font-size: 25px;
font-weight: bold;
}
#text-slide2{
color: #999;
font-size: 20px;
line-height: 21px;
}
.con_text{
color: #fff;
text-transform: uppercase;
font-size: 20px;
}
.con_text2{
color: #ffcc33;
text-transform: uppercase;
font-size: 30px;
}
.form{
margin-left: 200px;
}
.txt{
margin-bottom: 20px;
width: 200px;
}
#msg{
width: 605px;
height: 150px;
}
.knop{
margin-left: 510px;
margin-top: 20px;
background: #ffcc33;
color: #000;
font-size: 14px;
border-radius: 3px;
text-transform: uppercase;
padding: 12px ;
font-weight: 700;
cursor:pointer;
width: 250;
border:0;
}
.knop:hover {
background: #fff ;
tansition: all .3s linear;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
}
.but{
margin: ;
filter: invert(1);
}