header text background options

This commit is contained in:
Arvind Tiwari 2017-12-09 04:37:37 +05:30
parent 8af5e2d0af
commit 288416ede9
2 changed files with 53 additions and 9 deletions

View file

@ -3,6 +3,7 @@
border: 2px solid #fff; border: 2px solid #fff;
padding: 4px 18px; padding: 4px 18px;
letter-spacing: 0.6px; letter-spacing: 0.6px;
background: rgba(0,0,0,0.35);
} }
.btn-trans:focus, .btn-trans:focus,
@ -186,7 +187,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
background: rgba(0,0,0,0.5); /* background: rgba(0,0,0,0.5); */
} }
.header_slider > .carousel .item { .header_slider > .carousel .item {
@ -198,7 +199,7 @@
line-height: 1.1; line-height: 1.1;
font-size: 23px; font-size: 23px;
margin-bottom: 12px; margin-bottom: 12px;
text-shadow: 0px 3px 15px #000; padding: 30px;
} }
.header_slider .btn-trans { .header_slider .btn-trans {
@ -244,6 +245,7 @@
text-align: right; text-align: right;
line-height: 1.4; line-height: 1.4;
margin-bottom: 20px; margin-bottom: 20px;
padding: 15px;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@ -345,3 +347,45 @@
min-height: 170px; min-height: 170px;
} }
} }
.header_slider_box {
position: relative;
text-shadow: 0px 3px 5px rgba(0,0,0,0.5);
background: rgba(0,0,0,0.35);
box-shadow: 0 0 5px rgba(0,0,0,0.7);
}
.cam_corner:after,
.cam_corner:before{
position: absolute;
content: ' ';
z-index: 5;
width: 50px;
height: 50px;
background: transparent;
display: block;
}
.cam_corner:after {
top: -2px;
right: -2px;
border-top: 2px solid rgba(255,255,255,0.5);
border-right: 2px solid rgba(255,255,255,0.5);
}
.cam_corner:before {
bottom: -2px;
left: -2px;
border-bottom: 2px solid rgba(255,255,255,0.5);
border-left: 2px solid rgba(255,255,255,0.5);
}
.bg_vid_back:after {
content: ' ';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0,0,0,0.35);
}

View file

@ -13,21 +13,21 @@
<div class="carousel-inner" role="listbox"> <div class="carousel-inner" role="listbox">
<div class="item active"> <div class="item active">
<div class="bg_vid"> <div class="bg_vid">
<video id="bg_vid" autoplay muted loop> <video id="bg_vid" autoplay muted>
<source src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/nanos.mp4" type="video/mp4"> <source type="video/mp4" src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/applause.mp4">
</video> </video>
</div> </div>
<div class="container"> <div class="container">
<div class="intro-cap"> <div class="intro-cap header_slider_box cam_corner">
{% trans "We Design, Configure &amp; Maintain <br> Your Linux Infrastructure " %} {% trans "We Design, Configure &amp; Maintain <br> Your Linux Infrastructure " %}
</div> </div>
<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> <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>
<a class="btn btn-trans" href="">Learn More</a> <a class="btn btn-trans" href="">Learn More</a>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<!-- <div class="bg_img" style="background-image:url({% static 'ungleich_page/img/glasfaser/header-nico-sans.jpg' %})"></div> --> <!-- <div class="bg_img" style="background-image:url({% static 'ungleich_page/img/glasfaser/header-nico-sans.jpg' %})"></div> -->
<div class="bg_vid"> <div class="bg_vid bg_vid_back">
<video id="bg_vid" autoplay muted loop> <video id="bg_vid" autoplay muted loop>
<source type="video/mp4" src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/applause.mp4"> <source type="video/mp4" src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/applause.mp4">
</video> </video>
@ -42,8 +42,8 @@
</div> </div>
<div class="item"> <div class="item">
<div class="bg_vid"> <div class="bg_vid">
<video id="bg_vid" autoplay muted loop> <video id="bg_vid" autoplay muted>
<source src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/nico-cable.mp4" type="video/mp4"> <source type="video/mp4" src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/applause.mp4">
</video> </video>
</div> </div>
<div class="container"> <div class="container">