Skip to content

Brennan's CSS Garden Submission #114

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Brennan's CSS Garden Submission #114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
910d1af
added name to READ ME and actually added files
BrennanFulmer Sep 25, 2017
ad73638
completed
BrennanFulmer Sep 27, 2017
3a656fd
resolved merge conflict
BrennanFulmer Sep 27, 2017
12d10a7
added github pages link to readme
BrennanFulmer Sep 27, 2017
9323cc1
Update README.md
BrennanFulmer Sep 27, 2017
15d7d8f
Update README.md
BrennanFulmer Sep 27, 2017
e0eb56d
Update README.md
BrennanFulmer Sep 29, 2017
3841835
rewritten, refactored, and now responsive to mobile devices/multiple …
BrennanFulmer Oct 1, 2017
7f8da8a
add link to view in Github Pages
BrennanFulmer Oct 1, 2017
80c0103
fixed a grammatical error
BrennanFulmer Oct 1, 2017
e473583
Update README.md
BrennanFulmer Nov 7, 2017
d8adac5
Update README.md
BrennanFulmer Mar 8, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
assignment_viking_css_garden
============================

A place for your styling creativity to grow
by Brennan Fulmer


**NOTE:** *This repo is copyrighted material for your private use only and not to be shared outside of Viking Code School.*
https://brennanfulmer.github.io/assignment_viking_css_garden/

Binary file added bg.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 14 additions & 16 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Viking CSS Garden</title>

<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="style.css">
</head>
<body>

<!-- Main Header -->
<!-- Main Header -->
<header id="main-header">
<h1 class="site-title">Viking CSS Garden</h1>
<h2 class="tagline">A place for your styling creativity to grow</h2>
</header>


<!-- Main Content -->
<main id="main-content">
<section class="main-content-section">
<h2 class="section-title">Growing Your Garden</h2>
<h2 class="section-title">Growing Your Garden</h2>

<article class="section-content">
<p>The Viking CSS Garden is a place for you to take raw potential and turn it into something beautiful with the power of CSS. Take the seeds that are this HTML file and plant them. Water and feed them with nurishing styles, colors and images. Watch them evolve into a stunning display.</p>
</article>
</section>

<section class="main-content-section">
<h2 class="section-title">Norse mythology</h2>
<h2 class="section-title">Norse Mythology</h2>

<article class="section-content">
<p>Norse mythology is the body of mythology of the North Germanic people stemming from Norse paganism and continuing after the Christianization of Scandinavia and into the Scandinavian folklore of the modern period. The northernmost extension of Germanic mythology, Norse mythology consists of tales of various deities, beings, and heroes derived from numerous sources from both before and after the pagan period, including medieval manuscripts, archaeological representations, and folk tradition.</p>
Expand All @@ -39,42 +40,39 @@ <h2 class="section-title">Norse mythology</h2>

<p>Norse mythology has been the subject of scholarly discourse since the 17th century, when key texts were brought to the attention of the intellectual circles of Europe. By way of comparative mythology and historical linguistics, scholars have identified elements of Germanic mythology reaching as far back as Proto-Indo-European mythology. In the modern period, the Romanticist Viking revival re-awoke an interest in the subject matter, and references to Norse mythology may now be found throughout modern popular culture. The myths have further been revived in a religious context among adherents of Germanic Neopaganism.</p>
</article>

<cite class="citation">- From <a href="https://en.wikipedia.org/wiki/Norse_mythology">Norse Mythology</a></cite>
<cite class="citation"> - From <a href="https://en.wikipedia.org/wiki/Norse_mythology" target="_blank"> Norse Mythology</a></cite>
</section>
</main>


<!-- Sidebar -->
<aside id="sidebar">
<h2 class="section-title">Other Gardens</h2>

<nav class="sidebar-nav">
<ul class="nav-links">
<li class="nav-link-list-item">
<a class="nav-link" href="https://en.wikipedia.org/wiki/Chinese_garden">Chinese Garden</a>
<a class="nav-link" href="https://en.wikipedia.org/wiki/Chinese_garden" target="_blank">Chinese Garden</a>
</li>
<li class="nav-link-list-item">
<a class="nav-link" href="https://en.wikipedia.org/wiki/Dutch_garden">Dutch Garden</a>
<a class="nav-link" href="https://en.wikipedia.org/wiki/Dutch_garden" target="_blank">Dutch Garden</a>
</li>
<li class="nav-link-list-item">
<a class="nav-link" href="https://en.wikipedia.org/wiki/English_gardens">English Gardens</a>
<a class="nav-link" href="https://en.wikipedia.org/wiki/English_gardens" target="_blank">English Gardens</a>
</li>
<li class="nav-link-list-item">
<a class="nav-link" href="https://en.wikipedia.org/wiki/Greek_gardens">Greek Gardens</a>
<a class="nav-link" href="https://en.wikipedia.org/wiki/Greek_gardens" target="_blank">Greek Gardens</a>
</li>
<li class="nav-link-list-item">
<a class="nav-link" href="https://en.wikipedia.org/wiki/Italian_gardens">Italian Gardens</a>
<a class="nav-link" href="https://en.wikipedia.org/wiki/Italian_gardens" target="_blank">Italian Gardens</a>
</li>
<li class="nav-link-list-item">
<a class="nav-link" href="https://en.wikipedia.org/wiki/Japanese_gardens">Japanese Gardens</a>
<a class="nav-link" href="https://en.wikipedia.org/wiki/Japanese_gardens" target="_blank">Japanese Gardens</a>
</li>
<li class="nav-link-list-item">
<a class="nav-link" href="https://en.wikipedia.org/wiki/Spanish_gardens">Spanish Gardens</a>
<a class="nav-link" href="https://en.wikipedia.org/wiki/Spanish_gardens" target="_blank">Spanish Gardens</a>
</li>
</ul>
</nav>
</aside>
</body>
</html>

132 changes: 128 additions & 4 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,134 @@
/* ----------------------------------- *
* Your Styles Here
* ----------------------------------- */
/* Start of CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* End of CSS Reset */


body {
background: linear-gradient(rgba(49, 137, 225, 0.5),rgba(49, 137, 225, 0.5)),url('bg.jpg');
background-size: cover;
background-position: center;
}

#main-header{
text-align: center;
margin-top: 40px;
padding-bottom: 16px;
}

.site-title{
font-size: 56px;
font-weight: bolder;
color: black;
font-family: 'Merriweather', serif;
}


.tagline {
margin-top: 24px;
font-size: 32px;
color: white;
font-family: 'Roboto', sans-serif;
}

.section-title{
color: black;
font-size: 40px;
margin-top: 24px;
text-align: center;
font-weight: bold;
font-family: 'Merriweather', serif;
}

.section-content{
color: white;
margin: 16px 240px 0px;
line-height: 160%;
font-size: 18px;
font-family: 'Roboto', sans-serif;
}

.citation {
font-size: 16px;
color: white;
font-style: italic;
font-weight: bold;
padding-left: 240px;
}

#sidebar {
text-align: center;
margin-bottom: 32px;
}

.nav-link-list-item {
margin: 12px 0px 0px 8px;
display: inline-block;
}

.nav-link {
font-size: 18px;
background-color: green;
border: medium double green;
border-radius: 10px;
padding: 4px;
}

a:link {
text-decoration:none;
cursor: pointer;
color: blue;
}

a:hover {
text-decoration: underline;
}

@media screen and (max-width: 1360px) {
.section-content{
margin-left: auto;
margin-right: auto;
padding: 0px 16px 0px;
}
}