diff options
| author | Mark Powers <markppowers0@gmail.com> | 2019-01-27 16:44:50 -0500 |
|---|---|---|
| committer | Mark Powers <markppowers0@gmail.com> | 2019-01-27 16:44:50 -0500 |
| commit | a6f52178eb79da9415d2770f2245f2cea8a05808 (patch) | |
| tree | 94cc5ce81a9a28ed2bc258df58033029b0421e15 | |
| parent | d92cd24dc7d7a6b7fcaf2f208a955ceb59e989c3 (diff) | |
Add flex on front page
| -rw-r--r-- | src/css/styles.css | 11 | ||||
| -rw-r--r-- | src/html/index.html | 55 |
2 files changed, 37 insertions, 29 deletions
diff --git a/src/css/styles.css b/src/css/styles.css index 4b77273..cb61c99 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -27,9 +27,8 @@ img { margin: 1em; padding: 2%; border: 1px solid #aaaaaa; - /* width: 400px; */ display: inline; - /* flex-direction: column; */ + min-width: 200px; } .card img { @@ -38,6 +37,11 @@ img { } +.main-page{ + display: flex; + flex-direction: row; +} + .feed { width: 90%; display: flex; @@ -54,11 +58,10 @@ img { width: 400px; } } - .sidebar { height: 100vh; - width: 15%; + width: 100px; margin: 20px; } diff --git a/src/html/index.html b/src/html/index.html index dea7073..565bb73 100644 --- a/src/html/index.html +++ b/src/html/index.html @@ -1,31 +1,36 @@ <!doctype html> <html lang="en"> - <head> - <title>Mark's Kitchen</title> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> - <link rel="stylesheet" type="text/css" href="/css/bootstrap.css"> - <link rel="stylesheet" type="text/css" href="/css/styles.css"> - <link rel="shortcut icon" href="/favicon.ico"> - </head> - <body> + +<head> + <title>Mark's Kitchen</title> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> + <link rel="stylesheet" type="text/css" href="/css/bootstrap.css"> + <link rel="stylesheet" type="text/css" href="/css/styles.css"> + <link rel="shortcut icon" href="/favicon.ico"> +</head> + +<body> <h1>Welcome to Mark's Kitchen</h1> - <nav class="float-left sidebar"> - <ul> - <li><a href="bread" class="btn btn-primary">Bread</a></li> - <li><a href="essay" class="btn btn-primary">Essays</a></li> - </ul> - </nav> - - <div class="feed"> - <div class="card item"> - <div class="card-body"> - <p class="card-text"> - Welcome to marks.kitchen. Check out my <a href="/bread">bread</a>! - </p> + <div class="main-page"> + <nav class="float-left sidebar"> + <ul> + <li><a href="bread" class="btn btn-primary">Bread</a></li> + <li><a href="essay" class="btn btn-primary">Essays</a></li> + </ul> + </nav> + + <div class="feed"> + <div class="card item"> + <div class="card-body"> + <p class="card-text"> + Welcome to marks.kitchen. Check out my <a href="/bread">bread</a>! + </p> + </div> + <p class="date">Dec 10, 2018</p> </div> - <p class="date">Dec 10, 2018</p> </div> </div> - </body> -</html> +</body> + +</html>
\ No newline at end of file |