Freebie PSD: Flat UI Kit 2 (Blog) | Frontend Forever

Freebie PSD: Flat UI Kit 2 (Blog)

Images

These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

<html>

<head>

<meta charset="utf-8">

<title>My first trial</title>
        <meta name="description" content="This is a trial">
        <meta name="author" content="jlalovi">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">   
        
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="https://i.icomoon.io/public/temp/90320a65cd/UntitledProject2/style.css">

</head>

<body>
 
        <div id="main-container">
            <div id="left-container"> 
                <div id="newPost" class="container">

<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">

save draft preview publish

Subscribe

Get our feed through email.

suscribe

Related Posts

Philosophy cannot be taught; it is the application of the sciences to truth
by Lord Wilmore

Now let the avenging god make way for me to punish the wrongdoer!
by Abbe Busoni

There is neither happiness nor misery in the world
by Monsieur Zaccone

Tags

add

Separate tags with commas

add map

<
September
>

Sun
Mon
Tue
Wed
Thu
Fri
Sat

Recent Posts

Categories

Display as dropdown
Show posts counts
Show hierarchy

save
delete

Popular
Comments
Recent

Fourteen years in Châteu d'lf
by Edmond Dantès

Number 34 and number 27
by The Count of Monte Cristo

@charset "UTF-8";
@import url(http://weloveiconfonts.com/api/?family=entypo|fontawesome);
/* entypo */
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
[class*=entypo-]:before {
  font-family: "entypo", sans-serif;
}

/* fontawesome */
[class*=fontawesome-]:before {
  font-family: "FontAwesome", sans-serif;
}

* {
  -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: "";
  height: 30px;
  line-height: 30px;
  width: 30px;
  text-align: center;
}

input[type=checkbox]:checked + label:before {
  color: #a8bd44;
  content: "";
}

.container {
  background-color: #ffffff;
}

.bar {
  background-color: #2e3641;
  text-align: center;
}

.bar a {
  color: #c1cfd9;
  -webkit-transition: background 0.2s ease-out;
  -moz-transition: background 0.2s ease-out;
  -o-transition: background 0.2s ease-out;
  -ms-transition: background 0.2s ease-out;
  transition: background 0.2s ease-out;
}

.bar a:hover {
  text-decoration: none;
  background: #242B33;
}

.title-bar {
  height: 55px;
  text-align: left;
}

.more-bar {
  background-color: #c1cfd9;
  position: relative;
  /*To make absolute position in .scroll (Check "Recent Posts" and "Categories")*/
}

.btn {
  display: inline-block;
  line-height: 35px;
  font-size: 15px;
  font-family: sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  background: #f97e76;
  color: #ffffff;
  text-align: center;
  -webkit-transition: background 0.5s ease-out;
  -moz-transition: background 0.5s ease-out;
  -o-transition: background 0.5s ease-out;
  -ms-transition: background 0.5s ease-out;
  transition: background 0.5s ease-out;
}

.btn:hover {
  text-decoration: none;
  background: #F75145;
}

.lupa {
  font-size: 20px;
  color: #c1cfd9;
  position: absolute;
}

#main-container {
  width: 1600px;
  height: 1200px;
  background-color: #e9f0f4;
  margin: 0 auto;
  padding: 80px;
}

#left-container {
  width: 570px;
  float: left;
}

#newPost {
  height: 675px;
  box-shadow: rgba(0, 0, 0, 0.2) 10px 10px 10px;
}

.side {
  width: 90px;
  height: 675px;
  float: left;
}

.side a {
  display: block;
  line-height: 90px;
  font-size: 22px;
}

#document {
  background: #ffffff;
  color: #2e3641;
}

#document:hover {
  text-decoration: none;
}

.newPostContent {
  width: 480px;
  float: left;
  padding-left: 40px;
  padding-top: 70px;
}

#post-title {
  width: 400px;
  height: 45px;
  margin: 0 0 20px 0;
  padding-left: 15px;
  font-size: 22px;
  font-weight: bold;
}

.format-bar {
  height: 45px;
  width: 400px;
}

.format-bar a {
  font-size: 12px;
  display: block;
  float: left;
  width: 45px;
  line-height: 45px;
  border-right: solid 1px #3a414d;
}

.post-body {
  width: 400px;
  height: 290px;
  color: black;
  margin: 0 0 20px 0;
}

.newPostContent .btn {
  width: 120px;
  line-height: 45px;
}

.disabled {
  background: #c1cfd9;
}

.disabled:hover {
  background: #c1cfd9;
  cursor: default;
}

#messages {
  height: 90px;
  margin-top: 60px;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.2) 10px 10px 10px;
}

#messages a {
  display: inline-block;
  float: left;
  width: 90px;
  line-height: 90px;
  border-right: solid 1px #3a414d;
  font-size: 26px;
}

#messages .lupa {
  left: 305px;
  bottom: 34px;
}

#search-message {
  width: 245px;
  height: 35px;
  border: solid 1px #49525d;
  background: #3d444e;
  color: white;
  margin: 27.5px auto 0;
  padding-left: 35px;
}

#suscribe {
  height: 160px;
  margin-top: 60px;
  box-shadow: rgba(0, 0, 0, 0.2) 10px 10px 10px;
}

#suscribe input[type=text] {
  width: 400px;
  height: 35px;
  margin: 0 0 0 20px;
}

#suscribe .btn {
  width: 120px;
  margin-left: 5px;
}

#middle-container {
  width: 430px;
  float: left;
  margin: 0px 60px;
}

#relatedPosts {
  height: 390px;
  box-shadow: rgba(0, 0, 0, 0.2) 10px 10px 10px;
}

.rpost {
  margin-bottom: 30px;
  width: 310px;
  display: inline-block;
}

.rpost a:first-child {
  color: #f97e76;
  font-size: 16px;
  font-weight: bold;
  line-height: 150%;
}

.rpost-checkbox + label:before {
  position: absolute;
  left: 65px;
  top: -45px;
}

#tags {
  height: 165px;
  margin-top: 60px;
  box-shadow: rgba(0, 0, 0, 0.2) 10px 10px 10px;
}

#tags input[type=text] {
  width: 300px;
  height: 35px;
}

#tags .btn {
  width: 80px;
  margin: 20px 0 0 5px;
}

#tags p {
  font-size: 11px;
  margin-top: 8px;
}

#map {
  height: 370px;
  margin-top: 60px;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.2) 10px 10px 10px;
}

.map {
  width: 430px;
  height: 295px;
  background: #ddcec2;
  position: relative;
}

.map .btn {
  width: 35px;
  font-size: 13px;
  display: block;
  position: absolute;
  top: 20px;
  left: 20px;
}

.map .btn:last-child {
  top: 57px;
}

#map input[type=text] {
  width: 260px;
  height: 35px;
  padding-left: 35px;
}

#map .lupa {
  bottom: 26px;
  left: 26px;
}

#map .addMap {
  width: 120px;
  margin: 20px 0 0 5px;
}

#right-container {
  width: 320px;
  float: left;
}

#calendar {
  height: 330px;
  box-shadow: rgba(0, 0, 0, 0.2) 10px 10px 10px;
}

.calendar-bar a {
  display: block;
  float: left;
  line-height: 55px;
  border-right: solid 2px #3a414d;
  border-bottom: solid 2px #3a414d;
  text-align: center;
}

.arrow {
  width: 55px;
}

.month {
  width: 210px;
}

.calendar-bar h2 {
  padding: 0;
}

.calendar-container {
  width: 320px;
  height: 275px;
  background: #f97e76;
}

.daysWeek {
  background: #2e3641;
  width: 320px;
  height: 40px;
}

.daysWeek li {
  color: #ffffff;
  display: inline-block;
  padding: 10px 0;
  width: 40px;
  text-align: center;
  padding-left: 15px;
}

.calendar {
  text-align: center;
  width: 310px;
  margin-left: 8px;
}

.days a {
  color: #ffffff;
  font-size: 24px;
}

.days td {
  padding: 7px 0px;
}

.daysOut a {
  color: #fbb2ad;
}

.today {
  background: #2e3641;
}

#recentPosts {
  margin-top: 30px;
  box-shadow: rgba(0, 0, 0, 0.2) 10px 10px 10px;
}

.scroll {
  display: block;
  line-height: 55px;
  width: 55px;
  position: absolute;
  /*.more-bar is relative*/
  top: 0;
  right: 0;
  text-align: center;
  background: #9eb2c0;
  color: #ffffff;
  -webkit-transition: background 0.2s;
  -moz-transition: background 0.2s;
  -o-transition: background 0.2s;
  -ms-transition: background 0.2s;
  transition: background 0.2s;
}

.scroll:hover {
  text-decoration: none;
  background: #90A6B6;
}

#categories {
  height: 305px;
  margin-top: 10px;
  box-shadow: rgba(0, 0, 0, 0.2) 10px 10px 10px;
}

#categories input[type=text] {
  width: 280px;
  height: 35px;
  font-size: 18px;
  font-weight: bold;
}

#categories label {
  color: #a4b7c4;
  font-size: 14px;
  font-family: sans-serif;
}

.categories-checkbox + label:before {
  display: inline-block;
  margin: 10px 10px 0 20px;
}

#categories .btn {
  width: 80px;
}

.save {
  float: left;
  margin: 15px 0 0 20px;
  background: #a8bd44;
  -webkit-transition: background 0.5s ease-out;
  -moz-transition: background 0.5s ease-out;
  -o-transition: background 0.5s ease-out;
  -ms-transition: background 0.5s ease-out;
  transition: background 0.5s ease-out;
}

.save:hover {
  background: #97AA3C;
}

.delete {
  float: right;
  margin: 15px 20px 0 0;
}

#moreOptions {
  height: 250px;
  margin-top: 60px;
  box-shadow: rgba(0, 0, 0, 0.2) 10px 10px 10px;
}

.moreOptions-bar a {
  display: inline-block;
  float: left;
  line-height: 55px;
  width: 106.6666666667px;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
}

.popular {
  background: #ffffff;
  color: #c5d2dc;
}

.popular:hover {
  text-decoration: none;
}

.comments-recent {
  background: #c5d2dc;
  color: #ffffff;
  -webkit-transition: background 0.2s;
  -moz-transition: background 0.2s;
  -o-transition: background 0.2s;
  -ms-transition: background 0.2s;
  transition: background 0.2s;
}

.comments-recent:hover {
  text-decoration: none;
  background: #9eb2c0;
}

.popular {
  float: left;
}

.profile-img {
  width: 55px;
  height: 55px;
  background: #786665;
  float: left;
  margin: 15px 0 0 20px;
}

.popular p {
  float: left;
  margin-left: 15px;
}

.popular a:first-child {
  font-size: 14px;
  color: #f97e76;
  font-weight: 900;
  line-height: 200%;
}

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.

Leave a Comment

You need to login first to comment.