forked from CodeYourFuture/HTML-CSS-Coursework-Week1
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
148 lines (142 loc) · 4.35 KB
/
index.html
File metadata and controls
148 lines (142 loc) · 4.35 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
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>My Blog</title>
<link
href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<script
src="https://kit.fontawesome.com/a5a8afe552.js"
crossorigin="anonymous"
></script>
</head>
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<nav class="navbar">
<!-- NAVIGATION MENU -->
<div class="logo">
<img src="logo.jpg" class="img-fluid" />
</div>
<ul class="nav-links">
<!-- USING CHECKBOX -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰</label>
<!-- NAVIGATION MENUS -->
<div class="menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li class="services">
<a href="#services">Services</a>
<ul class="dropdown">
<li><a href="/">Career coaching </a></li>
<li><a href="/">Networking </a></li>
<li><a href="/"></a>Training Opportunities</li>
</ul>
</li>
<li><a href="#contact">Contact</a></li>
</div>
</ul>
</nav>
<main class="home" id="home">
<i class="fa-solid fa-terminal"></i>
<h1>in the midst of it all</h1>
<p>we are here for you</p>
<img
src="workingmum.png"
class="background-image"
alt="a mum with a child and a laptop"
/>
*/
</main>
<!--About-->
<header class="about" id="about">
<section>
<h2>A little about Us..</h2>
<p>
We are a volunteer led organisation helping mums in tech <br />
achieve their full potential by career coaching,trainings,<br />
social activities and seminars.
</p>
</section>
</header>
<div class="services1" id="services">
<h1 class="services2">Services</h1>
<div class="article-container">
<article>
<h2>Career Coaching</h2>
<p>
We offer coaching and support to mums who already are in the tech
industry or want to get into it.<br />
How to achieve their dream jobs or getting a promotion.
</p>
</article>
<article>
<h2>Networking</h2>
<p>
Weekly meetings with moms who are going through motherhood and the
career , <br />
sharing thoughts and ideas and supporting one another.
</p>
</article>
<article>
<h2>Training Opportunities</h2>
<p>
We offer free training with our partner organisation in software
Development,<br />
Graphic Design ,IT Consultancy to help progress in your career.
</p>
</article>
</div>
</div>
</body>
<footer>
<section class="footer">
<div class="contact" id="contact">
<div class="colum-1">
<h2>Contact</h2>
<p>in the midst of it all</p>
<p>London,United Kingdom</p>
</div>
<div class="colum-2">
<p>012-345-6790</p>
<p>[email protected]</p>
</div>
</div>
<div class="column-3">
<h4>Stay connected</h4>
<a href="#" class="anchor"
><i class="fa-brands fa-facebook"></i>Facebook</a
>
<a href="#" class="anchor"
><i class="fa-brands fa-instagram"></i>Instagram</a
>
<a href="#" class="anchor"
><i class="fa-brands fa-twitter"></i>Twitter</a
>
</div>
<div class="form-container">
<h4>Or leave a message here</h4>
<div class="form-inline">
<input
class="space-between"
type="text"
name="fullname"
placeholder="Full name"
/>
<br /><br />
<input type="text" name="email" placeholder="Email" /><br /><br />
</div>
</div>
</section>
</footer>
</html>