<!DOCTYPE html>
<head>
<link href="/normalize.css" rel="stylesheet">
<style>
body {
background: #0d0d0d;
}
header {
text-align: center;
background: url('http://bildr.no/image/blZrTHhG.jpeg');
background-size: cover;
color: white;
}
a {
color: white;
}
h2 {
color: #4776db;
}
h1 {
font-size: 70px;
color: black;
}
img {
margin: 40px 0px 0px 0px;
border: 7px solid black;
border-radius: 20px;
}
ul {
color: white;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
}
li {
color: white;
display: inline;
padding: 0px 10px 0px 10px;
}
article {
color: #d9d9d9;
background: #0d0d0d;
max-width: 500px;
padding: 20px;
margin: 0 auto;
}
@media (max-width: 500px) {
h1 {
font-size: 36px;
}
li {
display: block;
padding: 5px;
}
}
</style>
</head>
<body>
<header>
<img src="http://bildr.no/image/SXl0MWt3.jpeg">
<h1>Simen's Blog</h1>
<ul>
<li><a href="#">About Me</a></li>
<li><a href="#">My Projects</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</header>
<article>
<h2>Black and blue!</h2>
<p>Black colour matches generally with all other colours, and blue has a special place in my heart, therefore my website's is going to consist of mainly those two colours!</p>
<button>Like</button>
</article>
<article>
<h2>What i've done so far!</h2>
<p>Welcome again! The first thing i did on this site was to use html to crate the main text of the site, then i used CSS to "paint" the website and design it the way i want. "@Media" is also used! Just to make the site responsive, this way you can view my new site on pc, tablets and even smartphones!</p>
<button>Like</button>
</article>
<article>
<h2>Welcome to my newly founded website!</h2>
<p>Hello and welcome! This is the first official post on my new blog! This is my second project im currently finishing. coding languages used are HTML, CSS and even a little bit of Javascript!</p>
<button>Like</button>
</article>
<script>
$("button").on("click", function() {
alert("+1 Like!")
});
</script>
</body>
HTML, CSS & Java
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.