Finalized Styling of blocks and buttons
Added the styling for all blocks and interaction with button. Could not get the smooth scroll to work. Will need to research more.
This commit is contained in:
@@ -36,6 +36,10 @@ h2 {
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
.b-header{
|
||||
height: 24vh;
|
||||
@@ -129,7 +133,6 @@ p.subheading {
|
||||
text-align: center;
|
||||
background-color: #8C8E90;
|
||||
border-bottom: 16px solid #FF6600;
|
||||
overflow:auto;
|
||||
box-sizing: border-box;
|
||||
padding-top: 2%
|
||||
}
|
||||
@@ -225,7 +228,8 @@ label {
|
||||
border: 2px solid #FF6600;
|
||||
border-radius: 4px;
|
||||
background-color: #CCFF00;
|
||||
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.23), 0 3px 6px 0 rgba(0,0,0,0.16);
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
color: #5A5A5C;
|
||||
font-family: Roboto;
|
||||
font-size: 14px;
|
||||
@@ -235,6 +239,18 @@ label {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input.input-calculate:active{
|
||||
border: 2px solid #CCFF00;
|
||||
border-radius: 4px;
|
||||
background-color: #FF6600;
|
||||
color: #FFFFFF;
|
||||
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
|
||||
}
|
||||
|
||||
input.input-calculate:focus{
|
||||
outline-style: none;
|
||||
}
|
||||
|
||||
.b-infoentry__dividerheading{
|
||||
display: block;
|
||||
margin: 16px auto;
|
||||
@@ -259,6 +275,10 @@ label {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.b-options__weightmanipulators{
|
||||
padding-top: 2%;
|
||||
}
|
||||
|
||||
.b-options__inputcontainer{
|
||||
width: 100%;
|
||||
color: #FCFCFC;
|
||||
@@ -270,7 +290,7 @@ label {
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
text-align: center;
|
||||
padding-top: 16px;
|
||||
padding-top: 2%;
|
||||
}
|
||||
|
||||
.b-options__optionsinput{
|
||||
@@ -284,7 +304,7 @@ label {
|
||||
|
||||
.input-bar{
|
||||
height: 33px;
|
||||
width: 130px;
|
||||
width: 142px;
|
||||
border-radius: 4px;
|
||||
background-color: #D8D8D8;
|
||||
color: #48484A;
|
||||
@@ -294,11 +314,11 @@ label {
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.75px;
|
||||
line-height: 20px;
|
||||
margin-right: 5px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.input-percentage{
|
||||
height: 38px;
|
||||
width: 130px;
|
||||
width: 142px;
|
||||
border-radius: 4px;
|
||||
background-color: #D8D8D8;
|
||||
color: #48484A;
|
||||
@@ -310,6 +330,47 @@ label {
|
||||
line-height: 20px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.b-options__platesavailable{
|
||||
height: 50%;
|
||||
text-align: center;
|
||||
background-color: #8C8E90;
|
||||
padding: 2% 0px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
input.input-weightsavailable{
|
||||
width: 100%;
|
||||
font-family: "Zilla Slab";
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.75px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
width: 41px;
|
||||
height: 33px;
|
||||
padding: 0px;
|
||||
background-color: #D8D8D8;
|
||||
color: ##48484A;
|
||||
}
|
||||
|
||||
.b-returntop{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: #CCFF00;
|
||||
box-shadow: 0 6px 6px 0 rgba(0,0,0,0.26), 0 10px 20px 0 rgba(0,0,0,0.19);
|
||||
z-index: 500;
|
||||
padding: 1vh 0px;
|
||||
min-height: 64px;
|
||||
color: #48484A;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.b-returnTop_heading{
|
||||
color: #48484A;
|
||||
}
|
||||
|
||||
/*
|
||||
.b-container {
|
||||
|
||||
|
||||
@@ -265,7 +265,7 @@ input[type="url"]:focus,
|
||||
input[type="password"]:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border: 1px solid #33C3F0;
|
||||
border: 1px solid #CCFF00;
|
||||
outline: 0; }
|
||||
label,
|
||||
legend {
|
||||
|
||||
@@ -69,4 +69,4 @@
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
<link rel="stylesheet" href="css/appstyling-v2.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Zilla+Slab:500,500i" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script src="js/Weight Calculation Script-Edited-Jquery-V4.js"> </script>
|
||||
</head>
|
||||
<body>
|
||||
@@ -95,81 +96,78 @@
|
||||
|
||||
<a name="options"></a>
|
||||
<div class="b-options">
|
||||
<div class="b-options__inputcontainer">
|
||||
<div class="b-options__optionsinput">
|
||||
<label for="Bar">BAR WEIGHT (LBS)</label>
|
||||
<input type="text" class="b-options__input input-element input-bar" name="Bar" value="45" id="Bar">
|
||||
<div class="b-options__weightmanipulators">
|
||||
<div class="b-options__inputcontainer">
|
||||
<div class="b-options__optionsinput">
|
||||
<label for="Bar">BAR WEIGHT (LBS)</label>
|
||||
<input type="text" class="b-options__input input-element input-bar" name="Bar" value="45" id="Bar">
|
||||
</div>
|
||||
<div class="b-options__optionsinput">
|
||||
<label for="Percentage">PERCENT OF WEIGHT</label>
|
||||
<select name="Percentage" class="b-options__percent input-element input-percentage" id="Percentage">
|
||||
<option value="1" selected="">100% </option>
|
||||
<option value="0.95">95% </option>
|
||||
<option value="0.90">90% </option>
|
||||
<option value="0.85">85% </option>
|
||||
<option value="0.80">80% </option>
|
||||
<option value="0.75">75% </option>
|
||||
<option value="0.70">70% </option>
|
||||
<option value="0.65">65% </option>
|
||||
<option value="0.60">60% </option>
|
||||
<option value="0.55">55% </option>
|
||||
<option value="0.50">50% </option>
|
||||
<option value="0.45">45% </option>
|
||||
<option value="0.40">40% </option>
|
||||
<option value="0.35">35% </option>
|
||||
<option value="0.30">30% </option>
|
||||
<option value="0.25">25% </option>
|
||||
<option value="0.20">20% </option>
|
||||
<option value="0.15">15% </option>
|
||||
<option value="0.10">10% </option>
|
||||
<option value="0.05">5% </option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-options__platesavailable">
|
||||
<p class="b-options__subheading subheading">Plates Available</p>
|
||||
<div class="b-options__inputcontainer">
|
||||
<div class="b-calulatorinputs__input">
|
||||
<label for="avail45">45 LBS</label>
|
||||
<input type="number" data-weight="45" class="input-element input-weightsavailable input-available45" name="A45" min="0" step="1" value="20" placeholder="20" id="avail45">
|
||||
</div>
|
||||
<div class="b-calulatorinputs__input">
|
||||
<label for="avail35">35 LBS</label>
|
||||
<input type="number" data-weight="35" name="A35" class="input-element input-weightsavailable input-available35" min="0" step="1" value="4" placeholder="4" id="avail35">
|
||||
</div>
|
||||
<div class="b-calulatorinputs__input">
|
||||
<label for="avail25">25 LBS</label>
|
||||
<input type="number" data-weight="25" name="A25" class="input-element input-weightsavailable input-available25" min="0" step="1" value="4" placeholder="4" id="avail25">
|
||||
</div>
|
||||
<div class="b-calulatorinputs__input">
|
||||
<label for="avail10">10 LBS</label>
|
||||
<input type="number" data-weight="10" name="A10" class="input-element input-weightsavailable input-available10" min="0" step="1" value="4" placeholder="4" id="avail10">
|
||||
</div>
|
||||
<div class="b-calulatorinputs__input">
|
||||
<label for="avail5">5 LBS</label>
|
||||
<input type="number" data-weight="5" name="A5" class="input-element input-weightsavailable input-available5" min="0" step="1" value="4" placeholder="4" id="avail5">
|
||||
</div>
|
||||
<div class="b-calulatorinputs__input">
|
||||
<label for="avail2">2.5 LBS</label>
|
||||
<input type="number" data-weight="2.5" name="A2half" class="input-element input-weightsavailable input-available2" min="0" step="1" value="4" placeholder="4" id="avail2">
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-options__optionsinput">
|
||||
<label for="Percentage">PERCENT OF WEIGHT</label>
|
||||
<select name="Percentage" class="b-options__percent input-element input-percentage" id="Percentage">
|
||||
<option value="1" selected="">100% </option>
|
||||
<option value="0.95">95% </option>
|
||||
<option value="0.90">90% </option>
|
||||
<option value="0.85">85% </option>
|
||||
<option value="0.80">80% </option>
|
||||
<option value="0.75">75% </option>
|
||||
<option value="0.70">70% </option>
|
||||
<option value="0.65">65% </option>
|
||||
<option value="0.60">60% </option>
|
||||
<option value="0.55">55% </option>
|
||||
<option value="0.50">50% </option>
|
||||
<option value="0.45">45% </option>
|
||||
<option value="0.40">40% </option>
|
||||
<option value="0.35">35% </option>
|
||||
<option value="0.30">30% </option>
|
||||
<option value="0.25">25% </option>
|
||||
<option value="0.20">20% </option>
|
||||
<option value="0.15">15% </option>
|
||||
<option value="0.10">10% </option>
|
||||
<option value="0.05">5% </option>
|
||||
</select>
|
||||
</div>
|
||||
<p class="b-options__subheading subheading">Plates Available</p>
|
||||
<ul class="b-options__input">
|
||||
<li>45 LBS
|
||||
<ul>
|
||||
<input type="number" data-weight="45" class="input-element input-weightsavailable input-available45" name="A45" min="0" step="1" value="20" id="avail45">
|
||||
</ul>
|
||||
</li>
|
||||
<li>35 LBS
|
||||
<ul>
|
||||
<input type="number" data-weight="35" name="A35" class="input-element input-weightsavailable input-available35" min="0" step="1" value="4" id="avail35">
|
||||
</ul>
|
||||
</li>
|
||||
<li>25 LBS
|
||||
<ul>
|
||||
<input type="number" data-weight="25" name="A25" class="input-element input-weightsavailable input-available25" min="0" step="1" value="4" id="avail25">
|
||||
</ul>
|
||||
</li>
|
||||
<li>10 LBS
|
||||
<ul>
|
||||
<input type="number" data-weight="10" name="A10" class="input-element input-weightsavailable input-available10" min="0" step="1" value="4" id="avail10">
|
||||
</ul>
|
||||
</li>
|
||||
<li>5 LBS
|
||||
<ul>
|
||||
<input type="number" data-weight="5" name="A5" class="input-element input-weightsavailable input-available5" min="0" step="1" value="4" id="avail5">
|
||||
</ul>
|
||||
</li>
|
||||
<li>2.5 LBS
|
||||
<ul>
|
||||
<input type="number" data-weight="2.5" name="A2half" class="input-element input-weightsavailable input-available2" min="0" step="1" value="4" id="avail2">
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Back to top Button -->
|
||||
|
||||
<div class="b-returnTop">
|
||||
<div class="b-returntop">
|
||||
<a href="#header"> <h2 class="b-returnTop_heading">Back to Top</h2> </a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <script src="js/vendor/modernizr-3.5.0.min.js"></script> -->
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
|
||||
|
||||
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
|
||||
|
||||
Reference in New Issue
Block a user