Merge pull request #532 from tiwariav/task/3594/digitalglarus_responsive_scrollbar_fix

task/3594 digitalglarus landing page fix
This commit is contained in:
Arvind Tiwari 2017-12-05 17:28:26 +05:30 committed by GitHub
commit ed873ca59f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 517 additions and 535 deletions

View file

@ -250,6 +250,7 @@ header.history {
text-align:center; text-align:center;
line-height: 2.5; line-height: 2.5;
color: #fff; color: #fff;
margin-bottom: 100px;
} }
.supporter-intro { .supporter-intro {

View file

@ -1,4 +1,4 @@
#page-top #services .container .row .col-lg-12.text-center .section-heading { #page-top #services .section-heading {
font-style: normal; font-style: normal;
color: #494949; color: #494949;
padding-top: 50px; padding-top: 50px;

View file

@ -4,26 +4,19 @@
{% block content %} {% block content %}
<style type="text/css"> <style type="text/css">
@media screen and (max-width: 600px) {
@media screen and (max-width: 600px) {
#timeline{ #timeline{
display: none; display: none;
} }
h2 {font-size: 2em !important;} h2 {font-size: 2em !important;}
}
}
</style> </style>
<!-- Header --> <!-- Header -->
<header class="history"> <header class="history">
<div class="container header-history"> <div class="container header-history">
<div class="intro-text"> <div class="intro-text">
<p>
</p>
<div class="intro-headline"> <div class="intro-headline">
<span class="intro-headline"> <span class="intro-headline">
Where great minds work Where great minds work
@ -31,66 +24,72 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</header> </header>
<!-- form section ends--> <!-- form section ends-->
<!-- Services Section -->
<!-- Services Section -->
<section id="history"> <section id="history">
<div class="container-fluid"> <div class="container-fluid">
<div class="row-fluid"> <div class="text-center wow fadeInDown">
<div class="col-lg-12 col-md-12 text-center wow fadeInDown">
<span class="glyphicon glyphicon-star glyphicon-inverse"></span> <span class="glyphicon glyphicon-star glyphicon-inverse"></span>
<h2 class="section-heading">the story of Digital Glarus</h2> <h2 class="section-heading">the story of Digital Glarus</h2>
<p class="carousel-text text-center supporter-black"> <p class="carousel-text text-center supporter-black">
In search for a better environment for creativity, ungleich In search for a better environment for creativity, ungleich
arrived at a small village in Glarus. First we were driven by the arrived at a small village in Glarus. First we were driven by the
cheap real estate price, then we were genuinely surprised by the beauty of its nature. People were incredibly friendly as well. Working just became so relaxed and enjoyable in such a beautiful cheap real estate price, then we were genuinely surprised by the
beauty of its nature. People were incredibly friendly as well.
Working just became so relaxed and enjoyable in such a beautiful
surrounding..How come we are the only ones here?! We can't be surrounding..How come we are the only ones here?! We can't be
enjoying this alone, we need to let others know about this great enjoying this alone, we need to let others know about this great
place. That's how it all started... place. That's how it all started...
</p> </p>
<span class="glyphicon glyphicon-heart glyphicon-inverse"></span> <span class="glyphicon glyphicon-heart glyphicon-inverse"></span>
<h2 class="section-heading">we fell in love</h2>
<h2 class="section-heading">we fell in love</h2>
<p class="carousel-text text-center supporter-black"> <p class="carousel-text text-center supporter-black">
We didn't see this coming, but we really fell in love with Glarus. The lakes, the mountains, the mist, the (amazing) snow, We didn't see this coming, but we really fell in love with Glarus.
the fresh air, the stream, the people, the stars...how could we not? And before long, we found an 100 something years old house, The lakes, the mountains, the mist, the (amazing) snow,
the fresh air, the stream, the people, the stars...how could we
not? And before long, we found an 100 something years old house,
formerly a family home, but long time unused, next to a river in formerly a family home, but long time unused, next to a river in
Schwanden. Full of old furniture, the house and the neighborhood Schwanden. Full of old furniture, the house and the neighborhood
was stepping in a time machine. There, we found our first was stepping in a time machine. There, we found our first
coworking space in Glarus.</p> coworking space in Glarus.
</p>
<span class="glyphicon glyphicon-home glyphicon-inverse"></span> <span class="glyphicon glyphicon-home glyphicon-inverse"></span>
<h2 class="section-heading">Our crowdfunding success</h2>
<h2 class="section-heading">Our crowdfunding success</h2>
<p class="carousel-text text-center supporter-black"> <p class="carousel-text text-center supporter-black">
What comes with a very old house? Lots of charm, yes. Great What comes with a very old house? Lots of charm, yes. Great
history, yes. A contract stating that we can park our goats in the history, yes. A contract stating that we can park our goats in the
storage room, yes. And, yes, tons of things to be fixed. We storage room, yes. And, yes, tons of things to be fixed. We
couldn't afford much of renovation-we are a young start up rich couldn't afford much of renovation-we are a young start up rich
with creativity but not much money (yet)-that is why we decided to ask for help. To our surprise, generous people found hope and with creativity but not much money (yet)-that is why we decided to
ask for help. To our surprise, generous people found hope and
inspiration from our project. We got much supports from people we inspiration from our project. We got much supports from people we
know and we don't know. People wrote to us, called us, met us. We know and we don't know. People wrote to us, called us, met us. We
were on the cover of newspaper. We were on TV. We became the talk were on the cover of newspaper. We were on TV. We became the talk
of the town. of the town.
</p> </p>
<div>
<div><iframe class="center-block" frameborder="0" height="330" scrolling="no" src="//www.100-days.net/de/projekt/start-digital-glarus/widget/v2" width="220"></iframe></div> <iframe class="center-block" frameborder="0" height="330" scrolling="no" src="//www.100-days.net/de/projekt/start-digital-glarus/widget/v2" width="220"></iframe>
</div>
<span class="glyphicon glyphicon-road glyphicon-inverse"></span> <span class="glyphicon glyphicon-road glyphicon-inverse"></span>
<h2 class="section-heading text-cente">And the story continues..!</h2> <h2 class="section-heading text-cente">And the story continues..!</h2>
<p class="carousel-text text-center supporter-black"> <p class="carousel-text text-center supporter-black">
With the money we raised from our crowdfunding campaign, we With the money we raised from our crowdfunding campaign, we
started renovating the hourse, ripping floors off and fixing started renovating the hourse, ripping floors off and fixing
walls, giving a fresh coat of paint on old walls. We hired Samuel, walls, giving a fresh coat of paint on old walls. We hired Samuel,
who came to Glarus as a refugee from Eritrea, as our intern to who came to Glarus as a refugee from Eritrea, as our intern to
renovate the house and learn computer science. We opened our door for students to live. Our coworking space is growing slowly but renovate the house and learn computer science. We opened our door
for students to live. Our coworking space is growing slowly but
meaningfully. Our journey only started! meaningfully. Our journey only started!
</p> </p>
<hr class="primary"> <hr class="primary">
</div> </div>
</div> </div>
</div>
</section> </section>
<!-- Half Page Image Background Carousel --> <!-- Half Page Image Background Carousel -->
@ -98,56 +97,55 @@
<div id="timeline"> <div id="timeline">
<iframe frameborder="0" width="100%" height="650" src="//cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=15clFd1fjnVScVziBlF-X7j5M7V6uNFt9jt9QZVylaYI&amp;font=Default&amp;lang=en&amp;initial_zoom=2&amp;height=650" width="100%"></iframe> <iframe frameborder="0" width="100%" height="650" src="//cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=15clFd1fjnVScVziBlF-X7j5M7V6uNFt9jt9QZVylaYI&amp;font=Default&amp;lang=en&amp;initial_zoom=2&amp;height=650" width="100%"></iframe>
</div> </div>
</section> </section>
<!-- Supporters --> <!-- Supporters -->
<section id="supporters"> <section id="supporters">
<div class="supporter-bg"> <div class="supporter-bg">
<div class="container"> <div class="container">
<div class="col-lg-12 text-center wow fadeInDown"> <div class="text-center wow fadeInUp">
<h2 class="supporter-headline">Our Supporters</h2> <h2 class="supporter-headline">Our Supporters</h2>
<hr class="primary"> <hr class="primary">
<p class="carousel-text supporter-intro text-muted text-center"> Here are our proud supporters of project Digital Glarus. Thanks to our supporters, the first cowerking space in Glarus <p class="carousel-text supporter-intro text-muted text-center">
is going to have a new look!</p> Here are our proud supporters of project Digital Glarus. Thanks to our supporters,
the first cowerking space in Glarus is going to have a new look!
</p>
<p class="supporter" style="text-transform: uppercase;"> <p class="supporter" style="text-transform: uppercase;">
{% for supporter in supporters %} {% for supporter in supporters %}
{{ supporter.name }} {{ supporter.name }}
<br> <br>
{% endfor %} {% endfor %}
<br> <br>
<a href="{% url 'digitalglarus:supportus' %}" class="btn btn-default btn-primary sr-button">Become a supporter</a> <a href="{% url 'digitalglarus:supportus' %}" class="btn btn-default btn-primary sr-button">Become a supporter</a>
<br> </p>
<br>
<br>
<br>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section id="contact"> <section id="contact">
<div class="fill"> <div class="fill">
<div class="row" class="wow fadeInDown"> <div class="container">
<div class="col-lg-12 text-center wow fadeInDown"> <div class="wow fadeInUp text-center">
<div class=" map-wrap"> <h2 class="section-heading" style="margin-top: 40px;">Contact Us</h2>
<iframe style="pointer-events:none;margin-top:20px;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2721.4267495037207!2d9.070190915609343!3d46.99259307914885!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47852e9322cc1971%3A0xf1558647dfdfaa60!2sIn+der+Au+7%2C+8762+Glarus+S%C3%BCd!5e0!3m2!1sen!2sch!4v1470238006004" width="100%" height="450" frameborder="0" style="border:0"></iframe> <div class="map-wrap">
<iframe style="margin-top:20px;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2721.4267495037207!2d9.070190915609343!3d46.99259307914885!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47852e9322cc1971%3A0xf1558647dfdfaa60!2sIn+der+Au+7%2C+8762+Glarus+S%C3%BCd!5e0!3m2!1sen!2sch!4v1470238006004" width="100%" height="450" frameborder="0" style="border:0"></iframe>
</div> </div>
</div>
<div class="row">
<div class="col-md-4 map-title"> <div class="col-md-4 map-title">
Digital Glarus<br> Digital Glarus<br>
<span class="map-caption">In der Au 7 Schwanden 8762 Switzerland <span class="map-caption">
In der Au 7 Schwanden 8762 Switzerland
<br>info@digitalglarus.ch <br>info@digitalglarus.ch
<br> <br>
(044) 534-66-22 (044) 534-66-22
<p>&nbsp;</p> <br>
</span> </span>
</div>
<p>&nbsp;</p> <p>&nbsp;</p>
</div> </div>
</div> </div>
</div> </div>
</div>
</section> </section>
{% endblock %} {% endblock %}

View file

@ -3,45 +3,12 @@
{% block content %} {% block content %}
<!-- Header --> <style type="text/css">
<header>
<div class="container">
<div class="intro-text">
<p>
</p>
<div class="intro-headline">
<span class="intro-headline">
Where great minds work
</span>
</div>
</div>
</div>
<div class="container-fluid darkened-container">
<h3 class="intro-small">
Book a date today and dive in</h3>
<a href="{% url 'digitalglarus:booking' %}" class="btn btn-primary">Join now</a>
<!-- <form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Pick a date</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Pick a date">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
</div>
</div>
<button type="submit" class="btn btn-primary">book a date</button>
</form> -->
</div>
<style type="text/css">
.caption-style-1{ .caption-style-1{
list-style-type: none; list-style-type: none;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
} }
.caption-style-1 li{ .caption-style-1 li{
@ -53,10 +20,8 @@
.caption-style-1 li:hover .caption{ .caption-style-1 li:hover .caption{
opacity: 1; opacity: 1;
} }
.caption-style-1 img{ .caption-style-1 img{
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
@ -64,7 +29,6 @@
z-index: 4; z-index: 4;
} }
.caption-style-1 .caption{ .caption-style-1 .caption{
cursor: pointer; cursor: pointer;
opacity: 0; opacity: 0;
@ -73,7 +37,6 @@
-o-transition:all 0.45s ease-in-out; -o-transition:all 0.45s ease-in-out;
-ms-transition:all 0.45s ease-in-out; -ms-transition:all 0.45s ease-in-out;
transition:all 0.45s ease-in-out; transition:all 0.45s ease-in-out;
} }
.caption-style-1 .blur{ .caption-style-1 .blur{
background-color: rgba(0,0,0,0.65); background-color: rgba(0,0,0,0.65);
@ -94,8 +57,6 @@
height: 200px; height: 200px;
text-align: center; text-align: center;
top:30px; top:30px;
} }
/** content **/ /** content **/
@ -125,6 +86,8 @@
font-size: 30px; font-size: 30px;
font-weight: 600; font-weight: 600;
padding-top: 50px; padding-top: 50px;
display: flex;
justify-content: center;
} }
.section-top-content span{ .section-top-content span{
font-weight: 300; font-weight: 300;
@ -135,101 +98,141 @@
text-align: right; text-align: right;
} }
.section-top-img { .section-top-img {
padding:0px; max-width: 50%;
padding: 0px;
} }
@media(max-width:500px) { @media(max-width:500px) {
.section-top-txt { .section-top-txt {
padding: 55px 5px 0 0px; padding: 55px 5px 0 0px;
} }
.section-top-content { .section-top-content {
font-size: 28px; font-size: 28px;
} }
} }
@media(max-width:360px) { @media(max-width:360px) {
.section-top-txt { .section-top-txt {
padding: 32px 5px 0 0px; padding: 32px 5px 0 0px;
} }
.section-top-content { .section-top-content {
font-size: 18px; font-size: 18px;
} }
} }
@media screen and (min-device-width: 768px) and (max-device-width: 991px) { @media screen and (min-device-width: 768px) and (max-device-width: 991px) {
.section-top-txt { .section-top-txt {
padding-top: 43px; padding-top: 43px;
} }
} }
@media screen and (min-device-width: 992px) and (max-device-width: 1200px) { @media screen and (min-device-width: 992px) and (max-device-width: 1200px) {
.section-top-txt { .section-top-txt {
padding-top: 65px; padding-top: 65px;
} }
} }
@media screen and (min-device-width: 361px) and (max-device-width: 428px) {
.section-top-txt {
padding: 35px 5px 0 0px;
}
.section-top-content {
font-size: 22px;
}
}
</style> </style>
<!-- Header -->
<header>
<div class="container">
<div class="intro-text">
<div class="intro-headline">
<span class="intro-headline">
Where great minds work
</span>
</div>
</div>
</div>
<div class="container-fluid darkened-container">
<h3 class="intro-small">Book a date today and dive in</h3>
<a href="{% url 'digitalglarus:booking' %}" class="btn btn-primary">Join now</a>
{% comment %}
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Pick a date</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Pick a date">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
</div>
</div>
<button type="submit" class="btn btn-primary">book a date</button>
</form>
{% endcomment %}
</div>
</header> </header>
<!-- form section ends--> <!-- form section ends-->
<!-- Services Section --> <!-- Services Section -->
<section id="services"> <section id="services">
<div class="container"> <div class="container">
<div class="row"> <div class="text-center wow fadeInUp section-top-content">
<div class="col-lg-12 text-center wow fadeInDown section-top-content"> <div class="section-top-txt">Partner <span>of</span></div>
<div class="col-lg-3 col-sm-2 col-xs-12"></div> <div class="section-top-img">
<div class="col-lg-6 col-sm-10 col-xs-12"> <a href="https://zurich.impacthub.ch" target="_blank">
<div class="col-lg-5 col-sm-5 col-xs-6 section-top-txt">Partner <span>of</span></div> <img src="{% static 'digitalglarus/img/impacthub_logo.jpg' %}" class="img-responsive" alt="">
<div class="col-lg-7 col-sm-4 col-xs-6 section-top-img"><a href="https://zurich.impacthub.ch" target="_blank"><img src="{% static 'digitalglarus/img/impacthub_logo.jpg' %}" class="img-responsive" alt=""></a></div> </a>
</div> </div>
<div class="col-lg-3 col-sm-12 col-xs-12"></div>
</div> </div>
<div class="col-lg-12 col-xs-12 text-center wow fadeInDown"> <div class="text-center wow fadeInUp">
<h2 class="section-heading">In Digital Glarus you can..</h2> <h2 class="section-heading">In Digital Glarus you can..</h2>
<hr class="primary"> <hr class="primary">
</div> </div>
</div>
<!--dropdown icons--> <!--dropdown icons-->
<div class="row text-center"> <div class="row text-center">
<div class="col-xs-6 col-sm-3"> <div class="col-xs-6 col-sm-3">
<div class="team-member wow fadeInDown" data-wow-delay="0.3s"> <div class="team-member wow fadeInUp" data-wow-delay="0.3s">
<img src="{% static 'digitalglarus/img/services/sleep.svg' %}" class="img-responsive img-toggle" alt=""> <img src="{% static 'digitalglarus/img/services/sleep.svg' %}" class="img-responsive img-toggle" alt="">
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3"> <div class="col-xs-6 col-sm-3">
<div class="team-member wow fadeInDown" data-wow-delay="0.5s"> <div class="team-member wow fadeInUp" data-wow-delay="0.5s">
<img src="{% static 'digitalglarus/img/services/eat.svg' %}" class="img-responsive img-toggle" alt=""> <img src="{% static 'digitalglarus/img/services/eat.svg' %}" class="img-responsive img-toggle" alt="">
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3"> <div class="col-xs-6 col-sm-3">
<div class="team-member wow fadeInDown" data-wow-delay="0.7s"> <div class="team-member wow fadeInUp" data-wow-delay="0.7s">
<img src="{% static 'digitalglarus/img/services/freshenup.svg' %}" class="img-responsive img-toggle cursor-pointer" alt=""> <img src="{% static 'digitalglarus/img/services/freshenup.svg' %}" class="img-responsive img-toggle cursor-pointer" alt="">
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3"> <div class="col-xs-6 col-sm-3">
<div class="team-member wow fadeInDown" data-wow-delay="0.8s"> <div class="team-member wow fadeInUp" data-wow-delay="0.8s">
<img src="{% static 'digitalglarus/img/services/work.svg' %}" class="img-responsive img-toggle" alt=""> <img src="{% static 'digitalglarus/img/services/work.svg' %}" class="img-responsive img-toggle" alt="">
</div> </div>
</div> </div>
<div class="row text-center" style="margin-left: 0px; margin-right: 0px;"> <div class="row text-center" style="margin-left: 0px; margin-right: 0px;">
<div class="col-xs-6 col-sm-3"> <div class="col-xs-6 col-sm-3">
<div class="team-member wow fadeInDown" data-wow-delay="0.9s"> <div class="team-member wow fadeInUp" data-wow-delay="0.9s">
<img src="{% static 'digitalglarus/img/services/enjoy.svg' %}" class="img-responsive img-toggle" alt=""> <img src="{% static 'digitalglarus/img/services/enjoy.svg' %}" class="img-responsive img-toggle" alt="">
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3"> <div class="col-xs-6 col-sm-3">
<div class="team-member wow fadeInDown" data-wow-delay="1s"> <div class="team-member wow fadeInUp" data-wow-delay="1s">
<img src="{% static 'digitalglarus/img/services/network.svg' %}" class="img-responsive img-toggle" alt=""> <img src="{% static 'digitalglarus/img/services/network.svg' %}" class="img-responsive img-toggle" alt="">
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3"> <div class="col-xs-6 col-sm-3">
<div class="team-member wow fadeInDown" data-wow-delay="1.1s"> <div class="team-member wow fadeInUp" data-wow-delay="1.1s">
<img src="{% static 'digitalglarus/img/services/lightbulb.svg' %}" class="img-responsive img-toggle cursor-pointer" alt=""> <img src="{% static 'digitalglarus/img/services/lightbulb.svg' %}" class="img-responsive img-toggle cursor-pointer" alt="">
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3"> <div class="col-xs-6 col-sm-3">
<div class="team-member wow fadeInDown" data-wow-delay="1.2s"> <div class="team-member wow fadeInUp" data-wow-delay="1.2s">
<img src="{% static 'digitalglarus/img/services/beinspired.svg' %}" class="img-responsive img-toggle" alt=""> <img src="{% static 'digitalglarus/img/services/beinspired.svg' %}" class="img-responsive img-toggle" alt="">
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<!-- start:recommendationSlider --> <!-- start:recommendationSlider -->
<hr class="primary"> <hr class="primary">
<div id="carousel-recommendation-ungleich" class="carousel slide ungleich ungleich-gallery ungleich-gallery-text-carousel" data-ride="carousel" data-interval="false"> <div id="carousel-recommendation-ungleich" class="carousel slide ungleich ungleich-gallery ungleich-gallery-text-carousel" data-ride="carousel" data-interval="false">
@ -284,79 +287,67 @@
</div> </div>
</div> </div>
<!-- end:recommendationSlider --> <!-- end:recommendationSlider -->
</div></section> </section>
<!-- Portfolio Grid Section --> <!-- Portfolio Grid Section -->
<section id="portfolio" class="no-padding"> <section id="portfolio" class="no-padding">
<div class="container-fluid"> <div class="container-fluid">
<!--<div class="row"> <!--<div class="row">
<div class="col-lg-12 text-center wow fadeInDown"> <div class="col-lg-12 text-center wow fadeInUp">
<h2 class="section-heading">here you can</h2> <h2 class="section-heading">here you can</h2>
<h3 class="section-subheading text-muted">Join our community. Inspire and be inspired.</h3> <h3 class="section-subheading text-muted">Join our community. Inspire and be inspired.</h3>
</div>--> </div>-->
</div>
<div class="row no-gutter popup-gallery"> <div class="row no-gutter popup-gallery">
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInUp text-center" data-wow-delay="0.5s">
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInDown text-center" data-wow-delay="0.5s">
<ul class="caption-style-1"> <ul class="caption-style-1">
<li> <li>
<img src="{% static 'digitalglarus/img/portfolio/excursion.png' %}" class="img-responsive inline-block" alt=""> <img src="{% static 'digitalglarus/img/portfolio/excursion.png' %}" class="img-responsive inline-block" alt="">
<div class="caption"> <div class="caption">
<div class="blur"></div> <div class="blur"></div>
</div> </div>
</li> </li>
</ul> </ul>
<div class="caption portfolio-caption-white">excursions</div> <div class="caption portfolio-caption-white">excursions</div>
</div> </div>
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInDown text-center" data-wow-delay="0.8s"> <div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInUp text-center" data-wow-delay="0.8s">
<ul class="caption-style-1"> <ul class="caption-style-1">
<li> <li>
<img src="{% static 'digitalglarus/img/portfolio/ski.png' %}" class="img-responsive inline-block" alt=""> <img src="{% static 'digitalglarus/img/portfolio/ski.png' %}" class="img-responsive inline-block" alt="">
<div class="caption"> <div class="caption">
<div class="blur"></div> <div class="blur"></div>
</div> </div>
</li> </li>
</ul> </ul>
<div class="caption portfolio-caption-white">enjoy the great outdoors</div> <div class="caption portfolio-caption-white">enjoy the great outdoors</div>
</div> </div>
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInUp text-center" data-wow-delay="1.1s">
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInDown text-center" data-wow-delay="1.1s">
<ul class="caption-style-1"> <ul class="caption-style-1">
<li> <li>
<img src="{% static 'digitalglarus/img/portfolio/concert.png' %}" class="img-responsive inline-block" alt=""> <img src="{% static 'digitalglarus/img/portfolio/concert.png' %}" class="img-responsive inline-block" alt="">
<div class="caption"> <div class="caption">
<div class="blur"></div> <div class="blur"></div>
</div> </div>
</li> </li>
</ul> </ul>
<div class="caption portfolio-caption-white">cultural events</div> <div class="caption portfolio-caption-white">cultural events</div>
</div> </div>
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInDown text-center" data-wow-delay="1.2s"> <div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInUp text-center" data-wow-delay="1.2s">
<ul class="caption-style-1"> <ul class="caption-style-1">
<li> <li>
<img src="{% static 'digitalglarus/img/portfolio/inspire.png' %}" class="img-responsive inline-block" alt=""> <img src="{% static 'digitalglarus/img/portfolio/inspire.png' %}" class="img-responsive inline-block" alt="">
<div class="caption"> <div class="caption">
<div class="blur"></div> <div class="blur"></div>
</div> </div>
</li> </li>
</ul> </ul>
<div class="caption portfolio-caption-white">be inspired</div> <div class="caption portfolio-caption-white">be inspired</div>
</div> </div>
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInUp text-center" data-wow-delay="1.3s">
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInDown text-center" data-wow-delay="1.3s">
<ul class="caption-style-1"> <ul class="caption-style-1">
<li> <li>
<img src="{% static 'digitalglarus/img/portfolio/workshop.png' %}" class="img-responsive inline-block" alt=""> <img src="{% static 'digitalglarus/img/portfolio/workshop.png' %}" class="img-responsive inline-block" alt="">
@ -368,7 +359,7 @@
<div class="caption portfolio-caption-white">workshops</div> <div class="caption portfolio-caption-white">workshops</div>
</div> </div>
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInDown text-center" data-wow-delay="1.4s"> <div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInUp text-center" data-wow-delay="1.4s">
<ul class="caption-style-1"> <ul class="caption-style-1">
<li> <li>
<img src="{% static 'digitalglarus/img/portfolio/recharge.png' %}" class="img-responsive inline-block" alt=""> <img src="{% static 'digitalglarus/img/portfolio/recharge.png' %}" class="img-responsive inline-block" alt="">
@ -379,15 +370,10 @@
</ul> </ul>
<div class="caption portfolio-caption-white">recharge</div> <div class="caption portfolio-caption-white">recharge</div>
</div> </div>
</div>
</div> </div>
</section> </section>
<!--aside--> <!--aside-->
<aside class="bg-dark"> <aside class="bg-dark">
<div class="container text-center"> <div class="container text-center">
@ -399,6 +385,7 @@
</div> </div>
</div> </div>
</aside> </aside>
<!-- Half Page Image Background Carousel --> <!-- Half Page Image Background Carousel -->
<section id="myCarousel" class="carousel slide"> <section id="myCarousel" class="carousel slide">
<!-- Indicators --> <!-- Indicators -->
@ -446,22 +433,22 @@
<!-- Controls --> <!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"> <a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span> <span class="glyphicon glyphicon-chevron-left"></span>
</a> </a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"> <a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span> <span class="glyphicon glyphicon-chevron-right"></span>
</a> </a>
</section> </section>
<section id="contact"> <section id="contact">
<div class="fill"> <div class="fill">
<div class="row" class="wow fadeInDown"> <div class="container">
<div class="col-lg-12 text-center wow fadeInDown"> <div class="wow fadeInUp">
<div class="text-center">
<h2 class="section-heading">Contact Us</h2> <h2 class="section-heading">Contact Us</h2>
<div class=" map-wrap"> <div class="map-wrap">
<iframe style="pointer-events:none" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2721.4267495037207!2d9.070190915609343!3d46.99259307914885!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47852e9322cc1971%3A0xf1558647dfdfaa60!2sIn+der+Au+7%2C+8762+Glarus+S%C3%BCd!5e0!3m2!1sen!2sch!4v1470238006004" width="100%" height="450" frameborder="0" style="border:0"></iframe></div> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2721.4267495037207!2d9.070190915609343!3d46.99259307914885!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47852e9322cc1971%3A0xf1558647dfdfaa60!2sIn+der+Au+7%2C+8762+Glarus+S%C3%BCd!5e0!3m2!1sen!2sch!4v1470238006004" width="100%" height="450" frameborder="0" style="border:0"></iframe>
<div class="col-md-4 map-title"> </div>
<div class="map-title">
Digital Glarus<br> Digital Glarus<br>
<span class="map-caption">In der Au 7 Schwanden 8762 Switzerland <span class="map-caption">In der Au 7 Schwanden 8762 Switzerland
<br>info@digitalglarus.ch <br>info@digitalglarus.ch
@ -478,10 +465,6 @@
</section> </section>
<!-- <!--
<div class="row"> <div class="row">
<div class="box"> <div class="box">