carousel height changed to min height, other style fixes

This commit is contained in:
Arvind Tiwari 2017-12-15 01:34:07 +05:30
parent 2747460184
commit 955331f64b
2 changed files with 32 additions and 25 deletions

View file

@ -1,3 +1,9 @@
@media (min-width: 768px) and (max-width: 991px) {
.navbar > .container {
width: 100%;
}
}
.btn-trans {
color: #fff;
border: 2px solid #fff;
@ -143,14 +149,14 @@
}
}
.header_slider {
height: 95vh;
.header_slider > .carousel .carousel-inner {
min-height: 95vh;
display: flex;
}
.header_slider > .carousel,
.header_slider > .carousel .carousel-inner,
.header_slider > .carousel .item {
height: 100%;
.header_slider > .carousel .carousel-inner > .next,
.header_slider > .carousel .carousel-inner > .prev {
bottom: 0;
}
.header_slider .carousel-indicators {
@ -180,6 +186,11 @@
margin-top: -50px;
}
.header_slider > .carousel .item {
background: rgba(0,0,0,0.5);
flex: 1;
}
.header_slider > .carousel .item .container {
overflow: auto;
padding: 50px 20px 60px;
@ -190,16 +201,12 @@
/* background: rgba(0,0,0,0.5); */
}
.header_slider > .carousel .item {
background: rgba(0,0,0,0.5);
}
.header_slider .intro-cap {
text-align: right;
line-height: 1.1;
font-size: 23px;
margin-bottom: 12px;
padding: 30px;
padding: 30px 0;
}
.header_slider .btn-trans {
@ -245,7 +252,7 @@
text-align: right;
line-height: 1.4;
margin-bottom: 20px;
padding: 15px;
padding: 15px 0;
}
@media (max-width: 768px) {

View file

@ -1,7 +1,7 @@
{% load static i18n %}
<header class="header_slider">
<div id="carousel-header-ungleich" class="carousel slide" data-interval="8000" data-ride="carousel">
<div id="carousel-header-ungleich" class="carousel slide" data-interval="8000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-header-ungleich" data-slide-to="0" class="active"></li>
@ -12,23 +12,23 @@
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="bg_vid">
<video id="bg_vid" autoplay muted>
<source type="video/mp4" src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/applause.mp4">
<div class="bg_vid bg_vid_back">
<video autoplay muted loop>
<source type="video/mp4" src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/nico-cable.mp4">
</video>
</div>
<div class="container">
<div class="intro-cap header_slider_box cam_corner">
<div class="intro-cap">
{% trans "We Design, Configure &amp; Maintain<br>Your Linux Infrastructure " %}
</div>
<p class="intro_lead header_slider_box">Ruby on Rails, Django, Java, Webserver, Mailserver, any infrastructure that needs to configured, we provide comprehensive solutions. Amazon, rackspace or bare metal servers, we configure for you.</p>
<p class="intro_lead">Ruby on Rails, Django, Java, Webserver, Mailserver, any infrastructure that needs to configured, we provide comprehensive solutions. Amazon, rackspace or bare metal servers, we configure for you.</p>
<a class="btn btn-trans" href="">Learn More</a>
</div>
</div>
<div class="item">
<!-- <div class="bg_img" style="background-image:url({% static 'ungleich_page/img/glasfaser/header-nico-sans.jpg' %})"></div> -->
<div class="bg_vid bg_vid_back">
<video id="bg_vid" autoplay muted loop>
<video autoplay muted loop>
<source type="video/mp4" src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/applause.mp4">
</video>
</div>
@ -41,9 +41,9 @@
</div>
</div>
<div class="item">
<div class="bg_vid">
<video id="bg_vid" autoplay muted>
<source type="video/mp4" src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/applause.mp4">
<div class="bg_vid bg_vid_back">
<video autoplay muted loop>
<source type="video/mp4" src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/nanos.mp4">
</video>
</div>
<div class="container">