-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
100 lines (86 loc) · 3.35 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mosespace | Blog</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://mosespace.github.io">
<link rel="icon" type="image/x-icon" href="https://github.githubassets.com/favicon.ico">
<meta name='robots' content='noindex, follow' />
<!-- This is the style for the header -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<!-- This is the style for the naviagtion bar -->
<div class="container">
<div class="navigation">
<!--<img src="images/logo.png" class="logo">-->
<h3>Moses |Blog</h3>
<nav>
<ul id="menuList">
<li><a href="">Engineering</a></li>
<li><a href="">Security</a></li>
<li><a href="">Products</a></li>
<li><a href="">Open Source</a></li>
<li><a href="">Enterprise</a></li>
<div class="dropdown">
<button>More</button>
<div class="dropdown-options">
<a href="#">Community</a>
<a href="#">Education</a>
<a href="#">Policy</a>
<a href="#">Liceince</a>
</div>
</div>
<img src="images/moon.png" id="icon">
<img src="images/menuorange.png" class="menu" onclick="togglemenu()">
</div>
</ul>
</nav>
</div>
</div>
</header>
<!-- This is a javascript code to make the toggle of dark and light mode -->
<script>
var icon = document.getElementById("icon");
icon.onclick = function(){
document.body.classList.toggle("dark-theme")
if(document.body.classList.contains("dark-theme")){
icon.src="images/moon.png";
} else{
icon.src="images/sun.png";
}
}
var menuList = document.getElementById("menuList");
menuList.style.maxHeight ="opx";
function togglemenu(){
if (menuList.style.maxHeight == "0px")
{
menuList.style.maxHeight == "130px";
}
else
{
menuList.style.maxHeight == "0px"
}
}
</script>
<!-- This is the style for the main body content -->
<div class="row">
<div class="col-1">
<h2>Hello From<br> Moses Daniel</h2>
<h3>The official blog maintainer and owner</h3>
<p>Github Lover</p>
<h4>GitHub is in an exciting phase of our journey as the developer community grows significantly every day,
and the needs of the community grow and change with it.
Today am introducing our this new open source project!!!</h4>
<div class="col-img1">
<!-- <img src="images/man.png"> -->
</div>
</div>
<div class="col-2">
</div>
</div>
<!-- This is the the footer part -->
</body>
</html>