- Saved searches
- Use saved searches to filter your results more quickly
- License
- zxuqian/html-css-examples
- Name already in use
- Sign In Required
- Launching GitHub Desktop
- Launching GitHub Desktop
- Launching Xcode
- Launching Visual Studio Code
- Latest commit
- Git stats
- Files
- README.md
- About
- HTML Web Page Examples with Source Code
- HTML Web Page Example 1
- HTML WebPage Example 2
- HTML Code Example 3 (Offer Page)
- HTML Code Example 4
- Conclusion
- HTML Styles — CSS
- CSS = Styles and Colors
- What is CSS?
- Using CSS
- Inline CSS
- Example
- A Blue Heading
- Internal CSS
- Example
- This is a heading
- External CSS
- Example
- This is a heading
- «styles.css»:
- CSS Colors, Fonts and Sizes
- Example
- This is a heading
- CSS Border
- Example
- CSS Padding
- Example
- CSS Margin
- Example
- Link to External CSS
- Example
- Example
- Example
- Chapter Summary
- HTML Exercises
- HTML Style Tags
Saved searches
Use saved searches to filter your results more quickly
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
A collection of HTML and CSS examples, including effects and UIs.
License
zxuqian/html-css-examples
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Sign In Required
Please sign in to use Codespaces.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching Xcode
If nothing happens, download Xcode and try again.
Launching Visual Studio Code
Your codespace will open once ready.
There was a problem preparing your codespace, please try again.
Latest commit
Git stats
Files
Failed to load latest commit information.
README.md
This repository contains the source code for my videos at Bilibili, 峰华前端工程师
Text in videos and codes are primarily in Chinese, But you can use this repository without knowing Chinese. Just read the critical part.
You can use this repository for inspirations and cheatsheets.
Each folder contains the source code of HTML and CSS examples, including:
- CSS/SVG Animation
- Shadows/Glowing/Glass Effects
- Responsive Layout
- Type-Writer Effect
- Face Recognition
- 3D Transformations
- Native Canvas
- and more.
Or scan the QR code below:
Currently, I have no contribution plans, but If you have any good examples, feel free to open an issue or submit a PR.
About
A collection of HTML and CSS examples, including effects and UIs.
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:
- Container — The complete HTML web page is wrapped in a container. The container is a div element with the class container .
- Header — Inside the container, we have a header element that contains the logo and the navigation menu.
- Aside — Aside contains the profile picture and other navigational links.
- Main — The main element contains the profile information. Like the name, the career, the skills, the contact form, etc.
- 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; >.footerMr. Camel
- Home
- Career
- Contact
- About
"Do something important in life. I convert green grass to code."
- Mr Camel
About MeI 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 1 SKILL 2 SKILL 3 Cleaning kaktus in your backyard Storing some fat for you Taking you through the desert Email:
Mobile: