jason/CompleteNodeJS
jason/CompleteNodeJS
1
0
Fork 0
Code

Video 52: Styling the Application: Part II

Browse Source
This commit is contained in:
Jason Williams 2019-10-08 18:10:51 -06:00
parent a627e00364
commit 6116711a55
6 changed files with 38 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web-server/public/css/styles.css
View File

@ -4,6 +4,14 @@ body {
max-width: 650px;
margin: 0 auto;
padding: 0 16px;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main-content {
flex-grow: 1;
}
footer {
@ -28,3 +36,7 @@ header a {
margin-right: 16px;
text-decoration: none;
}
.portrait {
width: 250px;
}

BIN
web-server/public/img/weather.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

5
web-server/templates/views/404.hbs
View File

@ -3,12 +3,17 @@
<html>
<head>
<title>404</title>
<link rel="icon" href="/img/weather.png">
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<div class="main-content">
{{>header}}
<p>{{errorMessage}}</p>
</div>
{{>footer}}
</body>

7
web-server/templates/views/about.hbs
View File

@ -3,12 +3,17 @@
<html>
<head>
<title>About</title>
<link rel="icon" href="/img/weather.png">
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<div class="main-content">
{{>header}}
<img src="/img/me.jpg">
<img class="portrait" src="/img/me.jpg">
</div>
{{>footer}}
</body>

5
web-server/templates/views/help.hbs
View File

@ -3,12 +3,17 @@
<html>
<head>
<title>Help</title>
<link rel="icon" href="/img/weather.png">
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<div class="main-content">
{{>header}}
<p>{{helpText}}</p>
</div>
{{>footer}}
</body>

6
web-server/templates/views/index.hbs
View File

@ -3,12 +3,18 @@
<html>
<head>
<title>Weather</title>
<link rel="icon" href="/img/weather.png">
<link rel="stylesheet" href="/css/styles.css">
<script src="/js/app.js"></script>
</head>
<body>
<div class="main-content">
{{>header}}
<p>Use this site to get your weather!</p>
</div>
{{>footer}}
</body>