AndFran/fakebook.css

## fakebook.css


body {
    background-size:cover;
    background-image: url("https://www.loriswebs.com/images/cloudbg1sml2.jpg");
}

/* Main page title*/
h1{
    background: #80bdff;
    padding: 50px;
    text-align: center;
}

/*Common for all nav bars*/
nav a{
    text-decoration: none;
}

nav a:hover{
    background-color: #20c997;
}

/*add spacing under the main nav*/
#main-bar{
    padding-bottom: 50px;
}

/*Add spacing under the image*/
img{
    padding-bottom: 50px;
}

/*put status information to the write*/
#status{
    float: right;
    background-color: #9fcdff;
}

#profile_data{
    list-style-type: none;
}

#comment_section{
    padding: 50px;
    text-align: center;
}


#information{
    border-style: dotted;
    padding: 10px;
}

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

.button:hover{
    border-style: dashed;
    border-color: #1b1e21;
}

/* Bold text*/
.bold{
    font-weight: bold;
}

.profile_image{
    width: 200px;
    height: 200px;
}

## fakebook.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Andrew's Fakebook">
    <meta name="keywords" content="status, hobbies, fakebook, interests, profile">
    <meta name="author" content="Andrew">
    <link rel="stylesheet" href="./fakebook.css" type="text/css">
    <title>Andrew's FakeBook</title>
</head>
<body>

<h1>Fakebook</h1>

<nav id="main-bar">
    <a href="">Edit</a> |
    <a href="">Friends</a> |
    <a href="">Network</a> |
    <a href="">Inbox</a>
</nav>

<section id="status">
    <h2>Andrew</h2>
    <p>Some text about mood, status etc</p>
</section>

<img class="profile_image" src="http://byronbayphotographer.com/wp-content/uploads/2017/11/smartness-generic-person-image-john-y-s-musings-from-the-middle-you-look-just-like.jpg" alt="my photo">

<section id="information">
    <label for="friends">Friends</label>
    <select id="friends">
        <option value="person1">Person 1</option>
        <option value="person2">Person 2</option>
        <option value="person3">Person 3</option>
        <option value="person4">Person 4</option>
    </select>

    <button class="button">Add a friend</button>

    <ul id="profile_data">
        <li><span class="bold">City:</span> Malaga</li>
        <li><span class="bold">Education:</span> School, College and University</li>
        <li><span class="bold">Hobbies:</span>
            <ol>
                <li>Cycling</li>
                <li>taking the dog for a walk</li>
            </ol>
    </ul>
</section>

<section id="comment_section">
    <label for="comment">Leave a comment</label>
    <textarea id="comment" rows="5" cols="100">
    </textarea>
</section>


</body>
</html>


	body {
	background-size:cover;
	background-image: url("https://www.loriswebs.com/images/cloudbg1sml2.jpg");
	}

	/* Main page title*/
	h1{
	background: #80bdff;
	padding: 50px;
	text-align: center;
	}

	/Common for all nav bars/
	nav a{
	text-decoration: none;
	}

	nav a:hover{
	background-color: #20c997;
	}

	/add spacing under the main nav/
	#main-bar{
	padding-bottom: 50px;
	}

	/Add spacing under the image/
	img{
	padding-bottom: 50px;
	}

	/put status information to the write/
	#status{
	float: right;
	background-color: #9fcdff;
	}

	#profile_data{
	list-style-type: none;
	}

	#comment_section{
	padding: 50px;
	text-align: center;
	}


	#information{
	border-style: dotted;
	padding: 10px;
	}

	.button {
	background-color: #4CAF50; /* Green */
	border: none;
	color: white;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	}

	.button:hover{
	border-style: dashed;
	border-color: #1b1e21;
	}

	/* Bold text*/
	.bold{
	font-weight: bold;
	}

	.profile_image{
	width: 200px;
	height: 200px;
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="description" content="Andrew's Fakebook">
	<meta name="keywords" content="status, hobbies, fakebook, interests, profile">
	<meta name="author" content="Andrew">
	<link rel="stylesheet" href="./fakebook.css" type="text/css">
	<title>Andrew's FakeBook</title>
	</head>
	<body>

	<h1>Fakebook</h1>

	<nav id="main-bar">
	<a href="">Edit</a> \|
	<a href="">Friends</a> \|
	<a href="">Network</a> \|
	<a href="">Inbox</a>
	</nav>

	<section id="status">
	<h2>Andrew</h2>
	<p>Some text about mood, status etc</p>
	</section>

	<img class="profile_image" src="http://byronbayphotographer.com/wp-content/uploads/2017/11/smartness-generic-person-image-john-y-s-musings-from-the-middle-you-look-just-like.jpg" alt="my photo">

	<section id="information">
	<label for="friends">Friends</label>
	<select id="friends">
	<option value="person1">Person 1</option>
	<option value="person2">Person 2</option>
	<option value="person3">Person 3</option>
	<option value="person4">Person 4</option>
	</select>

	<button class="button">Add a friend</button>

	<ul id="profile_data">
	<li><span class="bold">City:</span> Malaga</li>
	<li><span class="bold">Education:</span> School, College and University</li>
	<li><span class="bold">Hobbies:</span>
	<ol>
	<li>Cycling</li>
	<li>taking the dog for a walk</li>
	</ol>
	</ul>
	</section>

	<section id="comment_section">
	<label for="comment">Leave a comment</label>
	<textarea id="comment" rows="5" cols="100">
	</textarea>
	</section>



	</body>
	</html>