LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code




NEW

What is Lorem Ipsum?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe eveniet hic eaque neque explicabo architecto rerum porro cupiditate dignissimos ratione doloribus veritatis maiores sed consequuntur totam nostrum inventore ex fugit... Read more

CSS
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
body {
  font-family: 'Open Sans', sans-serif;
  width: 930px;
  margin: auto;
  background: url(https://i.imgur.com/Oy4gzyy.jpg);
}
.menu {
  background: #fff;
  height: 60px;
  line-height: 60px;
  font-size: 12pt;
}
.toggle,
.mainmenu,
.search,
.social,
.user {
  float: left;
}
.search,
.social,
.user {
  padding-left: 12px;
  padding-right: 12px;
}
.menuright {
  float: right;
  color: #C5CDD0;
}
.menuright a {
  color: #C5CDD0;
  transition: 0.3s;
}
.menuright a:hover,
.menuright a.active {
  color: #57CBC8;
}
.toggle {
  width: 60px;
  font-size: 20pt;
  text-align: center;
  background: #57CBC8;
  color: #fff;
}
.mainmenu {
  margin-left: 10px;
}
.mainmenu a {
  text-decoration: none;
  color: #475258;
  transition: 0.3s;
}
.mainmenu a:hover {
  color: #57CBC8;
}
.mainmenu li {
  display: inline-block;
  margin-left: 40px;
}
.search input {
  display: none;
  border: 1px solid #C5CDD0;
  padding: 5px;
  font-size: 12pt;
  outline: none;
}
.social {
  border-left: 1px solid #e1e5e7;
  border-right: 1px solid #e1e5e7;
}
.social li {
  display: inline-block;
  margin: 0 6px;
}
.container {
  overflow: hidden;
  margin-top: 1.5%;
}
.sidebar {
  float: left;
  width: 32%;
  margin-right: 1.5%;
  padding-bottom: 1.5%;
  background: #fff;
  color: #475258;
}
.sidebar h2 {
  font-size: 16pt;
  padding: 6%;
  border-bottom: 1px solid #e1e5e7;
}
.sidebar li {
  padding: 6%;
}
.sidebar a {
  display: block;
  text-decoration: none;
  overflow: hidden;
}
.sidebar a img {
  float: left;
  margin-right: 6%;
  display: block;
}
.sidebar a h3 {
  color: #475258;
}
.sidebar a span {
  display: block;
  margin-top: 6%;
  color: #919fa7;
  font-size: 8pt;
}
.content {
  float: right;
  width: 66.5%;
  background: #fff;
}
.image {
  background: #fff;
  position: relative;
  overflow: hidden;
}
.image img {
  position: relative;
  z-index: 0;
  width: 100%;
  display: block;
  height: auto;
  transition: 0.3s;
}
.image img:hover {
  opacity: 0.8;
}
.image span {
  background: #EA6060;
  display: block;
  position: absolute;
  font-size: 16pt;
  width: 20%;
  color: #fff;
  text-align: center;
  padding: 20% 10% 2%;
  transform: rotateZ(-45deg);
  top: -25%;
  left: -20%;
  z-index: 1;
}
.desc {
  position: relative;
  background: #fff;
  padding: 6% 6% 6% 10%;
}
.desc .type {
  display: block;
  background: #57CBC8;
  color: #fff;
  font-size: 14pt;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  position: absolute;
  top: 30px;
  left: 0;
}
.desc h1 {
  font-size: 19pt;
  color: #475258;
  margin-bottom: 3%;
}
.desc p {
  line-height: 1.5em;
  color: #999;
  font-weight: 300;
}
.desc a {
  color: #EA6060;
  text-decoration: none;
  transition: 0.3s;
}
.desc a:hover {
  color: #9c1515;
}
.share {
  margin-top: 5%;
}
.share li {
  display: inline-block;
  margin-right: 5%;
  font-weight: 300;
}
.share a {
  color: #999;
  transition: 0.3s;
}
.share a i,
.share a:hover {
  color: #57CBC8;
}
Host Instantly Drag and Drop Website Builder

 

Description

Original design can be found here: http://graphicburger.com/blog-magazine-ui-kit-2/
Term
Mon, 11/27/2017 - 22:03

Related Codes

Pen ID
Pen ID
Pen ID