mravi/dynamicweb
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

header text background options

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

48
ungleich_page/static/ungleich_page/css/ungleich.css
View file

@ -3,6 +3,7 @@
border: 2px solid #fff;
padding: 4px 18px;
letter-spacing: 0.6px;
background: rgba(0,0,0,0.35);
}
.btn-trans:focus,
@ -186,7 +187,7 @@
display: flex;
flex-direction: column;
justify-content: flex-end;
background: rgba(0,0,0,0.5);
/* background: rgba(0,0,0,0.5); */
}
.header_slider > .carousel .item {
@ -198,7 +199,7 @@
line-height: 1.1;
font-size: 23px;
margin-bottom: 12px;
text-shadow: 0px 3px 15px #000;
padding: 30px;
}
.header_slider .btn-trans {
@ -244,6 +245,7 @@
text-align: right;
line-height: 1.4;
margin-bottom: 20px;
padding: 15px;
}
@media (max-width: 768px) {
@ -344,4 +346,46 @@
.timeline>li .timeline-panel {
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);
}

14
ungleich_page/templates/ungleich_page/includes/_header.html
View file

@ -13,21 +13,21 @@
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="bg_vid">
<video id="bg_vid" autoplay muted loop>
<source src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/nanos.mp4" type="video/mp4">
<video id="bg_vid" autoplay muted>
<source type="video/mp4" src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/applause.mp4">
</video>
</div>
<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 " %}
</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>
</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">
<div class="bg_vid bg_vid_back">
<video id="bg_vid" autoplay muted loop>
<source type="video/mp4" src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/applause.mp4">
</video>
@ -42,8 +42,8 @@
</div>
<div class="item">
<div class="bg_vid">
<video id="bg_vid" autoplay muted loop>
<source src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/nico-cable.mp4" type="video/mp4">
<video id="bg_vid" autoplay muted>
<source type="video/mp4" src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/applause.mp4">
</video>
</div>
<div class="container">