Главная Обзор Помощь
Регистрация Вход
lee
/
leemorgan-dev
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

Create listing page for web intro courses.

Lee Morgan 5 лет назад
Родитель
ab808ef23a
Сommit
e33bce8eb7
6 измененных файлов с 79 добавлено и 2 удалено
Единый вид Показать статистику Diff
  1. 5 1
      routes.js
  2. BIN
      views/images/netscapeNavigator.png
  3. BIN
      views/images/webIcon.jpg
  4. 44 0
      views/learn/index.css
  5. 29 0
      views/learn/web.html
  6. 1 1
      views/main/index.html

+ 5 - 1
routes.js
Просмотреть файл 

@@ -21,7 +21,7 @@ module.exports = function(app){
 
     app.get("/images/sudoku", (req, res)=>{res.sendFile(`${views}/images/sudoku.png`)});
 
     app.get("/images/sudoku", (req, res)=>{res.sendFile(`${views}/images/sudoku.png`)});
 
     app.get("/images/birthday", (req, res)=>{res.sendFile(`${views}/images/birthday.jpg`)});
 
     app.get("/images/birthday", (req, res)=>{res.sendFile(`${views}/images/birthday.jpg`)});
 
     app.get("/images/market", (req, res)=>{res.sendFile(`${views}/images/market.jpeg`)});
 
     app.get("/images/market", (req, res)=>{res.sendFile(`${views}/images/market.jpeg`)});
 
-    app.get("/images/netscape", (req, res)=>{res.sendFile(`${views}/images/netscapeNavigator.png`)});
 
+    app.get("/images/web", (req, res)=>{res.sendFile(`${views}/images/webIcon.jpg`)});
 
     app.get("/images/html5", (req, res)=>{res.sendFile(`${views}/images/html5.png`)});
 
     app.get("/images/html5", (req, res)=>{res.sendFile(`${views}/images/html5.png`)});
 
 
 
     //SUDOKU
 
     //SUDOKU
 
@@ -39,4 +39,8 @@ module.exports = function(app){
 
     app.get("/travel/directories", travel.listDirectories);
 
     app.get("/travel/directories", travel.listDirectories);
 
     app.get("/travel/images/*", travel.getImages);
 
     app.get("/travel/images/*", travel.getImages);
 
     app.get("/travel/*", (req, res)=>res.sendFile(`${views}/travel/index.html`));
 
     app.get("/travel/*", (req, res)=>res.sendFile(`${views}/travel/index.html`));
 
+
 
+    //LEARN
 
+    app.get("/learn/style", (req, res)=>res.sendFile(`${views}/learn/index.css`));
 
+    app.get("/learn/web", (req, res)=>{res.sendFile(`${views}/learn/web.html`)});
 
 }
 
 }

BIN
views/images/netscapeNavigator.png
Просмотреть файл


BIN
views/images/webIcon.jpg
Просмотреть файл


+ 44 - 0
views/learn/index.css
Просмотреть файл 

@@ -0,0 +1,44 @@
 
+*{margin:0;padding:0;}
 
+
 
+body{
 
+    background: rgb(196, 198, 192);
 
+}
 
+
 
+h1{
 
+    text-align: center;
 
+}
 
+
 
+.cardContainer{
 
+    width: 90%;
 
+    padding: 25px;
 
+}
 
+
 
+.card{
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+    margin: 15px auto;
 
+    width: 90%;
 
+    height: 150px;
 
+    background: white;
 
+    padding-right:15px;
 
+    text-decoration: none;
 
+}
 
+
 
+    .card:hover{
 
+        box-shadow: 0 0 3px black;
 
+    }
 
+
 
+    .card div{
 
+        display: flex;
 
+        flex-direction: column;
 
+        justify-content: space-around;
 
+        align-items: center;
 
+        color: black;
 
+        height: 100%;
 
+        flex-grow: 2;
 
+    }
 
+
 
+    .card img{
 
+        height: 100%;
 
+    }

+ 29 - 0
views/learn/web.html
Просмотреть файл 

@@ -0,0 +1,29 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+    <head>
 
+        <meta charset="utf-8">
 
+        <title>Lee Morgan</title>
 
+        <link rel="stylesheet" href="/learn/style">
 
+    </head>
 
+    <body>
 
+        <h1>Introduction to Web Programming</h1>
 
+
 
+        <div class="cardContainer">
 
+            <a class="card" href="/learn/web/001">
 
+                <img src="/images/web" alt="World Wide Web">
 
+                <div>
 
+                    <h3>How the Web Works</h3>
 
+                    <p>A brief description of what the web is and what happens when you visit a web page.</p>
 
+                </div>
 
+            </a>
 
+
 
+            <a class="card" href="/learn/web/002">
 
+                <img src="/images/web" alt="World Wide Web">
 
+                <div>
 
+                    <h3>Workplace Setup</h3>
 
+                    <p>A few tools that are used for programming and some instructions to install and set them up.</p>
 
+                </div>
 
+            </a>
 
+        </div>
 
+    </body>
 
+</html>

+ 1 - 1
views/main/index.html
Просмотреть файл 

@@ -174,7 +174,7 @@
 
             <div id="learn" class="cardContainer" style="display:none">
 
             <div id="learn" class="cardContainer" style="display:none">
 
                 <a class="card" href="/learn/web">
 
                 <a class="card" href="/learn/web">
 
                     <h2>Intro to Web Programming</h2>
 
                     <h2>Intro to Web Programming</h2>
 
-                    <img src="/images/netscape" alt="Netscape logo">
 
+                    <img src="/images/web" alt="World Wide Web">
 
                 </a>
 
                 </a>
 
 
 
                 <a class="card" href="/learn/html">
 
                 <a class="card" href="/learn/html">