Build New Modern Website UI Design with HTML and CSS

Hello Reader, in this article you will learn how to create your own website using HTML and CSS. This is a basic HTML and CSS code for a website's UI design. The HTML code includes a header section with a navigation menu, logo, and social media icons, as well as a main section with a headline, subheading, paragraph, and buttons. The CSS code includes styling for various elements of the website, including the background image, fonts, colors, and layout. In a previous article, I shared a tutorial on how to create a portfolio website using HTML and CSS.

Introduction

The website has a modern and stylish design with a dark background and bold typography. The navigation menu and social media icons are aligned vertically on the left side of the header. The main section has a large headline in purple text with a smaller subheading below it. The paragraph explains the services offered by the website, and the buttons encourage users to take action. The design is clean and simple, making it easy to navigate and understand. The header section has a background image with an overlay of 80% black color. The navigation menu has a logo, three links with a 90-degree rotation, and social media icons with a gray border.

To get started, watch and practice along with the tutorial below. With a bit of effort and dedication, you'll be able to create a beautiful and functional website that can help take your business to the next level.

Webpage Layout

The webpage's body starts with a header tag that has an ID of "showcase." Inside the header, there is a div element with a class of "overlay" that serves as a semi-transparent layer over the header's background image.

Header Menu Bar Section

Within the header, there is a container with a navigation menu that includes a logo image and links to "portfolio," "services," and "about us" pages. Additionally, there is a social media icons section with links to Facebook, YouTube, and Instagram. The navigation bar is structured with a logo image on the left and a list of links on the right. The links are styled to have a hover effect when the user hovers over them. There is also a list of social media icons that are placed at the bottom of the navigation bar.

Main Body Section

After the header, there is a section tag with a class of "main" that contains the main content of the webpage. This section contains a headline with a subheading, a short paragraph describing the services offered, and two call-to-action buttons with different styles. There is also a table that showcases some project statistics with three categories of "Completed," "Projects," and "Pending.

The CSS code has styles for font, color, background, layout, and animations. It uses the Poppins font from Google Fonts and sets the margin, padding, border, and font-family to all elements.

Source code

If you like this website design, then feel free to use it. 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 is CSS after creating these files, paste the code provided below.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Webiste UI Design | By Code Info</title>
  <link rel="stylesheet" href="style.css" />
  <!-- Font Awesome Cdn Link -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
</head>
<body>
  <header id="showcase">
    <div class="overlay">
      <div class="container">
        <nav>
          <div class="logo">
            <img src="./img/logo.jpg" alt="">
          </div>
          <ul class="navbar">
            <li><a href="#">protfolio</a></li>
            <li><a href="#">services</a></li>
            <li><a href="#">about us</a></li>
          </ul>
          <ul class="icons">
            <li><i class="fab fa-facebook"></i></li>
            <li><i class="fab fa-youtube"></i></li>
            <li><i class="fab fa-instagram"></i></li>
          </ul>
        </nav>

        <div class="line"></div>
        
        <!-- main secction -->
        <section class="main">
          <h4>Creative Designer</h4>
          <h1>best collection <br>for <span>designers</span></h1>
          <p>
            We Create Uncoventional Websites And Apps With Cool <br> Custom Graphics, Photos, Videos And Animations.
          </p>
          <div class="buttons">
            <button>get started</button>
            <button class="btn2">join now</button>
          </div>

          <div class="projects">
            <table>
              <tr>
                <td><span>300+</span></td>
                <td><span>150+</span></td>
                <td><span>50+</span></td>
              </tr>
              <tr>
                <td>Completed</td>
                <td>Projects</td>
                <td>Pending</td>
              </tr>
            </table>
          </div>

        </section>
      </div>
    </div>
  </header>
  
</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:

/* import google fonts */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"); *{ margin: 0; padding: 0; border: none; outline: none; text-decoration: none; box-sizing: border-box; font-family: "Poppins", sans-serif; } body{ color: #fff; } #showcase{ height: 100vh; background-image: url(./img/bg.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; } .overlay{ height: 100vh; background: rgba(0, 0, 0, 0.8); } .container{ display: flex; } nav{ padding: 10px; } .logo{ text-align: center; margin-top: 15px; } .logo img{ width: 45px; height: 45px; border-radius: 50%; } .navbar{ margin-top: 3rem; } ul li{ transform: rotate(-90deg); display: block; margin-top: 30px; padding-top: 20px; height: 60px; font-size: 13px; text-transform: uppercase; } a{ color: #fff; } .icons{ text-align: center; margin-top: 8rem; } .icons li{ transform: none; margin: 10px auto; padding: 0; height: 35px; width: 40px; } .icons li i{ font-size: 16px; padding: 4px; border-radius: 50%; cursor: pointer; border: 1px solid rgb(82, 81, 81); } i:hover{ background: gray; transition: all 0.5s; } .line{ border: 1px solid gray; height: 100vh; margin-left: 10px; } /* Main Section */ .main{ padding: 20px 40px; margin-top: 20px; } .main h4{ margin-top: 3rem; text-transform: uppercase; color: gray; } .main h1{ text-transform: uppercase; margin-top: 10px; font-size: 4rem; } .main span{ color: rgb(116, 17, 173); } .main p{ font-size: 12px; color: gray; text-transform: capitalize; } .buttons{ margin-top: 2.5rem; } .buttons button{ padding: 8px 14px; background: rgb(116, 17, 173); color: #fff; text-transform: uppercase; margin-right: 1rem; cursor: pointer; } .btn2{ background: rgb(61, 61, 61) !important; } button:hover{ background: rgba(56, 15, 88, 0.5); transition: all 0.5s; } .btn2:hover{ background: rgba(76, 75, 77, 0.5) !important; } .projects{ margin-top: 5rem; text-align: center; } .projects span{ color: #fff; font-size: 20px; } .projects td{ font-size: 12px; padding-right: 2rem; color: gray; }

The above code represents a basic HTML and CSS structure for a website's UI design. The HTML document is structured with a header, body, and several sections that are styled using CSS. The website is designed to showcase the creative work of a designer or design agency. Overall, the code provides a basic structure and style for a website UI design. It can be further modified and customized according to the requirements and preferences of the website owner.

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.