• Meeet Template Challange Solution

    Umeshsuman8 months ago

    @media   (max-width: 600px){
        .main{
            min-height: 500px;
        }
        .container{
            width:auto;
            margin: auto;
            padding:20px;
        }
        .container > h1 {
            font-size: 13vw;
            margin-top: 10rem;
        }
        .btn-1{
            position: relative;
            z-index: 10;
        }
        .container .img3 {
            top: 3rem;
            max-width: 8rem;
            left: 2.3rem;
        }
        .container .img2 {
            top: 4rem;
            right: 0.5rem;
            max-width: 11rem;
        }
        table {
            margin-top: 15rem;
            padding-bottom: 0;
        }
        .container .img5,
        .container .img1{
            display: none;
        }
        .container .img4 {
            bottom: 10rem;
            right: 0.6rem;
            width: 40%;
        }
    }
    @media (min-width: 600px) and (max-width: 796px){
        .container{
            width:575px;
            margin: 0 auto;
        }
        .container > h1 {
            font-size: 5rem;
            z-index: 10;
            margin-top: 12rem;
            line-height: 1;
        }
        .container p {
            font-size: 1.2rem;
            margin-bottom: 2.5rem;
        }
        .btn-1 {
            font-size: 1.2rem;
            color: #013243;
            padding: 1rem;
        }
        .container .img3 {
            top: -180px;
            left: 0;
            width: 19%;
        }
        .container .img2 {
            top: -199px;
            right: 0;
            width: 25%;
        }
        .container .img5 {
            top: -44PX;
            right: 97PX;
            width: 15%;
        }
        .container .img1 {
            z-index: 4;
            top: 17PX;
            width: 13%;
            right: 1PX;
        }
        table {
            margin-top: 8rem;
            padding-bottom: 0rem;
        }
        .container .img4 {
            bottom: 0;
            right: 0;
            width: 31%;
        }
    }
    @media   (min-width: 797px) {
        .container{
            width:700px;
            margin: 0 auto;
        }
    }
    @media   (min-width: 992px) {
        .container{
            width:900px;
            margin: 0 auto;
        }
    }
    @media   (min-width:1200px) {
        .container{
            width:1200px;
            margin: 0 auto;
        }
    }

    • 2
No comments on this solution yet.
Be first to post.
Join Our Slack Channel
Chat and discuss solutions with a growing community of developers.