Skip to content

Instantly share code, notes, and snippets.

View Ullvang's full-sized avatar

Jon Erik Ullvang Ullvang

View GitHub Profile
<div class="outer">
<div></div>
</div>
<div class="outer" id="bottomLeft">
<div></div>
</div>
<div class="outer" id="bottomRight">
<div></div>
</div>
<style>
<div id="vertical"></div>
<div id="horizontal"></div>
<div id="pink"></div>
<style>
body {
background: radial-gradient(circle, #8B0051 50px, #FCDDEB 50px 65px, #8B0051 65px 80px, #FCDDEB 80px);
display: grid;
place-items: center;
}
#vertical, #horizontal {
<div></div>
<style>
body {
background: #1D471D;
display: grid;
place-content: center;
}
div {
width: 280px;
height: 150px;
<div id="top"></div>
<div id="center"></div>
<div id="bottom"></div>
<div id="left"></div>
<div id="right"></div>
<style>
body {
background: #2F2E59;
display: grid;
place-content: center;
<div></div>
<div id="right"></div>
<style>
body {
background: #E3516E;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
<style>
body {
background: #D669EC;
display: flex;
justify-content: center;
align-items: center;
}
<div class="v" id="lv"></div>
<div class="v dark"></div>
<div class="v" id="rv"></div>
<div id="top"></div>
<div class="dark"></div>
<div id="bottom"></div>
<style>
body {
display: grid;
place-items: center;
<div></div>
<style>
body {
background: #40234B;
display: grid;
place-items: center;
}
div {
width: 230px;
height: 200px;
<div id="redVertical"></div>
<div id="redHorizontal"></div>
<div id="yellowVertical"></div>
<div id="yellowHorizontal"></div>
<style>
body {
display: grid;
place-items: center;
margin: 0px;
}
<p><a><a><a i><a a><a a><a a><p><a a><a><a i a><a><a a><a>
<style>
html {
background: radial-gradient(1q, #0000, 64q, #fff),
radial-gradient(1q, #CD2E3A, 30px, #0000)-32q,
radial-gradient(1q, #0047A0, 32q, #0000)32q,
linear-gradient(#CD2E3A 50%, #0047A0 0);
}
p {
rotate: 30deg;margin: 141 59