Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/index.html Secret

Created March 1, 2021 17:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save codecademydev/f99cc199fe39dcb0e24c92b825dddbf3 to your computer and use it in GitHub Desktop.
Save codecademydev/f99cc199fe39dcb0e24c92b825dddbf3 to your computer and use it in GitHub Desktop.
Download ZIP
Codecademy export
Raw
index.html
<!DOCTYPE html>
<html>
<body>
<head>
<link href="./styles.css" type="text/css" rel="stylesheet">
<h1 class="title">My own website design</h1>
</head>
<main>
<div class="colors">
<h2> Colors </h2>
<div class="color1">
<p>lightgreen</p>
</div>
<div class="color2">
<p>blue</p>
</div>
<div class="color3">
<p>gray</p>
</div>
<div class="color4">
<p>black</p>
</div>
<div class="color5">
<p>red</p>
</div>
</div>
<div class="fonts">
<h2> Fonts </h2>
<div class="font1">
<h3>Akaya Telivigaia</h3>
<p>Almost before we knew it, we had left the ground.</p>
</div>
<div class="font2">
<h3>Newsreader</h3>
<p class="regular400">Almost before we knew it, we had left the ground.</p>
<p class="regularitalic">Almost before we knew it, we had left the ground.</p>
<p class="semibold">Almost before we knew it, we had left the ground.</p>
</div>
<div class="font3">
<h3>Zilla Slab</h3>
<p>Almost before we knew it, we had left the ground.</p>
</div>
</div>
<div class="styles">
<h2> Text Styles </h2>
<div class="titles">
<h3>Headings</h3>
<div class="parameters">
<ul>
<li>H2 html element</li>
<li>Font-family: Newsreader</li>
<li>Font-style: Normal</li>
<li>Font-weight: 600</li>
<li>text-shadow: 2px 4px white</li>
</ul>
</div>
</div>
<div class="subtitles">
<h3>Sub-headings</h3>
<div class="arguments">
<ul>
<li>H3 html element</li>
<li>Font-family: Newsreader</li>
<li>Font-style: italic</li>
<li>Font-weight: 400</li>
<li>text-decoration-line: underline</li>
</ul>
</div>
</div>
<div class="body">
<h3>Paragraph text</h3>
<div class="condition">
<ul>
<li>P html element</li>
<li>Font-family: Zilla Slab</li>
<li>Font-style: Normal</li>
<li>Font-weight: 300</li>
</ul>
</div>
</div>
<div class="images">
<h3>Figcaptions and legends</h3>
<div class="description">
<ul>
<li>P html element</li>
<li>Font-family: Akaya Telivigaia</li>
<li>Font-style: Normal</li>
<li>Font-weight: 400</li>
</ul>
</div>
</div>
</div>
</main>
</body>
</html>
Raw
styles.css
@font-face {
font-family: 'Akaya Telivigala';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/akayatelivigala/v9/lJwc-oo_iG9wXqU3rCTD395tp0uiTdXXsQ.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;
}
@font-face {
font-family: 'Newsreader';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/newsreader/v4/cY9kfjOCX1hbuyalUrK439vogqC9yFZCYg7oRZaLP4obnf7fTXglsMwoT9ZHFjQ.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;
}
@font-face {
font-family: 'Newsreader';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/newsreader/v4/cY9VfjOCX1hbuyalUrK49dLac06G1ZGsZBtoBAbNJYQ.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;
}
@font-face {
font-family: 'Newsreader';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/newsreader/v4/cY9VfjOCX1hbuyalUrK49dLac06G1ZGsZBtoBAbNJYQ.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;
}
@font-face {
font-family: 'Zilla Slab';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/zillaslab/v6/dFa5ZfeM_74wlPZtksIFYpEY6HOpWw.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: gainsboro;
}
/* Titulo da webpage */
.title {
text-align: center;
color: white;
font-size: 46px;
font-family: 'Newsreader';
font-style: normal;
font-weight: 600;
text-shadow: 3px 4px black;
}
/* Subtitulos*/
.colors h2 {
font-family: 'Newsreader';
font-style: normal;
font-weight: 600;
color: black;
text-shadow: 2px 4px white;
padding: 15px;
}
.fonts h2 {
font-family: 'Newsreader';
font-style: normal;
font-weight: 600;
color: black;
text-shadow: 2px 4px white;
position: relative;
bottom: 40px;
}
.styles h2{
font-family: 'Newsreader';
font-style: normal;
font-weight: 600;
color: black;
text-shadow: 2px 4px white;
}
/*Cores usadas no website*/
.colors {
border: 5px solid gray;
font-size: 26px;
margin: 1px;
display:block;
}
.colors .color1 {
height: 50px;
width: 100px;
background: lightgreen;
position: relative;
left: 10px;
}
.colors .color1 p {
font-size: 20px;
text-align: center;
color: white;
position: relative;
top: 10px;
font-family: 'Akaya Telivigala';
font-style: normal;
font-weight: 400;
}
.colors .color2 {
height: 50px;
width: 100px;
background: blue;
position: relative;
bottom: 70px;
left: 130px;
}
.colors .color2 p {
font-size: 20px;
text-align: center;
color: white;
position: relative;
top: 10px;
font-family: 'Akaya Telivigala';
font-style: normal;
font-weight: 400;
}
.colors .color3 {
height: 50px;
width: 100px;
background: gray;
position: relative;
bottom: 140px;
left: 250px;
}
.colors .color3 p {
font-size: 20px;
text-align: center;
color: white;
position: relative;
top: 10px;
font-family: 'Akaya Telivigala';
font-style: normal;
font-weight: 400;
}
.colors .color4 {
height: 50px;
width: 100px;
background: black;
position: relative;
bottom: 210px;
left: 370px;
}
.colors .color4 p {
font-size: 20px;
text-align: center;
color: white;
position: relative;
top: 10px;
font-family: 'Akaya Telivigala';
font-style: normal;
font-weight: 400;
}
.colors .color5 {
height: 50px;
width: 100px;
background: red;
position: relative;
bottom: 280px;
left: 490px;
}
.colors .color5 p {
font-size: 20px;
text-align: center;
color: white;
position: relative;
top: 10px;
font-family: 'Akaya Telivigala';
font-style: normal;
font-weight: 400;
}
/*Tipo de fontes utilizadas*/
.fonts {
border: 5px solid gray;
font-size: 26px;
color: blue;
margin: 1px;
display: flex;
padding: 50px 20px;
}
.fonts .font1 {
position: relative;
top: 40px;
right: 90px;
margin-right: 50px;
}
.fonts .font1 h3{
font-family: 'Newsreader';
font-style: italic;
font-weight: 400;
color: black;
text-decoration-line: underline;
}
.fonts .font1 p {
font-family: 'Akaya Telivigala';
font-style: normal;
font-weight: 400;
color: black;
font-size: 25px;
}
.fonts .font2 {
position: relative;
top: 40px;
right: 90px;
}
.fonts .font2 h3{
font-family: 'Newsreader';
font-style: italic;
font-weight: 400;
color: black;
text-decoration-line: underline;
}
.fonts .font2 .regular400 {
font-family: 'Newsreader';
font-style: normal;
font-weight: 400;
color: black;
font-size: 25px;
}
.fonts .font2 .regularitalic {
font-family: 'Newsreader';
font-style: italic;
font-weight: 400;
color: black;
font-size: 25px;
}
.fonts .font2 .semibold {
font-family: 'Newsreader';
font-style: normal;
font-weight: 600;
color: black;
font-size: 25px;
}
.fonts .font3 {
position: relative;
top: 25px;
}
.fonts .font3 h3 {
font-family: 'Newsreader';
font-style: italic;
font-weight: 400;
color: black;
text-decoration-line: underline;
position: relative;
top: 13px;
}
.fonts .font3 p {
font-family: 'Zilla Slab';
font-style: normal;
font-weight: 300;
color: black;
font-size: 25px;
}
/*Estilo de formataçao*/
.styles {
border: 5px solid gray;
font-size: 26px;
margin: 1px;
font-weight: bold;
padding: 15px;
}
.styles h3{
font-family: "Newsreader";
font-style: italic;
font-weight: 400;
text-decoration-line: underline;
}
.styles li {
font-family: "Zilla Slab";
font-style: normal;
font-weight: 300;
}
.styles .subtitles {
position: relative;
left: 400px;
bottom: 250px;
}
.styles .body {
position: relative;
bottom: 200px;
}
.styles .images {
position: relative;
left: 400px;
bottom: 420px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment