Wednesday, 21 October 2020

Heading and Paragraph in HTML CSS For beginners in Hindi [2020] Part 2 [Code Fusion]


 

Source Code for this video 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Headings and Paragraph</title>
</head>
<body>
    <!-- <h1>I ❤️ coding</h1>
    <h2>I ❤️ coding</h2>
    <h3>I ❤️ coding</h3>
    <h4>I ❤️ coding</h4>
    <h5>I ❤️ coding</h5>
    <h6>I ❤️ coding</h6>
    <p> I ❤️ code fusion also. I ❤️ code fusion alsoI ❤️ code fusion alsoI ❤️ code fusion also </br>
        I ❤️ code fusion alsoI ❤️ code fusion alsoI ❤️ code fusion also </br>
        I ❤️ code fusion alsoI ❤️ code fusion alsoI ❤️ code fusion alsoI ❤️ code fusion also. </br>
    </p> -->
    <h1>Diwali</h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid natus doloremque <br>
        similique esse neque, architecto rem sint modi ex praesentium veniam, molestias tempora <br>
         est facilis enim eligendi deleniti animi aspernatur quidem quae suscipit? Numquam magni minima <br>
          quos tempore ab nulla nisi molestiae quisquam fugiat dolores! Nulla debitis ab quasi natus quod ut <br>
           temporibus minus? Aliquam accusantium provident nihil nobis animi, doloremque dolorem deleniti tempore?</p>
        <h2>how diwali celebrate </h2>
           <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid natus doloremque <br>
            similique esse neque, architecto rem sint modi ex praesentium veniam, molestias tempora <br>
             est facilis enim eligendi deleniti animi aspernatur quidem quae suscipit? Numquam magni minima <br>
              quos tempore ab nulla nisi molestiae quisquam fugiat dolores! Nulla debitis ab quasi natus quod ut <br>
               temporibus minus? Aliquam accusantium provident nihil nobis animi, doloremque dolorem deleniti tempore?</p>

               <h2>why diwali celebrate </h2>
               
               <p>
                   Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid natus doloremque <br>
                similique esse neque, architecto rem sint modi ex praesentium veniam, molestias tempora <br>
                 est facilis enim eligendi deleniti animi aspernatur quidem quae suscipit? Numquam magni minima <br>
                  quos tempore ab nulla nisi molestiae quisquam fugiat dolores! Nulla debitis ab quasi natus quod ut <br>
                   temporibus minus? Aliquam accusantium provident nihil nobis animi, doloremque dolorem deleniti tempore?</p>
    
                   <h3>sita ma kidnapping by ravan</h3>
                   Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid natus doloremque <br>
                <p>similique esse neque, architecto rem sint modi ex praesentium veniam, molestias tempora <br>
                    est facilis enim eligendi deleniti animi aspernatur quidem quae suscipit? Numquam magni minima <br>
                     quos tempore ab nulla nisi molestiae quisquam fugiat dolores! Nulla debitis ab quasi natus quod ut <br>
                      temporibus minus? Aliquam accusantium provident nihil nobis animi, doloremque dolorem deleniti tempore?</p>
       
</body>
</html>

Posted by at No comments:

Tuesday, 20 October 2020

What is HTML CSS For beginners in Hindi [2020] Part 1 [Code Fusion]


 No source code for this video

Posted by at No comments:
Labels: ,

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

Posted by at No comments:
Labels: , , , , ,

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

Posted by at No comments:
Labels: , , , , ,

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>

Posted by at No comments:
Labels: , , , , ,

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

Posted by at No comments:
Labels: , , , , ,

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>


Posted by at No comments:
Labels: , , , , ,

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


Posted by at No comments:
Labels: , , , , ,

Monday, 19 October 2020

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


 

Posted by at No comments:
Labels: , , , , ,

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


Posted by at No comments:
Labels: , , , , ,
Subscribe to: Posts (Atom)