olafleme

bootstrap 4 navbar

With Bootstrap, a navigation bar can extend or collapse, depending on the screen size. A standard navigation bar is created with the .navbar class, followed by a responsive collapsing class: .navbar-expand-xl. ... sm (stacks the navbar vertically on extra large, large, medium or small screens).

A Pen by Piyush on CodePen.

License.

olafleme

bootstrap 4 navbar

With Bootstrap, a navigation bar can extend or collapse, depending on the screen size. A standard navigation bar is created with the .navbar class, followed by a responsive collapsing class: .navbar-expand-xl. ... sm (stacks the navbar vertically on extra large, large, medium or small screens).

A Pen by Piyush on CodePen.

License.

olafleme

<div class="card-container">
  <div class="upper-container">
    <div class="image-container">
      <img src="https://api.dicebear.com/7.x/thumbs/svg?seed=Alaina" alt="profile image" />
    </div>
  </div>

  <div class="lower-container">
    <div>
      <h3>Alaina Wick</h3>

olafleme

<div class="card-container">
  <div class="upper-container">
    <div class="image-container">
      <img src="https://api.dicebear.com/7.x/thumbs/svg?seed=Alaina" alt="profile image" />
    </div>
  </div>

  <div class="lower-container">
    <div>
      <h3>Alaina Wick</h3>

olafleme

<div class="card-container">
  <div class="upper-container">
    <div class="image-container">
      <img src="https://api.dicebear.com/7.x/thumbs/svg?seed=Alaina" alt="profile image" />
    </div>
  </div>

  <div class="lower-container">
    <div>
      <h3>Alaina Wick</h3>

olafleme

3D ZigZagged ZigZag Tessellated Pattern - No Div - Pure CSS

A Pen by Josetxu on CodePen.

License.

olafleme

Art Deco Card

Wanted to explore CSS only Art Deco styling. I think it worked out pretty well!

A Pen by Mubanga on CodePen.

License.

olafleme

3D ZigZagged ZigZag Tessellated Pattern - No Div - Pure CSS

A Pen by Josetxu on CodePen.

License.

olafleme

<main>
  <ul class='slider'>
    <li class='item' style="background-image: url('https://cdn.mos.cms.futurecdn.net/dP3N4qnEZ4tCTCLq59iysd.jpg')">
      <div class='content'>
        <h2 class='title'>"Lossless Youths"</h2>
        <p class='description'> Lorem ipsum, dolor sit amet consectetur
        adipisicing elit. Tempore fuga voluptatum, iure corporis inventore
        praesentium nisi. Id laboriosam ipsam enim.  </p>
        <button>Read More</button>
      </div>

olafleme

<nav class="navbar">
  <div class="container">

    <div class="navbar-header">
      <button class="navbar-toggler" data-toggle="open-navbar1">
        <span></span>
        <span></span>
        <span></span>
      </button>
      <a href="#">