Главная » Языки программирования

Simple HTML HomePage

Содержание
  1. Sample HTML Code For Homepage
  2. Introduction
  3. Look and Feel
  4. Structure Of Homepage
  5. Step 1: Create a basic HTML page
  6. Header
  7. Main
  8. Footer
  9. Step 2: Style The Elements Using CSS
  10. Complete Sample HTML Code For Homepage
  11. Conclusion
  12. 10,000+ Free HTML Templates
  13. Minimalistic Website Templates
  14. Need Free Website Templates?
  15. Simple HTML Templates
  16. One Page Responsive HTML Templates

Sample HTML Code For Homepage

In this article, we will show you how to create a homepage using HTML and CSS step by step. You can use this code as a starting point for your own website as a developer. Sample HTML code for homepage is also give.

Introduction

Every web developer should create a basic portfolio website using HTML and CSS. This will create a showcase of your work and will also help you learn basic concepts of HTML and CSS.

Start with something basic like this one and then add more to it in the future.

We are going to explain each step of the process in this article and also provide you sample HTML code of homepage.

Look and Feel

Here is how our homepage will look like.

sample HTML code for homepage

Structure Of Homepage

Before we start, first have a look at the HTML components that create each section of this homepage.

The picture below shows different HTML elements with its name that gives you a rough idea of how to create the HTML structure of the home page.

sample HTML code for homepage structure

  1. The home page is divided into 3 sections: header, main and, footer .
  2. The header section contains the logo and the navigation bar.
  3. The main section contains the main content of the page like introduction, achievements, projects, etc.
  4. The footer section contains the copyright, contact details, and social media links.

Step 1: Create a basic HTML page

Using the structure of the homepage explained above, create a basic HTML page.

The page is divided into 3 sections by HTML elements:

The header section contains the logo which is nothing but just a link to the homepage here (you add your own logo image) and also contains the navigation bar.

Main

The main section contains almost everything that you want to show on the homepage so it is also bigger than any other section.

For simplicity, we are just using the intro, achievements, and about us section in this example.

From the image, you can get a rough idea of the structure of the main section.

 
A Web Developer 
I am a web developer and I love to create websites.
About Me

I am a web developer and I love to create websites. I am a very good developer and I am always looking for new projects. I am a very good developer and I am always looking for new projects.

me

Main section code explained : The main section is divided into 3 sections: intro, achievements, and about me .

  1. Intro — The intro section is a div element with a background image. The section contains a heading, a paragraph, and a button.
  2. Achievements — The achievements section is another div element that uses font-awesome icons to display icons at the top of each section. The section contains 3 div elements each with a heading, a paragraph and, an icon.
  3. About Me — The about me section has 2 inner elements one is text and another is an image.

The footer section contains the contact information and social media links.

 
More Info Home About Contact 
 
Social Links

Footer code explained : The footer section contains the contact information and social media links.

  1. Copy — The copy section is a div element that contains copyright information.
  2. Bottom Links — The bottom links section is a div element that contains the links to the other sections and social media information.

Step 2: Style The Elements Using CSS

We have created the HTML part now let’s style the elements using CSS.

To select the element to style use the CSS selectors.

We are going to use CSS flexbox to align the elements horizontally and vertically.

The complete CSS code is as follows:

@import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap'); body < margin: 0; box-sizing: border-box; >/* CSS for header */ .header < display: flex; justify-content: space-between; align-items: center; background-color: #f5f5f5; >.header .logo < font-size: 25px; font-family: 'Sriracha', cursive; color: #000; text-decoration: none; margin-left: 30px; >.nav-items < display: flex; justify-content: space-around; align-items: center; background-color: #f5f5f5; margin-right: 20px; >.nav-items a < text-decoration: none; color: #000; padding: 35px 20px; >/* CSS for main section */ .intro < display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 520px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), url("https://images.unsplash.com/photo-1587620962725-abab7fe55159?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1031&q=80"); background-size: cover; background-position: center; background-repeat: no-repeat; >.intro h1 < font-family: sans-serif; font-size: 60px; color: #fff; font-weight: bold; text-transform: uppercase; margin: 0; >.intro p < font-size: 20px; color: #d1d1d1; text-transform: uppercase; margin: 20px 0; >.intro button < background-color: #5edaf0; color: #000; padding: 10px 25px; border: none; border-radius: 5px; font-size: 20px; font-weight: bold; cursor: pointer; box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.4) >.achievements < display: flex; justify-content: space-around; align-items: center; padding: 40px 80px; >.achievements .work < display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 40px; >.achievements .work i < width: fit-content; font-size: 50px; color: #333333; border-radius: 50%; border: 2px solid #333333; padding: 12px; >.achievements .work .work-heading < font-size: 20px; color: #333333; text-transform: uppercase; margin: 10px 0; >.achievements .work .work-text < font-size: 15px; color: #585858; margin: 10px 0; >.about-me < display: flex; justify-content: center; align-items: center; padding: 40px 80px; border-top: 2px solid #eeeeee; >.about-me img < width: 500px; max-width: 100%; height: auto; border-radius: 10px; >.about-me-text h2 < font-size: 30px; color: #333333; text-transform: uppercase; margin: 0; >.about-me-text p < font-size: 15px; color: #585858; margin: 10px 0; >/* CSS for footer */ .footer < display: flex; justify-content: space-between; align-items: center; background-color: #302f49; padding: 40px 80px; >.footer .copy < color: #fff; >.bottom-links < display: flex; justify-content: space-around; align-items: center; padding: 40px 0; >.bottom-links .links < display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 40px; >.bottom-links .links span < font-size: 20px; color: #fff; text-transform: uppercase; margin: 10px 0; >.bottom-links .links a

To play with style try using your own positioning and color values.

Complete Sample HTML Code For Homepage

Here is the complete sample HTML code for the homepage. You can click the run button below to see the result.

        @import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap'); body < margin: 0; box-sizing: border-box; >/* CSS for header */ .header < display: flex; justify-content: space-between; align-items: center; background-color: #f5f5f5; >.header .logo < font-size: 25px; font-family: 'Sriracha', cursive; color: #000; text-decoration: none; margin-left: 30px; >.nav-items < display: flex; justify-content: space-around; align-items: center; background-color: #f5f5f5; margin-right: 20px; >.nav-items a < text-decoration: none; color: #000; padding: 35px 20px; >/* CSS for main element */ .intro < display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 520px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), url("https://images.unsplash.com/photo-1587620962725-abab7fe55159?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1031&q=80"); background-size: cover; background-position: center; background-repeat: no-repeat; >.intro h1 < font-family: sans-serif; font-size: 60px; color: #fff; font-weight: bold; text-transform: uppercase; margin: 0; >.intro p < font-size: 20px; color: #d1d1d1; text-transform: uppercase; margin: 20px 0; >.intro button < background-color: #5edaf0; color: #000; padding: 10px 25px; border: none; border-radius: 5px; font-size: 20px; font-weight: bold; cursor: pointer; box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.4) >.achievements < display: flex; justify-content: space-around; align-items: center; padding: 40px 80px; >.achievements .work < display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 40px; >.achievements .work i < width: fit-content; font-size: 50px; color: #333333; border-radius: 50%; border: 2px solid #333333; padding: 12px; >.achievements .work .work-heading < font-size: 20px; color: #333333; text-transform: uppercase; margin: 10px 0; >.achievements .work .work-text < font-size: 15px; color: #585858; margin: 10px 0; >.about-me < display: flex; justify-content: center; align-items: center; padding: 40px 80px; border-top: 2px solid #eeeeee; >.about-me img < width: 500px; max-width: 100%; height: auto; border-radius: 10px; >.about-me-text h2 < font-size: 30px; color: #333333; text-transform: uppercase; margin: 0; >.about-me-text p < font-size: 15px; color: #585858; margin: 10px 0; >/* CSS for footer */ .footer < display: flex; justify-content: space-between; align-items: center; background-color: #302f49; padding: 40px 80px; >.footer .copy < color: #fff; >.bottom-links < display: flex; justify-content: space-around; align-items: center; padding: 40px 0; >.bottom-links .links < display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 40px; >.bottom-links .links span < font-size: 20px; color: #fff; text-transform: uppercase; margin: 10px 0; >.bottom-links .links a 
 
 
A Web Developer 
I am a web developer and I love to create websites.
About Me

I am a web developer and I love to create websites. I am a very good developer and I am always looking for new projects. I am a very good developer and I am always looking for new projects.

me

Conclusion

Following the tutorials above you have created a beautiful portfolio website for you. You have learned how to create a website using HTML and CSS. You have used flexbox and fon-awesome icons. Sample HTML code for the homepage is available in the editor above.

For more webpage ideas like this visit HTML webpage examples.

Источник

10,000+ Free HTML Templates

Art & Design HTML Templates Technology HTML Templates Business & Law HTML Templates Food & Restaurant HTML Templates Architecture & Building HTML Templates Education HTML Templates Fashion & Beauty HTML Templates Interior HTML Templates Industrial HTML Templates Cars & Transportation HTML Templates Travel & Hotels HTML Templates Music & Entertainment HTML Templates Sports HTML Templates Medicine & Science HTML Templates Nature HTML Templates Sale HTML Templates Real Estate HTML Templates Pets & Animals HTML Templates Wedding HTML Templates Portfolio HTML Templates

Web design and responsive site prototyping, including eCommerce, have changed recently. The builder uses an HTML ecommerce website template for a simple landing page as a complete or fully responsive website became spread and popular. A landing page usually comes as a template demo supplied by free CSS templates or free CSS website, allowing to catch visitor’s interest with various color schemes and a collection of stylish web design template and elements. And please note that most of the page templates have simple HTML. They are clean, free templates and have a live demo. You can also design an online presentation of various forms of a single page website with a click.

Minimalistic Website Templates

To start any website with an HTML template, you will need content free or premium. Some photo materials can have privacy issues, and you should learn that before using those on your page template or WordPress themes. Modern web technologies used in web templates, including HTML CSS JavaScript, and bootstrap, allow the transformation of the basic HTML page into an advanced eCommerce website system, which a business company of any industry can use. Even simple aspect uses like personal portfolio template gallery, or single page updates, blog and events, for example, for a clothing store allowing using responsive design template samples to speed up the development and stimulate creative website design progress. You can use our free HTML templates as a quick construction for email templates, suitable for an HTML email, or a website layout and page HTML based on bootstrap templates for an online store.

Need Free Website Templates?

Site templates usually provided as HTML CSS templates perfectly suit various topics like an agency template and free HTML page portfolio or WordPress website templates. It can also be a website template for food, fashion, social media, or consulting website template. You can add photos and other content and free graphics required to make responsive templates and reflect the latest digital trends. It is normal to get HTML themes free and use them as an HTML site template or a web page used as a landing page template. Some downloaded HTML landing page templates, as samples, containing photography you can use for a portfolio template. And if you add product details, you can make a clothing store template, software home, and ideal template design.

Simple HTML Templates

Today to create a great layout for personal and business use, for example, a travel, wedding, health, interior, industrial, fitness, hotel, and other categories HTML website that looks perfect, you most likely need to search for a free download of a responsive template. Usually, a minimal HTML website template is open source and can have a builder or bootstrap HTML framework from GitHub as a foundation. For professional users in design having experience, we offer a comprehensive collection of WordPress and an HTML website template featuring style presets and effects, like parallax, video, contact form elements, and services to implement any creative ideas with WordPress plugins.

HTML website templates may have have different applications. You can get css templates free download for templates with google maps, also make an HTML website template for making other templates free. Many designers may know that there are no ways to learn how to make a CSS website and with free download for making landing page HTML template. Today many contributors deliver html code template, expecting to get feedback in return that they care and appreciate since, for many people, it may be a good start or change in their work and careers.

One Page Responsive HTML Templates

What may you also expect visiting a template download service for HTML web samples? You can also get WordPress and an HTML website template designed since free WordPress themes are usually offered together with an HTML page template. You can share your responsive template if you like. New themes are always in demand on large learning and start up communities and forum sites. Businesses prefer fresh projects that they can get from HTML theme download resources. And for some specific uses like, for example, admin templates, simple HTML templates have big interest and marketing value. And HTML website template with CSS templates may include free Bootstrap templates for building HTML5 site templates.

If you need a free website template, for example, real estate HTML template, HTML creative agency template for a bootstrap 4 website template or bootstrap 4 template, you can build a page HTML template. There are many lms online courses on how to make HTML design templates. However, no kits are providing a skip to main content for an online course. You can start with a website template HTML builder to make a multipurpose html website with templates html5 based and study a tutorial how to design HTML website only then skip to main.

Источник

Читайте также:  Slider with thumbnails html
Оцените статью