Javascript required
Skip to content Skip to sidebar Skip to footer
Home / How to Design a Website Using Html Css and Javascript

How to Design a Website Using Html Css and Javascript

How can I make a beautiful Business website using HTML and CSS?

After reading this article, you will be able to create beautiful business websites with HTML and CSS like this.

Hello friends, today in this blog I will teach you  how to create a business website using only HTML and CSS . Earlier I have shared How To Create Multiple Animated Card Sliders , and now I'm going to create a business website.

What is a website?

A website is a combination of multiple web pages made up of code, hyperlinks, and layouts. There are different types of websites such as e-commerce sites, portfolio sites, magazines, or social media sites. is used for educational, marketing, and other purposes. Websites do not have specific restrictions.

How can I make my website attractive Like Faucongz?

  • To make a website beautiful and attractive you need to follow the following steps:
  • Take simple colors for your website.
  • Use a maximum of 3 to 4 color
  • Make Website Responsive (Fit in any screen sizes devices)
  • Try To use the same sizes and font family for text.
  • Keep essential navigation links inside the navigation bar

You Might Like This Blog:

How To Create Multiple Animated Card Sliders.

How to create a Pricing Card with Sliding Animation using only HTML & CSS.

To Create A Business Website Using HTML and CSS follow these Steps:

How To Create A Website Using HTML?

To create this program: ( Create A Business Website  ). Initially you need to create two files one HTML (.html) and another CSS file (.css). After creating these files, just paste the following codes into your VS IDE code sample and create an HTML file called  index.html  and paste the indicated codes into your HTML file (.html) Remember, you must create a file with the extension. HTML.

<!DOCTYPE html <!-- Created By CodeWithNepal - www.codewithnepal.com --> <html lang="en" dir="ltr">   <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <!------<title>Business Website Design | CodeWithNepal</title>------>     <link rel="stylesheet" href="style.css">     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>    </head> <body>   <nav>     <div class="menu">       <div class="logo">         <a href="#">Faucongz</a>       </div>       <ul>         <li><a 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="#">Support</a></li>       </ul>     </div>   </nav>   <div class="img"></div>   <div class="center">     <div class="title">Game Development Studio</div>     <div class="sub_title">Let's make a Game.</div>     <div class="btns">       <button>Learn More</button>       <button>Download</button>     </div>   </div> </body> </html>  >

How To Design A Website In CSS?

And, create a CSS file named style.css  and paste the indicated codes into your CSS file. Remember, you must create a .css file.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap') *{   margin: 0;   padding: 0;   box-sizing: border-box;   font-family: 'Poppins',sans-serif; } ::selection{   color: #000;   background: #fff; } nav{   position: fixed;   background: #5E17EB;   width: 100%;   padding: 10px 0;   z-index: 12; } nav .menu{   max-width: 1250px;   margin: auto;   display: flex;   align-items: center;   justify-content: space-between;   padding: 0 15px; } .menu .logo a{   text-decoration: none;   color: #fff;   font-size: 35px;   font-weight: 600; } .menu ul{   display: inline-flex; } .menu ul li{   list-style: none;   margin-left: 7px; } .menu ul li:first-child{   margin-left: 0px; } .menu ul li a{   text-decoration: none;   color: #fff;   font-size: 18px;   font-weight: 500;   padding: 8px 15px;   border-radius: 5px;   transition: all 0.3s ease; } .menu ul li a:hover{   background: #fff;   color: black; } .img{   background: url('FAUCONGZ.png')no-repeat;   width: 100%;   height: 100vh;   background-size: cover;   background-position: center;   position: relative; } .img::before{   content: '';   position: absolute;   height: 100%;   width: 100%;   background: rgba(0, 0, 0, 0.4); } .center{   position: absolute;   top: 52%;   left: 50%;   transform: translate(-50%, -50%);   width: 100%;   padding: 0 20px;   text-align: center; } .center .title{   color: #fff;   font-size: 55px;   font-weight: 600; } .center .sub_title{   color: #fff;   font-size: 30px;   font-weight: 600; } .center .btns{   margin-top: 20px; } .center .btns button{   height: 55px;   width: 170px;   border-radius: 5px;   border: none;   margin: 0 10px;   border: 2px solid white;   font-size: 20px;   font-weight: 500;   padding: 0 10px;   cursor: pointer;   outline: none;   transition: all 0.3s ease; } .center .btns button:first-child{   color: #fff;   background: none; } .btns button:first-child:hover{   background: white;   color: black; } .center .btns button:last-child{   background: white;   color: black; }  ;

Output

No alt text provided for this image

How to Design a Website Using Html Css and Javascript

Source: https://www.linkedin.com/pulse/how-create-business-website-using-html-css-om-bhusal