Untitled

mail@pastecode.io avatar
unknown
plain_text
2 years ago
39 kB
0
Indexable
Never
<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; */
                                                height: 800px;
                                                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;
                                                position: absolute;
                                                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>
                                        <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>
                                        <main>
                                            <div class="container-1">

                                                <div class="col-1-9">

                                                    <!-- Code for viewing the Post -->


                                                    <div class="card-1">

                                                        <div class="imgBx">
                                                            <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>
                                                            <!-- <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 disableRemotePlayback 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="imgBx">
                                                            <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>
                                                            <!-- <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 disableRemotePlayback 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="imgBx">
                                                            <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>
                                                            <!-- <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 disableRemotePlayback 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="imgBx">
                                                            <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>
                                                            <!-- <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 disableRemotePlayback 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>