Skip to content

Instantly share code, notes, and snippets.

View Gioni06's full-sized avatar
👨‍💻
Working from home

Jonas D. Gioni06

👨‍💻
Working from home
View GitHub Profile
<div class="col-3-grid">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
.grid {
display: grid;
grid-template-areas:
'header header header'
'sidebar content content'
'footer footer footer';
column-gap: 20px;
}
.grid > .header {
<div class="grid">
<div class="header">Header</div>
<div class="sidebar">
<h4>Sidebar</h4>
<ul>
<li>
<a href="#">Sidebar-Item</a>
</li>
<li>
h1 {
font-family: 'Pacifico', cursive;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./style.css">
<link href="https://fonts.googleapis.com/css?family=Pacifico&display=swap" rel="stylesheet">
<title>Using Google Fonts</title>
html {
--primary-color: #d1e8e6;
--secondary-color: #a81326;
--text-color: #fff;
--space: 28px;
}
.box:not(:last-child) {
padding: var(--space);
white-space: nowrap;
<div class="box primary">
<code>this is --primary-color</code>
</div>
<div class="box secondary">
<code>this is --secondary-color</code>
</div>
<div class="box primary">
<code>this is --primary-color</code>
p > .special {
color: #a81326;
}
p > em {
font-style: normal;
color: #a81326;
}
p > mark {
<p>Has consul audire docendi ad, an <span class="special">vivendum maluisset</span> est. Prima illum <em>repudiare</em> ad mea, sale <mark>sententiae</mark> usu at.</p>
<a href="#" title="visit breuninger.com" class="logo">
<img src="./img/breuninger.svg" alt="breuninger logo">
</a>