cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <section class="topic">
	<header><h2>Night Life</h2></header>
	<ul class="topic-stats">
		<li><strong>517</strong> Followers</li>
		<li><strong>315</strong> Favorites</li>
		<li><strong>7,815</strong> Views</li>
	</ul>
</section>











<section class="topic">
	<header><h2>Art & Culture</h2></header>
	<ul class="topic-stats">
		<li><strong>3,589</strong> Followers</li>
		<li><strong>825</strong> Favorites</li>
		<li><strong>8,815</strong> Views</li>
	</ul>
</section>
<section class="topic">
	<header><h2>Food Festivals</h2></header>
	<ul class="topic-stats">
		<li><strong>217</strong> Followers</li>
		<li><strong>894</strong> Favorites</li>
		<li><strong>12,815</strong> Views</li>
	</ul>
</section>
<section class="topic">
	<header><h2>Music Scene</h2></header>
	<ul class="topic-stats">
		<li><strong>517</strong> Followers</li>
		<li><strong>315</strong> Favorites</li>
		<li><strong>7,815</strong> Views</li>
	</ul>
</section>
<section class="topic">
	<header><h2>Family Activities</h2></header>
	<ul class="topic-stats">
		<li><strong>517</strong> Followers</li>
		<li><strong>315</strong> Favorites</li>
		<li><strong>7,815</strong> Views</li>
	</ul>
</section>
            
          
!
            
              // UI example inspired by:
// https://dribbble.com/shots/2267219-UI-Navigation-Concept

// Like to read? Here's a great intro to SASS:
// https://abookapart.com/products/sass-for-web-designers

// Install SASS:
// http://sass-lang.com/install

// Play with SASS and view compiled CSS:
// http://www.sassmeister.com/

// Basics:
// http://sass-lang.com/guide

// Variables
// - represent your HTML structure in your stylesheet
// - helps make your stylesheet more readable and organized
// - rule of thumb: 3 levels or less to prevent highly specified rules that are hard to override

$white: #fff;
$primary-color: #F64C73;
$secondary-color: #20D2BB;
$tertiary-color: #C873F4;
$support-one: #FFF985;

// Maps
// - A grouping (array) of key/value pairs
// More: http://clubmate.fi/sass-maps-syntax-examples-and-good-things/
$colors: (
    "primary":   $primary-color,
    "secondary": $secondary-color,
    "tertiary":  $tertiary-color
);

// Mixins
// - reusable CSS declarations
// - can take in a list of variables
@mixin topic-sets($bg, $text) {
  background-color: $bg;
  
  .topic-stats li {
    color: $text;
  }
}

// Global styles
body {
  background-color: $support-one;
  color: $white;
  font-family: 'Source Sans Pro', sans-serif;
}

h2 {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 500;
}


.topic {
  // <section> styles
  max-width: 400px;
  min-height: 200px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: black;
  
  
  // & - the parent selector
  // - represented by &
  // - refers to the top level of your SASS declaration
  // - useful for pseudo classes (:hover, :active, :before, :nth-child, etc)
  // - awesome for child and sibling selectors (>, +, ~)
  // More: https://css-tricks.com/the-sass-ampersand/
  & + & {
    border-top: 1px solid $support-one;
  }
  
  header {
    padding: 1em;
    
    h2 {
      margin: 0;
    }
  }
  
  .topic-stats {
    list-style: none;
    margin: 1em 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    
    li {
      flex: 0 0 25%;
      text-transform: uppercase;
      font-size: .7em;
      line-height: 1.5em;
      // More on color functions:
      // http://jackiebalzer.com/color
      color: lighten( $primary-color, 28% );
      
      strong {
        display: block;
        font-size: 1.5em;
        color: $white;
      }
    }
  }
  
  // Dynamic Background Colors
  // length = how many items in $colors
  $length: length($colors);
  @each $name, $color in $colors {
    // index = current item # in the list
    $i: index(($colors), ($name $color));
    
    $text-color: lighten( $color, 25% );
    
    // Learn more about :nth-child:
    // https://css-tricks.com/almanac/selectors/n/nth-child/
    
    // "apply every $length items, starting at current index"
    &:nth-child(#{$length}n + #{$i}) {
      @include topic-sets($color, $text-color);
    }  
  }
  
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console