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; max-width: 650px;
margin: 0 auto; margin: 0 auto;
padding: 0 16px; padding: 0 16px;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main-content {
flex-grow: 1;
} }
footer { footer {
@ -28,3 +36,7 @@ header a {
margin-right: 16px; margin-right: 16px;
text-decoration: none; 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

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

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

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

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

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

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

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

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