Editing Courses/single-page-portfolio (section)

== Adding your content ==

=== Adding the sections ===
Your page will consist of several sections, so let's start by adding three of these to your body. Because we want to give them all a different background, we need a way to identify them. To do this, we'll be giving them classes. To test, we'll also be adding a little content to the sections.

<source lang="html5">
<section class="section1">these</section>
<section class="section2">are</section>
<section class="section3">sections</section>
</source>

=== Styling the sections ===
Open your CSS file in TextWrangler and delete the contents. First we are going to give all sections a '''relative position'''. This means that they will be placed in their natural order in the document. We're also giving them a '''width and height of 100%''', so that they fill the screen.

<source lang="css">
section{
  position:relative;
  height: 100%;
  width:100%;		
}
</source>

Als je dit opslaat en je browser ververst, zie je dat dit helaas nog niet werkt. Dit komt door een rare kronkel in html, niemand weet waarom. Gelukkig kun je het makkelijk wel laten werken, namelijk door er deze code boven te plaatsen: 

<source lang="css">
body, html {
  height: 100%;
}
</source>

Erg boeiend is dit nog niet, dus laten we de sections allemaal een eigen kleurtje geven. Weet je nog dat we de sections allemaal een class hebben gegeven? Die gaan we nu gebruiken! 

<source lang="css">
section.section1{
	background:red;
}

section.section2{
	background:green;
}

section.section3{
	background:blue;
}
</source>

=== Adding text and images ===
Now that the sections are ready, we can fill them with some content. To add an image, you first have to find one. Find a random image on the internet and save it to the folder you are working in. After this we place the text. To keep everything together, we'll put all the text in a div with a class. A div is basically an invisible box that you can use to keep elements together. In this div we'll place a header and two paragraphs. Now we wrap the whole thing in another div with a class, you can use this later to place it in the center. You place this code inside your first section:

<source lang="html5">
<div class="center">
  <img src="bestandsnaam.jpg">
  <div class="description">
    <h3>This is a header!</h3>
    <p>This is a paragraph with some text.</p>
    <p>This is another paragraph with some text.</p>
  </div>
</div>
</source>

Of course you replace "bestandsnaam.jpg" with the name and extension of the file that you just saved to your folder. Refresh your browser to check if it works.

=== Placing the text and images ===
First we give the outer div a width of 800 pixels and place it in the center of the screen using "margin:auto 0;", which somehow works. We give the image and the text div a width of 48% and an absolute position. This already places both elements in the top left corner of the .center,  so now we place the image on the right side. 

<source lang="css">
.center{
	width:800px;
	margin:0 auto;
}
.center .description, .center img{
	position:absolute;
	top:0;
	width:48%;
}
.center img{
	left:50%;
}
</source>

=== Etcetera ===
- fixed menu
- background image
- transform on hover
- multiple absolutely positioned images