-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
137 lines (126 loc) · 6 KB
/
index.html
File metadata and controls
137 lines (126 loc) · 6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!--
Shouq Alsulami, 2106820, GAR
Awatif Mohamed, 2110860, GAR
Ebtesam kaid, 2106179, GAR
Bushra husaain, 1914897, GAR
23/3/2025
-->
<!DOCTYPE html>
<html lang="en">
<head>
<!--
The <head> section contains metadata and links to external resources like CSS files.
Metadata ensures proper rendering and functionality of the webpage.
-->
<meta charset="UTF-8" /> <!-- Ensures proper rendering of special characters -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Makes the page responsive on all devices -->
<title>Home</title> <!-- Sets the title of the webpage displayed in the browser tab -->
<link rel="stylesheet" href="global/main.css" /> <!-- Links to the global CSS file for styling the page -->
</head>
<body>
<!-- Header Section -->
<header>
<!--
The <header> section contains the navigation bar with links to other pages.
It helps users navigate the website of the programming services company.
-->
<nav>
<!-- Company Logo -->
<div class="logo-container">
<a href="index.html">
<img src="images/team-logo-removebg-preview.png" alt="Company Logo" class="logo"> <!-- Displays the company logo -->
</a>
</div>
<ul>
<!-- Navigation Links -->
<li><a href="index.html">Home</a></li> <!-- Link to the Home page (current page) -->
<li><a href="pages/services.html">Services</a></li> <!-- Link to the Services page -->
<li><a href="pages/schedule.html">Pricing</a></li> <!-- Link to the Pricing page -->
<li><a href="pages/feedback.html">Feedback</a></li> <!-- Link to the Feedback page -->
<li><a href="pages/about.html">About</a></li> <!-- Link to the About page -->
</ul>
</nav>
</header>
<!---->
<!-- Hero Section -->
<section id="hero">
<!--
The <section> with id="hero" serves as the main introduction to the programming services company.
It typically includes a welcoming message, logo, description, and call-to-action buttons.
-->
<div class="logo-container2">
<img src="images/team-logo.png" alt="Company Logo" class="logo2"> <!-- Displays the company logo -->
</div>
<h1 class="tagline">Welcome to <br><span class="highlight">CodeCrafters</span></h1> <!-- Main heading with highlighted text -->
<p class="description"><br>We are a company specializing in web development, software design, <br> and custom programming solutions.</p> <!-- Brief description of the company -->
<!-- Our services Button -->
<a href="pages/services.html" class="button">Our services</a> <!-- Button linking to the Services page -->
<br>
<br>
<br>
<!-- Stats Section -->
<div class="stats">
<!--
The <div> with class="stats" showcases key statistics about the programming services company.
Each stat highlights achievements or milestones.
-->
<div class="stat">
<span class="number">5+</span> <!-- Number of years of experience -->
<span class="label">Years of Experience</span> <!-- Label for the statistic -->
</div>
<div class="stat">
<span class="number">100+</span> <!-- Number of projects completed -->
<span class="label">Projects Completed</span> <!-- Label for the statistic -->
</div>
<div class="stat">
<span class="number">470+</span> <!-- Number of happy clients -->
<span class="label">Happy Clients</span> <!-- Label for the statistic -->
</div>
</div>
<!-- Team Section -->
<section class="team-section">
<!--
The <section> with class="team-section" introduces the team members behind the programming services company.
It includes images, names, and roles of team members.
-->
<h2>Our Team</h2> <!-- Title of the team section -->
<br>
<br>
<div class="team-members">
<!-- First Team Member -->
<div class="member">
<img src="images/member1.png" alt="Member 1" class="member-image"> <!-- Image of the first team member -->
<h3>John Doe</h3> <!-- Name of the first team member -->
<p>UX/UI Designer</p> <!-- Role of the first team member -->
</div>
<!-- Second Team Member -->
<div class="member">
<img src="images/member2.png" alt="Member 2" class="member-image"> <!-- Image of the second team member -->
<h3>Jana Smith</h3> <!-- Name of the second team member -->
<p>Front-End Developer</p> <!-- Role of the second team member -->
</div>
<!-- Third Team Member -->
<div class="member">
<img src="images/member3.png" alt="Member 3" class="member-image"> <!-- Image of the third team member -->
<h3>Alex Johnson</h3> <!-- Name of the third team member -->
<p>Back-End Developer</p> <!-- Role of the third team member -->
</div>
</div>
</section>
</section>
<!-- Footer Section -->
<footer>
<!--
The <footer> section contains copyright information and contact details.
It provides legal and contact information for the programming services company.
-->
<div class="footer-content">
<p>© 2025 CodeCrafters. All rights reserved.</p> <!-- Copyright notice -->
<p>Contact us:
<a href="mailto:info@example.com">info@example.com</a> | <!-- Email link for inquiries -->
<a href="tel:+1234567890">+1 (234) 567-890</a> <!-- Phone link for direct contact -->
</p>
</div>
</footer>
</body>
</html>