Not sure if I'm coding it right.

[FocuZst]

I'm trying to create a Blog Template. The problem is, I don't know if I'm coding the posts right. It looks right but I'm not sure if that's how I'm supposed to code it.

<div class="container">
    <div class="box">
        <div class="date"><span class="date-number">23</span>
            <br><span class="date-month">April</span>
        </div>
        <div class="box-content">
                <h1 class="title">Title here</h1>

                <h6 class="author">by Jeremy Canela</h6>

                <h6 class="post-info"><i class="fa fa-eye"></i> 119 Views, <i class="fa fa-comments-o"></i> 29 Comments</h6>

            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
            <hr>    <a href="" class="read-more_button">Read More</a>

        </div>
    </div>
</div>

.container {
    width: 1170px;
}
.box {
    width: 75%;
    background: #f4f4f4;
    border: 1px solid #e8e8e8;
    border-bottom: 3px solid #e8e8e8;
    padding: 20px;
    margin-bottom: 10px;
}
.date {
    position: relative;
    background: #e8e8e8;
    border: 1px solid #dfdfdf;
    text-align: center;
    padding: 10px;
    display: inline-block;
    text-transform: uppercase;
    right: 50px;
    float: left;
}
.date-number {
    font-family:'roboto_slabbold', serif;
    font-size: 24px;
}
.date-month {
    font-family:'roboto_slablight', serif;
    font-size: 12px;
}
.box-content {
    float: left;
    width: 713.8px;
}
.title {
    font-family:'roboto_slabbold', serif;
    font-size: 32px;
    text-transform: uppercase;
}
.author, .post-info {
    color: rgba(0, 0, 0, .3);
}
.box-content hr {
    border: none;
    border-top: 1px solid #e8e8e8;
}
a.read-more_button {
    background: #e74c3c;
    padding: 10px;
    color: #fff;
    float: right;
    border: 1px solid #c0392b;
    border-bottom: 3px solid #c0392b;
    font-family:'roboto_slabregular', serif;
    text-shadow: 0 2px #c0392b;
}
a.read-more_button:hover {
    color: #fff;
    text-decoration: none;
}
a.read-more_button:active {
    border-bottom: 1px solid #c0392b;
    margin-top: 2px;
}
.box:after {
    content:"";
    display: table;
    clear: both;
}

You can also check out the code here:

You must be registered for see links

Spoiler: This is how it looks like:

 

[Markshall]

There's no right or wrong way to style a blog post, or pretty much anything. That's why you design shit.

 

[Kaz]

I don't understand the question? Are you talking about the design or the code?

 

[FocuZst]

I don't understand the question? Are you talking about the design or the code?

The Code.

 

[JayC]

Well in your code you put "By ____" If you code their name that will always be there...

Change the file to a .php file
add a database to enter submissions
and get the author from the database

or

Change the file to a .php file
add a text document to enter submissions
and get the data from the text document by lines

 

[Sysode]

There's not really much to say from a front-end perspective.. I mean, in terms of design and layout that is down to you as the designer - there is no "right" or "wrong" like Mark said.

However, in terms of code, there only issue I can see (even this is very small) is that you could possibly add a fallback for your color choices. An example could be as so:

background: rgb(200, 54, 54);

EDIT! Scrap that, in terms of browser compatibility, there are very few browsers that do not support rgba (mainly being older versions < 2.0 of firefox etc).

 

[FocuZst]

Well in your code you put "By ____" If you code their name that will always be there...

Change the file to a .php file
add a database to enter submissions
and get the author from the database

or

Change the file to a .php file
add a text document to enter submissions
and get the data from the text document by lines

It's a Layout.

 

[brsy]

If you're talking about the structure of your HTML, then yes everything looks fine. You can structure it however you want honestly, because it's mostly the CSS that affects how everything clicks, not so much the HTML.

 

[LeChris]

The coding looks like its structured properly, but on the other side I'm loving your design! I made a few attempts to be a "designer", and failed horribly.