Added Barbell and Placement of plates
Stylized barbell added as well as area where the plates would be added. Need to find out how to add plates needed.
This commit is contained in:
stevenhaskell committed
1 parent
179e15b77a
commit
afb4ddb83a
9 files changed
+43
-2
No files matched your search
@@ -116,6 +116,36 @@ p.subheading {
|
|||||||
letter-spacing: .015px;
|
letter-spacing: .015px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.b-platevisual__weight{
|
||||||
|
position: relative;
|
||||||
|
max-width: 300px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-platevisual__barbell{
|
||||||
|
width: 100%;
|
||||||
|
max-width: 300px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-platevisual__plates{
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-platevisual__plates--left{
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-100%, -50%);
|
||||||
|
left: 21%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-platevisual__plates--right{
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
left: 79%;
|
||||||
|
}
|
||||||
|
|
||||||
.b-calulatorinputs {
|
.b-calulatorinputs {
|
||||||
height: 40vh;
|
height: 40vh;
|
||||||
width: auto;
|
width: auto;
|
||||||
|
|||||||
@@ -0,0 +1 @@
|
|||||||
|
<svg height="48" viewBox="0 0 8 48" width="8" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="matrix(-1 0 0 1 8 0)"><rect fill="#48484a" fill-rule="nonzero" height="48" rx="4" width="8"/><text fill="#fcfcfc" font-family="Roboto-Regular, Roboto" font-size="10" transform="matrix(-1 0 0 1 8 0)"><tspan x="1.192383" y="22">1</tspan> <tspan x="1.192383" y="33">0</tspan></text></g></svg>
|
||||||
|
After Width: | Height: | Size: 416 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg height="56" viewBox="0 0 8 56" width="8" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="matrix(-1 0 0 1 8 0)"><rect fill="#48484a" fill-rule="nonzero" height="56" rx="4" width="8"/><text fill="#fcfcfc" font-family="Roboto-Regular, Roboto" font-size="10" transform="matrix(-1 0 0 1 8 0)"><tspan x="1.192383" y="26">2</tspan> <tspan x="1.192383" y="37">5</tspan></text></g></svg>
|
||||||
|
After Width: | Height: | Size: 416 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg height="32" viewBox="0 0 8 32" width="8" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="matrix(-1 0 0 1 8 0)"><rect fill="#48484a" fill-rule="nonzero" height="32" rx="4" width="8"/><text fill="#fcfcfc" font-family="Roboto-Regular, Roboto" font-size="10" transform="matrix(-1 0 0 1 8 0)"><tspan x="1" y="20">2</tspan> <tspan x="2.491699" y="23">.</tspan> <tspan x="11.175781" y="33.561523"/><tspan x="11.175781" y="36.561523"/> <tspan x="1" y="32">5</tspan></text></g></svg>
|
||||||
|
After Width: | Height: | Size: 512 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg height="64" viewBox="0 0 8 64" width="8" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="matrix(-1 0 0 1 8 0)"><rect fill="#48484a" fill-rule="nonzero" height="64" rx="4" width="8"/><text fill="#fcfcfc" font-family="Roboto-Regular, Roboto" font-size="10" transform="matrix(-1 0 0 1 8 0)"><tspan x="1.192383" y="30">3</tspan> <tspan x="1.192383" y="41">5</tspan></text></g></svg>
|
||||||
|
After Width: | Height: | Size: 416 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg height="72" viewBox="0 0 8 72" width="8" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="matrix(-1 0 0 1 8 0)"><rect fill="#48484a" fill-rule="nonzero" height="72" rx="4" width="8"/><text fill="#fcfcfc" font-family="Roboto-Regular, Roboto" font-size="10" transform="matrix(-1 0 0 1 8 0)"><tspan x="1.192383" y="34">4</tspan> <tspan x="1.192383" y="45">5</tspan></text></g></svg>
|
||||||
|
After Width: | Height: | Size: 416 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg height="40" viewBox="0 0 8 40" width="8" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="matrix(-1 0 0 1 8 0)"><rect fill="#48484a" fill-rule="nonzero" height="40" rx="4" width="8"/><text fill="#fcfcfc" font-family="Roboto-Regular, Roboto" font-size="10" transform="matrix(-1 0 0 1 8 0)"><tspan x="1.192383" y="23.5">5</tspan></text></g></svg>
|
||||||
|
After Width: | Height: | Size: 381 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg height="31" viewBox="0 0 288 31" width="288" xmlns="http://www.w3.org/2000/svg"><g fill="none"><rect fill="#c5c5c5" height="16" rx="4" width="70" y="7"/><path d="m68 11h152v8h-152z" fill="#c5c5c5"/><path d="m90 11h32v8h-32z" fill="#8c8e90"/><path d="m104 11h4v8h-4z" fill="#c5c5c5"/><path d="m166 11h32v8h-32z" fill="#8c8e90"/><rect fill="#c5c5c5" height="16" rx="4" width="70" x="218" y="7"/><rect fill="#8c8e90" height="31" rx="4" width="16" x="60"/><rect fill="#8c8e90" height="31" rx="4" width="16" x="212"/><path d="m180 11h4v8h-4z" fill="#c5c5c5"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 569 B |
@@ -38,8 +38,12 @@
|
|||||||
<div class="b-platevisual">
|
<div class="b-platevisual">
|
||||||
<div class="b-platevisual__container">
|
<div class="b-platevisual__container">
|
||||||
<p class="b-platevisual__weightfinal"><span class="input-element input-final">0</span> LBS</p>
|
<p class="b-platevisual__weightfinal"><span class="input-element input-final">0</span> LBS</p>
|
||||||
<div class="b-platevisual__barbell">
|
<div class="b-platevisual__weight">
|
||||||
<img src="https://qph.fs.quoracdn.net/main-qimg-377c39d784e8860d4ce6142fba0e09e0-c" style="width: 50%;max-width: 300px;">
|
<img src="/Users/stevenh/Desktop/Side_Projects/What_Are_You_Lifting-App/WhatAreYouLifting/images/BarBell.svg" class="b-platevisual__barbell">
|
||||||
|
<div class="b-platevisual__plates b-platevisual__plates--left">
|
||||||
|
</div>
|
||||||
|
<div class="b-platevisual__plates b-platevisual__plates--right">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="subheading">Offset: <span class="input-difference">0</span> LBS</p>
|
<p class="subheading">Offset: <span class="input-difference">0</span> LBS</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in new issue
Block a user