Complete CSS Course - Styling Your HTML Projects Class 4
Uploaded by
lekhrajsaini7000Complete CSS Course - Styling Your HTML Projects Class 4
Uploaded by
lekhrajsaini7000Complete CSS Course: Styling Your HTML Projects
Building on Your HTML Knowledge with Professional Styling
Table of Contents
1. Introduction to CSS
2. CSS Selectors
3. CSS Properties - Text and Fonts
4. CSS Box Model
5. Colors and Backgrounds
6. CSS Layout - Positioning
7. Flexbox Layout
8. CSS Grid Layout
9. Responsive Design
10. CSS Animations and Transitions
11. Complete Project Styling
1. Introduction to CSS
What is CSS and Why Use It?
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of
HTML documents. While HTML provides the structure and content, CSS controls how that
content looks – colors, fonts, spacing, layout, and even animations.
The Problem CSS Solves
Remember your HTML projects? They work perfectly but look plain. Let’s see the difference
CSS makes using your first HTML page:
Your Original HTML (from Exercise 1):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Me - [Your Name]</title>
</head>
<body>
<h1>Hello, I'm [Your Name]!</h1>
<p>Welcome to my first HTML webpage.</p>
<p>I'm learning HTML and this is my practice page.</p>
</body>
</html>
This displays as plain black text on white background. Now let’s add CSS to transform it!
CSS Syntax and Structure
CSS consists of selectors and declarations:
selector {
property: value;
another-property: another-value;
}
Basic CSS Example
h1 {
color: blue;
font-size: 36px;
text-align: center;
}
This CSS rule: - Selector: h1 targets all h1 elements - Declaration block: Everything inside
{ } - Declarations: color: blue; is one declaration - Property: color is what we want to
change - Value: blue is what we’re changing it to
Three Ways to Add CSS
1. Inline CSS (Avoid when possible)
Directly in HTML elements using the style attribute:
<h1 style="color: blue; font-size: 36px;">Hello, I'm [Your Name]!</h1>
Pros: Quick for testing Cons: Mixes presentation with content, hard to maintain
2. Internal CSS (Good for single pages)
In the <head> section using <style> tags:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Me - [Your Name]</title>
<style>
h1 {
color: blue;
font-size: 36px;
text-align: center;
}
p {
color: #333;
line-height: 1.6;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Hello, I'm [Your Name]!</h1>
<p>Welcome to my first HTML webpage.</p>
<p>I'm learning HTML and this is my practice page.</p>
</body>
</html>
3. External CSS (Best practice)
In a separate .css file:
[Link]:
h1 {
color: blue;
font-size: 36px;
text-align: center;
}
p {
color: #333;
line-height: 1.6;
font-family: Arial, sans-serif;
}
[Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Me - [Your Name]</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Hello, I'm [Your Name]!</h1>
<p>Welcome to my first HTML webpage.</p>
<p>I'm learning HTML and this is my practice page.</p>
</body>
</html>
CSS Comments
Comments help document your code:
/* This is a single-line comment */
/*
This is a
multi-line comment
Used for longer explanations
*/
h1 {
color: blue; /* Main heading color */
font-size: 36px; /* Adjust based on design needs */
}
🛠️ Practice Exercise 1.1: Style Your First HTML Page
Let’s style your first HTML page from the HTML course:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Me - [Your Name]</title>
<style>
/* Reset default margins */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f4f4f4;
padding: 20px;
}
h1 {
color: #2c3e50;
font-size: 2.5em;
text-align: center;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
p {
background-color: white;
padding: 15px;
margin-bottom: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<h1>Hello, I'm [Your Name]!</h1>
<p>Welcome to my first HTML webpage.</p>
<p>I'm learning HTML and CSS, and this is my practice page.</p>
</body>
</html>
2. CSS Selectors
CSS selectors determine which HTML elements your styles apply to. Let’s use your Text
Formatting page from HTML Exercise 2 to learn selectors.
Element Selectors
Target HTML elements directly:
h1 { color: blue; }
h2 { color: green; }
p { color: gray; }
Class and ID Selectors
First, let’s update your Text Formatting HTML with classes and IDs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Formatting Examples</title>
<style>
/* ID Selector - Use # */
#main-title {
color: #2c3e50;
text-align: center;
border-bottom: 3px solid #3498db;
padding-bottom: 10px;
}
/* Class Selector - Use . */
.section-title {
color: #34495e;
margin-top: 30px;
margin-bottom: 15px;
}
.highlight {
background-color: yellow;
padding: 2px 4px;
}
.scientific {
font-family: 'Courier New', monospace;
background-color: #ecf0f1;
padding: 10px;
border-left: 4px solid #3498db;
}
/* Multiple classes */
.[Link] {
border: 2px solid red;
padding: 10px;
background-color: #ffe6e6;
}
</style>
</head>
<body>
<h1 id="main-title">HTML Text Formatting Guide</h1>
<h2 class="section-title">Basic Formatting</h2>
<p>This paragraph demonstrates <strong class="highlight">bold
text</strong>,
<em>italic text</em>, and <u>underlined text</u>.</p>
<h2 class="section-title">Scientific Notation</h2>
<p class="scientific">Einstein's famous equation: E = mc<sup>2</sup></p>
<p class="scientific">Chemical formula for water: H<sub>2</sub>O</p>
<p class="important note">This is an important note with multiple
classes!</p>
</body>
</html>
Descendant and Child Selectors
Let’s style your Navigation Website (Exercise 3) with advanced selectors:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio - Home</title>
<style>
/* Descendant selector: any a inside nav */
nav a {
color: #3498db;
text-decoration: none;
padding: 5px 10px;
}
/* Child selector: direct li children of ul */
ul > li {
list-style: none;
display: inline-block;
margin-right: 10px;
}
/* Adjacent sibling selector */
h2 + p {
font-size: 1.1em;
color: #666;
font-style: italic;
}
/* General sibling selector */
h2 ~ ul {
background-color: #f8f9fa;
padding: 15px;
border-radius: 5px;
}
/* Attribute selectors */
a[target="_blank"] {
font-weight: bold;
}
a[href^="[Link] {
color: #e74c3c;
}
a[href^="[Link] {
color: #27ae60;
}
/* Combining selectors */
nav > a[href="#intro"] {
background-color: #3498db;
color: white;
border-radius: 3px;
}
</style>
</head>
<body>
<nav>
<a href="[Link]">Home</a> |
<a href="[Link]">About</a> |
<a href="[Link]">Portfolio</a> |
<a href="[Link]">Contact</a>
</nav>
<h1>Welcome to My Portfolio</h1>
<h2 id="intro">Introduction</h2>
<p>Hello! I'm a web developer learning HTML and CSS.</p>
<h2 id="skills">My Skills</h2>
<p>I'm currently learning:</p>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
<footer>
<p>Connect with me:</p>
<a href="[Link] |
<a href="[Link] |
<a href="[Link] target="_blank"
rel="noopener">GitHub</a>
</footer>
</body>
</html>
Pseudo-classes
Interactive states and structural pseudo-classes:
/* Link states */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; background-color: yellow; }
a:active { color: orange; }
/* Form states */
input:focus {
outline: 2px solid #3498db;
background-color: #ecf0f1;
}
input:disabled {
background-color: #ddd;
cursor: not-allowed;
}
/* Structural pseudo-classes */
li:first-child { font-weight: bold; }
li:last-child { color: red; }
li:nth-child(even) { background-color: #f4f4f4; }
li:nth-child(odd) { background-color: white; }
More examples:
/* Link-related pseudo-classes (in LVHA order - LoVe HAte) */
a:link {
/* Unvisited links */
color: blue;
a:visited {
/* Visited links */
color: purple;
a:hover {
/* Mouse hovering over element */
color: red;
background-color: yellow;
a:active {
/* Element being clicked/activated */
color: orange;
}
/* Focus state - important for accessibility */
input:focus {
outline: 2px solid blue;
background-color: #f0f8ff;
/* Focus-visible - only shows focus ring for keyboard navigation */
button:focus-visible {
outline: 3px solid orange;
/* Focus-within - parent has focused child */
form:focus-within {
background-color: #f5f5f5;
border: 2px solid blue;
🛠️ Practice Exercise 2.1: Style Your Restaurant Menu
Let’s apply selectors to your Restaurant Menu from HTML Exercise 4:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bella's Restaurant - Menu</title>
<style>
/* Reset and base styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Georgia, serif;
line-height: 1.6;
color: #333;
background: linear-gradient(to bottom, #f5f5f5, #e8e8e8);
}
/* Main title */
h1 {
text-align: center;
color: #8B4513;
font-size: 3em;
margin: 30px 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
/* Section titles */
h2 {
color: #654321;
border-bottom: 2px solid #8B4513;
padding-bottom: 5px;
margin: 25px 20px 15px;
}
/* Today's Specials list */
h2:first-of-type + ul {
background-color: #fff3e0;
padding: 15px 40px;
margin: 0 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* Appetizers ordered list */
ol {
margin: 0 20px;
padding-left: 40px;
}
ol li {
margin-bottom: 10px;
color: #555;
}
ol li:hover {
color: #8B4513;
cursor: pointer;
transform: translateX(5px);
transition: all 0.3s ease;
}
/* Tables */
table {
width: calc(100% - 40px);
margin: 20px;
border-collapse: collapse;
background-color: white;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
table caption {
font-size: 1.2em;
margin-bottom: 10px;
color: #8B4513;
font-style: italic;
}
th {
background-color: #8B4513;
color: white;
padding: 12px;
text-align: left;
}
td {
padding: 10px 12px;
border-bottom: 1px solid #ddd;
}
tr:hover {
background-color: #f5f5f5;
}
/* Price column */
td:last-child {
font-weight: bold;
color: #27ae60;
}
/* Definition list (Beverages) */
dl {
margin: 0 20px;
background-color: white;
padding: 20px;
border-radius: 8px;
}
dt {
font-weight: bold;
color: #8B4513;
margin-top: 15px;
font-size: 1.1em;
}
dt:first-child {
margin-top: 0;
}
dd {
margin-left: 20px;
margin-top: 5px;
color: #666;
}
/* Desserts table special styling */
table:last-of-type th[colspan="2"] {
text-align: center;
background-color: #d4a574;
}
</style>
</head>
<body>
<h1>Bella's Restaurant Menu</h1>
<h2>Today's Specials</h2>
<ul>
<li>Grilled Salmon with Lemon Butter</li>
<li>Chicken Parmesan with Marinara Sauce</li>
<li>Vegetarian Pasta Primavera</li>
</ul>
<h2>Appetizers</h2>
<ol>
<li>Bruschetta - $8.99</li>
<li>Calamari Rings - $10.99</li>
<li>Caesar Salad - $7.99</li>
<li>Soup of the Day - $6.99</li>
</ol>
<h2>Main Courses</h2>
<table>
<caption>Dinner Menu</caption>
<thead>
<tr>
<th>Dish</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ribeye Steak</td>
<td>12oz grilled ribeye with mashed potatoes</td>
<td>$32.99</td>
</tr>
<tr>
<td>Lobster Tail</td>
<td>Butter-poached lobster with rice pilaf</td>
<td>$45.99</td>
</tr>
<tr>
<td>Vegetable Curry</td>
<td>Spicy curry with seasonal vegetables</td>
<td>$18.99</td>
</tr>
</tbody>
</table>
<h2>Beverages</h2>
<dl>
<dt>Soft Drinks</dt>
<dd>Coca-Cola, Sprite, Orange Juice - $3.99</dd>
<dt>Hot Beverages</dt>
<dd>Coffee - $2.99</dd>
<dd>Tea - $2.49</dd>
<dd>Hot Chocolate - $3.49</dd>
<dt>Alcoholic Beverages</dt>
<dd>House Wine - $7.99/glass</dd>
<dd>Draft Beer - $5.99</dd>
</dl>
</body>
</html>
3. CSS Properties - Text and Fonts
Let’s transform the text in your HTML projects with typography styling.
Font Properties
Font Family
/* Generic font families */
body { font-family: serif; } /* Times New Roman, Georgia */
body { font-family: sans-serif; } /* Arial, Helvetica */
body { font-family: monospace; } /* Courier New, Consolas */
body { font-family: cursive; } /* Comic Sans MS */
body { font-family: fantasy; } /* Impact */
/* Font stacks (fallback system) */
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h1 {
font-family: Georgia, 'Times New Roman', Times, serif;
}
code {
font-family: 'Courier New', Courier, monospace;
}
Font Size
/* Absolute units */
p { font-size: 16px; } /* Pixels */
p { font-size: 12pt; } /* Points */
/* Relative units */
p { font-size: 1em; } /* Relative to parent */
p { font-size: 1.5rem; } /* Relative to root */
p { font-size: 120%; } /* Percentage */
p { font-size: 2vw; } /* Viewport width */
/* Keywords */
p { font-size: small; }
p { font-size: medium; }
p { font-size: large; }
p { font-size: x-large; }
Font Weight and Style
/* Font weight */
p { font-weight: normal; } /* 400 */
p { font-weight: bold; } /* 700 */
p { font-weight: 300; } /* Light */
p { font-weight: 500; } /* Medium */
p { font-weight: 900; } /* Black */
/* Font style */
p { font-style: normal; }
p { font-style: italic; }
p { font-style: oblique; }
/* Font variant */
p { font-variant: normal; }
p { font-variant: small-caps; }
Text Properties
Text Color and Alignment
/* Text color */
p { color: blue; }
p { color: #3498db; }
p { color: rgb(52, 152, 219); }
p { color: rgba(52, 152, 219, 0.8); }
p { color: hsl(204, 70%, 53%); }
/* Text alignment */
p { text-align: left; }
p { text-align: right; }
p { text-align: center; }
p { text-align: justify; }
Text Decoration and Transform
/* Text decoration */
a { text-decoration: none; }
a { text-decoration: underline; }
a { text-decoration: overline; }
a { text-decoration: line-through; }
a { text-decoration: underline dotted red; }
/* Text transform */
h1 { text-transform: uppercase; }
h2 { text-transform: lowercase; }
h3 { text-transform: capitalize; }
Line Height and Letter Spacing
/* Line height */
p { line-height: 1.6; } /* Unitless (recommended) */
p { line-height: 24px; } /* Fixed */
p { line-height: 150%; } /* Percentage */
/* Letter spacing */
h1 { letter-spacing: 2px; }
h1 { letter-spacing: 0.1em; }
h1 { letter-spacing: -1px; } /* Tighten */
/* Word spacing */
p { word-spacing: 5px; }
p { word-spacing: 0.2em; }
Web Fonts and Google Fonts
Using Google Fonts
Add to HTML <head>:
<link
href="[Link]
=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
Then use in CSS:
body {
font-family: 'Roboto', sans-serif;
}
h1, h2 {
font-family: 'Playfair Display', serif;
}
🛠️ Practice Exercise 3.1: Style Your Photo Gallery Typography
Let’s apply typography to your Photo Gallery (Exercise 5):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Photo Gallery</title>
<link
href="[Link]
=Merriweather:wght@300&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Merriweather', serif;
font-weight: 300;
line-height: 1.7;
color: #333;
background-color: #f8f8f8;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 3rem;
text-align: center;
color: #2c3e50;
text-transform: uppercase;
letter-spacing: 3px;
margin: 40px 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
h2 {
font-family: 'Montserrat', sans-serif;
font-weight: 300;
font-size: 2rem;
color: #34495e;
margin: 30px 20px 20px;
border-left: 4px solid #3498db;
padding-left: 15px;
}
h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 1.3rem;
color: #555;
text-transform: uppercase;
letter-spacing: 1px;
margin: 25px 20px 15px;
}
figure {
margin: 20px;
text-align: center;
}
figcaption {
font-style: italic;
color: #666;
margin-top: 10px;
font-size: 0.9rem;
line-height: 1.4;
}
}
content: " 📸
figcaption::before {
";
/* Featured photo special styling */
h2:first-of-type + figure figcaption {
font-size: 1.1rem;
color: #2c3e50;
font-weight: 600;
background-color: rgba(52, 152, 219, 0.1);
padding: 10px;
border-radius: 5px;
}
/* Image styling */
img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
img:hover {
transform: scale(1.05);
}
/* Audio and video sections */
h2:nth-of-type(4),
h2:nth-of-type(5) {
color: #e74c3c;
}
audio, video {
margin: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
/* Links styling */
area {
cursor: pointer;
}
</style>
</head>
<body>
<h1>My Travel Photo Gallery</h1>
<h2>Featured Photo</h2>
<figure>
<img
src="[Link]
alt="Beautiful mountain landscape at sunset"
width="800"
height="600"
title="Click to view full size">
<figcaption>Sunset at Mount Everest Base Camp - April
2024</figcaption>
</figure>
<h2>Photo Collection</h2>
<h3>Nature Photography</h3>
<img src="[Link]
alt="Dense forest" width="300" height="200">
<img src="[Link]
alt="Ocean waves" width="300" height="200">
<img src="[Link]
alt="Sand dunes" width="300" height="200">
<h3>City Views</h3>
<figure>
<img
src="[Link] alt="New
York skyline" width="400" height="300">
<figcaption>New York City at night</figcaption>
</figure>
<figure>
<img
src="[Link]
alt="Tokyo streets" width="400" height="300">
<figcaption>Busy streets of Tokyo</figcaption>
</figure>
</body>
</html>
4. CSS Box Model
The CSS Box Model is fundamental to understanding layout. Every HTML element is a box
with content, padding, border, and margin.
Understanding the Box Model
/* The Box Model layers from inside out:
1. Content - The actual content (text, images)
2. Padding - Space between content and border
3. Border - The edge of the element
4. Margin - Space outside the border */
.box {
/* Content dimensions */
width: 300px;
height: 200px;
/* Padding - inside spacing */
padding: 20px;
/* Border */
border: 2px solid black;
/* Margin - outside spacing */
margin: 10px;
/* Total width = 300 + (20×2) + (2×2) + (10×2) = 364px */
}
Box-Sizing Property
/* Default box model (content-box) */
.box-default {
box-sizing: content-box;
width: 300px;
padding: 20px;
border: 2px solid black;
/* Actual width = 300 + 40 + 4 = 344px */
}
/* Border-box model (includes padding and border) */
.box-border {
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 2px solid black;
/* Actual width = 300px (padding and border included) */
}
/* Best practice: Apply to all elements */
* {
box-sizing: border-box;
}
Margin and Padding
Margin (Outside Spacing)
/* Individual sides */
.element {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
}
/* Shorthand */
.element {
margin: 10px; /* All sides */
margin: 10px 20px; /* Vertical | Horizontal */
margin: 10px 20px 30px; /* Top | Horizontal | Bottom */
margin: 10px 20px 30px 40px; /* Top | Right | Bottom | Left */
}
/* Auto margin for centering */
.center {
width: 80%;
margin: 0 auto; /* Centers horizontally */
}
/* Negative margins */
.overlap {
margin-top: -20px; /* Pulls element up */
}
Padding (Inside Spacing)
/* Individual sides */
.element {
padding-top: 15px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 20px;
}
/* Shorthand (same as margin) */
.element {
padding: 15px; /* All sides */
padding: 15px 20px; /* Vertical | Horizontal */
padding: 15px 20px 25px; /* Top | Horizontal | Bottom */
padding: 10px 15px 20px 25px; /* Top | Right | Bottom | Left */
}
Borders
/* Border shorthand */
.element {
border: 2px solid #333;
}
/* Individual properties */
.element {
border-width: 2px;
border-style: solid;
border-color: #333;
}
/* Border styles */
.borders {
border-style: solid; /* Solid line */
border-style: dashed; /* Dashed line */
border-style: dotted; /* Dotted line */
border-style: double; /* Double line */
border-style: groove; /* 3D grooved */
border-style: ridge; /* 3D ridged */
border-style: inset; /* 3D inset */
border-style: outset; /* 3D outset */
border-style: none; /* No border */
}
/* Individual sides */
.element {
border-top: 2px solid red;
border-right: 1px dashed blue;
border-bottom: 3px double green;
border-left: none;
}
/* Border radius (rounded corners) */
.rounded {
border-radius: 10px; /* All corners */
border-radius: 10px 20px; /* Top-left/bottom-right |
Top-right/bottom-left */
border-radius: 10px 20px 30px 40px; /* Each corner individually */
}
/* Circle */
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
}
Width and Height
/* Fixed dimensions */
.fixed {
width: 500px;
height: 300px;
}
/* Percentage (relative to parent) */
.responsive {
width: 80%;
height: 50%;
}
/* Min and max constraints */
.flexible {
width: 100%;
max-width: 1200px;
min-width: 300px;
min-height: 200px;
max-height: 600px;
}
/* Auto dimensions */
.auto {
width: auto; /* Default - takes available width */
height: auto; /* Default - adjusts to content */
}
🛠️ Practice Exercise 4.1: Style Your Contact Form with Box Model
Let’s apply box model concepts to your Contact Form (Exercise 6):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
h1 {
text-align: center;
color: white;
margin-bottom: 30px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
form {
max-width: 600px;
margin: 0 auto;
background: white;
border-radius: 10px;
box-shadow: 0 15px 35px rgba(0,0,0,0.2);
overflow: hidden;
}
fieldset {
border: none;
padding: 25px 30px;
margin: 0;
border-bottom: 1px solid #e0e0e0;
}
fieldset:last-of-type {
border-bottom: none;
}
legend {
font-size: 1.2em;
font-weight: 600;
color: #667eea;
padding: 0 5px;
margin-bottom: 15px;
}
label {
display: inline-block;
margin-bottom: 5px;
color: #555;
font-weight: 500;
}
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
width: 100%;
padding: 10px 12px;
margin-bottom: 15px;
border: 2px solid #e0e0e0;
border-radius: 5px;
font-size: 14px;
transition: all 0.3s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
textarea {
resize: vertical;
min-height: 100px;
}
/* Radio and Checkbox styling */
input[type="radio"],
input[type="checkbox"] {
margin-right: 8px;
margin-bottom: 10px;
}
input[type="radio"] + label,
input[type="checkbox"] + label {
margin-right: 20px;
cursor: pointer;
}
/* Submit and Reset buttons */
input[type="submit"],
input[type="reset"] {
padding: 12px 30px;
margin: 10px 10px 20px 0;
border: none;
border-radius: 5px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
input[type="submit"] {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
input[type="submit"]:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
input[type="reset"] {
background: #f0f0f0;
color: #666;
}
input[type="reset"]:hover {
background: #e0e0e0;
}
/* Required field indicator */
label::after {
content: attr(data-required);
color: #e74c3c;
margin-left: 3px;
}
/* Small text */
small {
display: block;
text-align: center;
color: #888;
margin-top: 20px;
padding: 0 30px 20px;
}
</style>
</head>
<body>
<h1>Contact Us</h1>
<form action="/submit-contact" method="POST">
<fieldset>
<legend>Personal Information</legend>
<label for="firstname" data-required="*">First Name:</label>
<input type="text" id="firstname" name="firstname" required>
<label for="lastname" data-required="*">Last Name:</label>
<input type="text" id="lastname" name="lastname" required>
<label for="email" data-required="*">Email:</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890">
</fieldset>
<fieldset>
<legend>Your Message</legend>
<label for="subject" data-required="*">Subject:</label>
<select id="subject" name="subject" required>
<option value="">-- Select Subject --</option>
<option value="general">General Inquiry</option>
<option value="support">Technical Support</option>
<option value="sales">Sales Question</option>
<option value="feedback">Feedback</option>
</select>
<label>Priority:</label>
<div>
<input type="radio" id="low" name="priority" value="low"
checked>
<label for="low">Low</label>
<input type="radio" id="medium" name="priority"
value="medium">
<label for="medium">Medium</label>
<input type="radio" id="high" name="priority" value="high">
<label for="high">High</label>
</div>
<label for="message" data-required="*">Message:</label>
<textarea id="message" name="message" required placeholder="Enter
your message here..."></textarea>
</fieldset>
<fieldset>
<legend>Additional Options</legend>
<input type="checkbox" id="newsletter" name="newsletter"
value="yes">
<label for="newsletter">Subscribe to newsletter</label><br>
<input type="checkbox" id="contact_me" name="contact_me"
value="yes">
<label for="contact_me">Contact me by phone</label>
</fieldset>
<div style="padding: 0 30px;">
<input type="checkbox" id="terms" name="terms" required>
<label for="terms" data-required="*">I agree to the terms and
conditions</label><br>
<input type="submit" value="Send Message">
<input type="reset" value="Clear Form">
</div>
<small>* Required fields</small>
</form>
</body>
</html>
5. Colors and Backgrounds
Color Values
CSS offers multiple ways to specify colors:
/* Color Keywords */
p { color: red; }
p { color: blue; }
p { color: transparent; }
/* Hexadecimal */
p { color: #ff0000; } /* Red */
p { color: #00ff00; } /* Green */
p { color: #0000ff; } /* Blue */
p { color: #f00; } /* Shorthand for #ff0000 */
/* RGB (Red, Green, Blue) */
p { color: rgb(255, 0, 0); } /* Red */
p { color: rgb(0, 255, 0); } /* Green */
p { color: rgb(0, 0, 255); } /* Blue */
/* RGBA (RGB with Alpha/transparency) */
p { color: rgba(255, 0, 0, 0.5); } /* 50% transparent red */
p { color: rgba(0, 0, 0, 0.8); } /* 80% opaque black */
/* HSL (Hue, Saturation, Lightness) */
p { color: hsl(0, 100%, 50%); } /* Red */
p { color: hsl(120, 100%, 50%); } /* Green */
p { color: hsl(240, 100%, 50%); } /* Blue */
/* HSLA (HSL with Alpha) */
p { color: hsla(0, 100%, 50%, 0.5); } /* 50% transparent red */
Background Properties
Background Color
/* Solid color backgrounds */
body { background-color: #f4f4f4; }
div { background-color: rgb(240, 240, 240); }
section { background-color: rgba(0, 0, 0, 0.5); }
Background Images
/* Basic background image */
.hero {
background-image: url('[Link]');
}
/* Multiple background images */
.layered {
background-image: url('[Link]'), url('[Link]');
}
/* Background repeat */
.pattern {
background-image: url('[Link]');
background-repeat: repeat; /* Default */
background-repeat: repeat-x; /* Horizontal only */
background-repeat: repeat-y; /* Vertical only */
background-repeat: no-repeat; /* No repeat */
}
/* Background position */
.positioned {
background-image: url('[Link]');
background-position: center;
background-position: top left;
background-position: bottom right;
background-position: 50% 50%;
background-position: 10px 20px;
}
/* Background size */
.sized {
background-image: url('[Link]');
background-size: cover; /* Cover entire container */
background-size: contain; /* Fit inside container */
background-size: 100% 100%; /* Stretch to fill */
background-size: 200px 300px; /* Specific dimensions */
}
/* Background attachment */
.fixed-bg {
background-image: url('[Link]');
background-attachment: fixed; /* Stays in place on scroll */
background-attachment: scroll; /* Scrolls with content (default) */
background-attachment: local; /* Scrolls with element content */
}
/* Shorthand */
.complete-bg {
background: #f4f4f4 url('[Link]') no-repeat center/cover fixed;
}
Gradients
Linear Gradients
/* Basic linear gradient */
.gradient1 {
background: linear-gradient(to right, #ff0000, #0000ff);
}
/* Direction options */
.gradient2 {
background: linear-gradient(to bottom, #fff, #000); /* Top to
bottom (default) */
background: linear-gradient(to top, #000, #fff); /* Bottom to
top */
background: linear-gradient(to right, #f00, #00f); /* Left to
right */
background: linear-gradient(to bottom right, #f00, #00f); /* Diagonal */
background: linear-gradient(45deg, #f00, #00f); /* Specific
angle */
}
/* Multiple color stops */
.gradient3 {
background: linear-gradient(to right,
#ff0000 0%,
#ffff00 25%,
#00ff00 50%,
#0000ff 75%,
#ff00ff 100%
);
}
/* Repeating linear gradient */
.gradient4 {
background: repeating-linear-gradient(
45deg,
#fff 0px,
#fff 10px,
#000 10px,
#000 20px
);
}
Radial Gradients
/* Basic radial gradient */
.radial1 {
background: radial-gradient(circle, #ff0000, #0000ff);
}
/* Shape and position */
.radial2 {
background: radial-gradient(ellipse at center, #fff, #000);
background: radial-gradient(circle at top left, #f00, #00f);
background: radial-gradient(circle at 20% 80%, #f00, #00f);
}
/* Size keywords */
.radial3 {
background: radial-gradient(circle closest-side, #fff, #000);
background: radial-gradient(circle farthest-corner, #fff, #000);
}
🛠️ Practice Exercise 5.1: Add Colors and Backgrounds to Your Semantic Blog
Let’s enhance your Semantic Blog Layout (Exercise 7) with colors and backgrounds:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tech Blog - Latest Web Development Trends</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, Oxygen, Ubuntu, sans-serif;
line-height: 1.6;
color: #333;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background-attachment: fixed;
min-height: 100vh;
}
/* Header styling */
header {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 2px 20px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 100;
}
header h1 {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
padding: 20px;
font-size: 2.5rem;
text-align: center;
}
header p {
text-align: center;
color: #666;
padding: 0 20px 10px;
}
/* Navigation */
nav {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 15px 0;
}
nav ul {
list-style: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
nav li {
margin: 0 15px;
}
nav a {
color: white;
text-decoration: none;
font-weight: 500;
padding: 8px 15px;
border-radius: 20px;
transition: all 0.3s ease;
}
nav a:hover {
background: rgba(255,255,255,0.2);
transform: translateY(-2px);
}
/* Main content area */
main {
max-width: 1200px;
margin: 30px auto;
padding: 0 20px;
display: flex;
gap: 30px;
}
/* Article styling */
article {
flex: 2;
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
article header {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
padding: 30px;
position: relative;
}
article header h2 {
font-size: 2rem;
margin-bottom: 10px;
}
article header p {
color: rgba(255,255,255,0.9);
font-size: 0.9rem;
}
article header time {
background: rgba(255,255,255,0.2);
padding: 2px 8px;
border-radius: 4px;
}
/* Section styling */
article section {
padding: 30px;
border-bottom: 1px solid #eee;
}
article section:last-of-type {
border-bottom: none;
}
article section h3 {
color: #667eea;
margin-bottom: 15px;
font-size: 1.5rem;
}
/* Aside within article */
article aside {
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
margin: 20px 0;
padding: 20px;
border-radius: 10px;
border-left: 4px solid #ff6b6b;
}
article aside h4 {
color: #d63031;
margin-bottom: 10px;
}
/* Code styling */
code {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 2px 6px;
border-radius: 4px;
font-family: 'Courier New', monospace;
}
/* Mark highlight */
mark {
background: linear-gradient(to right, #f9ca24, #f0932b);
padding: 2px 4px;
border-radius: 3px;
}
/* Details/Summary */
details {
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
margin: 15px 0;
}
summary {
cursor: pointer;
font-weight: bold;
color: #667eea;
padding: 10px;
background: white;
border-radius: 5px;
transition: all 0.3s ease;
}
summary:hover {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
/* Figure and images */
figure {
margin: 20px 0;
text-align: center;
}
figure img {
max-width: 100%;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
figcaption {
color: #666;
font-style: italic;
margin-top: 10px;
font-size: 0.9rem;
}
/* Article footer */
article > footer {
background: #f8f9fa;
padding: 20px 30px;
}
article > footer a {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 5px 15px;
border-radius: 15px;
text-decoration: none;
margin-right: 10px;
display: inline-block;
transition: transform 0.3s ease;
}
article > footer a:hover {
transform: translateY(-2px);
}
/* Sidebar aside */
body > main > aside {
flex: 1;
}
aside > section {
background: white;
border-radius: 15px;
padding: 25px;
margin-bottom: 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
aside h3 {
color: #667eea;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid #f0f0f0;
}
/* Related articles */
section article {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 15px;
margin-bottom: 15px;
border-radius: 8px;
transition: all 0.3s ease;
}
section article:hover {
transform: translateX(5px);
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
section article h3 {
font-size: 1.1rem;
margin-bottom: 5px;
}
section article a {
color: #667eea;
text-decoration: none;
}
section article time {
color: #999;
font-size: 0.85rem;
}
/* Newsletter form */
aside form {
display: flex;
flex-direction: column;
}
aside input[type="email"] {
padding: 10px;
border: 2px solid #e0e0e0;
border-radius: 5px;
margin-bottom: 10px;
}
aside button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s ease;
}
aside button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
/* Popular posts list */
aside ol {
list-style: none;
counter-reset: popular-counter;
}
aside ol li {
counter-increment: popular-counter;
padding: 10px 0;
border-bottom: 1px solid #f0f0f0;
position: relative;
padding-left: 35px;
}
aside ol li::before {
content: counter(popular-counter);
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
width: 25px;
height: 25px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 0.9rem;
}
/* Footer */
body > footer {
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
color: white;
padding: 40px 20px 20px;
margin-top: 50px;
}
footer nav h4 {
color: #ffd700;
margin-bottom: 15px;
}
footer nav ul {
list-style: none;
}
footer nav a {
color: rgba(255,255,255,0.8);
text-decoration: none;
transition: color 0.3s ease;
}
footer nav a:hover {
color: white;
}
footer address {
background: rgba(255,255,255,0.1);
padding: 15px;
border-radius: 8px;
margin: 20px 0;
font-style: normal;
}
footer address a {
color: #ffd700;
text-decoration: none;
}
footer > p {
text-align: center;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.2);
color: rgba(255,255,255,0.8);
}
footer > p a {
color: white;
text-decoration: none;
}
</style>
</head>
<body>
<header>
<h1>Tech Blog</h1>
<p>Your source for web development news and tutorials</p>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#articles">Articles</a></li>
<li><a href="#tutorials">Tutorials</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>Understanding Semantic HTML5: A Complete Guide</h2>
<p>By <a href="/author/jane-doe" style="color: white;">Jane
Doe</a> |
Published on <time datetime="2024-01-20">January 20,
2024</time> |
<data value="15">15 minute read</data>
</p>
</header>
<section>
<h3>Introduction</h3>
<p>Semantic HTML5 has revolutionized how we structure web
content.
In this comprehensive guide, we'll explore the importance
of semantic markup
and how it improves both accessibility and SEO.</p>
</section>
<section>
<h3>What is Semantic HTML?</h3>
<p>Semantic HTML uses HTML markup to reinforce the semantics,
or
<mark>meaning</mark>, of the information in webpages
rather than
merely to define its presentation.</p>
<aside>
<h4>Quick Tip</h4>
<p>Always choose semantic elements over generic divs when
possible.
For example, use <code><nav></code> for
navigation instead
of <code><div class="navigation"></code>.</p>
</aside>
</section>
<section>
<h3>Common Semantic Elements</h3>
<details>
<summary>Click to see the full list</summary>
<ul>
<li><code><header></code> - Page or section
header</li>
<li><code><nav></code> - Navigation links</li>
<li><code><main></code> - Main content</li>
<li><code><article></code> - Self-contained
content</li>
<li><code><section></code> - Thematic
grouping</li>
<li><code><aside></code> - Sidebar content</li>
<li><code><footer></code> - Footer
information</li>
</ul>
</details>
</section>
<footer>
<p>Tags:
<a href="/tag/html5">HTML5</a>
<a href="/tag/semantic">Semantic Web</a>
<a href="/tag/accessibility">Accessibility</a>
</p>
<p>Share this article:
<a href="#">Facebook</a>
<a href="#">Twitter</a>
<a href="#">LinkedIn</a>
</p>
</footer>
</article>
<aside>
<section>
<h3>About the Author</h3>
<p>Jane Doe is a senior web developer with 10 years of
experience...</p>
</section>
<section>
<h3>Newsletter</h3>
<p>Subscribe to get the latest articles delivered to your
inbox.</p>
<form>
<input type="email" placeholder="Enter your email"
required>
<button type="submit">Subscribe</button>
</form>
</section>
<section>
<h3>Popular Posts</h3>
<ol>
<li><a href="#">Getting Started with React</a></li>
<li><a href="#">Understanding CSS Variables</a></li>
<li><a href="#">Web Performance Optimization</a></li>
</ol>
</section>
</aside>
</main>
<footer>
<nav>
<h4>Categories</h4>
<ul>
<li><a href="/html">HTML</a></li>
<li><a href="/css">CSS</a></li>
<li><a href="/javascript">JavaScript</a></li>
<li><a href="/web-design">Web Design</a></li>
</ul>
</nav>
<address>
Contact us at <a
href="[Link]
123 Web Street, Internet City, WWW 12345
</address>
<p>© 2024 Tech Blog. All rights reserved. |
<a href="/privacy">Privacy Policy</a> |
<a href="/terms">Terms of Service</a>
</p>
</footer>
</body>
</html>
6. CSS Layout - Positioning
Understanding CSS positioning is crucial for controlling element placement.
Display Property
/* Block elements (take full width, stack vertically) */
.block {
display: block;
}
/* Inline elements (only take needed width, flow horizontally) */
.inline {
display: inline;
}
/* Inline-block (best of both worlds) */
.inline-block {
display: inline-block;
width: 200px;
height: 100px;
}
/* None (removes from document flow) */
.hidden {
display: none;
}
/* Table display values */
.table { display: table; }
.table-row { display: table-row; }
.table-cell { display: table-cell; }
Position Property
Static (Default)
.static {
position: static;
/* Normal document flow */
/* top, right, bottom, left have no effect */
}
Relative
.relative {
position: relative;
top: 20px; /* Moves down 20px from original position */
left: 30px; /* Moves right 30px from original position */
/* Still occupies original space in document flow */
}
Absolute
.absolute {
position: absolute;
top: 0;
right: 0;
/* Positioned relative to nearest positioned ancestor */
/* Removed from normal document flow */
}
/* Common pattern: parent relative, child absolute */
.parent {
position: relative;
}
.child {
position: absolute;
top: 10px;
left: 10px;
}
Fixed
.fixed {
position: fixed;
top: 0;
left: 0;
/* Positioned relative to viewport */
/* Stays in place when scrolling */
}
/* Fixed header example */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
background: white;
z-index: 1000;
}
Sticky
.sticky {
position: sticky;
top: 20px;
/* Acts like relative until scroll threshold */
/* Then acts like fixed */
}
Float and Clear
/* Float elements */
.float-left {
float: left;
margin-right: 20px;
}
.float-right {
float: right;
margin-left: 20px;
}
/* Clear floats */
.clear {
clear: both; /* Clear both left and right floats */
clear: left; /* Clear left floats only */
clear: right; /* Clear right floats only */
}
/* Clearfix hack for parent containers */
.clearfix::after {
content: "";
display: table;
clear: both;
}
Z-Index and Stacking Context
/* Z-index only works on positioned elements */
.layer1 {
position: relative;
z-index: 1;
}
.layer2 {
position: absolute;
z-index: 10; /* Appears above layer1 */
}
.layer3 {
position: fixed;
z-index: 999; /* Appears above both */
}
/* Negative z-index */
.behind {
position: relative;
z-index: -1; /* Goes behind static elements */
}
🛠️ Practice Exercise 6.1: Create a Fixed Navigation for Your Portfolio
Let’s add advanced positioning to your Personal Portfolio (from HTML course):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>John Doe - Web Developer Portfolio</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
}
/* Fixed Header */
header {
position: fixed;
top: 0;
left: 0;
right: 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
header h1 {
padding: 15px 20px 5px;
font-size: 1.8rem;
}
header p {
padding: 0 20px 10px;
opacity: 0.9;
}
/* Sticky Navigation */
nav {
position: sticky;
top: 90px; /* Below fixed header */
background: rgba(255,255,255,0.95);
backdrop-filter: blur(10px);
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
z-index: 900;
}
nav ul {
list-style: none;
display: flex;
justify-content: center;
padding: 15px 0;
}
nav li {
margin: 0 20px;
}
nav a {
color: #667eea;
text-decoration: none;
font-weight: 500;
padding: 5px 10px;
border-radius: 20px;
transition: all 0.3s ease;
position: relative;
}
nav a:hover {
background: #667eea;
color: white;
}
/* Main content with padding for fixed header */
main {
padding-top: 120px; /* Space for fixed header */
max-width: 1200px;
margin: 0 auto;
}
/* Hero Section with relative positioning */
#home {
position: relative;
padding: 50px 20px;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 400px;
}
#home h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}
/* Floating image with text wrap */
#home img {
float: right;
margin: 0 0 20px 20px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* About Section with positioned elements */
#about {
padding: 50px 20px;
position: relative;
background: white;
}
#about article {
position: relative;
padding-left: 50px;
}
/* Decorative number using absolute positioning */
#about h3::before {
content: "01";
position: absolute;
left: -40px;
top: 0;
font-size: 3rem;
color: rgba(102, 126, 234, 0.2);
font-weight: bold;
}
/* Skills table with sticky header */
#skills {
padding: 50px 20px;
background: #f8f9fa;
}
#skills table {
width: 100%;
border-collapse: collapse;
background: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
#skills thead {
position: sticky;
top: 140px; /* Below fixed header and nav */
background: #667eea;
color: white;
z-index: 10;
}
#skills th,
#skills td {
padding: 15px;
text-align: left;
}
#skills tbody tr:hover {
background: #f0f0f0;
}
/* Projects with card layout using positioning */
#projects {
padding: 50px 20px;
background: white;
}
.project {
position: relative;
margin-bottom: 30px;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
overflow: hidden;
}
/* Project image with overlay */
.project figure {
position: relative;
margin: -20px -20px 20px -20px;
overflow: hidden;
height: 300px;
}
.project img {
width: 100%;
height: 100%;
object-fit: cover;
}
.project figcaption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.8),
transparent);
color: white;
padding: 20px;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.project:hover figcaption {
transform: translateY(0);
}
/* Floating project links */
.project p:last-child {
position: absolute;
top: 20px;
right: 20px;
}
.project p:last-child a {
display: inline-block;
padding: 5px 15px;
background: rgba(255,255,255,0.9);
border-radius: 20px;
text-decoration: none;
margin-left: 10px;
transition: all 0.3s ease;
}
.project p:last-child a:hover {
background: #667eea;
color: white;
}
/* Contact section with fixed background */
#contact {
padding: 50px 20px;
background: linear-gradient(rgba(102, 126, 234, 0.9), rgba(118,
75, 162, 0.9)),
url('[Link]
center/cover fixed;
color: white;
position: relative;
}
#contact form {
max-width: 600px;
margin: 0 auto;
position: relative;
background: rgba(255,255,255,0.1);
padding: 30px;
border-radius: 10px;
backdrop-filter: blur(10px);
}
#contact fieldset {
border: 2px solid rgba(255,255,255,0.3);
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
}
#contact legend {
padding: 0 10px;
font-weight: bold;
}
#contact label {
display: block;
margin-bottom: 5px;
}
#contact input,
#contact select,
#contact textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: none;
border-radius: 5px;
background: rgba(255,255,255,0.9);
color: #333;
}
/* Footer with relative positioning */
footer {
position: relative;
background: #2c3e50;
color: white;
text-align: center;
padding: 30px 20px;
}
/* Back to top button - fixed position */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: #667eea;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 3px 10px rgba(0,0,0,0.3);
z-index: 100;
transition: all 0.3s ease;
}
.back-to-top:hover {
background: #764ba2;
transform: translateY(-5px);
}
/* Clearfix for floated elements */
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<!-- Fixed Header -->
<header>
<h1>John Doe</h1>
<p>Web Developer & Designer</p>
</header>
<!-- Sticky Navigation -->
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<!-- Hero Section -->
<section id="home" class="clearfix">
<h2>Welcome to My Portfolio</h2>
<img src="[Link] alt="Web
development workspace" width="400" height="300">
<p>I'm a passionate web developer creating modern, responsive
websites. With expertise in HTML5, CSS3, and JavaScript, I bring ideas to
life through clean, efficient code.</p>
<p>Scroll down to explore my work and learn more about my journey
in web development.</p>
</section>
<!-- About Section -->
<section id="about">
<h2>About Me</h2>
<article>
<h3>My Journey</h3>
<p>I started learning web development in 2020 and have been
passionate about creating beautiful, functional websites ever since. My
journey began with HTML and CSS, and I've since expanded my skills to include
JavaScript, React, and backend technologies.</p>
<h3>Experience</h3>
<ul>
<li>
<strong>Junior Web Developer</strong> - Tech Company
(2023-Present)
<ul>
<li>Developed responsive websites using HTML5,
CSS3, and JavaScript</li>
<li>Collaborated with design team to implement
UI/UX improvements</li>
</ul>
</li>
</ul>
</article>
</section>
<!-- Skills Section -->
<section id="skills">
<h2>Technical Skills</h2>
<table>
<thead>
<tr>
<th>Category</th>
<th>Skills</th>
<th>Proficiency</th>
</tr>
</thead>
<tbody>
<tr>
<td>Frontend</td>
<td>HTML5, CSS3, JavaScript, React</td>
<td>
<meter value="9" min="0" max="10">9/10</meter>
</td>
</tr>
<tr>
<td>Backend</td>
<td>[Link], PHP, MySQL</td>
<td>
<meter value="7" min="0" max="10">7/10</meter>
</td>
</tr>
<tr>
<td>Tools</td>
<td>Git, VS Code, Figma, Photoshop</td>
<td>
<meter value="8" min="0" max="10">8/10</meter>
</td>
</tr>
</tbody>
</table>
</section>
<!-- Projects Section -->
<section id="projects">
<h2>Featured Projects</h2>
<article class="project">
<figure>
<img src="[Link]
alt="E-commerce project screenshot">
<figcaption>Modern e-commerce platform with shopping cart
functionality</figcaption>
</figure>
<h3>E-Commerce Website</h3>
<p>Built a fully responsive e-commerce website with product
catalog, shopping cart, and checkout system.</p>
<p><strong>Technologies:</strong> HTML5, CSS3, JavaScript,
PHP, MySQL</p>
<p>
<a href="#">View Live</a>
<a href="#">View Code</a>
</p>
</article>
</section>
<!-- Contact Section -->
<section id="contact">
<h2>Get In Touch</h2>
<form action="/contact" method="POST">
<fieldset>
<legend>Contact Form</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5"
required></textarea>
<input type="submit" value="Send Message">
</fieldset>
</form>
</section>
</main>
<!-- Footer -->
<footer>
<p>© 2024 John Doe. All rights reserved.</p>
</footer>
<!-- Back to Top Button -->
<a href="#home" class="back-to-top">↑</a>
</body>
</html>
You might also like
- Introduction to CSS Programming SyllabusNo ratings yetIntroduction to CSS Programming Syllabus5 pages
- CSS Styling and Responsive Design GuideNo ratings yetCSS Styling and Responsive Design Guide56 pages
- Mastering CSS for Responsive Web DesignNo ratings yetMastering CSS for Responsive Web Design20 pages
- The Web Development & Design Textbook - OldNo ratings yetThe Web Development & Design Textbook - Old20 pages
- The CSS Handbook - A Handy Guide To CSS For DevelopersNo ratings yetThe CSS Handbook - A Handy Guide To CSS For Developers215 pages
- CSS Styling: Colors, Layouts & AnimationsNo ratings yetCSS Styling: Colors, Layouts & Animations33 pages
- Session5 - Designing For Tablet and Desktop DevicesNo ratings yetSession5 - Designing For Tablet and Desktop Devices42 pages
- CSS Box Model and Responsive Design NotesNo ratings yetCSS Box Model and Responsive Design Notes5 pages
- Evolution of CSS: From Basics to Modern DesignNo ratings yetEvolution of CSS: From Basics to Modern Design36 pages
- Complete CSS Course - Styling Your HTML Projects Class 2No ratings yetComplete CSS Course - Styling Your HTML Projects Class 243 pages
- Largest English-Speaking Cities WorldwideNo ratings yetLargest English-Speaking Cities Worldwide10 pages
- English Assignment: Father to Son AnalysisNo ratings yetEnglish Assignment: Father to Son Analysis2 pages
- Suggestopedia Method for Teaching GrammarNo ratings yetSuggestopedia Method for Teaching Grammar3 pages
- Vivekanand School Halfyearly Exam 2024-25No ratings yetVivekanand School Halfyearly Exam 2024-2512 pages
- Fundamentals of Mechanical Analysis ME46070 Resit Exam 25 June 2020No ratings yetFundamentals of Mechanical Analysis ME46070 Resit Exam 25 June 202018 pages
- Article Submission Guidelines for JournalNo ratings yetArticle Submission Guidelines for Journal4 pages
- Marília Mendonça's "Lion" Lyrics AnalysisNo ratings yetMarília Mendonça's "Lion" Lyrics Analysis3 pages
- Fiela's Child: Identity and Nature ThemesNo ratings yetFiela's Child: Identity and Nature Themes7 pages
