Untitled

avatar
unknown
html
2 years ago
12 kB
5
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: 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; */
}

.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;
    /* 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; */
    }

    .col-1-3 {
        display: none;
    }

    .profile {
        display: block !important;
    }
}

@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 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://wallpaperaccess.com/full/327367.jpg"
                    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://wallpaperaccess.com/full/327367.jpg"
                    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 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...