Untitled
unknown
html
2 years ago
17 kB
5
Indexable
<style scoped>
.bottom {
position: absolute;
z-index: 1;
bottom: 10px;
background-color: #0000004f;
}
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: space-between;
/* 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: 60%;
/* margin-top: 30px; */
display: flex;
overflow: auto;
flex: none;
flex-flow: column nowrap;
scroll-snap-type: y mandatory;
}
.col-1-3 {
width: 38%;
position: sticky;
top: 90px;
}
.col-1-9 .card-1 {
margin-bottom: 60px;
position: relative;
width: 100%;
/* min-height: 400px; */
display: inline-block;
padding: 20px 0;
scroll-snap-align: start;
scroll-snap-stop: always;
flex: none;
/* 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;
}
.cover-vid {
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;*/
/* padding-top: 100%; */
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 500ms;
}
.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;
}
.profile {
display: none;
}
@media screen and (max-width: 1000px) {
.col-1-9 {
width: 100%;
/* background: #fafafa; */
height: 615px;
}
.col-1-3 {
display: none;
}
.profile {
display: block !important;
scroll-snap-align: start;
flex: none;
scroll-snap-stop: always;
}
}
@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;*/
/* padding-top: 100%; */
margin: 10px 0 15px;
}
}
a {
text-decoration: none;
}
.container {
margin: 0 auto;
padding-bottom: 50px;
max-width: 375px;
}
.stats {
/* padding: 0 15px; */
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 10px;
margin-bottom: 16px;
}
.stats__img-holder {
width: 90px;
height: 90px;
border-radius: 50%;
border: 1px solid #d8d8d8;
background: center/105% no-repeat;
/* background-color: #fff; */
}
.stats__data {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
align-items: center;
text-align: center;
}
.stats__data__point {
font-family: sans-serif;
}
.stats__data__point__value {
font-size: 16px;
font-weight: 600;
}
.stats__data__point__description {
font-weight: 300;
font-size: 14px;
margin-top: 2px;
}
.description {
/* padding: 0 15px; */
margin-bottom: 16px;
}
.description h2 {
font-size: 18px;
margin: 0;
margin-top: 16px;
padding: 0;
}
.description p {
margin-top: 4px;
/* color: #444; */
}
.description a {
margin-top: 2px;
color: #0D3A6B;
}
</style>
<main>
<div class="container-1">
<div class="col-1-9">
<section class="profile">
<section class="stats">
<div class="stats__img-holder"
style="background-image: url('https://cdn.shopify.com/s/files/1/0687/1256/2973/files/GHM_logo_c3a0d959-0c9b-4de2-98fc-07e8fd95ca6e_x120@2x.png?v=1672726792');">
</div>
<div class="stats__data">
<div class="stats__data__point">
<div class="stats__data__point__value">4</div>
<div class="stats__data__point__description">Models
</div>
</div>
<div class="stats__data__point">
<div class="stats__data__point__value">100K</div>
<div class="stats__data__point__description">
Visitors
</div>
</div>
<div class="stats__data__point">
<div class="stats__data__point__value">10K</div>
<div class="stats__data__point__description">Sales
</div>
</div>
</div>
</section>
<section class="description">
<h2 class="decription__title">Gear Head Motors</h2>
<p>
Best Electric Cycles in India
❤️ <br />
Book your test ride now @just Rs.99/-</p>
</section>
</section>
<!-- Code for viewing the Post -->
<div class="card-1">
<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" /> -->
<video autoplay muted class="cover-vid">
<source
src="https://cdn.shopify.com/videos/c/o/v/b8b2c1795e7e410eb814354dc17161f8.mp4"
type="video/mp4" />
</video>
<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 class="card-1">
<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" /> -->
<video autoplay muted class="cover-vid">
<source
src="https://cdn.shopify.com/videos/c/o/v/b8b2c1795e7e410eb814354dc17161f8.mp4"
type="video/mp4" />
</video>
<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>
<div class="col-1-3">
<section class="stats">
<div class="stats__img-holder"
style="background-image: url('https://cdn.shopify.com/s/files/1/0687/1256/2973/files/GHM_logo_c3a0d959-0c9b-4de2-98fc-07e8fd95ca6e_x120@2x.png?v=1672726792');">
</div>
<div class="stats__data">
<div class="stats__data__point">
<div class="stats__data__point__value">4</div>
<div class="stats__data__point__description">Models
</div>
</div>
<div class="stats__data__point">
<div class="stats__data__point__value">100K</div>
<div class="stats__data__point__description">
Visitors
</div>
</div>
<div class="stats__data__point">
<div class="stats__data__point__value">10K</div>
<div class="stats__data__point__description">Sales
</div>
</div>
</div>
</section>
<section class="description">
<h2 class="decription__title">Gear Head Motors</h2>
<p>
Best Electric Cycles in India
❤️ <br />
Book your test ride now @just Rs.99/-</p>
</section>
</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 = 100;
if (revealtop < windowheight - revealpoint) {
reveals[i].classList.add('active-product');
}
else {
reveals[i].classList.remove('active-product');
}
}
}
</script>Editor is loading...