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

Simple HTML HomePage

Содержание
  1. Website Homepage Design With Html Code
  2. Design Web Page in HTML
  3. Design a web page using HTML and CSS
  4. Home Page Design With HTML CSS
  5. HTML Web Page Examples With Source Code And Keypoints
  6. How to Code a Website
  7. Sample HTML Code For Homepage
  8. Introduction
  9. Look and Feel
  10. Structure Of Homepage
  11. Step 1: Create a basic HTML page
  12. Header
  13. Main
  14. Footer
  15. Step 2: Style The Elements Using CSS
  16. Complete Sample HTML Code For Homepage
  17. Conclusion

Website Homepage Design With Html Code

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. 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

 
 
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.

More Info Home About Contact
Social Links
@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 < text-decoration: none; color: #a1a1a1; padding: 10px 20px; > @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.

Design Web Page in HTML

There are some basic steps considered to design web pages using HTML are as follows: Designing Layout: Before actually starting to …

Design a web page using HTML and CSS

We have used classes like section, section-left which is used in CSS to give a proper styling, as it will make the web page more attractive.. …

Home Page Design With HTML CSS

Home Page Design With HTML CSS. it’s very simple for design and also download the full source code from our site include HTML CSS javascript source code. You can view another article : HTML5 Element List, tags 5 Best CSS Learning Website 10 best Web Design Learning Site(Free) Home Page Design With HTML CSS Step-1

        
 
 
Welcome To RRF
 
 
 Home    | Gallery   | Contract us   | About US   
 
 
Loging Hear 
 
ID            :
 
Password :
 		  
 
  
 
 
  
 
 
  
 
 
 
   
I can take your creative web design and convert it into a HTML website. Full HTML5 & CSS3 Cross-Browser Compatible! (Firefox,IE9+, Chrome, Safari, Opera) Optimized Code Responsive Design (optional via Bootstrap) Check out front end develop work links below i will create fully professional website Responsive Design 10 Pages Include Source Code Design Customization Content Upload BASIC Package Here i am offering a Unit, feel free to connect me, for more details.. thanks Responsive Design 1 Page Include Source Code Design Customization Content Upload I Will Fix Your Html, Css, WordPress, Asp, Php Bugs Facing difficulty in programming? Unable to catch the bugs? Leave it to me! I will fix your html, css, wordpress, asp, php bugs and show you what the problem was. P.S. The delivery time depends on how complicated the problem is, does not necessary a few days. If it's just a minor change, it might be completed within an hour or a few hours when I am online. The time is negotiable too. So, always remember to message me first before placing the order ya. Thank you :)
 
 
Loging Hear 
 
ID            :
 
Password :
 		 
 
 All Right Reserved © RRF

HTML Web Page Examples With Source Code And Keypoints

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 camel profile is designed in HTML:

@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 servive 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:

How to Code a Website

7. Customize Your Website With HTML and CSS. Let’s work on the homepage of the design first. This is going to show us how to replace the graphics, texts, and tune everything up in general. We’ve talked about the …

SOMETHING
This is a link to my homepage
Hello, world!
My first web page.
 p < font-size: 18px; >.normal-text < font-size: 18px; >
.
.
Find Out More
.
 .font-weight-light < font-weight: 300; >
Your Favorite .
Admire my HTML website!
Start Bootstrap can .
Paragraph 2
Red text
 p.red < color: #FF0000; >
.text-orange < color: #f4623a !important; >
At Your Service
 .SOMECLASS < font-family: "Merriweather", Roboto, sans-serif; font-size: 18px; >.text-xxl < font-size: 50px; >
At Your Service
.
.
A paragraph of text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor.
Subhead
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet.
Subhead
Lorem ipsum dolor sit amet.
SubheadAboutAbout

Источник

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.

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.

Источник

Читайте также:  Вывод через echo php
Оцените статью