-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
146 lines (115 loc) · 7.76 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
<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>Moringa School Website</title>
<link rel="stylesheet" href="./assets/CSS/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap" rel="stylesheet">
</head>
<body>
<!--navigation bar-->
<div class="full-page">
<div class="navbar">
<div class="logo">
<!--this is for the logo,you can place an image or the name etc.-->
<h2><span style="color: black;">Moringa</span> School</h2>
</div>
<nav>
<ul id="MenuItems">
<li><a href="#">Courses</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">Stories</a></li>
<li><button class="enroll">Enroll</button></li>
</ul>
</nav>
<!--navigation bar ends here, let's run and see-->
<!--now let's make the styling of the nav bar-->
</div>
<!--section 1 after nav bar-->
<div class="intro">
<h3 id="h3-1">Moringa</h3>
<h1 id="h1-1">Nurturing Africa's Tech Talent</h1>
<p id="nurture">Through market-aligned skills training, we help learners build new career posssibilities with greater confidence and capability.</p>
<div class="btn1"><button id="enroll">Enroll Now</button>
<button id="explore">Explore</button>
</div>
<div class="img-1">
<img src="./assets/Images/image1.png" alt="a girl coding">
</div>
</div>
<!--section two of the intro-->
<div class="stories">
<p style="margin-bottom: 10px;"><strong style="font-size: large;"><span style="background-color: lightgray;">Stor</span>ies</strong> <span style="font-size: smaller;">So many memories!</span></p>
<div class="img-2">
<img src="./assets/Images/image 2.png" alt="Orientation day">
</div>
<h3 id="day">Orientation Day</h3>
<p id="orientation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus commodo augue mauris, vitae tincidunt lorem ultrices et. Duis a egestas massa. Aliquam condimentum ullamcorper diam, vitae imperdiet nisl laoreet a.</p>
<button id="album">See Album</button>
</div>
<!--section three of the intro-->
<div class="meeting">
<h3>Board Meeting</h3>
<p id="board" style="margin-block-end: 20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus commodo augue mauris, vitae tincidunt lorem ultrices et. Duis a egestas massa. Aliquam condimentum ullamcorper diam, vitae imperdiet nisl laoreet a.</p>
<button id="read">Read out stories</button>
<div class="img-3" style="padding-left: 30px;"><img src="./assets/Images/image 3.png" alt="Board Meeting"></div>
</div>
<!--section four of the intro-->
<div class="graduation">
<div class="img-4">
<img src="./assets/Images/image 4.png" alt="Graduation Day">
</div>
<h3>Graduation Day</h3>
<p id="graduate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus commodo augue mauris, vitae tincidunt lorem ultrices et. Duis a egestas massa. Aliquam condimentum ullamcorper diam, vitae imperdiet nisl laoreet a.</p>
<button id="album">See Album</button>
</div>
<div class="margin" style="margin: 60px;">
<div class="row">
<p style="font-size: x-small;"><strong style="background-color:lightgray;background-blend-mode: color;font-size: large;margin-bottom: 1px;padding-bottom: 2px;background: opacity 0.5em; opacity: 0.5em;color: lightblack;">Tech</strong><strong style="opacity: 0.5em;font-size: large;color: lightblack;">nical Mentors</strong> Skilled and kind</p>
<div class="Mentors" style="column-count: 4;column-gap: 10px;">
<div class="column">
<img src="./assets/Images/image 5.png" alt="Rose Oketch" style="width: 40%;height: 100px;padding-top: 2px;"><p class="mentor-name" style="color: white;top: 268%;right: 1110px;position: absolute;font-size: small;">Rose Oketch</p>
<br><span style="color: #EC4067;">Web Development</span><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p2>
<div style="margin: 10px;"><button style="cursor: pointer;background-color: #EC4067;color: white;border: none;border-radius: 10px;height: 40px;">Ask A Question</button></div>
</div>
<div class="column">
<p2><img src="./assets/Images/image 6.png" alt="Albert Byrone" style="width:40%;height: 100px;"><p class="mentor-name" style="color: white;top: 268%;right: 790px;position: absolute;font-size: small;">Albert Byrone</p>
<br><span style="color: #EC4067;">Web Development</span><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p2>
<div style="margin: 10px;"><button style="cursor: pointer;background-color: #EC4067;color: white;border: none;border-radius: 10px;height: 40px;">Ask A Question</button></div>
</div>
<div class="column">
<div><p2><img src="./assets/Images/image 7.png" alt="Raphael Katana" style="width:40%;height: 100px;"><p class="mentor-name" style="color: white;top: 268%;right: 490px;position: absolute;font-size: small;">Raphael Katana</p>
<br><span style="color: #EC4067;">Web Development</span><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p2>
</div>
<div style="margin: 10px;"><button style="cursor: pointer;background-color: #EC4067;color: white;border: none;border-radius: 10px;height: 40px;">Ask A Question</button></div>
</div>
<div class="column">
<img src="./assets/Images/image 8.png" alt="Christine Karimi" style="width:40%;height: 100px; "><p class="mentor-name" style="color: white;top: 268%;right: 180px;position: absolute;font-size: small;">Christine Karimi</p>
</div>
<p><br><span style="color: #EC4067;">Web Development</span><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p2>
<div style="margin: 10px;"><button style="cursor: pointer;background-color: #EC4067;color: white;border: none;border-radius: 10px;height: 40px;">Ask A Question</button></div>
</div>
</div>
</div>
<br style="margin: 80px;margin-bottom: 80px; padding-bottom: 60px;">
<div><p style="font-size: xx-small;"><strong style="font-size: large;background-color: lightgray;background: opacity 0.5em;opacity: 0.5em;color: lightblack;">Proje</strong><strong style="opacity: 0.5em;font-size: large;color: lightblack;">ct</strong> It's hopefully a good one</p></div>
<p><div><img class="bikes" src="./assets/Images/image 9.png" alt="Bikes for hire" style="float: right;width:401px;height:211px">
This is our</p>
<h2>Cool Bike Website</h2>
<p>An application that allows users to showcase bikes for sale and hire whenever they are having team building and any hiking activities.</p>
<button style="cursor: pointer;background-color: #EC4067;color: white;border: none;border-radius: 10px;height: 40px;">Learn More</button>
<div>
<h2>Still not sure?</h2>
<p>Go ahead and <button style="cursor: pointer;background-color: #EC4067;color: white;border: none;border-radius: 10px;height: 40px;">Enroll</button> or <a href="#" style="color: #EC4067;">contact us.</a></p>
</div>
<footer>Designed with <img src="./assets/Images/like.png" alt="love" style="width: 10px;"> by J&R</footer>
</div>
</body>
</html>