Tuesday, 20 October 2020

PART 9 PSD to HTML Stats Section CSS [HTML/ CSS] Code Fusion


 Source code of this video is bellow 


/* stats */
#stats {
    background-image: linear-gradient(rgba(76, 58, 143, 0.7), rgba(76, 58, 143, 0.7)), url("../img/stats-bg.png");
    background-size: cover;
    background-attachment: fixed;
    color: #ffffff;
}

.sc {
    padding: 120px 100px;
}

.col-4-stats {
    margin-top: 120px;
    height: 280px;
    float: left;
    width: 25%;
}

.col-4-stats h2 {
    font-style: 35px;
    font-weight: 900;
    margin: 35px 0 20px 0;
}

/* contact form */
#contact {
    background-color: #232323;
    color: #ffffff;
    padding: 100px 0;
}

.contact>h2 {
    font-size: 50px;
    font-weight: 900;
    margin-bottom: 30px;
    text-align: center;

}

.contact>p {
    text-align: center;
    margin-bottom: 95px;
}

.contact h3 {
    font-size: 33px;
    margin-bottom: 50px;
}

form {
    width: 40%;
}

.form-input {
    background-color: #232323;
    display: block;
    width: 500px;
    padding: 20px;
    margin-bottom: 15px;
}

.btn-send {
    background-color: #503392;
    border: 1px solid white;
    box-shadow: none;
    padding: 20px 0;
    width: 150px;
    color: #fff;
    tab-size: 20px;
    margin: 15px 0;
    text-align: center;
    display: block;
}

.address {
    width: 40%;
    margin-top: 80px;
}

.span-address,
.span-phone {
    display: block;
}

.ul-add li {
    margin-bottom: 40px;
}

.ul-add i {
    float: left;
    margin-right: 40px;
    font-size: 30px;
}

.ul-add>p {
    margin: 0;
    padding: 0;
    display: block;
}

#copyright {
    background-color: #1f1f1f;
    padding: 40px 0;
}

.copy {
    float: left;
    color: #555555;
}

.social-links {
    float: right;
}

.social-links li {
    display: inline-block;
}

.social-links li a {
    margin-right: 35px;
}

No comments:

Post a Comment