-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
214 lines (201 loc) · 10.2 KB
/
index.html
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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Programming Pal</title>
<link rel="stylesheet" href="./assets/grid/bootstrap-grid.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://kit.fontawesome.com/407b7a1280.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./assets/css/main.min.css">
</head>
<body>
<svg id="top-svg" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M-1 -108C5.81891 -37.882 61.157 112.063 227.958 150.897C315.292 176.996 510.418 117.491 587.524 261.555C615.062 325.062 598.539 477.129 862.903 496.442C1092.65 496.442 1276.76 417.624 1398.71 150.897C1451.69 35.0199 1773.23 -32.8362 1940.03 150.897C2062.29 285.566 1971.5 575.781 1398.71 610.231C1143 625.611 1139.07 891.574 1747.26 689.571C1892.82 641.226 2231.14 559.078 2335 371.169" stroke="#40E865" stroke-opacity="0.15" stroke-width="32"/>
</svg>
<header>
<div class="container-fluid">
<div class="row justify-content-around header-wrapper">
<div class="col-12 col-md-3 logo align-self-start d-flex ">
<div class="logo--wrapper">
<img src="./assets/images/logo/ProgrammingPal.png" alt="Programming Pal Logo">
</div>
</div>
<div class="col-12 col-md-6 nav d-none d-lg-flex ">
<nav class="d-flex">
<div class="nav-item ">
<p>Home</p>
</div>
<div class="nav-item">
<p>About</p>
</div>
<div class="nav-item">
<p>Blog</p>
</div>
<div class="nav-item">
<p>Services</p>
</div>
<div class="nav-item">
<p>Contact</p>
</div>
</nav>
<div class="icon-box">
<i class="far fa-folder"></i>
<i class="fas fa-laptop-code"></i>
</div>
</div>
</div>
</div>
<div class="sidebar-icon d-lg-none">
<i class="fas fa-bars"></i>
</div>
<div class="sidebar-wrapper d-lg-none">
<div class="sidebar-close-icon ">
<i class="fas fa-times"></i>
</div>
<nav class="d-flex flex-column">
<div class="nav-item ">
<p>Home</p>
</div>
<div class="nav-item">
<p>About</p>
</div>
<div class="nav-item">
<p>Blog</p>
</div>
<div href="#services" class="nav-item">
<p>Services</p>
</div>
<div class="nav-item">
<p>Contact</p>
</div>
</nav>
</div>
</header>
<main>
<section id="intro-page">
<div class="container">
<div class="row">
<div class="col-12 col-md-6 text-box">
<p class="text-btn">No 1 platform for learning programming</p>
<h1>The Best AI <br> Programming Partner</h1>
<p class="text">As an interactive e-learning platform with <br> an AI Partner, Programming Pal will make your life much easier</p>
<div class="button-box">
<button class="order-btn">Order</button>
<button class="guest-btn">As a Guest</button>
</div>
</div>
<div class="col-12 col-md-6 img-box">
<div class="img-wrapper">
<img src="./assets/images/section1.jpg" alt="Computer, Programming Environment">
</div>
</div>
</div>
</div>
</section>
<section id="services">
<svg id="services-svg-right" viewBox="0 0 622 1305" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1217.7 837.451C1168.93 935.651 960.265 804.209 885.269 885.182C788.736 989.409 917.964 1214.99 796.725 1291.97C700.023 1353.37 595.223 1176.56 482.408 1140.98C361.581 1102.87 169.274 1187.95 114.922 1076.92C52.4144 949.234 285.59 835.408 264.977 696.811C245.918 568.665 -65.6897 497.156 13.6207 395.785C107.404 275.915 334.691 475.843 480.641 421.159C564.508 389.736 516.774 245.98 578.947 183.97C666.324 96.823 773.027 -17.4881 899.784 3.1181C1018.18 22.366 1096.12 159.565 1122.96 272.408C1148.38 379.223 1018.87 471.751 1036.97 579.718C1054.25 682.757 1263.65 744.928 1217.7 837.451Z" fill="#9CF5AE"/>
</svg>
<div class="container">
<div class="row">
<div class="col-12 title">
<h1>List of Commands</h1>
</div>
<div class="col-12 col-lg-6 custom-card">
<div class="custom-card-inner">
<div class="icon-box">
<i class="far fa-user"></i>
</div>
<div class="text-box">
<h1>Show Languages</h1>
<p>Shows all programming languages</p>
</div>
</div>
</div>
<div class="col-12 col-lg-6 custom-card">
<div class="custom-card-inner">
<div class="icon-box">
<i class="fas fa-video"></i>
</div>
<div class="text-box">
<h1>Show Technologies</h1>
<p>Shows the most popular tools</p>
</div>
</div>
</div>
<div class="col-12 col-lg-6 custom-card">
<div class="custom-card-inner">
<div class="icon-box">
<i class="fas fa-users"></i>
</div>
<div class="text-box">
<h1>Show Beginner</h1>
<p>Shows all beginer friendly articles</p>
</div>
</div>
</div>
<div class="col-12 col-lg-6 custom-card">
<div class="custom-card-inner">
<div class="icon-box">
<i class="fas fa-share-alt"></i>
</div>
<div class="text-box">
<h1>Show Best Language</h1>
<p>Shows the best language for the year</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="search-results">
<div class="container">
<div class="row">
<div class="col-12 title">
<h1>Search Results</h1>
</div>
<div class="row card-container">
</div>
</div>
</div>
</section>
<div class="mic-icon">
<i class="fas fa-microphone"></i>
</div>
</main>
<footer>
<svg id="footer-svg" viewBox="0 0 1440 320" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M561.525 25.5001C342.406 -27.9981 93.338 25.5001 0 93.5001V1023H1440V0C1351.75 75.2 1091.11 125.5 969.816 125.5C827.064 125.5 652.867 47.8012 561.525 25.5001Z" fill="#3B9C3F"/>
</svg>
<div class="container">
<div class="row">
<div class="col-12 footer-title"><h1>How Programming Pal will help you?</h1></div>
<div class="col-12 footer-info"><h3>Programming Pal is an experimental project aiming to help beginners learn programming. And also becoming your friend best buddy :)</h3></div>
<div class="col-12 custom-card">
<div class="custom-card-footer d-flex flex-column flex-lg-row">
<div class="img-box">
<img src="./assets/images/footer-bg.jpg" alt="Eyeglass and monitor">
</div>
<div class="text-box">
<div class="icon-box">
<i class="fas fa-quote-right"></i>
</div>
<h1 class="card-title">
Programming Pal is going to change the perspective of learning programming!
In a way that, you will love every single time you spent coding!
</h1>
<h2 class="author-title">Creator of Programming Pal</h2>
</div>
</div>
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script type="module" src="./js/main.js"></script>
</body>
</html>