mvc-node-express/public/css/style.css

MVC framework for express js

@font-face{
    font-family: 'iran-sans';
    src: url(../fonts/IRANSans.ttf);
}
html{
    scroll-behavior: smooth;
}
body{
    font-family: 'iran-sans';
}
.mt-15{
    margin-top:150px;
}
.purple-color{
    color:#ba00ff !important;
}

.bg-purplu-color{
    background-color:#ba00ff;
}

.left{
    float: left;
}


.justify{
    text-align:justify;
}
#start-btn{
    border-radius: 40px;
    bottom: 15px;
}
.header{
    background-image: url('../images/background.png');
    background-size:cover;
    height:650px;
}
.header-text{
    text-align:justify;
    direction:rtl;
    margin-right:50px;
    color:white;
    position: relative;
    top: 220px;
}
.header-img{
    position: relative;
    bottom:70px;
}
@media(min-width:576px){
    .header-text{
        top: 130px;
    }
    .header-img{
        bottom:180px;
    }
    #carousel{
        bottom:160px;
    }
}
@media(min-width:900px){
    .header-text{
        top: 150px;
    }
    .header-img{
        bottom:170px;
    }
}
@media(max-width:575px){
    .header-text{
        top: 100px;
        width: 50%;
        font-size: 12px;
    }
    .header-img{
        bottom:230px;
        width: 40%;
    }
    #about-text{
        margin: auto 20px;
    }
    h2{
        font-size: 20px;
    }
    #start-btn{
        bottom: 200px;
    }
    .line{
        display: none;
    }
}

@media(max-width:870px){
    #start-btn{
        bottom: 190px;
    }
    #carousel{
        bottom:280px;
    }
    #about{
        position: relative;
        bottom:150px;
    }
}
@media(max-width:680px){
    #start-btn{
        bottom: 270px;
    }
}