Skip to content

abalsh / Garlix

Go to a project
Commit 78bf103c by abalsh
Options

Finalized Subscribe form (sort of), Style of it is in main.css, looking for ways… 

Finalized Subscribe form (sort of), Style of it is in main.css, looking for ways to make the drop down menu of gender better.
parent 31da8ff8
Inline Side-by-side
Showing with 328 additions and 3 deletions
css/main.css
......@@ -150,3 +150,320 @@ body{
body, html{
height: 100%;
}
/* Below is for subscribe.html as it doesn't impact index.html*/
.card-3 {
background: #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
width: 100%;
display: table;
}
.card {
overflow: hidden;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: darkslategray;
}
.card-3 .card-body {
padding: 57px 65px;
padding-bottom: 65px;
display: table-cell;
}
@media (max-width: 767px) {
.card-3 {
display: block;
}
.card-3 .card-heading {
display: block;
width: 100%;
padding-top: 400px;
background-position: center center;
}
.card-3 .card-body {
display: block;
width: 100%;
padding: 37px 30px;
padding-bottom: 45px;
}
}
.select--no-search .select2-search {
display: none !important;
}
.rs-select2 .select2-container {
width: 100% !important;
outline: none;
}
.rs-select2 .select2-container .select2-selection--single {
outline: none;
border: none;
height: 36px;
background: transparent;
}
.rs-select2 .select2-container .select2-selection--single .select2-selection__rendered {
line-height: 36px;
padding-left: 0;
color: #ccc;
font-size: 16px;
font-family: inherit;
}
.rs-select2 .select2-container .select2-selection--single .select2-selection__arrow {
height: 34px;
right: 4px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.rs-select2 .select2-container .select2-selection--single .select2-selection__arrow b {
display: none;
}
.rs-select2 .select2-container .select2-selection--single .select2-selection__arrow:after {
font-family: "Material-Design-Iconic-Font";
content: '\f2f9';
font-size: 18px;
color: #ccc;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.rs-select2 .select2-container.select2-container--open .select2-selection--single .select2-selection__arrow::after {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.select2-container--open .select2-dropdown--below {
border: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
border: 1px solid #e0e0e0;
margin-top: 5px;
overflow: hidden;
}
/* ==========================================================================
#GRID
========================================================================== */
.row {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.row-space {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.col-2 {
width: -webkit-calc((100% - 60px) / 2);
width: -moz-calc((100% - 60px) / 2);
width: calc((100% - 60px) / 2);
}
@media (max-width: 767px) {
.col-2 {
width: 100%;
}
}
/* ==========================================================================
#BOX-SIZING
========================================================================== */
/* This is basically to not make the form slightly overlap with the header/footer.*/
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
* {
padding: 0;
margin: 0;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
/* For the look of the form.*/
input {
outline: none;
margin: 0;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
width: 100%;
font-size: 14px;
font-family: inherit;
}
.input-icon {
position: absolute;
font-size: 18px;
color: #ccc;
right: 8px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
}
.input-group {
position: relative;
margin-bottom: 33px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.input--style-3 {
padding: 5px 0;
font-size: 16px;
color: #ccc;
background: transparent;
}
.input--style-3::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: #ccc;
}
.input--style-3:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #ccc;
opacity: 1;
}
.input--style-3::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #ccc;
opacity: 1;
}
.input--style-3:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #ccc;
}
.input--style-3:-ms-input-placeholder {
/* Microsoft Edge */
color: #ccc;
}
/* ==========================================================================
#TITLE
========================================================================== */
.title {
font-size: 24px;
color: #fff;
font-weight: 400;
margin-bottom: 36px;
}
input {
outline: none;
margin: 0;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
width: 100%;
font-size: 14px;
font-family: inherit;
}
.input-icon {
position: absolute;
font-size: 18px;
color: #ccc;
right: 8px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
}
.input-group {
position: relative;
margin-bottom: 33px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.input--style-3 {
padding: 5px 0;
font-size: 16px;
color: #ccc;
background: transparent;
}
.input--style-3::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: #ccc;
}
.input--style-3:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #ccc;
opacity: 1;
}
.input--style-3::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #ccc;
opacity: 1;
}
.input--style-3:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #ccc;
}
.input--style-3:-ms-input-placeholder {
/* Microsoft Edge */
color: #ccc;
}
subscribe.html
......@@ -12,7 +12,7 @@
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Main Custom styles for the website -->
<link href="css/subscribe.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
</head>
<body class="text-center" background="/home/gorilla/Desktop/Garlix/img/backgroundd.jpg">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
......@@ -39,7 +39,7 @@
<input class="input--style-3" type="text" placeholder="Name" name="name">
</div>
<div class="input-group">
<input class="input--style-3 js-datepicker" type="text" placeholder="Birthdate" name="birthday">
<input class="input--style-3 js-datepicker" type="text" placeholder="Birthdate (YYYY-MM-DD)" name="birthday">
<i class="zmdi zmdi-calendar-note input-icon js-btn-calendar"></i>
</div>
<div class="input-group">
......@@ -48,7 +48,6 @@
<option disabled="disabled" selected="selected">Gender</option>
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
<div class="select-dropdown"></div>
</div>
......@@ -67,3 +66,11 @@
</div>
</div>
</div>
<footer class="mastfoot mt-auto">
<div class="inner">
<p>Develeoped and Designed by <a href="#">&#169;Garlix</a>.</p>
</div>
</footer>
</div>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment