LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Favorites

Add
How to Bounce Shapes
John McAwesome
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, soluta vitae blanditiis neque tempore eaque. Vero repudiandae hic sapiente. Molestias repudiandae numquam, maxime fugiat ea libero ducimus tenetur sunt facere.
Animating Shapes
Cindy Expo
Repellat quidem eius molestias, laudantium eveniet eos esse numquam, minima omnis veniam! Cumque consectetur dicta distinctio minima suscipit necessitatibus reprehenderit vero, cum optio assumenda perspiciatis magnam. Iusto soluta aliquid perferendis?
Not My Shape
Beie Felicia
Earum quod voluptates numquam assumenda inventore. Obcaecati praesentium blanditiis quis aut eaque officiis aperiam dicta natus voluptatibus tenetur. Natus nemo, facere temporibus sint possimus, doloremque ab excepturi numquam! Natus, ipsum.
CSS
html,
body {
  width: 100%;
  height: 100%;
}

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  box-sizing: border-box;
}
body *, body *:before, body *:after {
  box-sizing: inherit;
}

.bg {
  position: static;
  top: 0;
  height: 50%;
  background: -webkit-linear-gradient(#0b1019, #5f94e3 300%);
  background: linear-gradient(#0b1019, #5f94e3 300%);
  z-index: 1;
}

.body {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
}

nav, section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.logo {
  height: 28px;
  width: 28px;
  color: #fff;
  border: 2px solid;
  border-radius: 28px;
}
.logo:hover {
  color: #69A4FC;
}
.logo:hover + .navigation-name {
  color: #69A4FC;
}

nav {
  margin: 40px auto 60px;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.navigation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: auto;
}
.navigation a {
  position: relative;
  padding: 10px 14px;
  font-size: 14px;
  text-decoration: none;
  color: #4b4b4b;
  background: #fff;
  -webkit-transition: color 300ms ease, box-shadow 120ms ease;
  transition: color 300ms ease, box-shadow 120ms ease;
}
.navigation a:hover {
  color: #69A4FC;
  box-shadow: 0 5px 54px #69A4FC;
  -webkit-transition: color 120ms ease, box-shadow 200ms ease;
  transition: color 120ms ease, box-shadow 200ms ease;
}
.navigation a:first-child {
  border-radius: 2px 0 0 2px;
  z-index: 12;
}
.navigation a:nth-child(2) {
  z-index: 13;
  -webkit-transition: color 300ms ease, box-shadow 120ms ease, z-index 200ms;
  transition: color 300ms ease, box-shadow 120ms ease, z-index 200ms;
}
.navigation a:nth-child(2):hover {
  z-index: 10;
  -webkit-transition: color 120ms ease, box-shadow 200ms ease, z-index 0ms;
  transition: color 120ms ease, box-shadow 200ms ease, z-index 0ms;
}
.navigation a:nth-child(3) {
  margin-right: 10px;
  border-radius: 0 2px 2px 0;
  z-index: 12;
}
.navigation a:last-child {
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0);
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}
.navigation a:last-child:hover {
  color: #fff;
  box-shadow: inset 0 0 0 1px #fff;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}
.navigation-name {
  margin-left: 10px;
  color: #fff;
  text-shadow: 0 1px #000;
  font-weight: 400;
  font-size: 16px;
}
.navigation-name:hover {
  color: rgba(255, 255, 255, 0.8);
}

section {
  padding: 40px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.profile {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid #efefef;
}
.social a {
  display: inline-block;
  margin-right: auto;
  padding: 10px 14px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  background: #69A4FC;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.social .following,
.social .followers {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 16px;
  padding-right: 16px;
  margin-right: 20px;
  font-size: 14px;
  border: 1px solid #eee;
  border-radius: 200px;
}
.social .following .number,
.social .followers .number {
  margin-right: 8px;
  color: #69A4FC;
  font-size: 18px;
  font-weight: 300;
}
.social .following .label,
.social .followers .label {
  font-size: 12px;
  font-weight: 500;
  color: #999;
}

.shared-content h3 {
  font-size: 18px;
  font-weight: 500;
  color: #747474;
}
.shared-content .section-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #efefef;
}
.shared-content .section-head a {
  display: inline-block;
  padding: 8px 12px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  background: #a4fc69;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.content .row {
  padding: 18px 0;
  border-bottom: 1px solid #efefef;
}
.content .title {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
  color: #5483ca;
  font-size: 18px;
  font-weight: 500;
}
.content .author {
  display: inline-block;
  padding: 6px 8px;
  color: #464646;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid #dadada;
  border-radius: 4px;
}
.content .preview {
  position: relative;
  line-height: 1.6;
  color: #666;
}
.content .preview:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 40%, #fff 98%);
  background: linear-gradient(rgba(255, 255, 255, 0) 40%, #fff 98%);
}

.show-more {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 40px;
}
.show-more a {
  display: inline-block;
  margin: auto;
  padding: 12px 18px;
  color: #69A4FC;
  text-decoration: none;
  border: 1px solid rgba(105, 164, 252, 0.8);
  border-radius: 100px;
}

Description

I created a user profile where they can save articles on a fictional social network.
Term
Mon, 11/27/2017 - 21:30

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv