images added, ungleich landing modified

This commit is contained in:
Arvind Tiwari 2017-10-10 02:09:03 +05:30
parent 695a8687fd
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 -->

View File

@ -418,7 +418,6 @@ section h3.section-subheading {
#portfolio .portfolio-item .portfolio-caption h4 {
margin: 0;
font-size: bold;
text-transform: none;
color: #494949;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

View File

@ -2,81 +2,103 @@
{% load i18n %}
<section id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center wow fadeInDown">
<h2 class="section-heading">{% trans "ABOUT" %}</h2>
<h3 class="section-subheading text-muted">{% trans "The timeline of ungleich" %}</h3>
</div>
</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="">
</div>
<div class="timeline-panel wow slideInLeft">
<div class="timeline-heading">
<h4>2000</h4>
</div>
<div class="timeline-body">
<p>{% trans "The first incarnation of ungleich" %}</p>
<p>{% trans "in Germany" %}</p>
</div>
</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="">
</div>
<div class="timeline-panel wow slideInRight">
<div class="timeline-heading">
<h4>2013</h4>
</div>
<div class="timeline-body">
<p>{% trans "ungleich founded" %} </p>
<p>{% trans "in Switzerland" %} </p>
</div>
</div>
</li>
<li>
<div class="timeline-image">
<img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/6.jpg' %}" alt="">
</div>
<div class="timeline-panel wow slideInLeft">
<div class="timeline-heading">
<h4>2014</h4>
</div>
<div class="timeline-body">
<p>{% trans "ungleich present at various conferences" %}: <br><a href="http://www.linuxtag.org/2014/en/program/talk-details/?eventid=1238">Linuxtag</a>, <a href="https://www.usenix.org/conference/ucms14/summit-program/presentation/schottelius">UCMS</a>, Linux Erfa, <a href="https://www.ethz.ch/en.html">ETH Zurich</a><br>
</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/4.jpg' %}" alt="">
</div>
<div class="timeline-panel wow slideInRight">
<div class="timeline-heading">
<h4> 2015</h4>
</div>
<div class="timeline-body">
<p>{% trans "ungleich introduces HA-Hosting" %} </p>
<p>{% trans "and introduces affordable 24X7 support." %}</p>
<p>{% trans "ungleich launches" %}<a href="https://digitalglarus.ch">
{% trans "Digital Glarus project" %}</a></p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image wow slideInDown">
<h4>{% trans "and" %}<br>{% trans "the story continues!" %}</h4>
<p>&nbsp;</p>
</div>
</li>
</ul>
</div>
</div>
<div class="container">
<div class="text-center wow fadeInDown">
<h2 class="section-heading">{% trans "ABOUT" %}</h2>
<h3 class="section-subheading text-muted">{% trans "The timeline of ungleich" %}</h3>
</div>
<ul class="timeline">
<li>
<div class="timeline-image">
<img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/1.jpg' %}" alt="">
</div>
<div class="timeline-panel wow slideInLeft">
<div class="timeline-heading">
<h4>2000</h4>
</div>
<div class="timeline-body">
<p>{% trans "The first incarnation of ungleich" %}</p>
<p>{% trans "in Germany" %}</p>
</div>
</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="">
</div>
<div class="timeline-panel wow slideInRight">
<div class="timeline-heading">
<h4>2013</h4>
</div>
<div class="timeline-body">
<p>{% trans "ungleich founded" %} </p>
<p>{% trans "in Switzerland" %} </p>
</div>
</div>
</li>
<li>
<div class="timeline-image">
<img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/6.jpg' %}" alt="">
</div>
<div class="timeline-panel wow slideInLeft">
<div class="timeline-heading">
<h4>2014</h4>
</div>
<div class="timeline-body">
<p>{% trans "ungleich present at various conferences" %}: <br><a href="http://www.linuxtag.org/2014/en/program/talk-details/?eventid=1238">Linuxtag</a>, <a href="https://www.usenix.org/conference/ucms14/summit-program/presentation/schottelius">UCMS</a>, Linux Erfa, <a href="https://www.ethz.ch/en.html">ETH Zurich</a><br>
</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/4.jpg' %}" alt="">
</div>
<div class="timeline-panel wow slideInRight">
<div class="timeline-heading">
<h4> 2015</h4>
</div>
<div class="timeline-body">
<p>{% trans "ungleich introduces HA-Hosting" %} </p>
<p>{% trans "and introduces affordable 24X7 support." %}</p>
<p>{% trans "ungleich launches" %}<a href="https://digitalglarus.ch">
{% trans "Digital Glarus project" %}</a></p>
</div>
</div>
</li>
<li>
<div class="timeline-image">
<img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/7.png' %}" alt="">
</div>
<div class="timeline-panel wow slideInLeft">
<div class="timeline-heading">
<h4> 2016</h4>
</div>
<div class="timeline-body">
<p>{% blocktrans %}ungleich launches <a href="https://www.alplora.ch/de/">Alplora</a>, an animal tracking service with LoraWAN technology.{% endblocktrans %}</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/8.png' %}" alt="">
</div>
<div class="timeline-panel wow slideInRight">
<div class="timeline-heading">
<h4> 2017</h4>
</div>
<div class="timeline-body">
<p>{% blocktrans %}ungleich sells <a href="https://www.alplora.ch/de/">Alplora</a> to an IoT startup in canton Zürich.{% endblocktrans %}</p>
<p>{% trans "ungleich showcases the most affordable Swiss VM hosting, Data Center Light." %}</p>
</div>
</div>
</li>
<li>
<div class="timeline-image wow slideInDown">
<h4>{% trans "and" %}<br>{% trans "the story continues!" %}</h4>
<p>&nbsp;</p>
</div>
</li>
</ul>
</div>
</section>

View File

@ -11,27 +11,27 @@
</div>
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item wow fadeInDown" data-wow-delay="0.5s">
<img src="{% static 'ungleich_page/img/portfolio/roundicons.png' %}" class="img-responsive inline-block" alt="">
<img src="{% static 'ungleich_page/img/portfolio/datacenterlight.png' %}" class="img-responsive inline-block" alt="">
<div class="portfolio-caption inline-block">
<h4> {% trans "HA Hosting" %} </h4>
<p class="text-muted">&nbsp;</p>
<p class="text-muted">{% trans "We offer high availablity hosting (HA) in Germany and in Switzerland. Our infrastructure is powered by Free and Open Source Software like OpenNebula, Qemu and GlusterFS." %} </p>
<h4>{% trans "Data Center Light" %}</h4>
<p>&nbsp;</p>
<p class="text-muted">{% trans "We offer the most affordable hosting in Switzerland. Data Center Light has full FOSS stack, 100% IPv6 and 100% SSD. Choose any configuration among CentOS, Debian, Ubuntu, Devuan, and FreeBSD." %} </p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item wow fadeInDown" data-wow-delay="1s">
<img src="{% static 'ungleich_page/img/portfolio/startup-framework.png' %}" class="img-responsive inline-block" alt="">
<div class="portfolio-caption inline-block">
<h4>{% trans "Rails Hosting" %} </h4>
<p class="text-muted">&nbsp;</p>
<p>&nbsp;</p>
<p class="text-muted">{% trans "Ready to go live with your Ruby on Rails application? We offer you ready-to-deploy virtual machines or configure your existing infrastructure for Ruby on Rails." %}</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item wow fadeInDown" data-wow-delay="1.5s">
<img src="{% static 'ungleich_page/img/portfolio/treehouse.png' %}" class="img-responsive inline-block" alt="">
<img src="{% static 'ungleich_page/img/portfolio/glasfaser.png' %}" class="img-responsive inline-block" alt="">
<div class="portfolio-caption inline-block">
<h4>{% trans " Configuration as a Service" %}</h4>
<p class="text-muted">&nbsp;</p>
<p class="text-muted">{% trans "You are in need for a configuration?<br>With ungleich you have found an experienced team that configure your systems to provide service like DNS, E-Mail, Databases or Webservers." %}</p>
<h4>{% trans "High Speed Internet" %}</h4>
<p>&nbsp;</p>
<p class="text-muted">{% trans "We offer high speed fiber internet in Glarus Süd, Glarus and Glarus Nord. Experience 100 Mbit/s and see how speed can change everything." %}</p>
</div>
</div>
</div>