-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
78 lines (78 loc) · 3.58 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
<!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>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header class="header container">
<nav class="header_nav">
<a href="/">
<img src="./assets/skills_logo.jpg" alt="PW skills logo" class="header_nav-logo">
</a>
<div class="header_nav-items">
<p class="header_nav-item"><a href="/">Home</a></p>
<p class="header_nav-item"><a href="#showcase">Showcase</a></p>
<p class="header_nav-item"><a href="#highlights">Highlights</a></p>
</div>
</nav>
</header>
<main class="main container">
<!-- Section 1 -->
<section class="hero">
<div class="main_text">
<h1 class="main_text-heading">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque, repudiandae?
</h1>
</div>
<div class="main_img">
<img src="./assets/library.jpg" alt="main side image">
</div>
</section>
<!-- Section 2=>cards-->
<section class="showcase">
<div class="showcase_cards">
<img src="./assets/courses.jpg" alt="courses">
<h4>Different Courses</h4>
</div>
<div class="showcase_cards">
<img src="./assets/Students.jpg" alt="students">
<h4>Students Enrolled</h4>
</div>
<div class="showcase_cards">
<img src="./assets/transition.jpg" alt="Student Transition">
<h4>Successfull Transition</h4>
</div>
</section>
<!-- Section 3 -->
<section class="student">
<div class="stu_img">
<img src="./assets/cljstudents.jpg" alt="college students">
</div>
<div class="stu_text">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae illum iure quo expedita, eaque enim quae repellendus magni commodi, corrupti unde nostrum quia sequi molestias velit libero dolore tempora omnis harum. Quasi corporis sapiente, minima deserunt cupiditate omnis repudiandae natus distinctio incidunt deleniti at? Ducimus nostrum distinctio deleniti totam temporibus.
</p>
</div>
</section>
<!-- section 4 -->
<section class="information">
<div class="information_text">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo est accusantium hic sint libero ipsum tempore assumenda doloribus consequatur velit corrupti animi, eligendi exercitationem rem molestiae enim officiis illum atque unde qui quidem dolorem quaerat labore? Consequuntur nostrum voluptatibus nemo iste perferendis vel tempore sequi, quaerat id velit ducimus non odit sunt explicabo ad possimus laborum nulla est quisquam eius architecto iure, minus nobis facere. Voluptatum, dolores? Aut quas fugit vitae deleniti molestiae nisi laborum corporis?
</p>
</div>
<div class="informatio_img">
<img src="./assets/info library.jpg" alt="information library image">
</div>
</section>
</main>
<!-- footer -->
<footer class="footer">
<p class="footer_text"> Copyright © 2023, PW Skills </p>
</footer>
</body>
</html>