welcome popeup + mobile friendly

This commit is contained in:
GotPPay
2017-11-06 14:38:47 +01:00
parent 7a5f7242ac
commit ec9a29e04d
14 changed files with 200 additions and 115 deletions

132
web/dist/welcome.css vendored
View File

@@ -5,25 +5,25 @@
/*}*/
.welcome-container h1 {
font-size: 2em;
font-size: 1.2em;
text-align: center;
}
.welcome-container h2 {
padding-bottom: 25px;
color: #2d3138;
font-size: 26px;
font-weight: 200;
text-align: center;
letter-spacing: .59px;
/*padding-bottom: 25px;*/
color: #2d3138;
font-size: 1em;
font-weight: 200;
text-align: center;
letter-spacing: .59px;
}
.welcome-container-bg {
/*background-color: rgb(92, 192, 99);*/
background-image: url('static/map.jpg');
/*background-image: url('static/images/sa-bg.jpg');*/
/*background-image: url('static/map.jpg');*/
background-image: url('static/images/sa-bg.jpg');
background-size: auto 100%;
/*background-position: center;*/
-moz-filter: blur(5px);
-o-filter: blur(5px);
@@ -40,26 +40,116 @@
}
.welcome-container {
position: fixed;
position: absolute;
left: 0;
right: 0;
top:0;
bottom:0;
z-index: 0;
margin-left: 20px;
margin-right: 20px;
/*margin-left: 20px;
margin-right: 20px;*/
height: 100%;
padding: 100px;
/*padding: 100px;*/
}
.welcome-content {
/*height: 100%;*/
margin: 0 auto;
width: 600px;
/*margin: 0 auto;*/
width: 240px;
background-color: hsla(0,0%,100%,.95);
box-shadow: 0 2px 4px 0 rgba(73,73,73,.1);
padding: 50px;
box-shadow: 0 2px 4px 0 rgba(73,73,73,.1);
margin-left: auto;
margin-right: auto;
margin-top:40%;
/*padding: 50px;*/
}
.welcome-content .gmaps-places-input-welcome {
width: 100%;
.buy-button {
height: 80px;
width: 80px;
background:url('static/images/sale_1_mobile.png') no-repeat;
background-size: contain;
border: none;
margin-left: 10%;
margin-right: 5%;
}
.rent-button{
height: 80px;
width: 80px;
background:url('static/images/rent_0_mobile.png') no-repeat;
background-size: contain;
border: none;
margin-left: 5%;
}
.search-button{
background-color: #b6d53b;
margin: 10px;
border: none;
text-align: center;
font-size: 1em;
width: 90%;
margin-left:5%;
margin-right: 5%;
}
@media (min-width: 550px) {
.welcome-container h1 {
font-size: 2em;
text-align: center;
}
.welcome-container h2 {
/*padding-bottom: 25px;*/
color: #2d3138;
font-size: 1.4em;
font-weight: 200;
text-align: center;
letter-spacing: .59px;
}
.welcome-content {
/*height: 100%;*/
/*margin: 0 auto;*/
width: 500px;
background-color: hsla(0,0%,100%,.95);
box-shadow: 0 2px 4px 0 rgba(73,73,73,.1);
margin-left: auto;
margin-right: auto;
margin-top:10%;
/*padding: 50px;*/
}
.buy-button {
height: 150px;
width: 150px;
background:url('static/images/sale_1_mobile.png') no-repeat;
background-size: contain;
border: none;
margin-left: 15%;
margin-right: 5%;
}
.rent-button{
height: 150px;
width: 150px;
background:url('static/images/rent_0_mobile.png') no-repeat;
background-size: contain;
border: none;
margin-left: 5%;
}
.search-button{
background-color: #b6d53b;
margin: 10px;
border: none;
text-align: center;
font-size: 1.4em;
width: 90%;
margin-left:5%;
margin-right: 5%;
}
}