Skip to content

Add files via upload #121

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
Qnio wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add files via upload #121

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
39 changes: 24 additions & 15 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,31 +4,32 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Viking CSS Garden</title>

<title>Viking CSS Garden</title>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="/style.css">
</head>
<body>

<!-- 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>
<h1 class="site-title"><span class="thin">Viking CSS</span> Garden</h1>
<hr>
<h2 class="tagline"><span class="thin">A place for your styling creativity to grow</span></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"><span class="thin">Growing Your</span> 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"><span class="thin">Norse </span>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 @@ -38,39 +39,47 @@ <h2 class="section-title">Norse mythology</h2>
<p>Most of the surviving mythology centers on the plights of the gods and their interaction with various other beings, such as humanity and the jötnar, beings who may be friends, lovers, foes and/or family members of the gods. The cosmos in Norse mythology consists of Nine Worlds that flank a central cosmological tree, Yggdrasil. Units of time and elements of the cosmology are personified as deities or beings. Various forms of a creation myth are recounted, where the world is created from the flesh of the primordial being Ymir, and the first two humans are Ask and Embla. These worlds are foretold to be reborn after the events of Ragnarök, when an immense battle occurs between the gods and their enemies, and the world is enveloped in flames, only to be reborn anew. There the surviving gods will meet, and the land will be fertile and green, and two humans will repopulate the world.</p>

<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>
<cite class="citation">- From <a href="https://en.wikipedia.org/wiki/Norse_mythology"><span class="thick">Norse Mythology</span></a></cite>
</article>

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


<!-- Sidebar -->
<aside id="sidebar">
<h2 class="section-title">Other Gardens</h2>
<h2 class="section-title"><span class="thin">Other</span> 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"><span class="thin">Chinese</span><span class="thick">Garden</span></a>
<p>stylish chinese culture</p>
</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"><span class="thin">Dutch</span><span class="thick">Garden</span></a>
<p>stylish chinese culture</p>
</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"><span class="thin">English</span><span class="thick">Gardens</span></a>
<p>stylish chinese culture</p>
</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"><span class="thin">Greek</span><span class="thick">Gardens</span></a>
<p>stylish chinese culture</p>
</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"><span class="thin">Italian</span><span class="thick">Gardens</span></a>
<p>stylish chinese culture</p>
</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"><span class="thin">Japanese</span><span class="thick">Gardens</span></a>
<p>stylish chinese culture</p>
</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"><span class="thin">Spanish</span><span class="thick">Gardens</span></a>
<p>stylish chinese culture</p>
</li>
</ul>
</nav>
Expand Down
107 changes: 106 additions & 1 deletion style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,114 @@
* Your Styles Here
* ----------------------------------- */

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,900);


body, h2 {
font-family: Lato;
margin: auto 50px;
color: dimgray;

}

.tagline {

}

#main-header {
text-align: center;
}

hr {
width: 25%;
}

.section-content {
position: relative;
margin: 10px 50px;
padding: 50px;
border-style: solid;
border-width: 1px;
border-color: dimgray;
}

.section-title {

margin-top: 50px;
margin-bottom: 20px;
}

#sidebar .section-title {
text-align: center;
}

.citation {
position: absolute;
text-align: right;
right: 50px;
}
.citation a{
text-decoration: none;
color: dimgray;

}

.nav-links {
text-align: center;
margin-bottom: 50px;
padding: 0px;
}

.nav-links li {
display: inline-block;
}



.thin { font-weight: 300; }
.thick { font-weight: 900; }

.nav-links li a {
font-family: Lato;
text-transform: uppercase;
font-size: 12px;
color: dimgray;
text-decoration: none;
position: relative;
display: block;
}

.nav-links li p {
font-weight: 100;
font-size: 50%;
margin: 1px;
}

[class^="nav-link-"] {
display: inline-block;
margin: 1em
}


/* link style */
.nav-link-list-item a:before {
content: '';
border-bottom: solid 1px gray;
position: absolute;
bottom: 0; left: 0;
width: 100%;
}

.nav-link-list-item a:hover:before {
border-bottom: solid thin #5CAAEF;
}

a span:hover {
color: #5CAAEF;
}

.nav-link-list-item a:before {
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}