Code Playground

<html>

<head>

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

save draft preview publish

Get our feed through email.

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
>

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%;
}

Subscribe

Related Posts

Tags

<

September

>

Recent Posts

Categories

Frontend Forever App

Subscribe

Related Posts

Tags

<

September

>

Recent Posts

Categories