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.

            
              <a href="https://github.com/Chalarangelo/mini.css"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<header>
  <a href="#" class="logo">Sucroa</a>
  <button>Home</button>
  <a href="#" class="button">Recipes</a>
  <label class="button">Community</label>
</header>
<div class="container">
  <div class="row">
    <div class="col-sm-12" style="text-align:center;">
      <h1>mini.css Sucroa Flavour<small>by Angeliki Daskalakis</small></h1>
    </div>
    <div class="col-sm-12">
      <div class="card fluid">
        <div class="section">
          <h2>Red Velvet Cupcakes</h2>
          <p><strong>Red velvet cakes and cupcakes</strong> are probably our most requested recipes... so here they are! This recipe creates <em>awesome</em> homemade cupcakes that will really impress your friends. We've used leftover sponge instead of sprinkles
            for that professional finish</p>
        </div>
        <div class="section light">
          <div class="tabs stacked">
            <input type="radio" id="i1" checked name="images-accordion">
            <label for="i1">Step 1</label>
            <div>
              <img src="https://du7ybees82p4m.cloudfront.net/415_536263c470892.jpg?width=600&height=338">
            </div>
            <input type="radio" id="i2" name="images-accordion">
            <label for="i2">Step 2</label>
            <div>
              <img src="https://du7ybees82p4m.cloudfront.net/698_53626fad0e4fa.jpg?width=600&height=338">
            </div>
            <input type="radio" id="i3" name="images-accordion">
            <label for="i3">Step 3</label>
            <div>
              <img src="https://du7ybees82p4m.cloudfront.net/332_53626fae04b6b.jpg?width=600&height=338">
            </div>
            <input type="radio" id="i4" name="images-accordion">
            <label for="i4">Step 4</label>
            <div>
              <img src="https://du7ybees82p4m.cloudfront.net/885_53626faedddee.jpg?width=600&height=338">
            </div>
            <input type="radio" id="i5" name="images-accordion">
            <label for="i5">Step 5</label>
            <div>
              <img src="https://du7ybees82p4m.cloudfront.net/303_53626fafdbf83.jpg?width=600&height=338">
            </div>
            <input type="radio" id="i6" name="images-accordion">
            <label for="i6">Step 6</label>
            <div>
              <img src="https://du7ybees82p4m.cloudfront.net/659_53626fb0df64a.jpg?width=600&height=338">
            </div>
            <input type="radio" id="i7" name="images-accordion">
            <label for="i7">Step 7</label>
            <div>
              <img src="https://du7ybees82p4m.cloudfront.net/984_53626fb1c5bbd.jpg?width=600&height=338">
            </div>
          </div>
        </div>
        <div class="section lighter">
          <h3>Ingredients</h3>
          <div class="row">
            <div class="col-sm-12 col-md-6">
              <h4>For the cupcakes</h4>
              <ul>
                <li>1 large egg</li>
                <li>120 ml buttermilk</li>
                <li>1 pinch salt</li>
                <li>1 tbsp white wine vinegar</li>
                <li>1 tsp heaped cocoa powder</li>
                <li>1 tsp vanilla essence</li>
                <li>2 tbsp red food colouring (30ml)</li>
                <li>180 ml sunflower oil</li>
                <li>200 g self raising flour</li>
                <li>225 g caster sugar</li>
              </ul>
            </div>
            <div class="col-sm-12 col-md-6">
              <h4>For the frosting</h4>
              <ul>
                <li>100 g cream cheese</li>
                <li>50 g butter</li>
                <li>200 g icing sugar</li>
                <li>1 tsp vanilla essence</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="section light">
          <h3>Preheat oven</h3>
          <p>Preheat oven to <mark>180°C</mark>.</p>
        </div>
        <div class="section">
          <h3>Mix wet ingredients</h3>
          <p>Whisk the egg in a bowl for a minute. Add buttermilk, vinegar, vanilla, and sunflower oil.</p>
        </div>
        <div class="section light">
          <h3>Add remaining ingredients</h3>
          <p>Dump the flour, sugar, cocoa, salt and food colouring into the bowl and mix together. Whisk for a few minutes until combined and smooth. </p>
        </div>
        <div class="section">
          <h3>Fill cases and bake</h3>
          <p>Spoon into cupcake cases sat in a muffin tray so they are ¾ full. Bake in the oven for <mark class="secondary">25 minutes</mark> until risen and cooked - test with a knife and it should come out clean.</p>
        </div>
        <div class="section light">
          <h3>Cool cakes</h3>
          <p>Cool the cupcakes in their cases. Slice a little off of the top of the cupcakes to make it flat and keep the trimmings to one side.</p>
        </div>
        <div class="section">
          <h3>Make frosting</h3>
          <p>Beat the cream cheese and butter in a bowl until light and fluffy with the vanilla. Add icing sugar and stir until combined.</p>
        </div>
        <div class="section light">
          <h3>Decorate and serve</h3>
          <p>Spread a little icing on top of the cupcake and crumble some sponge off-cuts on top to decorate. Makes <mark class="tertiary">10 cupcakes</mark>.</p>
        </div>
        <div class="section">
          <p>This recipe and all associated material was found on <a href="https://sortedfood.com/recipe/redvelvetcupcakes">sortedfood.com</a>.</p>
        </div>
      </div>
    </div>

  </div>
  <div class="row">
    <div class="col-sm-12">
      <form>
        <div class="input-group">
          <label for="comment">&nbsp;&nbsp;Comments</label> <br>
          <textarea id="comment" placeholder="Add a comment..." rows="2" cols="80"></textarea>
        </div>
      </form>
    </div>
  </div>
</div>
<footer>
  <p><strong>Sucroa</strong> was designed with <span class="heart"></span> by <a href="https://github.com/AngieDaskalakis">Angeliki Daskalakis</a>. <a href="https://chalarangelo.github.io/mini.css/">mini.css</a> was built by <a href="https://github.com/Chalarangelo">Angelos Chalaris</a>.</p>
</footer>
            
          
!
            
              /* Demo styles */

.heart {
  background-color: #fffddc;
  display: inline-block;
  height: 10px;
  margin: 0 6px;
  position: relative;
  top: 0;
  transform: rotate(-45deg);
  width: 10px;
}

.heart:before,
.heart:after {
  content: "";
  background-color: #fffddc;
  border-radius: 50%;
  height: 10px;
  position: absolute;
  width: 10px;
}

.heart:before {
  top: -5px;
  left: 0;
}

.heart:after {
  left: 5px;
  top: 0;
}
            
          
!
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