diff options
| author | scottj <jones.scott0391@gmail.com> | 2021-08-14 15:21:48 -0700 |
|---|---|---|
| committer | scottj <jones.scott0391@gmail.com> | 2021-08-14 15:21:48 -0700 |
| commit | bc7d659b1fb61b453ca90e34f7cfb295542295e1 (patch) | |
| tree | b01cd9c53696c001aab93d577a08016110d26f06 | |
| parent | 69208903b3252b2120ab3203dff7f0845447abd5 (diff) | |
created about page layout, modified website css, added to readme file, adjusted erb files and page linking
| -rw-r--r-- | README.md | 2 | ||||
| -rw-r--r-- | about.html | 42 | ||||
| -rw-r--r-- | footer.html.erb | 4 | ||||
| -rw-r--r-- | header.html.erb | 8 | ||||
| -rw-r--r-- | index.html | 2 | ||||
| -rw-r--r-- | output/recipes.html | 15 | ||||
| -rw-r--r-- | style/style.css | 86 | ||||
| -rw-r--r-- | template.html.erb | 3 |
8 files changed, 146 insertions, 16 deletions
@@ -1,5 +1,7 @@ # pantry-of-plants +The making of a new vegan cooking/baking blog with a focus on simplicity and legibility. + ## Development Setup We suggest using [chruby](https://github.com/postmodern/chruby) and [ruby-install](https://github.com/postmodern/ruby-install): diff --git a/about.html b/about.html new file mode 100644 index 0000000..a3dc16a --- /dev/null +++ b/about.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> + <title>Pantry of Plants</title> + <link rel="stylesheet" href="style/style.css"> +</head> +<body> + <header> + <nav> + <a href="index.html"> + <img src="images/pantry-of-plants-logo.png" class="logo"> + </a> + <div class="nav-text-outer"> + <a href="output/recipes.html" class="nav-text">Recipes</a> + <a href="about.html" class="nav-text" id="active">About</a> + </div> + </nav> + </header> + <div class="content"> + <h1>About</h1> + <div class="image-and-text"> + <img src="images/placeholder/home3.jpg" class="image"> + <div class="text"> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing + elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu + fugiat nulla pariatur. Excepteur sint occaecat cupidatat + non proident, sunt in culpa qui officia deserunt mollit + anim id est laborum. + </p> + </div> + </div> + </div> + <footer> + <a href="mailto:scott@pantryofplants.ca" class="mail">Contact: scott@pantryofplants.ca <img src="images/mail.svg" class="mail-2"></a> + <p>© 2021 Pantry of Plants</p> + </footer> +</body> +</html>
\ No newline at end of file diff --git a/footer.html.erb b/footer.html.erb index a87e194..1853f01 100644 --- a/footer.html.erb +++ b/footer.html.erb @@ -1,4 +1,4 @@ <footer> - <a>Contact: scott@pantryofplants.ca</a> - <p>© 2021 Pantry of Plants</p> + <a href="mailto:scott@pantryofplants.ca" class="mail">Contact: scott@pantryofplants.ca <img src="../images/mail.svg" class="mail-2"></a> + <p>© 2021 Pantry of Plants</p> </footer> diff --git a/header.html.erb b/header.html.erb index d5444da..cf687d0 100644 --- a/header.html.erb +++ b/header.html.erb @@ -1,5 +1,7 @@ <nav> - <a href="#"><img src="../images/pantry-of-plants-logo.png"></a> - <a href="output/recipes.html">Recipes</a> - <a href="#">About</a> + <a href="../index.html"><img src="../images/pantry-of-plants-logo.png" class="logo"></a> + <div class="nav-text-outer"> + <a href="recipes.html" class="nav-text">Recipes</a> + <a href="../about.html" class="nav-text">About</a> + </div> </nav> @@ -13,7 +13,7 @@ </a> <div class="nav-text-outer"> <a href="output/recipes.html" class="nav-text">Recipes</a> - <a href="#" class="nav-text">About</a> + <a href="about.html" class="nav-text">About</a> </div> </nav> </header> diff --git a/output/recipes.html b/output/recipes.html index fcde2fd..07ed63e 100644 --- a/output/recipes.html +++ b/output/recipes.html @@ -1,12 +1,15 @@ <html> <head> - <title>Hello</title> + <title>Pantry of Plants</title> + <link rel="stylesheet" href="../style/style.css"> </head> <body> <nav> - <a href="#"><img src="../images/pantry-of-plants-logo.png"></a> - <a href="#">Recipes</a> - <a href="#">About</a> + <a href="../index.html"><img src="../images/pantry-of-plants-logo.png" class="logo"></a> + <div class="nav-text-outer"> + <a href="recipes.html" class="nav-text">Recipes</a> + <a href="../about.html" class="nav-text">About</a> + </div> </nav> <h1 id="big-header-boi">Big Header Boi</h1> @@ -26,8 +29,8 @@ <p><img src="https://i5.walmartimages.ca/images/Large/094/514/6000200094514.jpg" alt="apple" title="apple" /></p> <footer> - <a>Contact: scott@pantryofplants.ca</a> - <p>© 2021 Pantry of Plants</p> + <a href="mailto:scott@pantryofplants.ca" class="mail">Contact: scott@pantryofplants.ca <img src="../images/mail.svg" class="mail-2"></a> + <p>© 2021 Pantry of Plants</p> </footer> </body> diff --git a/style/style.css b/style/style.css index 71a9867..74118bb 100644 --- a/style/style.css +++ b/style/style.css @@ -42,7 +42,7 @@ nav a:hover { } .content { - background-color: #758B7A; + background-color: #B8C5BB; color: #F1F1F1; border-radius: 20px; } @@ -91,7 +91,7 @@ footer p { } .active, .dot:hover { - background-color: #B8C5BB; + background-color: #758B7A; } /* Fading animation */ @@ -135,7 +135,7 @@ footer p { } .button:hover { - background-color: #B8C5BB; + background-color: #758B7A; color: #F1F1F1; } @@ -160,6 +160,37 @@ footer p { /* styling for home page */ /* -------------------------------------------------------------------------- */ +#active { + color: #B8C5BB; +} + +.text { + background-color: #F1F1F1; + color: #5E5750; + border-radius: 20px; + width: 100%; + padding: 6px; + font-weight: bold; + font-size: 16px; +} + +.image { + border-radius: 20px; + width: 100%; + padding-bottom: 10px; +} + +h1 { + font-size: 28px; + font-weight: bold; + padding-top: 10px; + padding-left: 10px; +} + +.image-and-text { + padding: 10px; + align-items: center; +} @media only screen and (min-width: 355px) { .logo { @@ -212,6 +243,12 @@ footer p { .slideshow-container { padding: 20px 20px 10px 20px; } + + h1 { + font-size: 36px; + padding-top: 20px; + padding-left: 20px; + } } @@ -260,6 +297,23 @@ footer p { .slideshow-container { padding: 40px 40px 20px 40px; } + + .text { + width: 50%; + padding: 6px; + } + + .image { + width: 50%; + padding-bottom: 10px; + padding-right: 20px; + } + + .image-and-text { + margin-top: -20px; + display: flex; + padding: 20px; + } } @@ -321,6 +375,32 @@ footer p { width: 20px; margin-bottom: -4px; } + + .image-and-text { + padding: 40px; + display: flex; + } + + h1 { + font-size: 48px; + padding-top: 40px; + padding-left: 40px; + } + + .text { + padding: 10px; + } + + .image { + padding-bottom: 10px; + padding-right: 40px; + } + + .image-and-text { + margin-top: -20px; + display: flex; + padding: 40px; + } } @media only screen and (min-width: 1500px) { diff --git a/template.html.erb b/template.html.erb index 4b1cef3..1d9db76 100644 --- a/template.html.erb +++ b/template.html.erb @@ -1,6 +1,7 @@ <html> <head> - <title>Hello</title> + <title>Pantry of Plants</title> + <link rel="stylesheet" href="../style/style.css"> </head> <body> <%= render "header.html.erb" %> |