images added, ungleich landing modified

This commit is contained in:
Arvind Tiwari 2017-10-10 02:09:03 +05:30
commit 96a993b235
16 changed files with 251 additions and 212 deletions

View file

@ -2,18 +2,17 @@
height: 100%;
}
.navbar-transparent #logoWhite {
width: 140px;
}
.navbar-default {
border-bottom: 1px solid #e7e7e7;
}
.navbar-transparent {
border-color: transparent;
}
.navbar-default .navbar-nav>li>a {
text-transform: uppercase;
font-weight: 400;
letter-spacing: 1px;
/* font-family: 'Montserrat'; */
color: #777;
}
.navbar-transparent .navbar-nav>li>a {
@ -26,10 +25,17 @@
color: #fed136;
}
.navbar-transparent {
background: rgba(0,0,0,0.05);
box-shadow: 0 0 55px rgba(0,0,0,0.09);
@media (min-width: 768px) {
.navbar-transparent {
border-color: transparent;
}
.navbar-transparent {
background: rgba(0,0,0,0.05);
box-shadow: 0 0 55px rgba(0,0,0,0.09);
}
}
.intro-header {
background: url(../img/header-nico-sans.jpg) no-repeat center center;
background-size: cover;
@ -39,7 +45,7 @@
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
padding-toP: 70px;
padding-top: 70px;
}
.intro-header:before {
@ -69,8 +75,6 @@
text-align: right;
margin-bottom: 25px;
position: relative;
/* background: rgba(0,0,0,0.2);
box-shadow: 0 0 150px rgba(0,0,0,0.41); */
}
.high-speed h1 {
@ -108,6 +112,23 @@
top: -10px;
}
.team-member h4 {
font-family: 'Raleway', Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
margin-bottom: 20px;
}
.timeline>li .timeline-panel {
display: flex;
min-height: 100px;
align-items: center;
}
.timeline>li.timeline-inverted>.timeline-panel {
padding-bottom: 0;
}
.contact-section h2,
.contact-section h3,
.contact-section p {
@ -127,8 +148,8 @@ footer {
@media(min-width: 768px) {
section {
padding: 100px 0;
}
padding: 90px 0;
}
}

View file

@ -45,149 +45,146 @@
<!-- Header -->
<div class="intro-header" id="home">
<div class="price-tag-container">
<div class="price-tag"></div>
</div>
<div class="high-speed">
<div class="high-speed-border"></div>
<h1>{% trans "HIGH SPEED INTERNET" %}</h1>
<div class="high-speed-border"></div>
</div>
<div class="price-tag-container">
<div class="price-tag"></div>
</div>
<div class="high-speed">
<div class="high-speed-border"></div>
<h1>{% trans "HIGH SPEED INTERNET" %}</h1>
<div class="high-speed-border"></div>
</div>
</div>
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center wow fadeInDown">
<h2 class="section-heading">Technische Details</h2>
<h3 class="section-subheading text-muted">
Im Angebot enthalten sind
</h3>
</div>
</div>
<div class="row text-center">
<div class="col-sm-4">
<div class="team-member wow fadeInDown" data-wow-delay="0.5s">
<img src="{% static 'ungleich_page/img/team/5.jpg' %}" data-replaced="{% static 'ungleich_page/img/services/hosting.png' %}" class="img-responsive img-circle img-toggle" alt="">
<div class="team-member-caption inline-block">
<h4 class="portfolio-caption">Title</h4>
<p>&nbsp;</p>
<p><span class="text-muted">Symmetrische Internetleitung 100 Mbit/s upload und 100 Mbit/s download</span></p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="team-member wow fadeInDown" data-wow-delay="1s">
<img src="{% static 'ungleich_page/img/team/4.jpg' %}" data-replaced="{% static 'ungleich_page/img/services/configuration.png' %}" class="img-responsive img-circle img-toggle" alt="">
<div class="team-member-caption inline-block">
<h4 class="portfolio-caption">Title</h4>
<p>&nbsp;</p>
<p><span class="text-muted">1 öffentliche IPv4-Adresse</span></p>
<p class="text-muted">&nbsp;</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="team-member wow fadeInDown" data-wow-delay="1.5s">
<img src="{% static 'ungleich_page/img/team/6.jpg' %}" data-replaced="{% static 'ungleich_page/img/services/linux.png' %}" class="img-responsive img-circle img-toggle cursor-pointer" alt="">
<h4 class="portfolio-caption">Title</h4>
<p class="text-muted">&nbsp;</p>
<div class="team-member-caption inline-block">
<p class="text-muted">1 öffentliches IPv6-Netzwerk (/64)</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="team-member wow fadeInDown" data-wow-delay="1.5s">
<img src="{% static 'ungleich_page/img/team/6.jpg' %}" data-replaced="{% static 'ungleich_page/img/services/linux.png' %}" class="img-responsive img-circle img-toggle cursor-pointer" alt="">
<h4 class="portfolio-caption">Title</h4>
<p class="text-muted">&nbsp;</p>
<div class="team-member-caption inline-block">
<p class="text-muted">2 vorkonfigurierte Endgeräte (benötigt zwei Steckdosen auf Ihrer Seite)</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="text-center wow fadeInDown">
<h2 class="section-heading">Technische Details</h2>
<h3 class="section-subheading text-muted">Im Angebot enthalten sind</h3>
</div>
<div class="row text-center">
<div class="col-sm-4">
<div class="team-member wow fadeInDown" data-wow-delay="0.5s">
<img src="{% static 'ungleich_page/img/glasfaser/business.png' %}" data-replaced="{% static 'ungleich_page/img/services/hosting.png' %}" class="img-responsive img-circle img-toggle" alt="">
<div class="team-member-caption inline-block">
<h4 class="portfolio-caption">Business-Internet</h4>
<p class="text-muted">Symmetrische Internetleitung 100 Mbit/s upload und 100 Mbit/s download</p>
<p class="text-muted">Glasfaser-Installation bis ins Haus (keine Hausverkabelung)</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="team-member wow fadeInDown" data-wow-delay="1s">
<img src="{% static 'ungleich_page/img/glasfaser/ip.png' %}" data-replaced="{% static 'ungleich_page/img/services/configuration.png' %}" class="img-responsive img-circle img-toggle" alt="">
<div class="team-member-caption inline-block">
<h4 class="portfolio-caption">Erreichbarkeit im Internet</h4>
<p class="text-muted">1 öffentliches IPv6-Netzwerk (/64)</p>
<p class="text-muted">1 öffentliche IPv4-Adresse</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="team-member wow fadeInDown" data-wow-delay="1.5s">
<img src="{% static 'ungleich_page/img/glasfaser/switch.png' %}" data-replaced="{% static 'ungleich_page/img/services/linux.png' %}" class="img-responsive img-circle img-toggle cursor-pointer" alt="">
<div class="team-member-caption inline-block">
<h4 class="portfolio-caption">Einfach zu nutzen</h4>
<p class="text-muted">2 vorkonfigurierte Endgeräte (benötigt zwei Steckdosen auf Ihrer Seite)</p>
<p class="text-muted">Einfach einstecken und los!</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center wow fadeInDown">
<h2 class="section-heading">Wie funktioniert es?</h2>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="timeline">
<li>
<div class="container">
<div class="text-center wow fadeInDown">
<h2 class="section-heading">Wie funktioniert es?</h2>
<h3 class="section-subheading text-muted">So kommen Sie in wenigen einfachen Schritten zu ihrem High-Speed-Internet</h3>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="timeline">
<li>
<div class="timeline-image">
<img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/1.jpg' %}" alt="">
<img class="img-circle img-responsive" src="{% static 'ungleich_page/img/glasfaser/a.png' %}" alt="">
</div>
<div class="timeline-panel wow slideInLeft">
<div class="timeline-heading">
<h4>Title</h4>
</div>
<div class="timeline-body">
<p>Senden Sie uns via E-Mail Ihren Firmennamen und Ihre Anschrift zu. Wir prüfen dann die Entfernung zum nächsten Anschlusspunkt und schicken Ihnen eine Offerte zu. Sollten Sie dem Angebot zustimmen, wird die Glasfaser zu Ihrem Standort verlegt und ein Endgerät installiert.</p>
<p>Senden Sie uns via E-Mail Ihren Firmennamen und Ihre Anschrift zu.</p>
</div>
</div></li>
<li class="timeline-inverted">
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/2.jpg' %}" alt="">
<img class="img-circle img-responsive" src="{% static 'ungleich_page/img/glasfaser/b.png' %}" alt="">
</div>
<div class="timeline-panel wow slideInRight">
<div class="timeline-heading">
<h4>Title</h4>
<div class="timeline-body">
<p>Wir prüfen dann die Entfernung zum nächsten Anschlusspunkt und schicken Ihnen eine Offerte zu.</p>
</div>
</div>
</li>
<li>
<div class="timeline-image">
<img class="img-circle img-responsive" src="{% static 'ungleich_page/img/glasfaser/c.png' %}" alt="">
</div>
<div class="timeline-panel wow slideInLeft">
<div class="timeline-body">
<p>Sollten Sie dem Angebot zustimmen, wird die Glasfaser zu Ihrem Standort verlegt und ein Endgerät installiert.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="img-circle img-responsive" src="{% static 'ungleich_page/img/glasfaser/d.png' %}" alt="">
</div>
<div class="timeline-panel wow slideInDown">
<div class="timeline-body">
<p>Sie müssen dann nur noch Ihre Geräte anschliessen und schon surfen sie bllitzschnell im Internet!</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- / contact section -->
<div class="full-contact-section">
<div class="intro-header-2 contact-section" id="contact">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="title">
<h2>{% trans "Contact us" %}</h2>
</div>
<div class="contact-details">
<div class="subtitle">
<h3>ungleich GmbH</h3>
</div>
<div class="description">
<p>info@ungleich.ch</p>
<p>In der Au 7, Schwanden 8762</p>
<p>{% trans "Switzerland " %}</p>
</div>
</div>
<div class="social">
<a target="_blank" class="" href="https://twitter.com/datacenterlight"><i class="fa fa-twitter fa-fw"></i></a>
<a target="_blank" class="" href="https://github.com/ungleich"><i class="fa fa-github fa-fw"></i></a>
<a target="_blank" class="" href="https://www.facebook.com/ungleich.ch/"><i class="fa fa-facebook"></i></a>
</div>
</div>
<div class="col-sm-6">
<div id="contact-form" class="contact-form">
{% include "datacenterlight/contact_form.html" %}
</div>
</div>
<div class="intro-header-2 contact-section" id="contact">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="title">
<h2>{% trans "Contact us" %}</h2>
</div>
<div class="contact-details">
<div class="subtitle">
<h3>ungleich GmbH</h3>
</div>
<div class="description">
<p>info@ungleich.ch</p>
<p>In der Au 7, Schwanden 8762</p>
<p>{% trans "Switzerland " %}</p>
</div>
</div>
<div class="social">
<a target="_blank" class="" href="https://twitter.com/datacenterlight"><i class="fa fa-twitter fa-fw"></i></a>
<a target="_blank" class="" href="https://github.com/ungleich"><i class="fa fa-github fa-fw"></i></a>
<a target="_blank" class="" href="https://www.facebook.com/ungleich.ch/"><i class="fa fa-facebook"></i></a>
</div>
</div>
<div class="col-sm-6">
<div id="contact-form" class="contact-form">
{% include "datacenterlight/contact_form.html" %}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.banner -->