Skip to content

abalsh / Garlix

Go to a project
Commit 7373cbc1 by abalsh
Options

trimmed css, Cards in Subscribe,fiat and crypto look off

parent 76ebb7ec
Inline Side-by-side
Showing with 21 additions and 257 deletions
crypto.html
......@@ -29,9 +29,7 @@
</nav>
</div>
</header>
<br>
<br>
<br>
<br> <br> <br>
<div class="card">
<div class="card-body">
<div class="form-group">
......@@ -64,8 +62,8 @@
</div>
<input type="number" class="form-control form-control-lg mx-3" value="">
<br> <br>
<div class="p-t-10">
<button class="btn btn--pill btn--green" type="submit">Convert!</button>
<div class="btn">
<button class="btn btn--pill" type="submit">Convert!</button>
</div>
</div>
</div>
......
css/main.css
......@@ -39,14 +39,14 @@ a:hover {
color: #fff;
}
/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
color: #333;
text-shadow: none; /* Prevent inheritance from `body` */
background-color: #fff;
border: .05rem solid #fff;
text-shadow: none; /* to not have shadow from `body` */
background-color: #ffffff;
border: .02rem solid #fff;
}
......@@ -103,7 +103,7 @@ body {
.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
border-bottom-color: #85bb65;
}
@media (min-width: 48em) {
......@@ -150,6 +150,8 @@ body{
body, html{
height: 100%;
}
/* Below is for subscribe.html as it doesn't impact index.html*/
.card-3 {
background: #000;
......@@ -179,140 +181,6 @@ body, html{
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;
......@@ -331,7 +199,7 @@ body, html{
box-sizing: inherit;
}
/* For the look of the form.*/
/* For the look of the form. Removes borders*/
input {
outline: none;
margin: 0;
......@@ -344,31 +212,20 @@ input {
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;
}
/* Spacing between forms*/
.input-group {
position: relative;
margin-bottom: 33px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
/* To make forms transparent */
.input--style-3 {
padding: 5px 0;
font-size: 16px;
color: #ccc;
background: transparent;
border: 1px;
}
.input--style-3::-webkit-input-placeholder {
......@@ -382,93 +239,3 @@ input {
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;
}
fiat.html
......@@ -29,15 +29,13 @@
</nav>
</div>
</header>
<br>
<br>
<br>
<br> <br> <br>
<div class="card">
<div class="card-body">
<div class="form-group">
<label for="FormControlSelect1">Convert From</label>
<br>
<select class="form-control" id="FormControlSelect1">
<select class="input--style-3" id="FormControlSelect1">
<option>USD</option>
<option>EUR</option>
<option>GBP</option>
......@@ -47,12 +45,12 @@
<option>AED</option>
</select>
</div>
<input type="number" class="form-control form-control-lg mx-3" value="">
<input type="number" class="input--style-3 form-control-lg mx-3" value="">
<div class="form-group">
<br> <br>
<label for="FormControlSelect1">To</label>
<br>
<select class="form-control" id="FormControlSelect1">
<select class="input--style-3" id="FormControlSelect1">
<option>USD</option>
<option>EUR</option>
<option>GBP</option>
......
subscribe.html
......@@ -28,6 +28,7 @@
<a class="nav-link active" href="subscribe.html">Subscribe</a>
</nav>
</div>
<br> <br>
<div class="page-wrapper bg-gra-01 p-t-180 p-b-100 font-poppins">
<div class="wrapper wrapper--w780">
<div class="card card-3">
......@@ -58,8 +59,8 @@
<div class="input-group">
<input class="input--style-3" type="text" placeholder="Phone" name="phone">
</div>
<div class="p-t-10">
<button class="btn btn--pill btn--green" type="submit">Submit</button>
<div class="btn">
<button class="btn btn--pill" type="submit">Submit</button>
</div>
</form>
</div>
......
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