Flat Bootstrap theme

by Олексій Рачок

HTML

<div id="main-container">
            <div id="left-container"> <!-- Left part -->
                <div id="newPost" class="container"> <!-- Add New Post -->

                    <div class="side bar">
                        <ul>
                            <li><a href="#1"><span class="fontawesome-dashboard"></span></a></li>
                            <li><a href="#2" id="document"><span class="fontawesome-file-alt"></span></a></li>
                            <li><a href="#3"><span class="fontawesome-picture"></span></a></li>
                            <li><a href="#4"><span class="entypo-link"></span></a></li>
                            <li><a href="#5"><span class="fontawesome-comments"></span></a></li> 
                        </ul>
                    </div>

                    <div class="newPostContent">
                        <h1>Add New Post</h1>               
                        <input type="text" placeholder="Enter title here" id="post-title"> 

                        <div class="format-bar bar">
                            <ul>
                                <li><a href="#6"><span class="fontawesome-bold"></span></a></li>
                                <li><a href="#7"><span class="fontawesome-italic"></span></a></li>
                                <li><a href="#8"><span class="fontawesome-underline"></span></a></li>
                                <li><a href="#9"><span class="fontawesome-strikethrough"></span></a></li>
                                <li><a href="#10"><span class="fontawesome-list-ul"></span></a></li>
                                <li><a href="#11"><span class="fontawesome-list-ol"></span></a></li>
                            </ul>
                        </div>
                        <textarea class="post-body"></textarea>

                        <a href="#12" class="btn disabled">save draft</a>
                        <a href="#13" class="btn disabled">preview</a>
                        <a href="#14"...

CSS

@import url(http://weloveiconfonts.com/api/?family=entypo|fontawesome);
	/* entypo */
	[class*="entypo-"]:before {
	  font-family: 'entypo', sans-serif;
	}
	/* fontawesome */
	[class*="fontawesome-"]:before {
	  font-family: 'FontAwesome', sans-serif;
	}

@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
} /* This is used to fix an specific width even when you add padding */

h1 {
	font-family: sans-serif;
	font-size: 27px;
	font-weight: 900;
	color: #2e3641;
	margin: 0 0 10px 0;
}
h2 {
	font-family: sans-serif;
	font-size: 24px;
	color: #ffffff;
	margin: 0;
	padding: 15px 0 0 20px;
}
a {
	text-decoration: none;
	color: #9eb2c0;
}
	a:hover {
		text-decoration: underline;
	}
p {
	font-size: 13px;
	font-family: sans-serif;
	color: #9eb2c0;
	margin: 15px 0 5px 20px;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

textarea {
	border-color: #dae4eb;
	color: #dae4eb;
}

input[type=text]{
	border: solid 1px #dae4eb;
	margin: 20px 0 0 20px;
	padding-left: 10px;	
}
	input[type=text]::-webkit-input-placeholder { /* WebKit browsers */
   		color: #dae4eb;
   		font-weight: bold;
	}
	input[type=text]:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    	color: #dae4eb;
    	font-weight: bold;
	}
	input[type=text]::-moz-placeholder { /* Mozilla Firefox 19+ */
   		color: #dae4eb;
   		font-weight: bold;
	}
	input[type=text]:-ms-input-placeholder { /* Internet Explorer 10+ */
    	color: #dae4eb;
    	font-weight: bold;
	}

input[type=checkbox] {
	display: none;
}
	input[type=checkbox] + label {
		cursor: pointer;
		position: relative;
	}
	input[type=checkbox] + label:before {
		border: 1px solid #dae4eb;
		color: #ffffff;
		font-family: FontAwesome;
		font-size: 22px;
		content: "\f00c";
		height: 30px;
		line-height: 30px;
		width: 30px;
		text-align: center;
	}
	input[type=checkbox]:checked + label:before {
		color: #a8bd44;
		content:...