A Pen by Mfcastro

Thumbnail
This awesome code was written by marcocastro, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright marcocastro ©
  • HTML
  • CSS
  • JavaScript
    <section class="hero is-dark is-bold">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Hero title
      </h1>
      <h2 class="subtitle">
        Hero subtitle
      </h2>
    </div>
  </div>
</section>



<section class="section">
  <div class="container">
    <h1 class="title">
      Hello World
    </h1>
    <p class="subtitle">
      My first website with <strong>Bulma</strong>!
    </p>
  </div>
</section>

<div class="columns">
  <div class="column">
    <a class="button">
  Button
</a>

  </div>
  <div class="column">
    <a class="button is-primary">
  Primary button
</a>
  </div>
  <div class="column">

    <a class="button is-large is-success">
  Large button
</a>

  </div>
  <div class="column">
    <a class="button is-loading">
  Loading button
</a>

  </div>
  <div class="column">
    <button class="button is-danger is-inverted">
  What you yo?
</button>
  </div>
</div>

<div class="columns">
  <div class="column">
    <button class="button is-outlined is-large is-danger">
  This is my button yo!!
</button>
  </div>
  <div class="column">
    <button class="button is-outlined is-large is-danger is-loading">
  This is my button yo!!
</button>
  </div>
</div>

<div class="section">
  <div class="container is-fluid">
    <div class="columns ">
      <div class="column is-narrow">
        First column dsjfklsdjfl dsklfj dslf
        <div class="columns is-mobile">
          <div class="column">123</div>
          <div class="column">456</div>
          <div class="column">789</div>

        </div>

      </div>
      <div class="column">
        Second column
      </div>
      <div class="column">
        Third column
      </div>
      <div class="column">
        Fourth column
      </div>
    </div>
  </div>
</div>

<div class="section">
  <div class="container">
    <div class="columns is-mobile is-multiline is-centered">
      <div class="column is-narrow">
        <p class="bd-notification is-primary">
          <code class="html">is-narrow</code><br> First Column
        </p>
      </div>
      <div class="column is-narrow">
        <p class="bd-notification is-primary">
          <code class="html">is-narrow</code><br> Our Second Column
        </p>
      </div>
      <div class="column is-narrow">
        <p class="bd-notification is-primary">
          <code class="html">is-narrow</code><br> Third Column
        </p>
      </div>
      <div class="column is-narrow">
        <p class="bd-notification is-primary">
          <code class="html">is-narrow</code><br> The Fourth Column
        </p>
      </div>
      <div class="column is-narrow">
        <p class="bd-notification is-primary">
          <code class="html">is-narrow</code><br> Fifth Column
        </p>
      </div>
    </div>

  </div>
</div>


<div class="tile">
  yo
  <!-- The magical tile element! -->
</div>


<footer class="footer">
  <div class="container">
    <div class="content has-text-centered">
      <p>
        <strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
        <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
        is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
      </p>
    </div>
  </div>
</footer>

/*Downloaded from https://www.codeseek.co/marcocastro/a-pen-by-mfcastro-yjWaaG */
    $yo: red;



/*Downloaded from https://www.codeseek.co/marcocastro/a-pen-by-mfcastro-yjWaaG */
    

Comments