Skip to content

Commit b46e210

Browse files
ODAVINGODAVING
committed
front-end(HTML): Custom home page
Custom homepage was added to take away the plain "Hello World" webpage Closes issue #7 Fixed minor HTML mistakes
1 parent 1a357e3 commit b46e210

File tree

1 file changed

+133
-5
lines changed

1 file changed

+133
-5
lines changed

‎www/lib/www/home_page.html.eex‎

Lines changed: 133 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,137 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
3+
34
<head>
4-
<title>Elixir on Docker</title>
5+
<meta charset="UTF-8">
6+
<!-- Latest compiled and minified CSS -->
7+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
8+
<!-- Material Design Bootstrap -->
9+
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.0/css/mdb.min.css" rel="stylesheet">
10+
<!-- Font Awesome -->
11+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
12+
<!-- jQuery library -->
13+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
14+
<!-- JQuery -->
15+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
16+
<!-- Bootstrap tooltips -->
17+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
18+
<!-- Bootstrap core JavaScript -->
19+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
20+
<!-- MDB core JavaScript -->
21+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.0/js/mdb.min.js"></script>
22+
<!-- Latest compiled JavaScript -->
23+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
24+
525
</head>
6-
<body>
7-
<h1>Hello, World!</h1>
26+
27+
<body style="background-color: rgb(38,50,56)">
28+
<nav class="navbar navbar-expand-lg fixed-top" style="background-color:rgb(32, 42, 46);">
29+
<a class="navbar-brand mb-0 h1" style="color:rgb(195, 238, 192);" href="#">EOD</a>
30+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
31+
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
32+
<span class="navbar-toggler-icon"></span>
33+
</button>
34+
35+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
36+
<ul class="navbar-nav mr-auto">
37+
<li class="nav-item">
38+
<a class="nav-link active" href="#" style="color:rgb(195, 238, 192)">Home</a>
39+
</li>
40+
<li class="nav-item dropdown">
41+
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
42+
aria-haspopup="true" aria-expanded="false" style="color:rgb(195, 238, 192)">
43+
Option
44+
</a>
45+
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
46+
<a class="dropdown-item" href="#">Option 1</a>
47+
<div class="dropdown-divider"></div>
48+
<a class="dropdown-item" href="#">Option 2</a>
49+
<div class="dropdown-divider"></div>
50+
<a class="dropdown-item" href="#">Option 3</a>
51+
</div>
52+
</li>
53+
<li class="nav-item dropdown">
54+
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
55+
aria-haspopup="true" aria-expanded="false" style="color:rgb(195, 238, 192)">
56+
Tab
57+
</a>
58+
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
59+
<a class="dropdown-item" href="#">Tab 1</a>
60+
<a class="dropdown-item" href="#">Tab 2</a>
61+
<a class="dropdown-item" href="#">Tab 3</a>
62+
<a class="dropdown-item" href="#">Tab 4</a>
63+
<a class="dropdown-item" href="#">Tab 5</a>
64+
<a class="dropdown-item" href="#">Tab 6</a>
65+
</div>
66+
</li>
67+
</ul>
68+
</div>
69+
</nav>
70+
<!-- Introduction Page-->
71+
<div class="container-fluid" style="color:rgb(195, 238, 192); margin-bottom: 180px; margin-top: 70px;">
72+
<div class="row">
73+
<div class="col-md">
74+
<h2>Welcome to Elixir On Docker</h2>
75+
<p>This project template provides a set of sensible defaults for a new application designed to be cloud native. It includes:
76+
<ol>
77+
<li>A main service www, this serves the main content offered by your application.</li>
78+
<li>Secure HTTP/2 content delivery with Ace web server.</li>
79+
<li>Code reloading in development environment using ExSync.</li>
80+
<li>Automatic clustering. Setup for docker-cloud other environments coming soon.</li>
81+
<li>Web based metrics, monitoring and observing with Wobserver.</li>
82+
<li>Documentation driven development with Raxx.ApiBlueprint.</li>
83+
<li>Integration test suit running from the integration service.</li>
84+
</ol>
85+
</p>
86+
</div>
87+
</div>
88+
</div>
889
</body>
9-
</html>
90+
<!-- End of Usability -->
91+
<footer class="page-footer font-small special-color-dark fixed-bottom pt-4">
92+
<div class="container">
93+
<!-- Grid row-->
94+
<div class="row">
95+
<!-- Grid column -->
96+
<div class="col-md-12 py-0">
97+
<div class="mb-5 flex-center">
98+
<!-- Facebook -->
99+
<a class="fb-ic">
100+
<i class="fab fa-facebook-f fa-lg mr-md-5 mr-3 fa-2x" style="color:rgb(195, 238, 192)"> </i>
101+
</a>
102+
<!-- Twitter -->
103+
<a class="tw-ic">
104+
<i class="fab fa-twitter fa-lg mr-md-5 mr-3 fa-2x" style="color:rgb(195, 238, 192)"> </i>
105+
</a>
106+
<!--Linkedin -->
107+
<a class="li-ic" target="_blank">
108+
<i class="fab fa-linkedin-in fa-lg mr-md-5 mr-3 fa-2x" style="color:rgb(195, 238, 192)">
109+
</i>
110+
</a>
111+
<!--Instagram-->
112+
<a class="ins-ic">
113+
<i class="fab fa-instagram fa-lg mr-md-5 mr-3 fa-2x" style="color:rgb(195, 238, 192)"> </i>
114+
</a>
115+
<!-- Github -->
116+
<a class="git-ic" href="https://github.com/CrowdHailer/elixir-on-docker" target="_blank">
117+
<i class="fab fa-github fa-lg mr-md-5 mr-3 fa-2x" style="color:rgb(195, 238, 192)"></i>
118+
</a>
119+
</div>
120+
</div>
121+
<!-- Grid column -->
122+
</div>
123+
<!-- Grid row-->
124+
</div>
125+
<div class="footer-copyright text-center py-3 " style="color:rgb(195, 238, 192)">
126+
Last Accessed On:
127+
<span id="dt" style="font-weight: bold">
128+
<script type="text/javascript">
129+
var month = ['January', 'February', 'March', 'April', 'May', 'June', 'July',
130+
'August', 'September', 'October', 'November', 'December'];
131+
var tomorrow = new Date();
132+
document.getElementById("dt").innerHTML = "Last Accessed On: " + month[tomorrow.getMonth()] + " " + tomorrow.getDate() + ", " + tomorrow.getFullYear() + " " + (("0" + tomorrow.getHours()).slice(-2)) + ":" + (("0" + tomorrow.getMinutes()).slice(-2));;
133+
</script>
134+
</span>
135+
</div>
136+
</footer>
137+
</html>

0 commit comments

Comments
 (0)