eryn/erynwells.me
1
0
Fork 0
Code Issues 8 Pull requests 1 Projects Releases Packages Activity Actions

Work on a site logo with CSS and HTML

Browse source
This commit is contained in:
Eryn Wells 2022-10-19 07:39:48 -07:00
parent a7ef5d696b
commit 1f6f7056ea
1 changed files with 57 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

57
logo.html Normal file
View file

@ -0,0 +1,57 @@
<!doctype html>
<html>
<body>
<h1>Site Logo</h1>
<div id="logo">E</div>
</body>
<style>
@font-face {
font-family: "Museo_Slab";
src: url("static/fonts/Museo_Slab_500.woff2") format("woff2"),
url("static/fonts/Museo_Slab_500.woff") format("woff");
font-weight: normal;
font-style: normal;
}
:root {
--lt-blue: rgb(69, 212, 243);
--mid-blue: rgb(26, 169, 239);
--dk-blue: rgb(63, 46, 231);
--purple: rgb(161, 49, 232);
--lilac: rgb(187, 121, 245);
}
* { box-sizing: border-box; }
body {
color: #222;
padding-block-start: 6vmin;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
font-family: "Museo_Slab";
}
#logo {
color: transparent;
border: 0.5rem solid #222;
border-radius: 6px;
padding-top: 30px;
display: flex;
justify-content: center;
align-items: center;
width: 500px;
height: 500px;
background-color: blue;
background:
radial-gradient(circle at 20% 70%, var(--purple), transparent 40%),
radial-gradient(circle at 30% 30%, var(--lt-blue), var(--mid-blue) 20%, transparent 80%),
radial-gradient(ellipse at 95% 20%, var(--dk-blue), var(--mid-blue) 70%, transparent 80%),
radial-gradient(circle at 100% 100%, var(--purple), var(--lilac) 100%),
radial-gradient(circle at 45% 100%, var(--lilac), var(--purple) 60%),
radial-gradient(ellipse at 50% 50%, var(--dk-blue), transparent 80%);
background-clip: text;
font-size: 600px;
text-align: center;
line-height: 0.8;
}
</style>
</html>