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