Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/index.css Secret

Created March 9, 2020 23:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save codecademydev/1b20b6667b2e22196a4ef03fc9276005 to your computer and use it in GitHub Desktop.
Save codecademydev/1b20b6667b2e22196a4ef03fc9276005 to your computer and use it in GitHub Desktop.
Download ZIP
Codecademy export
Raw
index.css
@font-face {
font-family: 'Courgette';
font-style: normal;
font-weight: 400;
src: local('Courgette Regular'), local('Courgette-Regular'), url(https://fonts.gstatic.com/s/courgette/v7/wEO_EBrAnc9BLjLQAUk1VvoK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body {
background-color: rgba(0, 80, 120, 30%);
margin: 0;
}
h1 {
font-family: Courgette;
text-align: center;
line-height: 3;
font-size: 72px;
background: -webkit-linear-gradient(lightblue, purple);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* background-clip: text;
-webkit-background-clip: text;
color: transparent; */
h2 {
font-family: Courgette;
text-align: center;
color: black;
font-size: 50px;
}
.colors {
margin: 0px;
}
.colorheading {
margin: auto;
font-weight: bold;
font-size: 50px;
}
.colorcontainer {
margin: 10px auto;
}
#c {
color: red;
}
#oOne {
color: orange;
}
#l {
color: yellow;
}
#o {
color: blue;
}
#r {
color: purple;
}
#s {
color: green;
}
.colorcontainer h3 {
text-align: center;
font-size: 35px;
font-family: Courgette;
}
.swatch {
border: 2px 10px solid lightgray;
background-color: lightgray;
display: flex;
height: 100px;
width: 25%;
margin: 0px auto;
justify-content: space-between;
}
#swatchh1 {
color: red;
}
.swatch.redone {
background-color: rgba(100, 0, 0, 100%);
}
.swatch.redtwo {
background-color: rgba(170, 0, 0, 100%);
}
.swatch.redthree {
background-color: rgba(250, 0, 0, 100%);
}
#swatchh2 {
color: green;
}
.swatch.greenone {
background-color: rgba(0, 100, 0, 100%);
}
.swatch.greentwo {
background-color: rgba(0, 150, 0, 90%);
}
.swatch.greenthree {
background-color: rgba(0, 200, 0, 60%);
}
#swatchh3 {
color: blue;
}
.swatch.blueone {
background-color: rgba(0, 0, 100, 100%);
}
.swatch.bluetwo {
background-color: rgba(0, 0, 150, 90%);
}
.swatch.bluethree {
background-color: rgba(0, 0, 200, 60%);
}
#fonts {
text-align: center;
}
Raw
index.html
<!DOCTYPE html>
<html>
<header>
<link rel="stylesheet" type="text/css" href="styles/index.css">
</header>
<body>
<h1>Style Guide</h1>
<div class="colors">
<h2 class='colorheading'>
<span id="c">C</span>
<span id="oOne">o</span>
<span id="l">l</span>
<span id="o">o</span>
<span id="r">r</span>
<span id="s">s</span>
</h2>
<div class='colorcontainer'>
<h3 id='swatchh1'>Red</h3>
<div class='swatch'>
<div class='swatch redone'></div>
<div class='swatch redtwo'></div>
<div class='swatch redthree'></div>
</div>
<h3 id='swatchh2'>Green</h3>
<div class='swatch'>
<div class='swatch greenone'></div>
<div class='swatch greentwo'></div>
<div class='swatch greenthree'></div>
</div>
<h3 id='swatchh3'>Blue</h3>
<div class='swatch'>
<div class='swatch blueone'></div>
<div class='swatch bluetwo'></div>
<div class='swatch bluethree'> </div>
</div>
</div>
</div>
<div id='fonts'>
<h2>Fonts</h2>
<h3>Used for headings</h3>
<p> font-family: 'Courgette';
font-style: normal;
font-weight: 400;</p>
</div>
</body>
</html>
@AnaraB
Copy link

AnaraB commented Apr 8, 2022

How can I see your code rendered on a website? How can I copy URL in order to see it as a website?

@alirecchia
Copy link

How can I see your code rendered on a website? How can I copy URL in order to see it as a website?

I was asking myself the same!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment