Simple Website Using HTML and CSS with Source code

0

In this tutorial, we will create a simple website using HTML and CSS. You will learn how to create a landing page, add content to your website, and style your website with CSS. By the end of this tutorial, you will have a simple website using HTML and CSS based.

If you’re looking to create a simple website using HTML and CSS, you’ve come to the right place. In this article, we’ll provide you with the source code for a basic HTML and CSS website, as well as some tips on how to customize it to fit your needs.

Simple Website Using HTML and CSS With Source Code

Creating a website with HTML and CSS is relatively easy – even if you don’t have any prior experience coding. With our simple website code, all you need to do is copy and paste the code into your text editor, save it as an HTML file, and open it in your web browser. From there, you can start making changes to the code to personalize your site.

Simple Website Using HTML and CSS With Source Code

Not sure where to start? No problem! We’ve included some helpful comments in the code itself to guide you through the process. And if you get stuck, there are plenty of resources available online (like w3schools.com) that can help you troubleshoot any issues.

Once you have your website up and running, don’t forget to promote it! You can share your site’s URL on social media, or even submit it to search engines like Google so that people can find it when they’re searching for related topics.

How to Create a Website Using HTML Code

If you’re looking for a simple website using HTML and CSS, this source code is for you. This code uses basic HTML and CSS to create a clean, minimal website. You can easily customize this code to suit your needs. Simply edit the HTML and CSS files and upload them to your server. That’s it!

This source code is released under the MIT license, so feel free to use it however you like. If you have any questions or comments, feel free to leave them below. Thanks for reading!

<!DOCTYPE html>
<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" />
    <link rel="stylesheet" href="css/style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
    />
    <title>Make a Website Using HTML/CSS</title>
  </head>
  <body>
    <header>
      <!-- Navbar -->
      <nav id="navbar">
        <div class="container">
          <h1><a href="#">HubTech</a></h1>
          <ul>
            <li><a href="index.html" class="current">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </div>
      </nav>
      <!-- Showcase Area -->
      <div id="showcase">
        <div class="container">
          <div class="showcase-content">
            <h2>The Hub of Technology</h2>
            <p class="lead">
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique delectus ut velit
              ducimus quaerat quisquam, ex, suscipit deleniti illum consequatur omnis deserunt,
              placeat facere quasi dolores cupiditate non error necessitatibus! Lorem ipsum dolor,
              sit amet consectetur adipisicing elit.
            </p>
            <a href="#" class="btn">Read More</a>
          </div>
        </div>
      </div>
    </header>

    <!-- About Section -->
    <section class="about">
      <div class="container">
        <h3 class="bg-dark-line"><span>About Us</span></h3>
        <p class="lead">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi beatae nobis officiis illum
          quo eum deserunt fuga numquam! Provident sint iusto, doloremque quae consectetur ipsa
          harum minus enim in possimus. Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Quasi beatae nobis officiis illum quo eum deserunt fuga numquam! Provident sint iusto,
          doloremque quae consectetur ipsa harum minus enim in possimus. Lorem ipsum dolor sit amet
          consectetur adipisicing elit. Quasi beatae nobis officiis illum quo eum deserunt fuga
          numquam! Provident sint iusto, doloremque quae consectetur ipsa harum minus enim in
          possimus.
        </p>
        <p class="lead">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique debitis neque
          exercitationem. A, consequatur magnam asperiores impedit adipisci perferendis ab aperiam!
          Voluptatum ducimus ratione maiores. Et ut maxime accusamus mollitia. Lorem ipsum dolor,
          sit amet consectetur adipisicing elit. Iusto, fuga. Voluptatibus, tenetur veritatis
          ratione tempore optio quas debitis quis accusamus culpa maiores dolor facilis obcaecati
          aspernatur suscipit cupiditate perspiciatis minus?
        </p>
      </div>
    </section>
    <!-- Our Services -->
    <div id="services">
      <div class="container">
        <h3 class="bg-dark-line"><span>Services</span></h3>
        <div class="box bg-primary">
          <h2>Web Designing</h2>
          <i class="fa-solid fa-paintbrush fa-4x"></i>
          <p class="lead">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam iusto, pariatur sint
            culpa vero impedit ex tenetur doloremque, nihil corrupti, amet soluta? Earum, quidem
            culpa.
          </p>
        </div>
        <div class="box light-gray">
          <h2>Web Development</h2>
          <i class="fa-solid fa-code fa-4x"></i>
          <p class="lead">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam iusto, pariatur sint
            culpa vero impedit ex tenetur doloremque, nihil corrupti, amet soluta? Earum, quidem
            culpa.
          </p>
        </div>
        <div class="box bg-primary">
          <h2>Desktop Application</h2>
          <i class="fa-solid fa-desktop fa-4x"></i>
          <p class="lead">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam iusto, pariatur sint
            culpa vero impedit ex tenetur doloremque, nihil corrupti, amet soluta? Earum, quidem
            culpa.
          </p>
        </div>
      </div>
    </div>

    <div class="clr"></div>

    <!-- Authors -->
    <div id="authors">
      <div class="container">
        <h3><span>Authors</span></h3>
        <div class="auth">
          <img src="./img/Authors/person1.png" alt="" />
          <p class="names">John Doe</p>
          <p>Admin</p>
          <p class="lead">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem aut quod, earum
            quaerat eveniet doloribus quasi nam est illo reiciendis fugiat sit blanditiis omnis
            cumque quos error temporibus quisquam eligendi?
          </p>
        </div>
        <div class="auth">
          <img src="./img/Authors/person4.png" alt="" />
          <p class="names">Suzi</p>
          <p>Manager</p>
          <p class="lead">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem aut quod, earum
            quaerat eveniet doloribus quasi nam est illo reiciendis fugiat sit blanditiis omnis
            cumque quos error temporibus quisquam eligendi?
          </p>
        </div>
        <div class="auth">
          <img src="./img/Authors/person3.png" alt="" />
          <p class="names">Jason</p>
          <p>Accountant</p>
          <p class="lead">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem aut quod, earum
            quaerat eveniet doloribus quasi nam est illo reiciendis fugiat sit blanditiis omnis
            cumque quos error temporibus quisquam eligendi?
          </p>
        </div>
      </div>
    </div>

    <!-- Contact -->
    <div id="contact">
      <div class="container">
        <h3><span>Contact Us</span></h3>
        <div class="contact-form">
          <form action="process.php">
            <div class="form-group">
              <label for="name">Name</label>
              <input type="text" name="name" />
            </div>
            <div class="form-group">
              <label for="email">Email</label>
              <input type="email" name="name" />
            </div>
            <div class="form-group">
              <label for="message">Message</label>
              <textarea name="message" id="message" cols="30" rows="10"></textarea>
            </div>
            <button type="button" class="btn">Submit</button>
          </form>
        </div>
      </div>
    </div>
    <footer id="main-footer">
      <div class="container">
        <p>
          The Hub of Technology Design by
          <a href="https://www.onlineittuts.com"> OnlineITtuts </a> &copy 2022
        </p>
      </div>
    </footer>
  </body>
</html>

Once you did that, then the next thing you need to the CSS to design that. So, let me show you the CSS code to design it.

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: 'Poppins';
    line-height: 1.7em;

}

a{
    text-decoration: none;
    color: #fff;
}

.container{
    max-width: 1100px;
    margin:auto;
}

.lead{
    font-size: 16px;
    padding: 10px 10px;
    text-align: justify;
}

.btn{
    display: inline-block;
    padding: 07px 16px;
    background: rgb(38, 94, 222);;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 03px;
    color:#fff;
    transition: all 0.3;
}

.clr{
    clear: both;
}

/* Close Utality Classes */

#navbar{
    background: #3170ff;
    overflow: auto;
}

#navbar h1{
    float: left;
    padding-top: 20px;
}

#navbar ul{
    list-style: none;
    float: right;
}

#navbar ul li{
    float: left;
}

#navbar ul li a{
    display: block;
    padding: 20px;
    text-align: center;
    transition: all 0.5s;
}

#navbar ul li a:hover,
#navbar ul li a.current{
    background: #4397EA;
    transition: all 0.5s;
}

/* Showcase Area */
#showcase{
    background: url('../img/img2.jpg') no-repeat
    center center/cover;
    height: 600px;
    color: #fff;
}

.showcase-content{
    padding-top: 170px;
    color: #333;
}

.showcase-content h2{
   font-size: 60px;
   line-height: 1.9em;
 }

 .showcase-content p{
    font-size: 20px;
    margin-bottom: 20px;
 }

 .showcase-content .btn:hover{
    background: #4397EA;
    border: none;
    color:#fff;
    transition: all 0.3s;
 }

/* About Section */

 .about{
    height: 350px;
    margin-top: 40px;
 }

 .about h3{
    width: 100%;
    border-bottom: 2px solid  #ddd;
 }

 .about h3 span{
    background:  #ddd;;
    padding: 10px 22px;
    color: #333;
    text-align: center;
    display: inline-block;
 }
/* Close */


#services h3{
    width: 100%;
    border-bottom: 0.5px solid #ddd;;
 }

#services h3 span{
    background: #ddd;
    padding: 10px 22px;
    color: #333;
    text-align: center;
    display: inline-block;
 }

 #services .box{
    float: left;
    width: 33.33%;
    padding: 45px;
    text-align: center;
    margin: 30px 0px;
 }

 .bg-primary{
 background: #265ede;
    color: #fff;
 }

 .light-gray{
    background: #ddd;
 }

 #services h2{
  margin-bottom: 25px;
 }

/* Author */

#authors h3{
    width: 100%;
    border-bottom: 0.5px solid #ddd;;
 }

 #authors h3 span{
    background: #ddd;
    padding: 10px 22px;
    color: #333;
    text-align: center;
    display: inline-block;
 }

#authors{
    background: url('../img/img.jpg') no-repeat center;
    height: 600px;
    padding-top: 40px ;

 }

.auth{
    float: left;
    height: 500px;
    width: 33%;
    color: #fff;
    padding: 20px;
    text-align: center;
    margin: 20px 01px;
}

.auth img{
    border-radius: 50%;
}

.names{
    font-weight: bold;
    font-size: 18px;
}

/* Contact Us */
#contact h3{
    width: 100%;
    border-bottom: 0.5px solid #ddd;;
    margin-bottom: 35px;
}

#contact h3 span{
    background: #ddd;
    padding: 10px 22px;
    color: #333;
    text-align: center;
    display: inline-block;
}

#contact .form-group{
    margin-bottom: 20px;
}

.contact-form label{
    display: block;
    margin-bottom: 5px;
}

.contact-form input{
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
}

#contact textarea{
    height: 200px;
    width: 100%;
}

.contact-form input:focus,
.contact-form textarea:focus{
    outline: none;
    border-color: #265ede;
}


/* Footer */

#main-footer{
    background: #265ede;
    padding: 20px;
    margin-top: 20px;
    text-align: center;
    color:#fff;
}

That’s for creating a simple website using HTML and CSS, inside the tutorial, you’ve got basic knowledge that use to make a simple website. So, If you want to learn it step by step practically, I have a video tutorial on it. You can watch it and learn that step by step

Simple Website using HTML CSS and JavaScript With Source Code

Hey Guys, recently I’ve made the complete tutorial with source How to Make Simple Website Using HTML CSS and JavaScript with Source Code. Inside the website, you will learn How to use HTML and CSS3 to design the main page.

Once you design the page using HTML and CSS3, then you will learn How to use JavaScript inside your website the display the countdown timer. So, I’m going to share with you the tutorial and also the source code of the project.

<!DOCTYPE html>
<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" />
    <link rel="stylesheet" href="css/style.css" />
    <title>Coming Soon Website Using HTML and CSS3</title>
  </head>
  <body>
    <header>
      <div class="coundown-timmer">
        <div class="content">
          <h2>Website Comming Soon</h2>
          <p>
            Our Website Under Construction, We Are Working on it, We Will Rady to Lunch it After
          </p>
        </div>
        <div class="timmer-content">
          <div class="time">
            <span id="days" class="numbers">00</span>
            <span>Days</span>
          </div>
          <div class="time">
            <span id="hours" class="numbers">00</span>
            <span>Hours</span>
          </div>
          <div class="time">
            <span id="minutes" class="numbers">00</span>
            <span>Minutes</span>
          </div>
          <div class="time">
            <span id="seconds" class="numbers">00</span>
            <span>Second</span>
          </div>
        </div>
        <div class="input-data">
          <h3>Subscribe Now to Get Updates</h3>
          <div class="input-fields">
            <div><input type="email" placeholder=" Enter an Email" /></div>
            <a href="#">Subscribe Now</a>
          </div>
        </div>
      </div>
    </header>
    <script src="js/main.js"></script>
  </body>
</html>

Once you have done that, then you need to style it using CSS3, So, I’m going to share with you the CSS code that are help you to manage the page.

@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Roboto&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "poppins", sans-serif;
}

header {
  width: 100%;
  height: 100vh;
}

header::before {
  content: "";
  background: url("../img/water.jpg") no-repeat center center/cover;
  position: absolute;
  opacity: 0.3;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
}

.coundown-timmer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
}

.coundown-timmer h2 {
  font-size: 4rem;
  height: 1.5;
}

.coundown-timmer .content p {
  font-size: 1.1rem;
}

.timmer-content {
  display: flex;
  padding: 2rem 0px;
}

.time {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: 2rem;
}

.numbers {
  font-size: 3.5rem;
  font-weight: 800;
  padding: 0.5rem;
}

.input-data {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.input-data h3 {
  font-size: 1.3rem;
  padding-bottom: 1rem;
}

.input-fields input {
  width: 30%;
  margin: auto;
  border: none;
  padding: 1rem 2rem;
  margin-bottom: 1.5rem;
  font-size: 1rem;
}

.input-fields a {
  text-decoration: none;
  background: #21618c;
  color: #fff;
  padding: 1rem 2rem;
  font-size: 1rem;
}

Finally, you need JavaScript to display the countdown timer on the front page of the website. So, you can change the countdown timer. So, Let’s check the JS code.

let days = document.getElementById("days");
let hours = document.getElementById("hours");
let minutes = document.getElementById("minutes");
let seconds = document.getElementById("seconds");

let newyear = new Date("Jan 1,2023 00:00:00").getTime();
updatefun();
function updatefun() {
  let now = new Date().getTime();
  let downtime = newyear - now;

  let second = 1000;
  let minute = second * 60;
  let hour = minute * 60;
  let day = hour * 24;

  let d = Math.floor(downtime / day);
  let h = Math.floor((downtime % day) / hour);
  let m = Math.floor((downtime % hour) / minute);
  let s = Math.floor((downtime % minute) / second);

  days.innerHTML = d;
  hours.innerHTML = h;
  minutes.innerHTML = m;
  seconds.innerHTML = s;

  setTimeout(updatefun, 1000);
}

Hope you’ve got ideas from the source code of the project. If you face any problem with the code, you can watch the complete video tutorial. Inside the tutorial you will learn step by step usage of HTML CSS and JavaScript to make a website.

Conclusion

In this tutorial, we have learned how to create a simple website using HTML and CSS with source code. We have also included the source code for the website so that you can easily modify it to your own needs.

You May Also Like:

Creating a website does not have to be complicated or time-consuming, as this tutorial has shown. With just a few lines of code, you can create a basic but functional website. So what are you waiting for? Get started today and see what you can build!

Previous articleHow to Make Image Gallery in HTML and CSS3
Next articleHow To Use Ajax in PHP With jQuery
I'm Programmer, Digital Marketer, and Blogger, I have been working on the web for 04 years. Basically, I have been sharing personal expertise on my website.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.