ungleich-public/dynamicweb
6
0
Fork 0
Code Issues 1 Pull requests 2 Projects Releases Wiki Activity

slider styles fix

Browse source
This commit is contained in:
Arvind Tiwari 2017-11-27 18:37:44 +05:30
parent 2d05720016
commit add395025a
2 changed files with 79 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -122,27 +122,52 @@
}
.header_slider {
height: 100vh;
}
.header_slider > .carousel {
height: 100%;
}
.header_slider > .carousel .carousel-inner {
height: 100%;
height: 95vh;
}
.header_slider > .carousel,
.header_slider > .carousel .carousel-inner,
.header_slider > .carousel .item {
height: 100%;
}
.header_slider .carousel-control .fa {
font-size: 2em;
position: absolute;
top: 50%;
margin-top: -50px;
}
.header_slider .carousel-control .fa-angle-left {
left: 5px;
}
.header_slider .carousel-control .fa-angle-right {
right: 5px;
}
.header_slider > .carousel .item .container {
padding-top: 25px;
overflow: auto;
padding: 50px 25px 75px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
justify-content: flex-end;
}
@media (min-width: 768px) {
.header_slider .carousel-control .fa-angle-left {
left: 25px;
}
.header_slider .carousel-control .fa-angle-right {
right: 25px;
}
.header_slider .carousel-control .fa {
font-size: 4em;
}
.header_slider > .carousel .item .container {
overflow: auto;
padding: 100px 50px;
}
}
.header_slider > .carousel .bg_img {
@ -156,6 +181,36 @@
background-position: center;
}
.header_slider .intro-cap {
padding-bottom: 25px;
font-weight: bold;
text-align: right;
}
@media (min-width: 768px) {
.header_slider .intro-cap {
font-size: 2.25em;
}
}
@media (min-width: 992px) {
.header_slider .intro-cap {
font-size: 3.25em;
}
}
.header_slider .intro_lead {
color: #fff;
font-size: 1.75em;
text-align: right;
line-height: 1.4;
}
@media (max-width: 768px) {
.header_slider .intro_lead {
font-size: 1.2em;
}
}
.timeline>li .timeline-panel {
display: flex;

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

@ -1,7 +1,7 @@
{% load static i18n %}
<header class="header_slider">
<div id="carousel-header-ungleich" class="carousel slide" data-ride="carousel" data-interval="2000">
<div id="carousel-header-ungleich" class="carousel slide" data-interval="2000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-header-ungleich" data-slide-to="0" class="active"></li>
@ -14,12 +14,10 @@
<div class="item active">
<div class="bg_img" style="background-image:url({% static 'ungleich_page/img/header-bg.jpg' %})"></div>
<div class="container">
<div>
<img src="{% static 'ungleich_page/img/logo_200x200.svg'%}" heigh="300" alt="" class="logo-image" img-responsive="" width="300">
<div class="intro-cap">
{% trans "We Design, Configure &amp; Maintain <br> Your Linux Infrastructure " %}
</div>
<div class="intro-cap">
{% 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>
</div>
</div>
<div class="item">
@ -28,6 +26,7 @@
<div class="intro-cap">
{% trans "We Design, Configure &amp; Maintain <br> Your Linux Infrastructure " %}
</div>
<p class="intro_lead">Ruby on Rails, Django, Nothing else.</p>
</div>
</div>
<div class="item">
@ -39,5 +38,13 @@
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-header-ungleich" role="button" data-slide="prev">
<span class="fa fa-angle-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-header-ungleich" role="button" data-slide="next">
<span class="fa fa-angle-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>