Krygore
Bronze Coder
Hello! I am just starting my own project, primarily to see what I can do and how I can apply it as I learn it, but also because my wife and I are HUGE Skyrim fans! She has multiple notebooks with handwritten notes on where to find special and unique items, locations for hard quests and resources, etc. So I wanted to apply it to a webpage format. I'll post my progress as I go.
Here is what I have after 2 days (about 4-6 hours invested):
[CODE lang="html" title="skyrim_index.html"]<!DOCTYPE html>
<html>
<!--Head Start-->
<head>
<title>Skyrim Gamer's Manual</title>
<meta name="description" content="Skyrim Gamer's Guide">
<meta name="keywords" content="Skyrim, gamer, guide, gaming, Elder Scrolls">
<link rel="stylesheet" href="skyrim_stylesheet.css">
</head>
<!--Head End-->
<!--Body Start-->
<body>
<!--Header Start-->
<header id="skyrim-index-header">
<div class="container">
<div class="centered"><h1>Skyrim Gamer's Guide</h1></div>
<img src="images/index_header_background.jpg" alt="index_header_background.jpg" width="100%">
</div>
<hr style="height:10px;color:black;background-color:black">
</header>
<!--Header End-->
<!--Welcoming Statement-->
<article>
<!--Section 1-->
<section id="index-section-1">
<h3>Hello, and welcome to the Skyrim Gamer's Guide!</h3>
<p>This is <em>NOT</em> an official Bethesda or professional gamer's page! This is a page made by my wife and I, who happen to be avid Skyrim lovers!</p>
<p>We created this page with the intention of spreading knowledge about Skyrim and all of it's inhabitants from our perspective! We will be sharing everything from usable NPC followers to unique items and where to find them!</p>
<p>Any and all information in this page was either found on the web or through personal gameplay. Gameplay experiences may differ depending on gaming system and bugs affecting your current game. (Bugs are very common in Skyrim and may result in the inability to complete a quest or use an item)</p>
</section>
<!--Section 2-->
<section>
<h3>Table of Contents</h3>
<table id="table-of-contents">
<tr>
<td><a href="a_new_beginning.html" target="_blank">A New Beginning</a></td>
</tr>
</table>
</section>
</article>
<hr style="height:10px;color:ivory;background-color:black">
<footer>
<p><small><em>Information may not be up to date depending on player's game version.
<br>
Copyright ©, 2021</em></small></p>
</footer>
</body>
</html>[/CODE]
[CODE lang="html" title="a_new_beginning.html"]<!DOCTYPE html>
<html>
<!--Head Start-->
<head>
<title>A New Beginning</title>
<link rel="stylesheet" href="skyrim_stylesheet.css">
</head>
<!--Body Start-->
<body>
<header>
<div class="container">
<img src="images/a_new_beginning_header.jpg"alt="a_new_beginning_header.jpg"width="100%"height="150%">
<div class="centered2:"><h1>A New Beginning</h1></div>
</div>
<hr style="height:10px;color:black;background-color:ivory">
</header>
<article>
<section>
<h3>Who Are You?</h3>
<p>Starting out you are <strong>forced</strong> to watch the beginning credits,where you are bound in ropes in the back of a horse drawn cart. Three other NPC's are with you, a horse theif from Rorikstead, Ralof of Riverwood, and Ulfric Stormcloak, self-proclaimed high-king of Skyrim.</p>
<p>There will be brief dialogue as you make your way down the path to the executioners block. Once there, you will exit the cart and wait for your name to be called from the list. When the officer asks, "Who are you?" you will begin the character creation window.</p>
</section>
<br>
<section>
<aside><img src="images/who_are_you.jpg"height="200px"></aside>
</section>
</article>
</html>[/CODE]
[CODE lang="css" title="skyrim_stylesheet.css"]/*Standard Styling*/
/*Header*/
header{
color:goldenrod;
text-align: center;
text-decoration: greenyellow;
font-family: cursive;
font-size:20pt;
text-shadow: 5px 2px 4px white;
background-color:black;
padding:5px
}
/*Headings*/
h1,h3{
text-align: center;
}
h3{
color:goldenrod;
text-shadow:5px 2px 4px orangered
}
/*Body*/
body{
background-color:rgb(77,77,77);
color:ivory;
text-align:left;
word-wrap: normal;
border: 5px rgb(44,44,44);
font-family:cursive;
}
/*Paragraphs*/
p{
text-indent:40px;
}
/*Footer*/
footer{
text-indent:0px;
text-align:center;
color:black;
}
/*Specialty Styling*/
/*Index Page*/
#index-section-1{
}
#table-of-contents{
color:rgb(216, 189, 35)
}
.container{
position:relative;
text-align:center;
color:goldenrod;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
[/CODAny and all advice and feedback is welcome!E][/CODE]
Here is what I have after 2 days (about 4-6 hours invested):
[CODE lang="html" title="skyrim_index.html"]<!DOCTYPE html>
<html>
<!--Head Start-->
<head>
<title>Skyrim Gamer's Manual</title>
<meta name="description" content="Skyrim Gamer's Guide">
<meta name="keywords" content="Skyrim, gamer, guide, gaming, Elder Scrolls">
<link rel="stylesheet" href="skyrim_stylesheet.css">
</head>
<!--Head End-->
<!--Body Start-->
<body>
<!--Header Start-->
<header id="skyrim-index-header">
<div class="container">
<div class="centered"><h1>Skyrim Gamer's Guide</h1></div>
<img src="images/index_header_background.jpg" alt="index_header_background.jpg" width="100%">
</div>
<hr style="height:10px;color:black;background-color:black">
</header>
<!--Header End-->
<!--Welcoming Statement-->
<article>
<!--Section 1-->
<section id="index-section-1">
<h3>Hello, and welcome to the Skyrim Gamer's Guide!</h3>
<p>This is <em>NOT</em> an official Bethesda or professional gamer's page! This is a page made by my wife and I, who happen to be avid Skyrim lovers!</p>
<p>We created this page with the intention of spreading knowledge about Skyrim and all of it's inhabitants from our perspective! We will be sharing everything from usable NPC followers to unique items and where to find them!</p>
<p>Any and all information in this page was either found on the web or through personal gameplay. Gameplay experiences may differ depending on gaming system and bugs affecting your current game. (Bugs are very common in Skyrim and may result in the inability to complete a quest or use an item)</p>
</section>
<!--Section 2-->
<section>
<h3>Table of Contents</h3>
<table id="table-of-contents">
<tr>
<td><a href="a_new_beginning.html" target="_blank">A New Beginning</a></td>
</tr>
</table>
</section>
</article>
<hr style="height:10px;color:ivory;background-color:black">
<footer>
<p><small><em>Information may not be up to date depending on player's game version.
<br>
Copyright ©, 2021</em></small></p>
</footer>
</body>
</html>[/CODE]
[CODE lang="html" title="a_new_beginning.html"]<!DOCTYPE html>
<html>
<!--Head Start-->
<head>
<title>A New Beginning</title>
<link rel="stylesheet" href="skyrim_stylesheet.css">
</head>
<!--Body Start-->
<body>
<header>
<div class="container">
<img src="images/a_new_beginning_header.jpg"alt="a_new_beginning_header.jpg"width="100%"height="150%">
<div class="centered2:"><h1>A New Beginning</h1></div>
</div>
<hr style="height:10px;color:black;background-color:ivory">
</header>
<article>
<section>
<h3>Who Are You?</h3>
<p>Starting out you are <strong>forced</strong> to watch the beginning credits,where you are bound in ropes in the back of a horse drawn cart. Three other NPC's are with you, a horse theif from Rorikstead, Ralof of Riverwood, and Ulfric Stormcloak, self-proclaimed high-king of Skyrim.</p>
<p>There will be brief dialogue as you make your way down the path to the executioners block. Once there, you will exit the cart and wait for your name to be called from the list. When the officer asks, "Who are you?" you will begin the character creation window.</p>
</section>
<br>
<section>
<aside><img src="images/who_are_you.jpg"height="200px"></aside>
</section>
</article>
</html>[/CODE]
[CODE lang="css" title="skyrim_stylesheet.css"]/*Standard Styling*/
/*Header*/
header{
color:goldenrod;
text-align: center;
text-decoration: greenyellow;
font-family: cursive;
font-size:20pt;
text-shadow: 5px 2px 4px white;
background-color:black;
padding:5px
}
/*Headings*/
h1,h3{
text-align: center;
}
h3{
color:goldenrod;
text-shadow:5px 2px 4px orangered
}
/*Body*/
body{
background-color:rgb(77,77,77);
color:ivory;
text-align:left;
word-wrap: normal;
border: 5px rgb(44,44,44);
font-family:cursive;
}
/*Paragraphs*/
p{
text-indent:40px;
}
/*Footer*/
footer{
text-indent:0px;
text-align:center;
color:black;
}
/*Specialty Styling*/
/*Index Page*/
#index-section-1{
}
#table-of-contents{
color:rgb(216, 189, 35)
}
.container{
position:relative;
text-align:center;
color:goldenrod;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
[/CODAny and all advice and feedback is welcome!E][/CODE]