narbar problem, line in the modal, modal center, footer readable

This commit is contained in:
unknown 2016-12-09 11:11:41 -04:00
parent 73a18542b0
commit e124169596
5 changed files with 151 additions and 59 deletions

View file

@ -13,7 +13,7 @@
text-align: center; text-align: center;
margin: 30px auto 30px; margin: 30px auto 30px;
color: #88c7d7; color: #88c7d7;
}
.price2 { .price2 {
@ -25,8 +25,8 @@
cancel-subscription-modal .modal-body { cancel-subscription-modal .modal-body {
max-height: 800px; max-height: 800px;
} }
}
}
@media screen and (min-width: 780px) { @media screen and (min-width: 780px) {
cancel-subscription-modal .modal-dialog {width:1000px;} cancel-subscription-modal .modal-dialog {width:1000px;}
@ -38,6 +38,7 @@
margin: 30px auto 30px; margin: 30px auto 30px;
color: #88c7d7; color: #88c7d7;
}
.price2 { .price2 {
@ -46,11 +47,14 @@
} }
cancel-subscription-modal .modal-body {
max-height: 800px;
}
} }
</style> </style>
<section id="price"> <section id="price">
<div class="signup-container"> <div class="signup-container">
@ -130,18 +134,17 @@
</div> </div>
</section> </section>
<div class="modal fade bs-example-modal-sm" id="cancel-subscription-modal" tabindex="-1" role="dialog" aria-hidden ="true">
<div class="modal fade bs-example-modal-sm" id="cancel-subscription-modal" tabindex="-1" role="dialog" aria-hidden ="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body"> <div class="modal-body">
<section id="price2"> <section id="price2">
<div class="container"> <div class="container">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<!--<div class="row col-md-2 text-center wow fadeInDown"></div> --> <!--<div class="row col-md-2 text-center wow fadeInDown"></div> -->
<div class="row col-xs-12 col-sm-12 col-lg-6 text-center wow fadeInDown"> <div class="row col-xs-12 col-sm-12 col-lg-10 text-center wow fadeInDown">
<div class="price-box"> <div class="price-box">
<span class="glyphicon glyphicon-flag"></span> <span class="glyphicon glyphicon-flag"></span>
<h2 class="section-heading">General Terms & Conditions of Digital Glarus Membership</h2> <h2 class="section-heading">General Terms & Conditions of Digital Glarus Membership</h2>
@ -191,4 +194,7 @@
</div><!-- /.modal-content --> </div><!-- /.modal-content -->
</div><!-- /.modal-dialog --> </div><!-- /.modal-dialog -->
</div><!-- /.modal --> </div><!-- /.modal -->
{% endblock %} {% endblock %}

View file

@ -29,7 +29,7 @@
text-align: center; text-align: center;
margin: 30px auto 30px; margin: 30px auto 30px;
color: #88c7d7; color: #88c7d7;
}
.price2 { .price2 {
@ -40,6 +40,7 @@
} }
</style> </style>
<section id="price"> <section id="price">
@ -213,13 +214,11 @@
<div class="modal fade bs-example-modal-sm" id="cancel-subscription-modal" tabindex="-1" role="dialog" aria-hidden ="true"> <div class="modal fade bs-example-modal-sm" id="cancel-subscription-modal" tabindex="-1" role="dialog" aria-hidden ="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body"> <div class="modal-body">
<section id="price2"> <section id="price2">
<div class="container"> <div class="container">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<!--<div class="row col-md-2 text-center wow fadeInDown"></div> --> <!--<div class="row col-md-2 text-center wow fadeInDown"></div> -->
<div class="row col-xs-12 col-sm-12 col-lg-10 text-center wow fadeInDown"> <div class="row col-xs-12 col-sm-12 col-lg-10 text-center wow fadeInDown">
<div class="price-box"> <div class="price-box">

View file

@ -7,9 +7,16 @@
<style type="text/css"> <style type="text/css">
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
cancel-subscription-modal .modal-dialog {width:550px;} cancel-subscription-modal .modal-dialog {width:350px;}
position: relative;
top: -200px;
width: 400px;
z-index: 1000;
margin: 0 auto;
border-radius: 10px;
-webkit-border-radius: 10px;
}
.glyphicon-calendar{ .glyphicon-calendar{
font-size: 42px; font-size: 42px;
@ -26,6 +33,28 @@
} }
.cancel-subscription-modal{
position: absolute;
top: -200px;
width: 400px;
z-index: 1000;
margin: 0 auto;
border-radius: 10px;
-webkit-border-radius: 10px;
}
.btn-primary-text {
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 400;
color: #0F1221;
letter-spacing: 1px;
padding-right: 10px;
}
</style> </style>
<section id="price"> <section id="price">
@ -53,7 +82,7 @@
</div> </div>
<div class="text-center"> <div class="text-center">
<br> <br>
<a data-toggle="modal" data-target="#cancel-subscription-modal" target="_blank">How to pay?</a> <a class="btn btn-primary-text" data-toggle="modal" data-target="#cancel-subscription-modal" target="_blank">How to pay?</a>
</div> </div>
</div> </div>
@ -105,17 +134,15 @@
</section> </section>
<div class="modal fade bs-example-modal-sm" id="cancel-subscription-modal" tabindex="-1" role="dialog" aria-hidden ="true"> <div class="modal fade bs-example-modal-sm" id="cancel-subscription-modal" tabindex="-1" role="dialog" aria-hidden ="true" >
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body"> <div class="modal-body">
<section id="price2"> <section id="price2">
<div class="signup-container"> <div class="signup-container">
<div class="col-xs-12 col-sm-3 col-lg-4 text-center wow fadeInDown"> </div> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<div class="col-xs-12 col-sm-12 col-lg-12 text-center wow fadeInDown"> <div class="col-xs-12 col-sm-3 col-lg-4 text-center wow fadeInDown" margin-top:0;> </div>
<div class="col-xs-12 col-sm-12 col-lg-12 text-center wow fadeInDown" margin-top:0;>
<div class="signup-box"> <div class="signup-box">
<span class="glyphicon glyphicon-calendar"></span> <span class="glyphicon glyphicon-calendar"></span>
<h2 class="section-heading">How the pricing works</h2> <h2 class="section-heading">How the pricing works</h2>

View file

@ -7,8 +7,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> --> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width" />
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
@ -81,16 +80,7 @@
color:white; color:white;
} }
@media only screen and (min-width: 769px){
html,body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
@media only screen and (min-width: 769px){
.dropdown.home-dropdown-mobile { .dropdown.home-dropdown-mobile {
display: none; display: none;
} }
@ -99,13 +89,14 @@
} }
} }
@media only screen and (max-width: 768px){
.dropdown.home-dropdown-mobile { @media only screen and (max-width: 768px){
.dropdown.home-dropdown-mobile {
display: block; display: block;
background-color: background-color:
} }
.dropdown.home-dropdown-mobile .dropdown-menu{ .dropdown.home-dropdown-mobile .dropdown-menu{
display: block; display: block;
background-color: #0f1221; background-color: #0f1221;
} }
@ -120,16 +111,15 @@
.dropdown.home-dropdown { .dropdown.home-dropdown {
display: none; display: none;
} }
} }
</style> </style>
{% block extra_css %} {% endblock %}
</head> </head>
<body id="page-top" class="index">
<body id="page-top" class="index">
<!-- Navigation --> <!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top"> <nav class="navbar navbar-default navbar-fixed-top">
@ -152,7 +142,7 @@
<a href="#page-top"></a> <a href="#page-top"></a>
</li> </li>
<li> <li>
<a class="page-scroll" href="{% url 'digitalglarus:booking' %}" >booking & price</a> <a class="page-scroll" href="{% url 'digitalglarus:booking' %}">booking & price</a>
</li> </li>
<li> <li>
<a class="page-scroll" href="{% url 'digitalglarus:history' %}">history</a> <a class="page-scroll" href="{% url 'digitalglarus:history' %}">history</a>
@ -165,7 +155,7 @@
</li> </li>
{% if request.user.is_authenticated %} {% if request.user.is_authenticated %}
<li class="dropdown home-dropdown-mobile open"> <li class="dropdown home-dropdown-mobile open">
@ -191,7 +181,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown home-dropdown"> <li class="dropdown home-dropdown">
<a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#"> <a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#">
<i class="glyphicon glyphicon-user"></i>{{request.user.name}} <span class="caret"></span> <i class="glyphicon glyphicon-user"></i>{{request.user.name}} <span class="caret"></span>
</a> </a>
@ -213,6 +203,7 @@
</li> </li>
</ul> </ul>
</li> </li>
{% else %} {% else %}
<li> <li>
<a class="page-scroll" href="{% url 'digitalglarus:login' %}">Login</a> <a class="page-scroll" href="{% url 'digitalglarus:login' %}">Login</a>

View file

@ -7,7 +7,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<meta name="viewport" content="width=device-width" />
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
@ -79,7 +80,51 @@
margin: 0px; margin: 0px;
color:white; color:white;
} }
html,body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
@media only screen and (min-width: 769px){
.dropdown.home-dropdown-mobile {
display: none;
}
.dropdown.home-dropdown {
display: block;
}
}
@media only screen and (max-width: 768px){
.dropdown.home-dropdown-mobile {
display: block;
background-color:
}
.dropdown.home-dropdown-mobile .dropdown-menu{
display: block;
background-color: #0f1221;
}
.dropdown.home-dropdown-mobile .dropdown-menu li a {
color:white;
}
.dropdown.home-dropdown-mobile .dropdown-menu li a:hover {
color: #0f1221;
}
.dropdown.home-dropdown {
display: none;
}
}
</style> </style>
{% block extra_css %} {% endblock %}
</head> </head>
@ -97,17 +142,17 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<p><a class="navbar-brand page-scroll"href="{% url 'digitalglarus:landing' %}"><img src="{% static 'digitalglarus/img/logo_white.svg' %}"></a></p> <p><a class="navbar-brand page-scroll" href="{% url 'digitalglarus:landing' %}"><img src="{% static 'digitalglarus/img/logo_white.svg' %}"></a></p>
</div> </div>
<!-- Collect the nav links, forms, and other content for toggling --> <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right" style="margin-right: -; margin-left: 0px;margin-right: 0px;">
<li class="hidden active"> <li class="hidden active">
<a href="#page-top"></a> <a href="#page-top"></a>
</li> </li>
<li> <li>
<a class="page-scroll" href="{% url 'digitalglarus:booking' %}">booking & price</a> <a class="page-scroll" href="{% url 'digitalglarus:booking' %}" >booking & price</a>
</li> </li>
<li> <li>
<a class="page-scroll" href="{% url 'digitalglarus:history' %}">history</a> <a class="page-scroll" href="{% url 'digitalglarus:history' %}">history</a>
@ -119,7 +164,31 @@
<a class="page-scroll" href="#contact">Contact</a> <a class="page-scroll" href="#contact">Contact</a>
</li> </li>
{% if request.user.is_authenticated %} {% if request.user.is_authenticated %}
<li class="dropdown home-dropdown-mobile open">
<a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#">
<i class="glyphicon glyphicon-user"></i>{{request.user.name}} <span class="caret"></span>
</a>
<ul id="g-account-menu" class="dropdown-menu" role="menu" aria-hidden="true">
<li>
<a href="{% url 'digitalglarus:booking_orders_list' %}">
<i class="fa fa-home" aria-hidden="true"></i> {% trans "Bookings"%}
</a>
</li>
<li>
<a href="{% url 'digitalglarus:membership_orders_list' %}"><i class="fa fa-heart-o" aria-hidden="true"></i> {% trans "Membership"%}
</a>
</li>
<li>
<a href="{% url 'digitalglarus:logout' %}">
<i class="fa fa-lock" aria-hidden="true"></i>
{% trans "Logout"%}
</a>
</li>
</ul>
</li>
<li class="dropdown home-dropdown"> <li class="dropdown home-dropdown">
<a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#"> <a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#">
<i class="glyphicon glyphicon-user"></i>{{request.user.name}} <span class="caret"></span> <i class="glyphicon glyphicon-user"></i>{{request.user.name}} <span class="caret"></span>