How To Make Website Using HTML And CSS | Website Design With HTML And CSS

How To Make Web site Utilizing HTML And CSS | Web site Design With HTML And CSS

by



Be taught How To Make A Web site Utilizing HTML And CSS | Web site Design With HTML And CSS | Web site Design Tutorial
❤️ SUBSCRIBE: https://goo.gl/tTFmPb

❤️ Full web site Utilizing HTML and CSS
✔️ 8 Full web site step-by-step
✔️ Supply Code Obtain
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificates
👉 https://easytutorialspro.com/go/course/

Right here on this video you’ll study to make an internet site header utilizing HTML And CSS step-by-step
————————————-

Chances are you’ll like under HTML and CSS tutorials

HTML and CSS from Starting

Make Full Web site Utilizing HTML & CSS

Make Job Web site Utilizing HTML And CSS

Create Journey Web site Utilizing HTML and CSS

Make Ecommerce web site utilizing HTML and CSS

————————————-

My beneficial instruments and tutorials
👉 https://easytutorialspro.com/
————————————
Picture Credit score

https://www.pexels.com
————————————-
Like – Observe & Subscribe us:

► YouTube: https://goo.gl/tTFmPb
► Fb: https://goo.gl/qv7tEQ
► Twitter: https://twitter.com/ItsAvinashKr

source

46 thoughts on “How To Make Web site Utilizing HTML And CSS | Web site Design With HTML And CSS”

  7. somewere can help me? when i put the background image there are not 100% complet in the page
    # {

    margin: 0;

    padding: 0;

    font-family: sans-serif;

    }

    .banner {

    width: 100%;

    height: 100vh;

    background-image:linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(background.jpg);

    background-size: cover;

    background-position: center;

    }

    why this problem?

    Reply

  19. hey man im a dev student specialized in backend. CSS and HTML has always been my biggest weakness, i find those languages extremely annoying and complicated but your tutorial here made it easy and logical. thanks a lot man

    Reply

  39. style.css

    *{

    margin: 0;

    padding: 0;

    font-family: sans-serif;

    }

    .banner{

    width: 100%;

    height: 100vh;

    background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(Untitled_presentation.png);

    background-size: cover;

    background-position: center;

    }

    .navbar{

    width: 85%;

    margin: auto;

    padding: 35px 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    }

    .logo{

    width: 120px;

    cursor: pointer;

    }

    .navbar ul li{

    list-style: none;

    display: inline-block;

    margin: 0 20px;

    position: relative;

    }

    .navbar ul li a{

    text-decoration: none;

    color: #fff;

    text-transform: uppercase;

    }

    .navbar ul li::after{

    content: '';

    height:3px;

    width:0%;

    background:#009688;

    position:absolute;

    left:0;

    bottom:-10px;

    transition:0.5s;

    }

    .navbar ul li:hover::after{

    width:100%;

    }

    .content{

    position:absolute;

    width:100%;

    top:50%;

    transform: translateY(-50%);

    text-align:center;

    color:#fff;

    }

    .content h1{

    font-size:70px;

    margin-top:80px;

    }

    .content p{

    margin:20px auto;

    font-weight:100;

    line-height:25px;

    }

    button{

    width:200px;

    padding: 15px 0;

    text-align:center;

    margin:20 px 10 px;

    border-radius:25px;

    font-weight:bold;

    border: 2px solid #009688;

    background: transparent;

    color:#fff;

    cursor: pointer;

    position: relative;

    overflow: hidden;

    }

    span{

    background: #009688;

    height: 100%;

    width: 0%;

    border-radius: 25px;

    position: absolute;

    left: 0;

    bottom: 0;

    z-index: -1;

    transition: 0.5s;

    }

    button:hover span{

    width: 100%;

    }

    button:hover{

    border: none;

    }

    INDEX.html

    <html>

    <head>

    <title>My First Website</title>

    <link rel="stylesheet" href="style.css">

    </head>

    <body>

    <div class="banner">

    <div class="navbar">

    <img src="logo.png" class="logo">

    <ul>

    <li><a href="#">Home</a></li>

    <li><a href="#">Bedroom</a></li>

    <li><a href="#">Dining</a></li>

    <li><a href="#">Kitchen</a></li>

    <li><a href="#">Backyard</a></li>

    </ul>

    </div>

    <div class="content">

    <h1>Design Your House</h1>

    <p>whatever</p>

    <div>

    <button type="button"><span></span>WATCH MORE</button>

    <button type="button"><span></span>SUBSCRIBE</button>

    </div>

    </div>

    </div>

    </body>

    </html>

    Reply

Leave a Comment