Skip to content

Instantly share code, notes, and snippets.

View olafleme's full-sized avatar

OLafleme olafleme

View GitHub Profile
@olafleme
olafleme / bootstrap-4-navbar.markdown
Created January 25, 2026 09:20
bootstrap 4 navbar

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
olafleme / bootstrap-4-navbar.markdown
Created January 25, 2026 09:17
bootstrap 4 navbar

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
olafleme / index.html
Created January 18, 2026 10:29
Profile Card Neo Brutalism Using Html and Css
<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
olafleme / index.html
Created January 18, 2026 10:29
Profile Card Neo Brutalism Using Html and Css
<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
olafleme / index.html
Created January 18, 2026 10:22
Profile Card Neo Brutalism Using Html and Css
<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
olafleme / 3d-zigzagged-zigzag-tessellated-pattern-no-div-pure-css.markdown
Created January 18, 2026 10:18
3D ZigZagged ZigZag Tessellated Pattern - No Div - Pure CSS
@olafleme
olafleme / art-deco-card.markdown
Created January 18, 2026 10:16
Art Deco Card

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
olafleme / 3d-zigzagged-zigzag-tessellated-pattern-no-div-pure-css.markdown
Created January 18, 2026 08:06
3D ZigZagged ZigZag Tessellated Pattern - No Div - Pure CSS
@olafleme
olafleme / index.html
Created January 11, 2026 21:12
Responsive Image Carousel ( Animation )
<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
olafleme / index.html
Created January 2, 2026 20:39
Navbar
<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="#">