Create Website Page using HTML and CSS

Hello friends, in this article, you will learn how to create Website page using HTML and CSS.I have shared another snippet based on how to create a Responsive Website layout. In this tutorial, I have created a Website page with HTML and CSS, If you like this article, please also subscribe my YouTube channel - Code Info

Website

A website or internet site is a primary vicinity of internet pages which can be associated and accessed through visiting the home page of the internet site the use of a browser. For instance, the Code Info internet site address url is https://www.CodeInfoWeb.com. From our home page, you could get right of entry to any of the other pages contained on our site.

Below is the video tutorials. watch and practices

Webpage

Internet pages or Web page are what make up the arena wide internet. These files are written in html (hypertext markup language) and are translated by means of your web browser. Net pages can either be static or dynamic. Static pages show the identical content each time they're regarded. Dynamic pages have content material which can trade each time they're accessed. These pages are typically written in scripting languages which include personal home page, perl, asp, or jsp. The scripts within the pages run features at the server that return things like the date and time, and database information. All the information is again as html code, so whilst the web page receives to your browser, all the browser has to do is translate the html.

Website Vs Webpage

The primary difference among a website and a webpage is that a webpage is a single file on the net beneath a unique url. In assessment, a website is a group of more than one webpages in which information on a associated subject matter or other situation is connected collectively beneath a domain address.

Who creates websites on the Internet?

Any commercial enterprise, authorities, employer, or character can create a website on the internet. Today, the net consists of billions of web sites created with the aid of billions of different people. You could even create a internet site or weblog at the internet.

Image Source

Download image here

Source Code:

If you like this Webpage design, then feel free to use it in your project. Copy the code by clicking on Copy button provided below.

First, you have to create two files. One of them is HTML, and the other one is CSS. After creating the files, paste the code provided below.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Web Page | Code Info</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="conatiner">
      <header>
        <div class="label">
          <a href="#">Code</a>
        </div>
        <div class="navbar">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><button class="btn">Sign Up</button></li>
          </ul>
        </div>
      </header>
      <div class="body-content">
        <div class="b-title">
          <h1>HEY,<br />I'm <span>Code Info</span><br />Web developer</h1>
          <button>Explore</button>
          <div class="icons">
            <img src="/images/facebook.png" />
            <img src="/images/youtube.png" />
            <img src="/images/instagram.png" />
          </div>
        </div>

        <div class="b-img">
          <img src="/images/svg.png" />
        </div>
      </div>
    </div>
  </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you have to create a file with .css extension.

CSS CODE:

body{
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}

.conatiner{
    width: 1000px;
    margin: 30px auto;
    border-radius: 10px;
    box-shadow: 5px 5px 10px rgb(119, 109, 109), -5px -5px 10px rgb(163, 154, 154);
}

a{
    text-decoration: none;
}

header{
    display: flex;
}



.label{
    margin: 29px 0 0 5%;
}

.label a{
    color: blue;
    font-size: 30px;
    font-weight: bold;
    text-transform: uppercase;
}

.navbar {
    margin-left: 35%;
}

.navbar ul{
    list-style: none;
    display: flex;
}

.navbar ul li{
    padding: 15px;
}

.navbar ul li a{
    color: black;
    font-size: 20px;
    font-weight: 600;
}

.navbar ul li .btn{
    width: 100px;
    height: 40px;
    background: purple;
    color: white;
    border-radius: 30px;
    outline: none;
    border: none;
    cursor: pointer;
}

.body-content{
    display: flex;
}

.body-content .b-title{
    margin-left: 10%;
}

.body-content .b-title h1{
    font-size: 30px;
    margin-top: 100px;
}

.body-content .b-title span{
    color: blue;
}

.body-content .b-title button{
    border: none;
    width: 100px;
    height: 50px;
    background: blue;
    border-radius: 60px;
    outline: none;
    color: white;
}

.body-content .b-title .icons{

    display: flex;
    margin-top: 80px;
}

.body-content .b-title .icons img{
    width: 25px;
    height: 25px;
    padding: 10px;
}

.body-content .b-img{
    margin-left: 15%;
}

.body-content .b-img img{
    width: 480px;
    height: 480px;
}

I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for Visiting.

Website

Webpage

Website Vs Webpage

Who creates websites on the Internet?

Image Source

You may like this:

Source Code:

1 Comments

Post a Comment

About Us

Contact Form