Untitled
unknown
plain_text
2 years ago
12 kB
6
Indexable
<style scoped>
main {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
main .container-1 {
position: relative;
width: 75%;
display: flex;
align-items: flex-start;
justify-content: center;
/* background: #ddd; */
}
.profilepic {
display: inline-block;
cursor: pointer;
}
.profilepic .profile_img {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
overflow: hidden;
width: 40px;
height: 40px;
background: linear-gradient(to right, red, black);
padding: 2px;
margin-right: 8px;
cursor: pointer;
}
.profilepic .profile_img .image {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
/* border: 2px solid white; */
}
.profilepic .profile_img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.col-1-9 {
width: 75%;
margin-top: 30px;
}
.col-1-9 .card-1 {
margin-bottom: 60px;
position: relative;
width: 100%;
/* min-height: 400px; */
display: inline-block;
padding: 20px 0;
/* background-color: #fff;
color: #000; */
border-top: 1px solid #38a849;
border-bottom: 1px solid #38a849;
}
.col-1-9 .card-1 .top {
/* padding: 10px 20px; */
display: flex;
justify-content: space-between;
align-items: center;
}
.col-1-9 .card-1 .bottom {
/* padding: 10px 20px; */
}
.col-1-9 .card-1 .top .userDetails {
width: 100%;
display: flex;
align-items: center;
}
.cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100% !important;
object-fit: cover;
}
.col-1-9 .card-1 .top .userDetails h3 {
/* width: 100%; */
font-size: 16px;
font-weight: 500;
/* line-height: 1em; */
}
.col-1-9 .card-1 .top .userDetails h3 span {
font-size: 0.75em;
color: #38a849;
}
.imgBx {
position: relative;
width: 100%;
min-height: 600px;
margin: 10px 0 15px;
}
.message {
font-weight: 400;
/* margin-top: 5px; */
font-size: 14px;
line-height: 1.5em;
margin-bottom: 12px !important;
}
.reveal-product {
position: relative;
transform: translateY(150px);
opacity: 0;
transition: all 300ms;
}
.reveal-product.active-product {
transform: translateY(0px);
opacity: 1;
}
.view-full-details {
background: #38a849 !important;
border-color: #38a849 !important;
letter-spacing: 0em !important;
color: #fff !important;
border-radius: 100px !important;
}
.view-full-details:after {
content: none !important;
background: #38a849 !important;
border-color: #38a849 !important;
}
.view-full-details:before {
content: none !important;
background: #38a849 !important;
border-color: #38a849 !important;
}
.hidden {
display: none;
}
@media screen and (max-width: 1000px) {
.col-1-9 {
width: 100%;
/* background: #fafafa; */
}
}
@media screen and (max-width: 600px) {
.container-1 {
width: 100% !important;
}
.col-1-9 {
margin-top: 4px;
min-width: 100%;
}
.col-1-9 .card-1 {
margin-bottom: 50px;
width: 100%;
border: none;
}
.imgBx {
position: relative;
width: 100%;
min-height: 400px;
margin: 10px 0 15px;
}
}
</style>
<main>
<div class="container-1">
<div class="col-1-9">
<!-- Code for viewing the Post -->
<div class="card-1 reveal-product">
<div class="top">
<div class="userDetails">
<div class="profilepic">
<div class="profile_img">
<div class="image">
<img src="https://cdn.shopify.com/s/files/1/0687/1256/2973/files/GHM_logo_c3a0d959-0c9b-4de2-98fc-07e8fd95ca6e_x120@2x.png?v=1672726792"
alt="GHMEV" />
</div>
</div>
</div>
<h3 class="m-0">
Model L<br />
<span>The Nomad</span>
</h3>
</div>
</div>
<div class="imgBx">
<img src="https://cdn.shopify.com/s/files/1/0687/1256/2973/files/Website-Product-Page-Images-E_1_720x.jpg?v=1674045480"
alt="post-1" class="cover" />
</div>
<div class="bottom">
<p class="message">
<!-- <b>Mayank</b> Nature -->
<!-- <span>#love</span>-->
<!-- <span>#2021</span>-->
The Model F Electric Bike or electric cycle from
Gear Head Motors is a top-performing e-bike designed
for power and performance.
</p>
<a href=" products/model-l-ebicycle"
class="view-full-details btn m-0">Book Test Drive
</a>
</div>
</div>
<div class="card-1 reveal-product">
<div class="top">
<div class="userDetails">
<div class="profilepic">
<div class="profile_img">
<div class="image">
<img src="https://cdn.shopify.com/s/files/1/0687/1256/2973/files/GHM_logo_c3a0d959-0c9b-4de2-98fc-07e8fd95ca6e_x120@2x.png?v=1672726792"
alt="GHMEV" />
</div>
</div>
</div>
<h3 class="m-0">
Model L<br />
<span>The Nomad</span>
</h3>
</div>
</div>
<div class="imgBx">
<img src="https://cdn.shopify.com/s/files/1/0687/1256/2973/files/Website-Product-Page-Images-E_1_720x.jpg?v=1674045480"
alt="post-1" class="cover" />
</div>
<div class="bottom">
<p class="message">
<!-- <b>Mayank</b> Nature -->
<!-- <span>#love</span>-->
<!-- <span>#2021</span>-->
The Model F Electric Bike or electric cycle from
Gear Head Motors is a top-performing e-bike designed
for power and performance.
</p>
<a href=" products/model-l-ebicycle"
class="view-full-details btn m-0">Book Test Drive
</a>
</div>
</div>
<div class="card-1 reveal-product">
<div class="top">
<div class="userDetails">
<div class="profilepic">
<div class="profile_img">
<div class="image">
<img src="https://cdn.shopify.com/s/files/1/0687/1256/2973/files/GHM_logo_c3a0d959-0c9b-4de2-98fc-07e8fd95ca6e_x120@2x.png?v=1672726792"
alt="GHMEV" />
</div>
</div>
</div>
<h3 class="m-0">
Model L<br />
<span>The Nomad</span>
</h3>
</div>
</div>
<div class="imgBx">
<img src="https://cdn.shopify.com/s/files/1/0687/1256/2973/files/Website-Product-Page-Images-E_1_720x.jpg?v=1674045480"
alt="post-1" class="cover" />
</div>
<div class="bottom">
<p class="message">
<!-- <b>Mayank</b> Nature -->
<!-- <span>#love</span>-->
<!-- <span>#2021</span>-->
The Model F Electric Bike or electric cycle from
Gear Head Motors is a top-performing e-bike designed
for power and performance.
</p>
<a href=" products/model-l-ebicycle"
class="view-full-details btn m-0">Book Test Drive
</a>
</div>
</div>
<div class="card-1 reveal-product">
<div class="top">
<div class="userDetails">
<div class="profilepic">
<div class="profile_img">
<div class="image">
<img src="https://cdn.shopify.com/s/files/1/0687/1256/2973/files/GHM_logo_c3a0d959-0c9b-4de2-98fc-07e8fd95ca6e_x120@2x.png?v=1672726792"
alt="GHMEV" />
</div>
</div>
</div>
<h3 class="m-0">
Model L<br />
<span>The Nomad</span>
</h3>
</div>
</div>
<div class="imgBx">
<img src="https://cdn.shopify.com/s/files/1/0687/1256/2973/files/Website-Product-Page-Images-E_1_720x.jpg?v=1674045480"
alt="post-1" class="cover" />
</div>
<div class="bottom">
<p class="message">
<!-- <b>Mayank</b> Nature -->
<!-- <span>#love</span>-->
<!-- <span>#2021</span>-->
The Model F Electric Bike or electric cycle from
Gear Head Motors is a top-performing e-bike designed
for power and performance.
</p>
<a href=" products/model-l-ebicycle"
class="view-full-details btn m-0">Book Test Drive
</a>
</div>
</div>
</div>
</div>
</main>
<script type="text/javascript">
window.addEventListener('scroll', revealProduct);
function revealProduct() {
var reveals = document.querySelectorAll('.reveal-product');
for (var i = 0; i < reveals.length; i++) {
var windowheight = window.innerHeight;
var revealtop = reveals[i].getBoundingClientRect().top;
var revealpoint = 0;
if (revealtop < windowheight - revealpoint) {
reveals[i].classList.add('active-product');
}
else {
reveals[i].classList.remove('active-product');
}
}
}
</script>Editor is loading...