booking section finished
This commit is contained in:
dqnid committed
1 parent
1a7706f2a2
commit
70cd6973d1
7 files changed
+238
-90
No files matched your search
@@ -95,24 +95,24 @@ body {
|
||||
margin-bottom: 3rem; }
|
||||
|
||||
.u-center-text {
|
||||
text-align: center; }
|
||||
text-align: center !important; }
|
||||
|
||||
.u-margin-bottom-small {
|
||||
margin-bottom: 2rem; }
|
||||
margin-bottom: 2rem !important; }
|
||||
|
||||
.u-margin-bottom-medium {
|
||||
margin-bottom: 4rem; }
|
||||
margin-bottom: 4rem !important; }
|
||||
|
||||
.u-margin-bottom-big {
|
||||
margin-bottom: 8rem; }
|
||||
margin-bottom: 8rem !important; }
|
||||
|
||||
.u-margin-top-big {
|
||||
margin-top: 8rem; }
|
||||
margin-top: 8rem !important; }
|
||||
|
||||
.u-margin-top-huge {
|
||||
margin-top: 10rem; }
|
||||
margin-top: 10rem !important; }
|
||||
|
||||
.btn:link, .btn:visited {
|
||||
.btn, .btn:link, .btn:visited {
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
padding: 1.5rem 4rem;
|
||||
@@ -120,10 +120,12 @@ body {
|
||||
border-radius: 10rem;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
font-size: 1.6rem; }
|
||||
font-size: 1.6rem;
|
||||
border: none;
|
||||
cursor: pointer; }
|
||||
|
||||
.btn--animated {
|
||||
animation: slideBottom 0.7s ease-out .75s;
|
||||
animation: slideBottom 0.7s ease-out 0.75s;
|
||||
animation-fill-mode: backwards; }
|
||||
|
||||
.btn:hover {
|
||||
@@ -133,7 +135,7 @@ body {
|
||||
transform: scaleX(1.4) scaleY(1.6);
|
||||
opacity: 0; }
|
||||
|
||||
.btn:active {
|
||||
.btn:active, .btn:focus {
|
||||
transform: translateY(-0.1rem);
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); }
|
||||
|
||||
@@ -168,7 +170,7 @@ body {
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #55c57a;
|
||||
padding: 3px;
|
||||
transition: all .2s; }
|
||||
transition: all 0.2s; }
|
||||
|
||||
.btn-text:hover {
|
||||
background-color: #55c57a;
|
||||
@@ -381,6 +383,82 @@ body {
|
||||
width: 100%;
|
||||
object-fit: cover; }
|
||||
|
||||
.form__group:not(:last-child) {
|
||||
margin-bottom: 2rem; }
|
||||
|
||||
.form__input {
|
||||
font-size: 1.5rem;
|
||||
font-family: inherit;
|
||||
color: inherit;
|
||||
padding: 1.5rem 2rem;
|
||||
border-radius: 2px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border: none;
|
||||
border-bottom: 3px solid transparent;
|
||||
width: 90%;
|
||||
display: block;
|
||||
transition: all 0.3s; }
|
||||
.form__input:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
|
||||
border-bottom: 3px solid #55c57a; }
|
||||
.form__input:focus:invalid {
|
||||
border-bottom: 3px solid #ff7730; }
|
||||
.form__input::placeholder {
|
||||
color: #999; }
|
||||
|
||||
.form__label {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
margin-left: 2rem;
|
||||
margin-top: 0.7rem;
|
||||
display: block;
|
||||
transition: all 0.3s; }
|
||||
|
||||
.form__input:placeholder-shown + .form__label {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-4rem); }
|
||||
|
||||
.form__radio-group {
|
||||
width: 49%;
|
||||
display: inline-block; }
|
||||
|
||||
.form__radio-input {
|
||||
display: none; }
|
||||
|
||||
.form__radio-label {
|
||||
font-size: 1.6rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding-left: 4.5rem; }
|
||||
|
||||
.form__radio-button {
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
border: 5px solid #55c57a;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -0.4rem; }
|
||||
.form__radio-button::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 1.3rem;
|
||||
width: 1.3rem;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #55c57a;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s; }
|
||||
|
||||
.form__radio-input:checked ~ .form__radio-label .form__radio-button::after {
|
||||
opacity: 1; }
|
||||
|
||||
.header {
|
||||
height: 95vh;
|
||||
background-image: linear-gradient(to right bottom, rgba(126, 213, 111, 0.801), rgba(40, 180, 133, 0.808)), url("../img/hero.jpg");
|
||||
|
||||
+31
-64
@@ -312,7 +312,7 @@
|
||||
<input
|
||||
id="name"
|
||||
type="text"
|
||||
class="from__input"
|
||||
class="form__input"
|
||||
placeholder="Full Name"
|
||||
required
|
||||
/>
|
||||
@@ -322,79 +322,46 @@
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
class="from__input"
|
||||
class="form__input"
|
||||
placeholder="Email"
|
||||
required
|
||||
/>
|
||||
<label for="email" class="form__label">Email address</label>
|
||||
</div>
|
||||
<div class="form__group u-margin-bottom-medium">
|
||||
<div class="form__radio-group">
|
||||
<input
|
||||
type="radio"
|
||||
class="form__radio-input"
|
||||
id="small"
|
||||
name="size"
|
||||
/>
|
||||
<label for="small" class="form__radio-label"
|
||||
><span class="form__radio-button"></span>Small tour
|
||||
group</label
|
||||
>
|
||||
</div>
|
||||
<div class="form__radio-group">
|
||||
<input
|
||||
type="radio"
|
||||
class="form__radio-input"
|
||||
id="large"
|
||||
name="size"
|
||||
/>
|
||||
<label for="large" class="form__radio-label"
|
||||
><span class="form__radio-button"></span>Large tour
|
||||
group</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form__group">
|
||||
<button class="btn btn--green">Next step →</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!--
|
||||
<section class="grid-test">
|
||||
<div class="row">
|
||||
<div class="col-1-of-2">
|
||||
Col 1 of 2
|
||||
</div>
|
||||
<div class="col-1-of-2">
|
||||
Col 1 of 2
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-1-of-3">
|
||||
Col 1 of 3
|
||||
</div>
|
||||
<div class="col-1-of-3">
|
||||
Col 1 of 3
|
||||
</div>
|
||||
<div class="col-1-of-3">
|
||||
Col 1 of 3
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-1-of-3">
|
||||
Col 1 of 3
|
||||
</div>
|
||||
<div class="col-2-of-3">
|
||||
Col 2 of 3
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-1-of-4">
|
||||
Col 1 of 4
|
||||
</div>
|
||||
<div class="col-1-of-4">
|
||||
Col 1 of o
|
||||
</div>
|
||||
<div class="col-2-of-4">
|
||||
Col 1 of 4
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-1-of-4">
|
||||
Col 1 of 4
|
||||
</div>
|
||||
<div class="col-2-of-4">
|
||||
Col 1 of o
|
||||
</div>
|
||||
<div class="col-1-of-4">
|
||||
Col 2 of 4
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-1-of-4">
|
||||
Col 1 of 4
|
||||
</div>
|
||||
<div class="col-3-of-4">
|
||||
Col 3 of 4
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -13,6 +13,8 @@ $color-grey-light-1: #f7f7f7;
|
||||
$color-grey-light-2: #eee;
|
||||
|
||||
$color-gray-dark: #777;
|
||||
$color-gray-dark-2: #999;
|
||||
|
||||
$color-white: #fff;
|
||||
$color-black: #000;
|
||||
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
.u-center-text {
|
||||
text-align: center;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.u-margin-bottom-small {
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 2rem !important;
|
||||
}
|
||||
|
||||
.u-margin-bottom-medium {
|
||||
margin-bottom: 4rem;
|
||||
margin-bottom: 4rem !important;
|
||||
}
|
||||
|
||||
.u-margin-bottom-big {
|
||||
margin-bottom: 8rem;
|
||||
margin-bottom: 8rem !important;
|
||||
}
|
||||
|
||||
.u-margin-top-big {
|
||||
margin-top: 8rem;
|
||||
margin-top: 8rem !important;
|
||||
}
|
||||
|
||||
.u-margin-top-huge {
|
||||
margin-top: 10rem;
|
||||
margin-top: 10rem !important;
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
.btn {
|
||||
&,
|
||||
&:link,
|
||||
&:visited {
|
||||
text-transform: uppercase;
|
||||
@@ -9,10 +10,14 @@
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
font-size: $default-font-size;
|
||||
|
||||
// Changes to allow usage this class in <button>
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&--animated {
|
||||
animation: slideBottom 0.7s ease-out .75s;
|
||||
animation: slideBottom 0.7s ease-out 0.75s;
|
||||
animation-fill-mode: backwards;
|
||||
}
|
||||
|
||||
@@ -25,15 +30,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
&:active,
|
||||
&:focus {
|
||||
transform: translateY(-0.1rem);
|
||||
box-shadow: 0 .5rem 1rem rgba($color-black, 0.2);
|
||||
box-shadow: 0 0.5rem 1rem rgba($color-black, 0.2);
|
||||
}
|
||||
|
||||
&--white {
|
||||
background-color: $color-white;
|
||||
color: $color-gray-dark;
|
||||
&::after{
|
||||
&::after {
|
||||
background-color: $color-white;
|
||||
}
|
||||
}
|
||||
@@ -41,7 +47,7 @@
|
||||
&--green {
|
||||
background-color: $color-primary;
|
||||
color: $color-white;
|
||||
&::after{
|
||||
&::after {
|
||||
background-color: $color-primary;
|
||||
}
|
||||
}
|
||||
@@ -69,19 +75,18 @@
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid $color-primary;
|
||||
padding: 3px;
|
||||
transition: all .2s;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
color: $color-white;
|
||||
box-shadow: 0 1rem 2reem rgba($color-black, .15);
|
||||
box-shadow: 0 1rem 2reem rgba($color-black, 0.15);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
||||
box-shadow: 0 .5rem 1reem rgba($color-black, .15);
|
||||
box-shadow: 0 0.5rem 1reem rgba($color-black, 0.15);
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
.form {
|
||||
&__group:not(:last-child) {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
&__input {
|
||||
font-size: 1.5rem;
|
||||
font-family: inherit;
|
||||
color: inherit;
|
||||
padding: 1.5rem 2rem;
|
||||
border-radius: 2px;
|
||||
background-color: rgba($color-white, 0.5);
|
||||
border: none;
|
||||
border-bottom: 3px solid transparent;
|
||||
width: 90%;
|
||||
display: block;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 1rem 2rem rgba($color-black, 0.1);
|
||||
border-bottom: 3px solid $color-primary;
|
||||
}
|
||||
|
||||
&:focus:invalid {
|
||||
border-bottom: 3px solid $color-secondary-dark;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $color-gray-dark-2;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
margin-left: 2rem;
|
||||
margin-top: 0.7rem;
|
||||
display: block;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
&__input:placeholder-shown + &__label {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-4rem);
|
||||
}
|
||||
|
||||
&__radio-group {
|
||||
width: 49%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&__radio-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__radio-label {
|
||||
font-size: $default-font-size;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding-left: 4.5rem;
|
||||
}
|
||||
|
||||
&__radio-button {
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
border: 5px solid $color-primary;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -0.4rem;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 1.3rem;
|
||||
width: 1.3rem;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: $color-primary;
|
||||
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
&__radio-input:checked ~ &__radio-label &__radio-button::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -13,6 +13,7 @@
|
||||
@import "components/card";
|
||||
@import "components/story";
|
||||
@import "components/bg-video";
|
||||
@import "components/form";
|
||||
|
||||
@import "layout/header";
|
||||
@import "layout/grid";
|
||||
|
||||
Reference in new issue
Block a user