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

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

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

1
digitalglarus/static/digitalglarus/css/history.css
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 {

2
digitalglarus/static/digitalglarus/css/ungleich.css
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;

244
digitalglarus/templates/digitalglarus/history.html
View file

@ -4,150 +4,148 @@
{% 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{
display: none;
#timeline{ }
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> <div class="intro-headline">
</p> <span class="intro-headline">
<div class="intro-headline"> Where great minds work
<span class="intro-headline"> </span>
Where great minds work
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</header> </header>
<!-- form section ends--> <!-- form section ends-->
<!-- Services Section -->
<section id="history">
<div class="container-fluid">
<div class="row-fluid">
<div class="col-lg-12 col-md-12 text-center wow fadeInDown">
<span class="glyphicon glyphicon-star glyphicon-inverse"></span>
<h2 class="section-heading">the story of Digital Glarus</h2>
<p class="carousel-text text-center supporter-black"> <!-- Services Section -->
In search for a better environment for creativity, ungleich <section id="history">
arrived at a small village in Glarus. First we were driven by the <div class="container-fluid">
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 <div class="text-center wow fadeInDown">
surrounding..How come we are the only ones here?! We can't be <span class="glyphicon glyphicon-star glyphicon-inverse"></span>
enjoying this alone, we need to let others know about this great <h2 class="section-heading">the story of Digital Glarus</h2>
place. That's how it all started... <p class="carousel-text text-center supporter-black">
</p> In search for a better environment for creativity, ungleich
<span class="glyphicon glyphicon-heart glyphicon-inverse"></span> arrived at a small village in Glarus. First we were driven by the
<h2 class="section-heading">we fell in love</h2> 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
enjoying this alone, we need to let others know about this great
place. That's how it all started...
</p>
<span class="glyphicon glyphicon-heart glyphicon-inverse"></span>
<p class="carousel-text text-center supporter-black"> <h2 class="section-heading">we fell in love</h2>
We didn't see this coming, but we really fell in love with Glarus. The lakes, the mountains, the mist, the (amazing) snow, <p class="carousel-text text-center supporter-black">
the fresh air, the stream, the people, the stars...how could we not? And before long, we found an 100 something years old house, We didn't see this coming, but we really fell in love with Glarus.
formerly a family home, but long time unused, next to a river in The lakes, the mountains, the mist, the (amazing) snow,
Schwanden. Full of old furniture, the house and the neighborhood the fresh air, the stream, the people, the stars...how could we
was stepping in a time machine. There, we found our first not? And before long, we found an 100 something years old house,
coworking space in Glarus.</p> formerly a family home, but long time unused, next to a river in
<span class="glyphicon glyphicon-home glyphicon-inverse"></span> Schwanden. Full of old furniture, the house and the neighborhood
<h2 class="section-heading">Our crowdfunding success</h2> was stepping in a time machine. There, we found our first
coworking space in Glarus.
</p>
<span class="glyphicon glyphicon-home glyphicon-inverse"></span>
<p class="carousel-text text-center supporter-black"> <h2 class="section-heading">Our crowdfunding success</h2>
What comes with a very old house? Lots of charm, yes. Great <p class="carousel-text text-center supporter-black">
history, yes. A contract stating that we can park our goats in the What comes with a very old house? Lots of charm, yes. Great
storage room, yes. And, yes, tons of things to be fixed. We history, yes. A contract stating that we can park our goats in the
couldn't afford much of renovation-we are a young start up rich storage room, yes. And, yes, tons of things to be fixed. We
with creativity but not much money (yet)-that is why we decided to ask for help. To our surprise, generous people found hope and couldn't afford much of renovation-we are a young start up rich
inspiration from our project. We got much supports from people we with creativity but not much money (yet)-that is why we decided to
know and we don't know. People wrote to us, called us, met us. We ask for help. To our surprise, generous people found hope and
were on the cover of newspaper. We were on TV. We became the talk inspiration from our project. We got much supports from people we
of the town. know and we don't know. People wrote to us, called us, met us. We
</p> were on the cover of newspaper. We were on TV. We became the talk
of the town.
</p>
<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>
<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> <h2 class="section-heading text-cente">And the story continues..!</h2>
<span class="glyphicon glyphicon-road glyphicon-inverse"></span> <p class="carousel-text text-center supporter-black">
<h2 class="section-heading text-cente">And the story continues..!</h2> With the money we raised from our crowdfunding campaign, we
<p class="carousel-text text-center supporter-black"> started renovating the hourse, ripping floors off and fixing
With the money we raised from our crowdfunding campaign, we walls, giving a fresh coat of paint on old walls. We hired Samuel,
started renovating the hourse, ripping floors off and fixing who came to Glarus as a refugee from Eritrea, as our intern to
walls, giving a fresh coat of paint on old walls. We hired Samuel, renovate the house and learn computer science. We opened our door
who came to Glarus as a refugee from Eritrea, as our intern to 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>
</section>
<!-- Half Page Image Background Carousel -->
<section>
<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>
</div>
</section>
<!-- Supporters -->
<section id="supporters">
<div class="supporter-bg">
<div class="container">
<div class="text-center wow fadeInUp">
<h2 class="supporter-headline">Our Supporters</h2>
<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 is going to have a new look!
</p>
<p class="supporter" style="text-transform: uppercase;">
{% for supporter in supporters %}
{{ supporter.name }}
<br>
{% endfor %}
<br>
<a href="{% url 'digitalglarus:supportus' %}" class="btn btn-default btn-primary sr-button">Become a supporter</a>
</p>
</div> </div>
</div> </div>
</section> </div>
</section>
<!-- Half Page Image Background Carousel --> <section id="contact">
<section> <div class="fill">
<div id="timeline"> <div class="container">
<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 class="wow fadeInUp text-center">
</div> <h2 class="section-heading" style="margin-top: 40px;">Contact Us</h2>
<div class="map-wrap">
</section> <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>
<!-- Supporters -->
<section id="supporters">
<div class="supporter-bg">
<div class="container">
<div class="col-lg-12 text-center wow fadeInDown">
<h2 class="supporter-headline">Our Supporters</h2>
<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
is going to have a new look!</p>
<p class="supporter" style="text-transform: uppercase;">
{% for supporter in supporters %}
{{ supporter.name }}
<br>
{% endfor %}
<br>
<a href="{% url 'digitalglarus:supportus' %}" class="btn btn-default btn-primary sr-button">Become a supporter</a>
<br>
<br>
<br>
<br>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="fill">
<div class="row" class="wow fadeInDown">
<div class="col-lg-12 text-center wow fadeInDown">
<div class=" map-wrap">
<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> </div>
<div class="col-md-4 map-title"> </div>
Digital Glarus<br> <div class="row">
<span class="map-caption">In der Au 7 Schwanden 8762 Switzerland <div class="col-md-4 map-title">
Digital Glarus<br>
<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>
</section> </div>
</section>
{% endblock %} {% endblock %}

755
digitalglarus/templates/digitalglarus/index.html
View file

@ -3,245 +3,248 @@
{% 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"> .caption-style-1{
<h3 class="intro-small"> list-style-type: none;
Book a date today and dive in</h3> margin: 0px;
<a href="{% url 'digitalglarus:booking' %}" class="btn btn-primary">Join now</a> padding: 0px;
<!-- <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> .caption-style-1 li{
float: left;
padding: 0px;
position: relative;
overflow: hidden;
}
<style type="text/css"> .caption-style-1 li:hover .caption{
opacity: 1;
}
.caption-style-1{ .caption-style-1 img{
list-style-type: none; margin: 0px;
margin: 0px; padding: 0px;
padding: 0px; float: left;
z-index: 4;
}
} .caption-style-1 .caption{
cursor: pointer;
opacity: 0;
-webkit-transition:all 0.45s ease-in-out;
-moz-transition:all 0.45s ease-in-out;
-o-transition:all 0.45s ease-in-out;
-ms-transition:all 0.45s ease-in-out;
transition:all 0.45s ease-in-out;
}
.caption-style-1 .blur{
background-color: rgba(0,0,0,0.65);
height: 800px;
width: 800px;
z-index: 10;
position: absolute;
}
.caption-style-1 li{ .caption-style-1 .caption-text h1{
float: left; text-transform: uppercase;
padding: 0px; font-size: 24px;
position: relative; }
overflow: hidden; .caption-style-1 .caption-text{
} z-index: 0;
color: #fff;
width: 400px;
height: 200px;
text-align: center;
top:30px;
}
.caption-style-1 li:hover .caption{ /** content **/
opacity: 1; .content{
margin-top: 100px;
margin-left: 100px;
width: 700px;
}
} .content p{
color: #ecf0f1;
font-family: "Lato";
line-height: 28px;
font-size: 15px;
padding-top: 50px;
}
p.credit{
padding-top: 20px;
font-size: 12px;
}
.caption-style-1 img{ p a{
margin: 0px; color: #ecf0f1;
padding: 0px; }
float: left; .section-top-content {
z-index: 4; font-size: 30px;
} font-weight: 600;
padding-top: 50px;
display: flex;
.caption-style-1 .caption{ justify-content: center;
cursor: pointer; }
opacity: 0; .section-top-content span{
-webkit-transition:all 0.45s ease-in-out; font-weight: 300;
-moz-transition:all 0.45s ease-in-out; }
-o-transition:all 0.45s ease-in-out; .section-top-txt {
-ms-transition:all 0.45s ease-in-out; padding-top: 80px;
transition:all 0.45s ease-in-out; text-transform: uppercase;
text-align: right;
} }
.caption-style-1 .blur{ .section-top-img {
background-color: rgba(0,0,0,0.65); max-width: 50%;
height: 800px; padding: 0px;
width: 800px; }
z-index: 10; @media(max-width:500px) {
position: absolute; .section-top-txt {
} padding: 55px 5px 0 0px;
}
.caption-style-1 .caption-text h1{ .section-top-content {
text-transform: uppercase; font-size: 28px;
font-size: 24px; }
} }
.caption-style-1 .caption-text{ @media(max-width:360px) {
z-index: 0; .section-top-txt {
color: #fff; padding: 32px 5px 0 0px;
width: 400px; }
height: 200px; .section-top-content {
text-align: center; font-size: 18px;
top:30px; }
}
@media screen and (min-device-width: 768px) and (max-device-width: 991px) {
} .section-top-txt {
padding-top: 43px;
/** content **/ }
.content{ }
margin-top: 100px; @media screen and (min-device-width: 992px) and (max-device-width: 1200px) {
margin-left: 100px; .section-top-txt {
width: 700px; padding-top: 65px;
} }
}
.content p{ @media screen and (min-device-width: 361px) and (max-device-width: 428px) {
color: #ecf0f1; .section-top-txt {
font-family: "Lato"; padding: 35px 5px 0 0px;
line-height: 28px; }
font-size: 15px; .section-top-content {
padding-top: 50px; font-size: 22px;
} }
}
p.credit{
padding-top: 20px;
font-size: 12px;
}
p a{
color: #ecf0f1;
}
.section-top-content {
font-size: 30px;
font-weight: 600;
padding-top: 50px;
}
.section-top-content span{
font-weight: 300;
}
.section-top-txt {
padding-top: 80px;
text-transform: uppercase;
text-align: right;
}
.section-top-img {
padding:0px;
}
@media(max-width:500px) {
.section-top-txt {
padding: 55px 5px 0 0px;
}
.section-top-content {
font-size: 28px;
}
}
@media(max-width:360px) {
.section-top-txt {
padding: 32px 5px 0 0px;
}
.section-top-content {
font-size: 18px;
}
}
@media screen and (min-device-width: 768px) and (max-device-width: 991px) {
.section-top-txt {
padding-top: 43px;
}
}
@media screen and (min-device-width: 992px) and (max-device-width: 1200px) {
.section-top-txt {
padding-top: 65px;
}
}
</style> </style>
<!-- Header -->
<header>
</header> <div class="container">
<!-- form section ends--> <div class="intro-text">
<!-- Services Section --> <div class="intro-headline">
<section id="services"> <span class="intro-headline">
<div class="container"> Where great minds work
<div class="row"> </span>
<div class="col-lg-12 text-center wow fadeInDown section-top-content"> </div>
<div class="col-lg-3 col-sm-2 col-xs-12"></div>
<div class="col-lg-6 col-sm-10 col-xs-12">
<div class="col-lg-5 col-sm-5 col-xs-6 section-top-txt">Partner <span>of</span></div>
<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>
</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>
<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>
<!-- form section ends-->
<!-- Services Section -->
<section id="services">
<div class="container">
<div class="text-center wow fadeInUp section-top-content">
<div class="section-top-txt">Partner <span>of</span></div>
<div class="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>
</div>
<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 fadeInUp" data-wow-delay="0.5s">
<div class="team-member wow fadeInDown" 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 fadeInUp" data-wow-delay="0.7s">
<div class="team-member wow fadeInDown" 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 fadeInUp" data-wow-delay="0.8s">
<div class="team-member wow fadeInDown" 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 class="row text-center" style="margin-left: 0px; margin-right: 0px;">
<div class="col-xs-6 col-sm-3">
<div class="team-member wow fadeInDown" data-wow-delay="0.9s">
<img src="{% static 'digitalglarus/img/services/enjoy.svg' %}" class="img-responsive img-toggle" alt="">
</div> </div>
</div> <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="1s"> <div class="team-member wow fadeInUp" data-wow-delay="0.9s">
<img src="{% static 'digitalglarus/img/services/network.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="1.1s"> <div class="team-member wow fadeInUp" data-wow-delay="1s">
<img src="{% static 'digitalglarus/img/services/lightbulb.svg' %}" class="img-responsive img-toggle cursor-pointer" 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.2s"> <div class="team-member wow fadeInUp" data-wow-delay="1.1s">
<img src="{% static 'digitalglarus/img/services/beinspired.svg' %}" class="img-responsive img-toggle" alt=""> <img src="{% static 'digitalglarus/img/services/lightbulb.svg' %}" class="img-responsive img-toggle cursor-pointer" alt="">
</div>
</div>
<div class="col-xs-6 col-sm-3">
<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="">
</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">
<!-- Indicators --> <!-- Indicators -->
<ol class="carousel-indicators"> <ol class="carousel-indicators">
<li data-target="#carousel-recommendation-ungleich" data-slide-to="0" class="active"></li> <li data-target="#carousel-recommendation-ungleich" data-slide-to="0" class="active"></li>
<li data-target="#carousel-recommendation-ungleich" data-slide-to="1"></li> <li data-target="#carousel-recommendation-ungleich" data-slide-to="1"></li>
<li data-target="#carousel-recommendation-ungleich" data-slide-to="2"></li> <li data-target="#carousel-recommendation-ungleich" data-slide-to="2"></li>
</ol> </ol>
<!-- Wrapper for slides --> <!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox"> <div class="carousel-inner" role="listbox">
<div class="item active"> <div class="item active">
<p class="carousel-text text-muted text-center"> <p class="carousel-text text-muted text-center">
When we first moved our company HQ to Glarus, When we first moved our company HQ to Glarus,
@ -256,13 +259,13 @@
</div> </div>
<div class="item"> <div class="item">
<p class="carousel-text text-muted text-center"> <p class="carousel-text text-muted text-center">
After my first visit to Digital Glarus, I felt After my first visit to Digital Glarus, I felt
right at home and at peace. Now that 200ok has a right at home and at peace. Now that 200ok has a
mountain-side office, our meetings, workshops and mountain-side office, our meetings, workshops and
code-retreats are so much more intense and productive code-retreats are so much more intense and productive
for everyone. And in the end, when people came for everyone. And in the end, when people came
over from the city for work, they want to come back over from the city for work, they want to come back
real soon, because it just feels like going on vacation. real soon, because it just feels like going on vacation.
</p> </p>
<p class="text-center"> <p class="text-center">
<strong> - Alain Lafon </strong>, CEO of 200ok GmbH <strong> - Alain Lafon </strong>, CEO of 200ok GmbH
@ -281,205 +284,185 @@
Swiss Federal Institute for Forest, Snow and Landscape Research WSL Swiss Federal Institute for Forest, Snow and Landscape Research WSL
</p> </p>
</div> </div>
</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 fadeInDown text-center" data-wow-delay="0.5s"> <div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInUp 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 fadeInUp text-center" data-wow-delay="0.8s">
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInDown 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="blur"></div>
</div>
</li>
</ul>
<div class="caption portfolio-caption-white">cultural events</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInDown text-center" data-wow-delay="1.2s">
<ul class="caption-style-1">
<li>
<img src="{% static 'digitalglarus/img/portfolio/inspire.png' %}" class="img-responsive inline-block" alt="">
<div class="caption">
<div class="blur"></div>
</div>
</li>
</ul>
<div class="caption portfolio-caption-white">be inspired</div>
</div>
<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">
<li>
<img src="{% static 'digitalglarus/img/portfolio/workshop.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">workshops</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.4s"> <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/recharge.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">recharge</div> <div class="caption portfolio-caption-white">be inspired</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInUp text-center" data-wow-delay="1.3s">
<ul class="caption-style-1">
<li>
<img src="{% static 'digitalglarus/img/portfolio/workshop.png' %}" class="img-responsive inline-block" alt="">
<div class="caption">
<div class="blur"></div>
</div>
</li>
</ul>
<div class="caption portfolio-caption-white">workshops</div>
</div>
<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">
<li>
<img src="{% static 'digitalglarus/img/portfolio/recharge.png' %}" class="img-responsive inline-block" alt="">
<div class="caption">
<div class="blur"></div>
</div>
</li>
</ul>
<div class="caption portfolio-caption-white">recharge</div>
</div>
</div> </div>
</div>
</div>
</section> </section>
<!--aside-->
<aside class="bg-dark">
<div class="container text-center">
<!--aside--> <div class="call-to-action aside-caption-white">
<aside class="bg-dark"> Join our community. Be our member now!
<div class="container text-center">
<div class="call-to-action aside-caption-white">
Join our community. Be our member now!
<br>
<br>
<a href="{% url 'digitalglarus:signup' %}" class="btn btn-default btn-primary sr-button"> Sign Up </a>
</div>
</div>
</aside>
<!-- Half Page Image Background Carousel -->
<section id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url({% static 'digitalglarus/img/portfolio/slider_1.png' %})"></div>
<div class="carousel-caption carousel-caption-text">
<strong>OpenNebula workshop</strong> : <br>
push your geeky boundary with us at Digital Chalet
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url({% static 'digitalglarus/img/portfolio/slider_2.png' %})"></div>
<div class="carousel-caption carousel-caption-text">
<strong>Lorawan meetup</strong> : <br>
connect with like-minded people and discuss your latest tech obsession.
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url({% static 'digitalglarus/img/portfolio/slider_3.png' %})"></div>
<div class="carousel-caption carousel-caption-text">
Cooking and Hacking at Digital Chalet Schwanden
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url({% static 'digitalglarus/img/portfolio/slider_4.png' %})"></div>
<div class="carousel-caption carousel-caption-text">
Dive into the beautiful nature around you anytime you want
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</section>
<section id="contact">
<div class="fill">
<div class="row" class="wow fadeInDown">
<div class="col-lg-12 text-center wow fadeInDown">
<h2 class="section-heading">Contact Us</h2>
<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>
<div class="col-md-4 map-title">
Digital Glarus<br>
<span class="map-caption">In der Au 7 Schwanden 8762 Switzerland
<br>info@digitalglarus.ch
<br> <br>
(044) 534-66-22 <br>
<p>&nbsp;</p> <a href="{% url 'digitalglarus:signup' %}" class="btn btn-default btn-primary sr-button"> Sign Up </a>
</span>
</div> </div>
<p>&nbsp;</p>
</div>
</div>
</div> </div>
</aside>
<!-- Half Page Image Background Carousel -->
<section id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url({% static 'digitalglarus/img/portfolio/slider_1.png' %})"></div>
<div class="carousel-caption carousel-caption-text">
<strong>OpenNebula workshop</strong> : <br>
push your geeky boundary with us at Digital Chalet
</div>
</div> </div>
</section> <div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url({% static 'digitalglarus/img/portfolio/slider_2.png' %})"></div>
<div class="carousel-caption carousel-caption-text">
<strong>Lorawan meetup</strong> : <br>
connect with like-minded people and discuss your latest tech obsession.
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url({% static 'digitalglarus/img/portfolio/slider_3.png' %})"></div>
<div class="carousel-caption carousel-caption-text">
Cooking and Hacking at Digital Chalet Schwanden
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url({% static 'digitalglarus/img/portfolio/slider_4.png' %})"></div>
<div class="carousel-caption carousel-caption-text">
Dive into the beautiful nature around you anytime you want
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</section>
<section id="contact">
<div class="fill">
<div class="container">
<div class="wow fadeInUp">
<div class="text-center">
<h2 class="section-heading">Contact Us</h2>
<div class="map-wrap">
<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>
<div class="map-title">
Digital Glarus<br>
<span class="map-caption">In der Au 7 Schwanden 8762 Switzerland
<br>info@digitalglarus.ch
<br>
(044) 534-66-22
<p>&nbsp;</p>
</span>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
</div>
</section>
<!-- <!--