PART 10 PSD to HTML Media Queries Responsive [HTML/ CSS] [Code Fusion]

The Source Code of the video is bellow
 

/* MEDIA QUERIES */

@media only screen and (max-width: 1190px) {
    .col-4-port {
        width: 33.33%;
    }

}

@media only screen and (max-width: 910px) {
    .navbar {
        overflow: hidden;
        position: absolute;
        right: 30px;
        top: 70px;
        display: block;
        z-index: 33;
    }

    .burger-nav {
        background-image: url(../img/hamburger.png);
        height: 33px;
        background-repeat: no-repeat;
        width: 100%;
        text-align: center;
        display: block;
        float: right;
        width: 40px;
        cursor: pointer;
        margin-bottom: 14px;
    }
    .container nav ul{
        height: 0;
        overflow: hidden;
    }
    .container nav ul.open{
        height: auto;
        clear: both;
    }
    .container nav ul li{
        display: block;
        font: none;
        text-align: right;
        width: auto;
        margin: 0;
    }
    
    .container nav ul li a{
        display: block;
        background-color: #fff;
        color: #503392;
        padding: 10px 20px;
        margin: 0;
        z-index: 10;
    }
    .container nav ul li a:hover{
        border: none;
    }
    .feature-headding{
        width: 100%;
        float: none;
    }
    .feature-headding h2{
        font-size: 100px;
        text-align: center;
    }
    .do{
        display: inline;
    }
    .feature-detail{
        float: none;
        width: 90%;
        margin-top: 15px;
    }
    .li-feature h3{
        margin-bottom: 10px;
    }
    #services{
        background-image: none;
    }
    .service {
        width: 80%;
    }
   
.col-4-port,.col-4-stats{
    width: 50%;
    text-align: center;
}
.col-4-stats{
    margin-top: 0;
}
form{
    float: none;
    text-align: center;
    width: 100%;
}
.add{
    float: none;
}
.form-input{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.btn-send{
    width: 100%;
}
.address{
    float: none;
    
}
}
@media only screen and (max-width: 630px) {
    .ul-portfolio li a{
        margin: 10px 10px;
    }
    .col-4-port,.col-4-stats{
        width: 100%;
        text-align: center;
    }
    .col-4-stats{
        margin-top: 0;
    }
    .copy{
        margin-bottom: 20px;
        float: none;
        text-align: center;
        width: 90%;
    }
    .copy p{
        float: none;
    }
    .social-links{
        float: none;
        width: 100%;
        text-align: center;
    }
}

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;
}

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

 The source code of this video is below 

<!-- stats -->
    <section id="stats">
        <div class="container clearfix">
            <div class="sc">
                <div class="col-4-stats">
                    <img src="img/user-icon.png" alt="">
                    <h2>3800+</h2>
                    <h3>Setisfied Client</h3>

                </div>
                <div class="col-4-stats">
                    <img src="img/graph-icon.png" alt="">
                    <h2>4510+</h2>
                    <h3>Project Completed</h3>

                </div>
                <div class="col-4-stats">
                    <img src="img/heart-icon.png" alt="">
                    <h2>2800+</h2>
                    <h3>Positive Feedback</h3>

                </div>
                <div class="col-4-stats">
                    <img src="img/gift-icon.png" alt="">
                    <h2>5500+</h2>
                    <h3>Freebies Released </h3>
                </div>
            </div>
        </div>
    </section>
    <section id="contact" >
        <div class="contact container clearfix">
            <h2>contact</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>

            <form action="" class="left-align">
                <input type="text" name="fullname" placeholder="Fullname" class="form-input">
                <input type="email" name="email" placeholder="Email" class="form-input">
                <input type="text" name="subject" placeholder="Subject" class="form-input">
                <textarea name="mesage" id="mesage" cols="30" placeholder="Message" rows="10" class="form-input"></textarea>
                <button type="submit" class="btn-send"> Send </button>
            </form>
            <div class="address right-align">
                <h3>Address:</h3>
                <ul class="ul-add">
                    <li>
                        <i class="fa fa-home" aria-hidden="true"></i>
                        <p>69/A , Road 3, Mohammadia Housing Ltd
                            <span class="span-address"> Dhaka - 1207</span></p>
                    </li>
                    <li>
                        <i class="fa fa-phone" aria-hidden="true"></i>
                        <p>+880 1750727522
                            <span class="span-phone"> +880 1630742521</span></p>
                    </li>
                    <li>
                        <i class="fa fa-envelope" aria-hidden="true"></i>
                        <p>muslimmahin@gmail.com
                        </p>
                    </li>
                </ul>
            </div>
        </div>
        
    </section>
    <section id="copyright">
        <div class="container clearfix">
            <div class="copy">
                <p class="left-align">All right Researved © Muslim Mahin 2016</p>
            </div>
            <ul class="social-links right-align">
                <li><a href="#"><img src="img/fb.png" alt=""></a></li>
                <li><a href="#"><img src="img/twitter.png" alt=""></a></li>
                <li><a href="#"><img src="img/google-plus.png" alt=""></a></li>
                <li><a href="#"><img src="img/instagram.png" alt=""></a></li>
                <li><a href="#"><img src="img/behance.png" alt=""></a></li>
                <li><a href="#"><img src="img/dribble.png" alt=""></a></li>
            </ul>
        </div>
    </section>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="js/main.js"></script>
</body>

</html>

Part 7 PSD to HTML Portfolio Section CSS [HTML/ CSS] [Code Fusion]

 The source code of this video is bellow

/* Portfolio */

#portfolio {
    padding: 155px 0;
    text-align: center;

}

#portfolio h2 {
    font-size: 50px;
    font-weight: 700;

}

#portfolio p {
    margin: 30px 60px;
}

.ul-portfolio {
    margin: 65px 50px;
}

.ul-portfolio li {
    display: inline-block;
}

.ul-portfolio li a {
    display: inline-block;
    padding: 15px 30px;
    margin: 0 10px;
    border: 3px solid #000000;
    transition: 0.3s;

}

.ul-portfolio li a:hover {
    border: 3px #4e3391 solid;
    color: #ffffff;
    background-color: #4e3391;
    padding: 20px;
    transition: 0.3s;
    margin: 0 10px;
}

.gallery {
    width: 100%;
    padding-bottom: 105px;
}

.row {
    width: 100%;
}

.col-4-port {
    width: 25%;
    float: left;
    margin-bottom: 15px;
}

Part 6 PSD to HTML Portfolio Section Markup [HTML/ CSS] [Code Fusion]

 

The source code of this video is below:

<!-- Portfolio -->
    <section id="portfolio">
        <div class="container">
            <h2>Our Portfolio</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
            <ul class="ul-portfolio">
                <li><a href="#">All</a></li>
                <li><a href="#">Web</a></li>
                <li><a href="#">UI/UX</a></li>
                <li><a href="#">Photograghy</a></li>
                <li><a href="#">Branding</a></li>
            </ul>
            <div class="gallery clearfix wow zoomIn">
                <div class="row">
                    <div class="col-4-port "><img src="img/item1.png" alt=""></div>
                    <div class="col-4-port"><img src="img/item2.png" alt=""></div>
                    <div class="col-4-port"><img src="img/item3.png" alt=""></div>
                    <div class="col-4-port"><img src="img/item4.png" alt=""></div>
                </div>
                <div class="row">
                    <div class="col-4-port"><img src="img/item5.png" alt=""></div>
                    <div class="col-4-port"><img src="img/item6.png" alt=""></div>
                    <div class="col-4-port"><img src="img/item7.png" alt=""></div>
                    <div class="col-4-port"><img src="img/item8.png" alt=""></div>
                </div>
            </div>
        </div>
    </section>

Part 5 PSD to HTML Services Section CSS [HTML/ CSS] [Code Fusion]

 Source Code of the video is Down below

HTML

  <!-- SERVICES SECTION -->
    <section id="services" class="clear-float">
        <div class="container">
            <div class="service">
                <h2>Exceptional Customer Service</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                    sed do eiusmod tempor Lorem ipsum dolor sit amet
                    consectetur adipiscing elit.</p>
                <a href="#" class="btn-chat">Need to help? lets Chat <span class="righ-arrow"><i
                            class="fas fa-arrow-right"></i></span></a>
            </div>
        </div>
    </section>

CSS

/* SERVICIES */

#services {
    background-image: linear-gradient(to right, rgba(247, 247, 247, 1), rgba(247, 247, 247, 0)), url(../img/service-bg.png);
    background-size: 818px 694px;
    background-position: right;
    background-repeat: no-repeat;

    background-color: rgb(247, 247, 247);


    padding: 159px 0;
}

.service {
    width: 60%;

}

.service h2 {
    font-size: 50px;
    font-weight: 300;
    color: #503392;
}

.service p {

    width: 60%;
    font-size: 18px;
    line-height: 28px;
    margin: 55px 0;

}

.righ-arrow {
    margin-left: 4px;
}

.btn-chat {
    padding: 20px;
    background-color: #503392;
    color: #fff;
    transition: 0.3s;
}

.btn-chat:hover {
    border: solid 4px #503392;
    padding: 16px;
    color: #503392;
    background-color: #ffffff;
    transition: 0.3s;
}

.btn-chat img {
    margin-left: 15px;
}

Part 4 PSD to HTML Feature Section CSS [HTML/ CSS] [Code Fusion]

Source Code of the video is Down below

/* FEATURE SECTION */

#feature {
    padding: 125px 0;
}

.feature-headding {
    width: 50%;
}

.feature-headding h2 {

    color: #e1e1e1;

    font-size: 127px;
    line-height: 132px;
    font-weight: 700;
    text-transform: uppercase;
}

.do {
    display: block;
}

.feature-detail {
    width: 50%;
}

.large-icons {
    padding-right: 45px;
}

.li-feature {
    margin-bottom: 50px;
}

.li-feature h3 {
    font-size: 20px;
    margin-bottom: 35px;
}

.li-feature p {
    margin-left: 100px;
    font-size: 14px;
    line-height: 20px;
}

Please Like and subscribe to my channel

 

Part 3 How to convert PSD to HTML Feature Section Markup [HTML CSS] [Code Fusion]

 Here is the Source Code In the Video

 <!-- FEATURE SECTION -->
    <section id="feature">
        <div class="container clearfix">
            <div class="feature-headding left-align  wow fadeInLeft">
                <h2>what we <span class="do"> do</span></h2>
            </div>
            <div class="feature-detail right-align wow fadeInRight">
                <ul>
                    <li class="li-feature">
                        <img src="img/web-design-icon.png" alt="" class="large-icons left-align">
                        <h3>Web Design</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                            ut
                            labore et dolore magna aliqua. Ut enim ad minim veniam, </p>
                    </li>
                    <li class="li-feature">
                        <img src="img/ux-icon.png" alt="" class="large-icons left-align">
                        <h3>UI/UX Design</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqua. Ut enim ad minim veniam, </p>
                    </li>
                    <li class="li-feature">
                        <img src="img/photo-icon.png" alt="" class="large-icons left-align">
                        <h3>Photography</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqua. Ut enim ad minim veniam, </p>
                    </li>
                    <li class="li-feature">
                        <img src="img/app-icon.png" alt="" class="large-icons left-align">
                        <h3>App Development</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqua. Ut enim ad minim veniam, </p>
                    </li>
                </ul>
            </div>
        </div>
    </section>

Please Like and subscribe to my channel

Part 2 How to convert PSD to HTML Hero Section CSS [HTML CSS] [Code Fusion]

 

Here is the Source code for the video

/* font  */
/* font-family: 'Lato', sans-serif; */

/* CSS RESET */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* CSS RESET END */

/* helper class */
.m0 {
    margin: 0;
}

.right-align {
    float: right;
}

.left-align {
    float: left;
}

.clear-float {
    clear: both;
}

.clearfix:after {
    content: " ";
    /* Older browser do not support empty content */
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

body {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 18px;
}

a {
    text-decoration: none;
    color: #000;
}

/* HERO SECTION  */

#hero {
    background-image: url("../img/hero-bg.png");
    color: #fff;
    background-position: center;
    background-size: cover;
    height: 745px;

}

header {
    padding-top: 60px;
}

.container {
    max-width: 1163px;
    margin: 0 auto;
    padding: 0 20px;
}


.container nav ul li {
    display: inline;
}

.container nav ul li a {
    color: #fff;
    font-size: 18px;
    line-height: 13px;
    margin-right: 56px;
    text-transform: uppercase;
    transition: 0.3s;
}

.container nav ul li a:hover {
    font-weight: 700;
    color: #000;
    transition: 0.3s;
}

.cta {
    margin-top: 177px;
    text-align: center;
}

.cta h1 {
    font-size: 65px;
    line-height: 70px;

}

.cta h2 {
    margin: 30px 0 90px 0;
    font-size: 33px;
}

.btn-more {
    color: #fff;
    padding: 20px 54px;
    border: 1px solid #ffffff;
    border-radius: 57px;
    font-size: 18px;
    transition: 0.3s;
}

.btn-more:hover {
    background: #fff;
    color: #7147a5;
    transition: 0.3s;
    font-size: 20px;
}

Please Like and subscribe to my channel