Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/index.html Secret

Created October 18, 2020 23:22
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/d777ff8dfb64790248d8042c05b306f4 to your computer and use it in GitHub Desktop.
Save codecademydev/d777ff8dfb64790248d8042c05b306f4 to your computer and use it in GitHub Desktop.
Download ZIP
Codecademy export
Raw
index.html
<html>
<link rel="stylesheet" href="styles.css">
<header>
<ul>
<li><a href="#main1">Colors</a></li>
<li><a href="#main2">Fonts</a></li>
</ul>
</header>
<div id="main">
<section id="main3">
<div>
<h1>USE THESE STYLES </h1>
<p>As A Website Blueprint</p>
<p> <b>H1</b> : bold , 25px</p>
<p> <b>H2</b> : italics, 15px</p>
<p> <b>H3</b> : white, 12px</p>
</div>
</section>
<section id="main1">
<div>
<h1>USE THESE COLORS </h1>
</div>
<div class="square">
<div id="first">
<p>fff</p>
</div>
<div id ="second">
<p>fff</p>
</div>
<div id="third">
<p>fff</p>
</div>
</div>
</section>
<section id="main2">
<div>
<h1> USE THESE FONTS </h1>
<p> Sans serif and Sans</p>
</div>
<div class="square2">
<div class ="square">
<img id ="font" src ="https://www.ionos.com/help/fileadmin/_processed_/0/6/csm_gl_serif_sample_d5c973dcbd.png">
</div>
</section>
</div>
</html>
Raw
styles.css
<style>
#top{
background-color:green;
height:50%
}
#main{
vertical-align: middle;
width:100%;
text-align: right;
}
#main section {
background-size: cover;
height:100vh;
width: 100vw;
display: table;
}
#main section div {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#main1{
background-color:#5CC961;
}
#main2{
background-color:#D6E353;
}
#main3{
background-color: #FFC300;
}
.square {
background:transparent;
width: 50vw;
height: 50vw;
}
.square2 {
background:#ACE353;
width: 60vw;
height: 50vw;
}
h2{
font-family: sans-serif;
color:white;
}
h3 {
font-family: serif;
font-size: 25px;
color:white;
}
#first{
background-color:#FFC300;
width: 10vw;
height: 10vw;
}
#second{
background-color:#5CC9BA;
width: 10vw;
height: 10vw;
}
#third{
background-color:#5C6EC9;
width: 10vw;
height: 10vw;
}
#font{
color:white;
margin: auto;
width: 100%;
max-width: 100%;
max-height:100%
}
img{
width:85%;
height:50%;
}
p{
font-family: Helvetica;
font-weight: bold;
}
h1{
font-weight:bold;
font-size: 35px;
font-family: sans-serif;
}
.logo {
margin-top:-20px;
max-width:100%;
max-height:100%;
}
.menu{
display:inline-block;
align-content: center;
}
ul{
list-style-type: none;
word-spacing: 30px;
}
li{
font-weight: bold;
font-size: 30px;
display: inline-block;
font-family: sans-serif;
}
a {
color: black;
text-decoration: none;
}
a:hover
{
color:#00A0C6;
text-decoration:none;
cursor:pointer;
}
.content {
background-color: transparent;
}
.row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
flex-direction: row;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
align-items: center;
}
.cell {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
text-align: center;
height: 300px;
display: flex;
align-items: center;
box-sizing: content-box;
}
img {
margin: auto;
width: 100%;
max-width: 300px;
max-height:100%
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment