codecademydev/index.html Secret

## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Building a Website Design System</title>
        <link rel="stylesheet" href="./styles.css" type = "text/css">
        <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,
        400&family=Roboto+Mono:ital,wght@0,400;0,500;1,400&family=Titillium+Web:ital,wght@0,400;0,600;1,400&display=swap"
         rel="stylesheet">

    </head>
    <body>
        <header>
            <h1>My Website Style Guide</h1>
            <nav>
                <ul>
                    <li><a href="#color">Colors</a></li>
                    <li><a href="#font">Fonts</a></li>
                    <li><a href ="#text-styles">Text Styles</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <section id = "color" class = "main-container">
                <h2>Colors</h2>
                <div class = 'color-container'>
                    <div class = 'color-type purple'>
                        <p>Purple</p>
                        <p class ='hex'>800080</p>
                    </div>
                    <div class = 'color-type blue'>
                        <p>Blue</p>
                        <p class ='hex'>0000ff</p>
                    </div>
                    <div class = 'color-type yellow'>
                        <p>Yellow</p>
                        <p class ='hex'>FFFF00</p>
                    </div>
                    <div class = 'color-type brown'>
                        <p>Brown</p>
                        <p class ='hex'>A52A2A</p>
                    </div>

                </div>

            </section>

            <section id = "font" class = "main-container">
                <h2>Fonts</h2>
                <div class = 'font-container'>
                    <div class = 'types roboto'>
                        <h3 class ="">Roboto</h3>
                        <p class = "regular">Almost before we knew it, we had left the ground.</p>
                        <p class ="bold">Almost before we knew it, we had left the ground.</p>
                        <p class="italics">Almost before we knew it, we had left the ground.</p>

                    </div>
                    <div class = 'types titillium'>
                        <h3>Titillium</h3>
                        <p class = "regular">Almost before we knew it, we had left the ground.</p>
                        <p class ="bold">Almost before we knew it, we had left the ground.</p>
                        <p class="italics">Almost before we knew it, we had left the ground.</p>

                    </div>
                    <div class = 'types baskerville'>
                        <h3>Baskerville</h3>
                        <p class = "regular">Almost before we knew it, we had left the ground.</p>
                        <p class ="bold">Almost before we knew it, we had left the ground.</p>
                        <p class="italics">Almost before we knew it, we had left the ground.</p>

                    </div>
                </div>

            </section>
            <section id = "text-styles" class = "main-container">
                <h2>Fonts</h2>
                <div class = 'text-container'>
                    <div class = 'types-2'>
                        <h3>Text Styles</h3>
                        <h1>H1: Main page heading</h1>
                        <ul>
                            <li>Font-weight: 700 (bold)</li>
                            <li>Font-size: 26px</li>
                            <li>Font-family: Nunito Sans</li>
                        </ul>
                    </div>
                    <div>
                        <h2>H2: Subheading</h2>
                        <ul>
                            <li>Font-weight: 500</li>
                            <li>Font-size: 18px</li>
                            <li>Font-family: Poppins</li>
                        </ul>
                    </div>
                    <div>
                        <h2>p: Paragraph text</h2>
                            <ul>
                                <li>Font-weight: 400</li>
                                <li>Font-size: 14px</li>
                                <li>Font-family: Poppins</li>
                            </ul>
                    </div>
                </div>

            </section>


        </main>
        <footer>

        </footer>

    </body>
</html>

## styles.css


nav {
    background-color: gold;
    text-align: center;
    word-spacing: 20px;
}

nav li {
    display: inline-block;
    text-transform: uppercase;
    line-height: 1.4;
}
h1 {
    Font-weight: 700 (bold);
    Font-size: 26px;
    font-family: 'Roboto Mono', monospace;
}
h2 {
    Font-weight: 500;
    Font-size: 18px;
    font-family: 'Titillium Web', sans-serif;
}
p {
    Font-weight: 400;
    Font-size: 14px;
    font-family: 'Libre Baskerville', serif;
}
.main-container {
    border: 3px solid grey;
    width: 620;
    height: 351.813;
    margin-bottom: 10px;
    padding: 0 15px;
}

.color-type {
    display:inline-block;
    width: 32%;
    text-align: center;
    min-height: 100px;
    margin-right: 7px;
    margin-bottom: 7px;

}
.types {
    display:inline-block;
    width: 40%;
    text-align: center;
    min-height: 100px;
    margin-right: 7px;
    margin-bottom: 7px;
}

.purple {
    background-color: #800080;
}
.blue {
    background-color: #00f;
}
.yellow {
    background-color: #ff0;
}
.brown {
    background-color: #a52a2a;
    color: white;
}
 .italics{
     font-style: italic;
 }
 .bold {
     font-weight: bold;
 }
 .regular {
     font-weight: 400;
 }
 .roboto {
 font-family: 'Roboto Mono', monospace;
 }
 .titillium {
font-family: 'Titillium Web', sans-serif;
 }
 .baskerville{
font-family: 'Libre Baskerville', serif;
 }
	<!DOCTYPE html>
	<html>
	<head>
	<title>Building a Website Design System</title>
	<link rel="stylesheet" href="./styles.css" type = "text/css">
	<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,
	400&family=Roboto+Mono:ital,wght@0,400;0,500;1,400&family=Titillium+Web:ital,wght@0,400;0,600;1,400&display=swap"
	rel="stylesheet">

	</head>
	<body>
	<header>
	<h1>My Website Style Guide</h1>
	<nav>
	<ul>
	<li><a href="#color">Colors</a></li>
	<li><a href="#font">Fonts</a></li>
	<li><a href ="#text-styles">Text Styles</a></li>
	</ul>
	</nav>
	</header>
	<main>
	<section id = "color" class = "main-container">
	<h2>Colors</h2>
	<div class = 'color-container'>
	<div class = 'color-type purple'>
	<p>Purple</p>
	<p class ='hex'>800080</p>
	</div>
	<div class = 'color-type blue'>
	<p>Blue</p>
	<p class ='hex'>0000ff</p>
	</div>
	<div class = 'color-type yellow'>
	<p>Yellow</p>
	<p class ='hex'>FFFF00</p>
	</div>
	<div class = 'color-type brown'>
	<p>Brown</p>
	<p class ='hex'>A52A2A</p>
	</div>

	</div>

	</section>

	<section id = "font" class = "main-container">
	<h2>Fonts</h2>
	<div class = 'font-container'>
	<div class = 'types roboto'>
	<h3 class ="">Roboto</h3>
	<p class = "regular">Almost before we knew it, we had left the ground.</p>
	<p class ="bold">Almost before we knew it, we had left the ground.</p>
	<p class="italics">Almost before we knew it, we had left the ground.</p>

	</div>
	<div class = 'types titillium'>
	<h3>Titillium</h3>
	<p class = "regular">Almost before we knew it, we had left the ground.</p>
	<p class ="bold">Almost before we knew it, we had left the ground.</p>
	<p class="italics">Almost before we knew it, we had left the ground.</p>

	</div>
	<div class = 'types baskerville'>
	<h3>Baskerville</h3>
	<p class = "regular">Almost before we knew it, we had left the ground.</p>
	<p class ="bold">Almost before we knew it, we had left the ground.</p>
	<p class="italics">Almost before we knew it, we had left the ground.</p>

	</div>
	</div>

	</section>
	<section id = "text-styles" class = "main-container">
	<h2>Fonts</h2>
	<div class = 'text-container'>
	<div class = 'types-2'>
	<h3>Text Styles</h3>
	<h1>H1: Main page heading</h1>
	<ul>
	<li>Font-weight: 700 (bold)</li>
	<li>Font-size: 26px</li>
	<li>Font-family: Nunito Sans</li>
	</ul>
	</div>
	<div>
	<h2>H2: Subheading</h2>
	<ul>
	<li>Font-weight: 500</li>
	<li>Font-size: 18px</li>
	<li>Font-family: Poppins</li>
	</ul>
	</div>
	<div>
	<h2>p: Paragraph text</h2>
	<ul>
	<li>Font-weight: 400</li>
	<li>Font-size: 14px</li>
	<li>Font-family: Poppins</li>
	</ul>
	</div>
	</div>

	</section>


	</main>
	<footer>

	</footer>

	</body>
	</html>


	nav {
	background-color: gold;
	text-align: center;
	word-spacing: 20px;
	}

	nav li {
	display: inline-block;
	text-transform: uppercase;
	line-height: 1.4;
	}
	h1 {
	Font-weight: 700 (bold);
	Font-size: 26px;
	font-family: 'Roboto Mono', monospace;
	}
	h2 {
	Font-weight: 500;
	Font-size: 18px;
	font-family: 'Titillium Web', sans-serif;
	}
	p {
	Font-weight: 400;
	Font-size: 14px;
	font-family: 'Libre Baskerville', serif;
	}
	.main-container {
	border: 3px solid grey;
	width: 620;
	height: 351.813;
	margin-bottom: 10px;
	padding: 0 15px;
	}

	.color-type {
	display:inline-block;
	width: 32%;
	text-align: center;
	min-height: 100px;
	margin-right: 7px;
	margin-bottom: 7px;

	}
	.types {
	display:inline-block;
	width: 40%;
	text-align: center;
	min-height: 100px;
	margin-right: 7px;
	margin-bottom: 7px;
	}

	.purple {
	background-color: #800080;
	}
	.blue {
	background-color: #00f;
	}
	.yellow {
	background-color: #ff0;
	}
	.brown {
	background-color: #a52a2a;
	color: white;
	}
	.italics{
	font-style: italic;
	}
	.bold {
	font-weight: bold;
	}
	.regular {
	font-weight: 400;
	}
	.roboto {
	font-family: 'Roboto Mono', monospace;
	}
	.titillium {
	font-family: 'Titillium Web', sans-serif;
	}
	.baskerville{
	font-family: 'Libre Baskerville', serif;
	}