Skip to content

Instantly share code, notes, and snippets.

@Laszlo-Lazuer

Laszlo-Lazuer/html5-css3-exercise-blog-post.markdown

Last active May 18, 2017 06:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Laszlo-Lazuer/c9c48bd302edd306ab2c8ea4d133a6f0 to your computer and use it in GitHub Desktop.
Save Laszlo-Lazuer/c9c48bd302edd306ab2c8ea4d133a6f0 to your computer and use it in GitHub Desktop.
Download ZIP
HTML5/CSS3 Exercise Blog Post
Raw
html5-css3-exercise-blog-post.markdown
Raw
index.html
<!-- <!DOCTYPE html> Tells browser this file will be HTML5 Hidden for codepen-->
<html>
<head>
<title>My first blog post</title>
<!-- <link rel="stylesheet" type="text/css" href="style.css"> --> <!-- This demo's the importing of css -->
</head>
<body>
<div class="container">
<div class="blog-post">
<h1>My first blog post</h1>
<p class="date">March 11, 2015</p>
<h2>This is my first blog post</h2>
<p class="main-text">
This is a very <strong>strong</strong> text, because it is <strong>bold</strong>.<br>
I would like to <em>emphasize</em> how important it is to follow this course until the end!<br>
This is some <u>underlined</u> text.<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
</p>
<a href="http://www.udemy.com/" target="_blank">Link to udemy</a>
<a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/766775/HTML-CSS3.jpg" target= "_blank">HTML logo</a>
<h2>HTML is amazing</h2>
<p class="main-text"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/766775/HTML-CSS3.jpg" alt="The HTML5 logo">
</div>
<div class="other-posts">
<div class="other">
The first other blog post
</div>
<div class="other">
Yet another blog post
</div>
<div class="other">
The best post ever: read this!
</div>
</div>
<div class="clearfix">
</div>
<div class="author-box">
<!-- Image tags are self closing -->
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/766775/author.jpg" alt="Ahutor photo">
<p class="author-text">Darlene Wheeler</p>
</div>
</div>
</body>
</html>
Raw
style.scss
//CSS Reset demo
* {
margin: 0;
padding: 0;
box-sizing: border-box; //<-- Research
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
body {
font-family: Helvetica Neue, Arial; //Arial is a fallback font-family
font-size: 18px;
}
h1,
h2{
color: #00960b;
}
h1 {
font-size: 40px;
margin-bottom: 20px;
}
h2 {
font-size: 25px;
margin-bottom: 10px;
}
.main-text {
text-align: justify;
margin-bottom: 20px;
}
//ID's is not a good practice, single use
.author-text {
font-size: 22px;
float: left;
margin: 30px 0 0 10px;
}
.container {
width: 1140px;
margin: 20px auto 0 auto; //Centers content
}
.blog-post {
width: 75%;
float: left;
padding-right: 30px;
position: relative;
}
.other-posts {
width: 25%;
float: left;
}
.author-box {
border-top: 1px solid #808080;
padding-top: 20px;
}
.other {
margin-bottom: 40px;
}
.author-box img {
height: 100px;
width: 100px;
border-radius: 50%;
float: left;
}
.blog-post img {
height: 150px;
width: auto;
}
.date {
position: absolute;
top: 0;
right: 0;
padding: 10px 30px 0 0; //Absolute position, parent must be relative.
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment