LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Selina Kyle

User Experience Designer, Hacker, Full-time Fiddler, Part-time Catwoman

Selina is, apart from being a heavy caffeine addict, also singlehandedly our most proficient coder. She writes and maintains clean and versatile web applications for our online services, as well as our intranet. In her free time she likes althetics and martial arts training, hanging on top of buildings and seducing Batman.

Written by Jasper van der Meer.
Use this code whenever you need and for whatever you want. Enjoy!

CSS
html, body {
  background: white;
  font-family: "Titillium Web", serif;
  line-height: 1.667;
}

body {
  color: #373231;
  font-size: 16px;
  font-weight: normal;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  line-height: normal;
  font-weight: normal;
}

h1 {
  font-size: 3rem;
}

h2, h3 {
  font-size: 1.5rem;
}

h3 {
  margin-bottom: .5em;
}

a {
  color: #2196F3;
  text-decoration: none;
}
a:hover {
  color: #0960a5;
}

ul {
  margin: 0;
  padding: 0;
}

ul.list-unstyled {
  list-style: none;
  list-position: outside;
}

hr {
  height: 0;
  box-sizing: content-box;
  margin-top: 1em;
  margin-bottom: 1em;
  border: 0;
  border-top: 1px solid #eee;
}

.align-left {
  float: left;
}

.align-right {
  float: right;
}

.cf:after {
  content: " ";
  display: table;
  height: 10px;
}

.share {
  color: #BBDEFB;
  transition: all 150ms ease-in-out;
}
.share:hover {
  color: #2196F3;
}

.alert {
  color: #E91E63;
  opacity: 0.5;
  transition: all 150ms ease-in-out;
}
.alert:hover {
  color: #E91E63;
  opacity: 1;
}

.card {
  max-width: 320px;
  margin: 1em auto 3em;
  border: 1px solid #d0cbca;
  background: #2196F3;
  transition: all 150ms ease-in-out;
}
.card:hover {
  background: #0960a5;
  border-color: #0960a5;
  box-shadow: 0 1px 40px rgba(0, 0, 0, 0.15);
}
.card header {
  text-align: center;
  padding: 1em;
  transition: all 150ms ease-in-out;
}
.card header h1, .card header h2 {
  color: white;
  margin: 0;
  line-height: 1.25;
}
.card header h2 {
  margin-bottom: 1em;
}
.card header img.avatar {
  border-radius: 50%;
  height: auto;
  padding: 10px;
  max-width: 128px;
  transition: all 150ms ease-in-out;
  margin-bottom: -50px;
}
.card header img.avatar:hover {
  border-radius: 10%;
  padding: 10px;
}
.card header.header_hover {
  background: #0960a5;
}
.card header.header_hover img.avatar {
  background: #0960a5;
}
.card.card_hover {
  border-color: #0960a5;
}

article, footer {
  background: #fff;
  padding: 1em;
}

article + footer {
  padding-top: 0;
}

footer.closure {
  text-align: center;
  font-size: 12px;
  color: #868686;
}

Description

The popular Card UI is now seen everywhere and for a good cause: It's a very good way to present heterogenous content in a group without overloading the user with information.
Term
Mon, 11/27/2017 - 21:20

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv