-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
134 lines (123 loc) · 5.68 KB
/
index.html
File metadata and controls
134 lines (123 loc) · 5.68 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="images/trust (6).png" type="image/png">
<title>Learn to code</title>
</head>
<body>
<!-- Navigation -->
<nav>
<img src="images/logo.svg">
<i id="menu" class="fa-solid fa-bars"></i>
<div id="ul1">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="ul2">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<!-- Home -->
<section class="home" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url(images/back.jpg);">
<h2>Learn programming professionally</h2>
<p>Welcome to our professional website for selling programming courses! We offer you a unique opportunity to learn and enhance your programming skills through a wide range of specialized educational courses. Whether you're a beginner looking for a strong start in the world of programming or a professional seeking to advance your skills, we provide you with the knowledge and tools you need. Browse our featured courses and start your journey into the world of programming today</p>
<div class="btn">
<button id="btn1"><a href="#">Learn More</a></button>
<button id="btn2"><a href="#">Visit Cursese</a></button>
</div>
</section>
<!--features-->
<section class="features">
<div id="sit-features">
<h2>Site Features</h2>
<p>Your own coding learning site offers a variety of educational and interactive opportunities for learners who want to develop their programming skills. This site has many features and educational content, among its main features</p>
</div>
<div class="cards">
<div id="card1">
<i class="fa-solid fa-graduation-cap"></i>
<h3>Educational courses</h3>
<img src="images/fe1.png">
<p>The website offers a variety of educational courses in the field of programming, covering different levels of difficulty from beginners to advanced</p>
</div>
<div id="card2">
<i class="fa-solid fa-display"></i>
<h3>Applied Projects</h3>
<img src="images/b1.jpg">
<p>Students can participate in coding challenges to solve specific programming problems. These challenges contribute to enhancing programming solution skills and motivating learners to challenge themselves and improve</p>
</div>
<div id="card3">
<i class="fa-solid fa-laptop-code"></i>
<h3>Programming challenges</h3>
<img src="images/a.png">
<p>Learners can participate in coding challenges to solve specific programming problems. These challenges contribute to enhancing coding solution skills and motivating learners to take on challenges and improve</p>
</div>
</div>
</div>
</section>
<!-- The website's objectives -->
<section class="objectives">
<h2>The website's objectives</h2>
<div id="obj">
<div>
<span>1</span>
<p>Empowering individuals to learn and acquire new programming skills.</p>
</div>
<div>
<span>2</span>
<p>Providing a comprehensive educational pathway that covers various levels of difficulty.</p>
</div>
<div>
<span>3</span>
<p>Offering organized and systematic courses to assist students in better understanding concepts.</p>
</div>
<div>
<span>4</span>
<p>Guiding students through interactive lessons and practical examples.</p>
</div>
<div>
<span>5</span>
<p>Enhancing a deep understanding of programming topics and developing their skills.</p>
</div>
<div>
<span>6</span>
<p>Delivering high-quality educational value to visitors and learners.</p>
</div>
</div>
</section>
<!--foter-->
<footer>
<div id="cp"><p id="Copyright">Copyright © 2024</p></div>
</footer>
<!-- Codes js -->
<script>
let menu = document.getElementById('menu');
let ul2 = document.getElementById('ul2');
menu.addEventListener('click', () => {
if (menu.classList.contains('fa-bars')) {
ul2.style.display = 'block';
menu.classList.remove('fa-bars');
menu.classList.add('fa-xmark');
}else{
ul2.style.display = 'none';
menu.classList.remove('fa-xmark');
menu.classList.add('fa-bars');
}
});
</script>
</body>
</html>