Skip to content

Instantly share code, notes, and snippets.

View Alemusica's full-sized avatar

Alemusica

3 followers · 27 following
View GitHub Profile
@Alemusica
Alemusica / index.html
Created April 1, 2026 14:33
Modern Blog Layout with CSS Grid
<div class="blog">
<div class="blog-part is-menu">
<a href="#" class="blog-menu">
Work
<svg fill="none" stroke="currentColor" stroke-width=".7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up-right" viewBox="0 0 24 24">
<path d="M7 17L17 7M7 7h10v10" />
</svg>
</a>
<a href="#" class="blog-menu">Studio</a>
<a href="#" class="blog-menu">Blog</a>
@Alemusica
Alemusica / index.html
Created April 1, 2026 14:08
Newspaper Layout with Night Mode
<header>
<h1 class="news_paper_title">
<a href="#">Southern Press</a>
</h1>
<div class="dark_mode_container">
<label class="dark_mode_switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round"></div>
</label>
@Alemusica
Alemusica / index.html
Created April 1, 2026 14:08
Newspaper Style Design
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic|Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles/newspaper.css">
<title>Newspaper Style Design Experiment</title>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="head">
@Alemusica
Alemusica / index.html
Created April 1, 2026 14:06
Rolling Stone Example
<header>
<!-- This headline is a single phrase! Using generic span elements provides a way to maintain semantic integrity, but introduce "extra" elements for design flexibility -->
<h1 class="box">
<span class="flush-right bg-nudge">The</span>
<span class="sm-nudge">web’s</span>
<span class="flush-right">deepest</span>
<span>mystery</span>
</h1>
@Alemusica
Alemusica / css-typography-with-pseudo-elements.markdown
Created April 1, 2026 14:05
CSS Typography with Pseudo-elements
@Alemusica
Alemusica / index.html
Created April 1, 2026 14:04
Roadtrip Signs #CPC
<!-- 🛣🚦🚗-->
<div class="wrapper">
<div class="credit">
<p>Design based on <a href="https://dribbble.com/shots/12670227-Welcome-To-Georgia">Katie Connolly's Dribble shot</a></p>
</div>
<div class="map">
<svg id="map" data-name="map" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 410.9 610.4">
<path id="map-lines" d="M1 210c5 3 9 5 11 11l16 66 7 28c1 3 1 5-3 5H5c-3 0-4 0-5-2v15l3-2h21l1 1-25 18v17l4-2 32 5c3 0 4 1 3 4l-18 41c-1 3-2 4-5 3H4c-2 1-3 0-4-1v8c1-2 2-2 5-2h14c3 0 5-1 6-4l19-46c1-2 1-2 3-2l37 5a6 6 0 015 4l18 46c1 3 1 5-1 7l-42 48a9 9 0 01-6 3l-52 7c-3 1-5 0-6-1v8l4-2 57-7a8 8 0 006-4l40-46 3-4c7 13 9 26 11 39l8 45 16 86c0 4 0 5-5 5H5l-5-1v1h411v-1l-4 1h-37c-5 1-6-1-7-5l-1-12c0-2 0-4 3-3l43 2a3 3 0 013 2v-15c-1 3-3 3-7 2l-37-2c-5 0-6-1-6-6l3-103 2-59c0-8 2-13 9-18 9-5 16-12 24-19l11-9a4 4 0 011 1v-18l-5 8c-14 9-27 20-41 30l-79 63c-2 2-3 2-5-1l-80-99-19-23a10 10 0 01-2-7v-20-22c0-3 1-4 4-5l71-2 92-3a10 10 0 019 4l52 53a9 9 0 013 4v-19l-2 1-34-35-40-40c-2-3-4-5-3-9v-39c0-3 1-5 4-3l72 35 3 3V11
@Alemusica
Alemusica / book-excerpt-w-responsive-columns-cpc.markdown
Created April 1, 2026 14:03
Book Excerpt w/ Responsive Columns #cpc

Book Excerpt w/ Responsive Columns #cpc

I've been sick and I feel bad that I hadn't been able to update this pen's description for so long!

Here goes~

  1. I kept it simple and just wanted to set a width and amount for the columns using the columns shorthand property.

  2. The flower silhouette is from FreeSVG and I just used the png version.

@Alemusica
Alemusica / chapter-4-creating-a-responsive-web-newspaper-layout.markdown
Created April 1, 2026 14:03
Chapter 4 - Creating a responsive web newspaper layout

Chapter 4 - Creating a responsive web newspaper layout

Based on LA Noire a game by Rockstar Games this is a newspaper layout using CSS columns. Included in this is spaning columns, media quires, typography, colour, and other bits and bob's.

A Pen by Michael Gearon on CodePen.

License.

@Alemusica
Alemusica / index.html
Created April 1, 2026 14:02
Typography Manual by Mike Mai
<header aria-label="Masthead">
<h1>
<small>Mike Mai&rsquo;s</small>
<span>Typography<br>Manual</span>
</h1>
</header>
<main>
<article>
<h2>Use One Font</h2>
<p>Believe it or not, you can do a lot with just a single font. Choose a well designed font and explore all of its weights, this works best with <a href="https://fonts.google.com/?vfonly=true">variable fonts</a>. If a font you like does not have multiple weights, you could utilize colors to <a href="https://mikemai.net/typesettings/showcase-im-fell-english.html">create contrast</a> between headings and body&nbsp;text.</p>
@Alemusica
Alemusica / index.html
Created April 1, 2026 13:48
Vertical image loop with scroll acceleration with gsap
<section>
<h1>Vertical image loop with scroll acceleration with gsap</h1>
<h2 class="credit"><a href="https://madebybeings.com" target="_blank">Made by Beings</a></h2>
</section>
<div class="gallery">
<div class="col">
<div class="image">
<img src="https://images.pexels.com/photos/10324713/pexels-photo-10324713.jpeg?cs=srgb&dl=pexels-taha-samet-arslan-10324713.jpg&fm=jpg?auto=compress&cs=tinysrgb&h=650&w=940%20940w" alt="">