Skip to content

Assignment Submission #126

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
JFarenci wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Assignment Submission #126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a555acd
Update README.md
JFarenci Nov 5, 2017
ab45e9f
Added some extra tags that were used in the CSS stylesheet
JFarenci Nov 6, 2017
e551914
Added stylesheet
JFarenci Nov 6, 2017
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
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,4 @@ A place for your styling creativity to grow

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

Jacob Farenci
47 changes: 25 additions & 22 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<!DOCTYPE html>
<html>
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Expand All @@ -8,6 +7,9 @@

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

<title>Viking CSS Garden</title>

<body>

<!-- Main Header -->
Expand All @@ -19,16 +21,16 @@ <h2 class="tagline">A place for your styling creativity to grow</h2>

<!-- Main Content -->
<main id="main-content">
<section class="main-content-section">
<section id="rightfixed" class="main-content-section">
<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>
<section id="maincontent" class="main-content-section">
<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 @@ -47,34 +49,35 @@ <h2 class="section-title">Norse mythology</h2>

<!-- Sidebar -->
<aside id="sidebar">
<h2 class="section-title">Other Gardens</h2>
<h2 id="navitem1" class="section-title">Other<br>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>
<li id="navitem2"class="nav-link-list-item">
<a class="nav-link" href="https://en.wikipedia.org/wiki/Chinese_garden">Chinese<br>Garden</a>
</li>
<li class="nav-link-list-item">
<a class="nav-link" href="https://en.wikipedia.org/wiki/Dutch_garden">Dutch Garden</a>
<li id="navitem3" class="nav-link-list-item">
<a class="nav-link" href="https://en.wikipedia.org/wiki/Dutch_garden">Dutch<br>Garden</a>
</li>
<li class="nav-link-list-item">
<a class="nav-link" href="https://en.wikipedia.org/wiki/English_gardens">English Gardens</a>
<li id="navitem4" class="nav-link-list-item">
<a class="nav-link" href="https://en.wikipedia.org/wiki/English_gardens">English<br>Gardens</a>
</li>
<li class="nav-link-list-item">
<a class="nav-link" href="https://en.wikipedia.org/wiki/Greek_gardens">Greek Gardens</a>
<li id="navitem5" class="nav-link-list-item">
<a class="nav-link" href="https://en.wikipedia.org/wiki/Greek_gardens">Greek<br>Gardens</a>
</li>
<li class="nav-link-list-item">
<a class="nav-link" href="https://en.wikipedia.org/wiki/Italian_gardens">Italian Gardens</a>
<li id="navitem6" class="nav-link-list-item">
<a class="nav-link" href="https://en.wikipedia.org/wiki/Italian_gardens">Italian<br>Gardens</a>
</li>
<li class="nav-link-list-item">
<a class="nav-link" href="https://en.wikipedia.org/wiki/Japanese_gardens">Japanese Gardens</a>
<li id="navitem7" class="nav-link-list-item">
<a class="nav-link" href="https://en.wikipedia.org/wiki/Japanese_gardens">Japanese<br>Gardens</a>
</li>
<li class="nav-link-list-item">
<a class="nav-link" href="https://en.wikipedia.org/wiki/Spanish_gardens">Spanish Gardens</a>
<li id="navitem8" class="nav-link-list-item">
<a class="nav-link" href="https://en.wikipedia.org/wiki/Spanish_gardens">Spanish<br>Gardens</a>
</li>
</ul>
</nav>
</aside>
</body>
</html>

<div id="box1"></div>
<div id="box2"></div>
</html>
175 changes: 174 additions & 1 deletion style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,183 @@
/* ----------------------------------- *
* Your Styles Here
* ----------------------------------- */
html {
font-family: "Times New Roman", sans-serif;
}

/*start background*/
body {
background-image: url(https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-507671.png);
background-repeat: no-repeat;
background-attachment:fixed;
background-size: 80%;
background-position: 50% 90px;
}

#box1 {
position: fixed;
top: 0px;
left: 0%;
width:100%;
height:90px;
background: #2b78e4;
z-index: -1;
}

#box2 {
position: fixed;
top: 90px;
left: 0%;
width:100%;
height:50px;
background: #eeeeee;
z-index: -1;
}
/*end background*/

/*start main title box*/
#main-header {
position: fixed;
top: 0px;
left: 10%;
width:80%;
height:90px;
background: white;
border-style: solid;
border-width: 1px;
}

.site-title {
position: relative;
top: -40px;
text-align: center;
font-size: 60px;
}


.tagline {
position: relative;
top: -85px;
text-align: center;
font-size: 20px;
font-style: italic;
}
/*end main title box*/

/*start nav bar*/
.nav-link-list-item {
display: inline-block;
height: 48px;
width: 10%;
background: white;
border-style: solid;
border-width: 1px;
text-align: center;
}

.nav-link {
font-family: helvetica;
font-size: 18px;
font-style: italic;
text-decoration: none;
color: black;
}
.nav-link-list-item:hover {
box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3);
}

#navitem1 {
position: fixed;
top: 74px;
left: 10%;
height: 47px;
width: 10%;
background: white;
border-style: solid;
border-width: 1px;
text-align: center;
font-family: Helvetica;
font-size: 20px;
}
#navitem2 {
position: fixed;
top: 90px;
left: 20%;
}
#navitem3 {
position: fixed;
top: 90px;
left: 30%;
}
#navitem4 {
position: fixed;
top: 90px;
left: 40%;
}
#navitem5 {
position: fixed;
top: 90px;
left: 50%;
}
#navitem6 {
position: fixed;
top: 90px;
left: 60%;
}
#navitem7 {
position: fixed;
top: 90px;
left: 70%;
}
#navitem8 {
position: fixed;
top: 90px;
left: 80%;
}
/*end nav bar*/

/*start body text styling*/
.section-title {
text-align: center;
font-size: 26px;
font-style: bold;
}
.section-content {
font-family: arial;
font-size: 16px;
color: #111111;
}
/*end body text styling*/


/*start right side fixed memo*/
#rightfixed {
position:fixed;
top: 250px;
left: 58%;
height: 220px;
width:27.5%;
padding: 8px;
background: #eeeeee;
opacity: 0.85;
border-style: solid;
border-width: 1px;
border-color: #333333;
}
/*end right side fixed memo*/

/*start main content*/
#maincontent {
position:relative;
top: 160px;
left: 17.5%;
height: 1550px;
width:32.5%;
z-index: -2;
padding: 8px;
background: #eeeeee;
opacity: 0.85;
border-style: solid;
border-width: 1px;
border-color: #333333;
}
/*end main content*/