LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Rebate Available!

Click here to save more with a free mail-in rebate!

Need shopping help? See our buying guide!

Get product comparisons, shopping tips, and more. Get product comparisons, shopping tips, and more. Get product comparisons, shopping tips, and more. Learn More

Need shopping help? See our buying guide!

Get product comparisons, shopping tips, and more. Learn More

Need shopping help? See our buying guide!

Get product comparisons, shopping tips, and more. Learn More

AVAILABLE ICONS

CSS
body {
  padding: 25px;
}

#buying-guide.c-banner {
  background: #1fb3d1;
  border-radius: 5px;
  box-shadow: 0px 16px 4px -12px rgba(34, 34, 34, 0.15);
  float: left;
  font: 400 14px/1.4em Arial, Helvetica, Sans-serif;
  margin: 15px 5px;
  max-width: 390px;
  min-width: 280px;
  overflow: hidden;
  width: 90%;
}

#buying-guide.c-banner.u-blue {
  border: 1px solid #1fb3d1;
}

#buying-guide.c-banner.u-green {
  border: 1px solid #96db4b;
}

#buying-guide.c-banner.u-orange {
  border: 1px solid #f9d4b2;
}

#buying-guide.c-banner.u-yellow {
  border: 1px solid #fad47c;
}

#buying-guide.c-banner.u-blue .o-content {
  background: #e8f9fe;
}

#buying-guide.c-banner.u-green .o-content {
  background: #f5fff1;
}

#buying-guide.c-banner.u-orange .o-content {
  background: #fff4e5;
}

#buying-guide.c-banner.u-yellow .o-content {
  background: #feffec;
}

#buying-guide.c-banner .o-icon {
  display: block;
  overflow: hidden;
  width: 75px;
}

#buying-guide.c-banner .o-icon.u-right {
  border-radius: 0 5px 5px 0;
  float: right;
}

#buying-guide.c-banner .o-icon.u-left {
  border-radius: 5px 0 0 5px;
  float: left;
}

#buying-guide.c-banner .o-content {
  float: left;
  max-width: 300px;
  min-height: 80px;
  padding: 0 10px;
  position: relative;
  width: calc(100% - 95px);
}

#buying-guide.c-banner .o-content h2.o-content_title {
  color: #1fb3d1;
  font-size: 1.1em;
  line-height: 1.2em;
  margin: 3px 0;
}

#buying-guide.c-banner .o-content p.o-content_sub-title {
  color: #585555;
  font-size: .85em;
  line-height: 1.25em;
  margin: 3px 0;
}

#buying-guide.c-banner .o-content p.o-content_sub-title > a {
  color: #1fb3d1;
  text-decoration: none;
}

#buying-guide.c-banner .o-content p.o-content_sub-title > a:hover {
  text-decoration: underline;
}

#icon-list .o-icon_list {
  background: #1fb3d1;
  height: auto;
  width: 75px;
}

Description

Banners created for merchandisers to add to product detail pages as guides. These were set up to be as flexible and easy to update and change as possible.
Term
Sat, 04/14/2018 - 20:45

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv