Make a Website Using HTML/CSS

Simple Website Using HTML and CSS with Source code

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!

The Hub of Technology

Web Designing

Web Development

Desktop Application

Authors

Admin

Manager

Accountant

Contact Us
Name
Email
Message
The Hub of Technology Design by OnlineITtuts © 2022

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.

 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

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.

          
Website Comming Soon

Our Website Under Construction, We Are Working on it, We Will Rady to Lunch it After

Days
Hours
Minutes
Second
Subscribe Now to Get Updates
Subscribe Now

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.

 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

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.

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.

Guys, I hope you’ve learn many new things from the video tutorial. I also made another tutorial that are help you to create a website from scratch using HTML and CSS.

Create a Website Using HTML and CSS With Source Code

It’s landing page website inside that I’ve used video background, you can learn how to use video as a background inside the website. SO, hope this tutorial is helpful and beneficial for you.

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!

Источник

HTML Web Page Examples with Source Code

In this article, we are going to see some HTML web page examples with source code. We will also see some of the key points to learn how to create these web pages.

HTML Web Page Example 1

This is an example of a simple HTML web page that shows the profile of a professional camel.

Here is how the camel profile is designed in HTML:

  1. Container — The complete HTML web page is wrapped in a container. The container is a div element with the class container .
  2. Header — Inside the container, we have a header element that contains the logo and the navigation menu.
  3. Aside — Aside contains the profile picture and other navigational links.
  4. Main — The main element contains the profile information. Like the name, the career, the skills, the contact form, etc.
  5. Footer — The footer contains copyright information.

Here is the complete code of the camel profile:

@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap'); body < margin: 0; box-sizing: border-box; >.container < line-height: 150%; >.header < display: flex; justify-content: space-between; align-items: center; padding: 15px; background-color: #e9e9e9; >.header h1 < color: #222222; font-size: 30px; font-family: 'Pacifico', cursive; >.header .social a < padding: 0 5px; color: #222222; >.left < float: left; width: 180px; margin: 0; padding: 1em; >.content < margin-left: 190px; border-left: 1px solid #d4d4d4; padding: 1em; overflow: hidden; >ul < list-style-type: none; margin: 0; padding: 0; font-family: sans-serif; >li a < display: block; color: #000; padding: 8px 16px; text-decoration: none; >li a.active < background-color: #84e4e2; color: white; >li a:hover:not(.active) < background-color: #29292a; color: white; >table < font-family: arial, sans-serif; border-collapse: collapse; width: 100%; margin: 30px 0; >td, th < border: 1px solid #dddddd; padding: 8px; >tr:nth-child(1) < background-color: #84e4e2; color: white; >tr td i.fas < display: block; font-size: 35px; text-align: center; >.footer
Mr. Camel
About Me

I don't look like some handsome horse, but I am a real desert king. I can survive days without water.

My Career

I work as a web developer for a company that makes websites for camel businesses.



How Can I Help You?

SKILL 1SKILL 2SKILL 3Cleaning kaktus in your backyardStoring some fat for youTaking you through the desertEmail:
Mobile:

Here is the result of the code above:

HTML web page example 1

HTML WebPage Example 2

This is the second example of an HTML web page. This is a simple error 404 page which is shown when the user tries to access a page that does not exist.

This is a very simple webpage that shows the error 404 page on the screen and gives a link to return to the homepage.

To design an error 404 page you need to use the following steps:

  1. Create a div element that covers the whole page set height: 100vh .
  2. Give it a background image that suits the 404 error.
  3. Style your basic text and link elements with CSS.
       body < margin: 0; box-sizing: border-box; >.container < height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; background: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, .1)), url('https://images.unsplash.com/photo-1595624871930-6e8537998592?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=871&q=80'); background-size: cover; background-position: center; background-repeat: no-repeat; >h1 < font-size: 10rem; color: #fff; text-transform: uppercase; font-weight: 700; margin-bottom: 1rem; >h2 < font-size: 2rem; color: #fff; text-transform: uppercase; font-weight: 700; margin-bottom: 1rem; >p < font-size: 1.5rem; color: #fff; font-weight: 700; margin-bottom: 1rem; >a 
404

Page not found

The page you are looking for does not exist.

Visit Homepage

Here is the result of the code in example 2.

HTML web page example 2

HTML Code Example 3 (Offer Page)

In this HTML code example we will create offer page. This is a simple newsletter signup page.

Here is the list of steps to create a newsletter signup page:

  1. First, we need to create the HTML structure of the page. We will use the tag to wrap the content of the page. Then, we will create two sections: one for the intro and one for the sign-up form.
  2. Next, we will style the page using CSS. We will use the display: flex property to align the content of the page. We will also use the min-height property to make sure that the page is always fully visible.
  3. Then, we will style the intro section.
  4. Next, we will style the sign-up section.
  5. Finally, we will style the form. Look at the complete code below to see how we did it.
          

Get up to 50% off on all our products and services. Hurry up, the offer ends in 24 hours.

!

!

!

!

Terms and Services

Here is the result of the code in example 3.

HTML web page example 3

HTML Code Example 4

In the fourth example, we are going to create a testimonial page that shows the reviews of the customers along with their profile pictures, name and designation.

The basic idea will be to create HTML section first and then styling it with CSS.

The reviews and all its details will be stored in an array and then we will loop through the array to display the reviews.

Here is the complete code for the testimonial page.

Complete HTML code for the testimonial page

         
Our Reviews

Here is the output of the above HTML code for testimonials:

Conclusion

This brief guide includes HTML web page examples with source code. We have learned how to create a basic HTML web page with 2 different examples. We have also learned how to create a basic CSS style sheet and how to use it on our HTML web page.

If you want a detailed explanation of a portfolio site then visit the HTML code for homepage.

Источник

Читайте также:  Python pdf from png
Оцените статью