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

digitalglarus landing page animation direction changed, bootstrap grid fix

Browse source
This commit is contained in:
Arvind Tiwari 2017-11-02 23:49:38 +05:30
parent 0fdcfcfe50
commit fcc22945a4
2 changed files with 386 additions and 402 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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;

190
digitalglarus/templates/digitalglarus/index.html
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;
@ -133,103 +96,144 @@
padding-top: 80px; padding-top: 80px;
text-transform: uppercase; text-transform: uppercase;
text-align: right; text-align: right;
flex-basis: 50%;
} }
.section-top-img { .section-top-img {
padding:0px; flex-basis: 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 +288,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 +360,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 +371,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 +386,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 +434,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 wow fadeInUp">
<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 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 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 +466,6 @@
</section> </section>
<!-- <!--
<div class="row"> <div class="row">
<div class="box"> <div class="box">