Home » » How To make a custom website using HTML and CSS

How To make a custom website using HTML and CSS

  August 08, 2021    No comments

 

How To make a custom website using HTML and CSS

Here is the code of this video you can copy and paste it on your code editor or notepad.

Here Is The Code

HTML CODE

html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Website1</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="wrapper">
        <nav class="navbar">
            <img class="logo" src="images/logo.png" alt="logo">
            <ul>
                <li><a class="active" href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Feedback</a></li>
            </ul>
        </nav>
        <div class="center">
            <h1>Welcome To Casecade</h1>
            <h2>Create Somthing New</h2>
            <div class="buttons">
                <button>Explore More</button>
                <button class="btn2">Subscribe Us</button>
            </div>
        </div>
    </div>
</body>
</html>

CSS

* {
    padding: 0;
    margin: 0;
}

.wrapper {
    background: url(images/bg1.jpg);
    background-size: cover;
    height: 100vh;
}

.navbar {
    position: fixed;
    height: 80px;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.4);
}

.navbar .logo {
    width: 140px;
    height: auto;
    padding: 20px 100px;
}

.navbar ul {
    float: right;
    margin-right: 20px;
}

.navbar ul li {
    list-style: none;
    margin: 0 8px;
    display: inline-block;
    line-height: 80px;
}

.navbar ul li a {
    font-size: 20px;
    font-family: sans-serif;
    color: white;
    padding: 6px 13px;
    text-decoration: none;
    transition: .4s;
}

.navbar ul li a.active, .navbar ul li a:hover {
    background: red;
    border-radius: 2px;
}

.wrapper .center {
    position: absolute;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
    font-family: sans-serif;
    user-select: none;
}

.center h1 {
    color: white;
    font-size: 70px;
    font-weight: bold;
    margin-top: 10px;
    width: 900px;
    text-align: center;
}

.center h2 {
    color: white;
    font-size: 70px;
    font-weight: bold;
    margin-top: 10px;
    width: 885px;
    text-align: center;
}

.center .buttons {
    margin: 35px 280px;
}

.buttons button {
    height: 50px;
    width: 150px;
    font-size: 18px;
    font-weight: 600;
    color: #ffb3b3;
    background: red;
    outline: none;
    cursor: pointer;
    border: 1px solid #cc0000;
    border-radius: 25px;
    transition: .4s;
}

.buttons .btn2 {
    margin-left: 25px;
}

.buttons button:hover {
    background: blue;
    color: white;
    border: 4px solid white;
}






0 Comments:

Post a Comment