codecademydev/index.html Secret

## index.html
<head>
    <link rel="stylesheet" href="./styles.css">
    <link rel="stylesheet" href="https://use.typekit.net/rab8wqx.css">
</head>
<body>
    <h1>Bobby's Portfolio Style Guide</h1>
    <!-- Color Section -->
    <div class="container">
        <h2>Brand Colors</h2>
        <div class="color container">
            <div class="color-panel blue">
                <div class="color-panel-content">
                    <p class="color-label">
                        Blue
                    </p>
                    <p class="color-hex">
                        #61a4e9
                    </p>
                </div>
            </div>
            <div class="color-panel red">
                <div class="color-panel-content">
                    <p class="color-label">
                        Red
                    </p>
                    <p class="color-hex">
                        #f34649
                    </p>
                    </div>
            </div>
            <div class="color-panel yellow">
                <div class="color-panel-content">
                    <p class="color-label">
                        Yellow
                    </p>
                    <p class="color-hex">
                        #fdb32b
                    </p>
                </div></div>
            <div class="color-panel beige">
                <div class="color-panel-content">
                    <p class="color-label">
                        Greige
                    </p>
                    <p class="color-hex">
                        #f2f0eb
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- Fonts Section -->
    <div class="container">
        <h2>Fonts</h2>
        <div class="font-container">
            <div class="font-panel">
                <p class="font-label bely">Bely Display</p>
                <p class="display bely">The quick brown fox jumps over the lazy dog.</p>
            </div>
            <div class="font-panel">
                <p class="font-label etica">LFT Etica Mono</p>
                <p class="regular etica">The quick brown fox jumps over the lazy dog.</p>
                <p class="italic etica">The quick brown fox jumps over the lazy dog.</p>
                <p class="bold etica">The quick brown fox jumps over the lazy dog.</p>
                <p class="bold italic etica">The quick brown fox jumps over the lazy dog.</p>
            </div>
        </div>
    </div>
    <!-- Text Styles -->
    <div class="container">
        <h2>Text Styles</h2>
        <div class="text-styles-container">
            <div class="text-style-panel">
                <h1>H1: Main page heading</h1>
                <ul class="style-attributes">
                    <li>Font-weight: Display (Default)</li>
                    <li>Font-size: 42px</li>
                    <li>Font-family: Bely Display</li>
                </ul>
            </div>
            <div class="text-style-panel">
                <h2>H2: Subheading</h2>
                <ul class="style-attributes">
                    <li>Font-weight: Bold (700)</li>
                    <li>Font-size: 32px</li>
                    <li>Font-family: LFT Etica Mono</li>
                </ul>
            </div>
            <div class="text-style-panel paragraph">
                <p>P:Paragraph text</p>
                <ul class="style-attributes">
                    <li>Font-weight: Normal (400)</li>
                    <li>Font-size: 16px</li>
                    <li>Font-family: LFT Etica Mono</li>
                </ul>
            </div>
        </div>
    </div>
</body>

## styles.css
.container {
    max-width: 1080px;
    border-radius: 4px;
    background-color: #f2f0eb;
    margin: 64px;
    padding: 20px 40px;

}

.color-panel {
    display: inline-block;
    width: 160px;
    height: 160px;
    border-radius: 100%;
    margin: 0 20px;
    text-align: center;
}

.blue {
    background-color: #61a4e9;
}

.red {
    background-color: #f34649;
}

.yellow {
    background-color: #fdb32b;
}

.beige {
    background-color: #f2f0eb;
    border: 1px solid darkgray;
}

h1 {
    font-family: "bely-display";
    font-size: 42px;
    margin: 40px 0px 16px 0px;
}

h2 {
    font-family: "lft-etica-mono";
    font-weight: bold;
    font-size: 32px;
    margin: 40px 0px 16px 0px;
}

p {
    font-family: "lft-etica-mono";
    font-weight: normal;
    font-size: 16;
}

ul {
    font-family: "lft-etica-mono";
}
.text-style-panel {
    margin: 20px 0px;
}

.paragraph {
    margin: 40px 0px;
}

.container h2 {
    font-family: "lft-etica-mono";
    font-weight: bold;
    text-align: left;
    line-height: 1.1;
    font-size: 36px;
}

.color-panel-content {
    position: relative;
    top: 34px;
}

.color-label {
    font-family: "lft-etica-mono", monospace;
    font-style: normal;
}

.color-hex {
    font-family: "lft-etica-mono", monospace;
    font-style: italic;
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.bely {
    font-family: "bely-display";
}

.etica {
    font-family: "lft-etica-mono";
}

.font-label {
    font-weight: bold;
}

.font-panel {
    display: inline-block;
    top: 0px;
    position: relative;
    margin: 0px 80px 0px 0px;
    height: 200px;
    vertical-align: top;
}

.font-container {
    width: 100%;
    margin: 0;
}
	<head>
	<link rel="stylesheet" href="./styles.css">
	<link rel="stylesheet" href="https://use.typekit.net/rab8wqx.css">
	</head>
	<body>
	<h1>Bobby's Portfolio Style Guide</h1>
	<!-- Color Section -->
	<div class="container">
	<h2>Brand Colors</h2>
	<div class="color container">
	<div class="color-panel blue">
	<div class="color-panel-content">
	<p class="color-label">
	Blue
	</p>
	<p class="color-hex">
	#61a4e9
	</p>
	</div>
	</div>
	<div class="color-panel red">
	<div class="color-panel-content">
	<p class="color-label">
	Red
	</p>
	<p class="color-hex">
	#f34649
	</p>
	</div>
	</div>
	<div class="color-panel yellow">
	<div class="color-panel-content">
	<p class="color-label">
	Yellow
	</p>
	<p class="color-hex">
	#fdb32b
	</p>
	</div></div>
	<div class="color-panel beige">
	<div class="color-panel-content">
	<p class="color-label">
	Greige
	</p>
	<p class="color-hex">
	#f2f0eb
	</p>
	</div>
	</div>
	</div>
	</div>
	<!-- Fonts Section -->
	<div class="container">
	<h2>Fonts</h2>
	<div class="font-container">
	<div class="font-panel">
	<p class="font-label bely">Bely Display</p>
	<p class="display bely">The quick brown fox jumps over the lazy dog.</p>
	</div>
	<div class="font-panel">
	<p class="font-label etica">LFT Etica Mono</p>
	<p class="regular etica">The quick brown fox jumps over the lazy dog.</p>
	<p class="italic etica">The quick brown fox jumps over the lazy dog.</p>
	<p class="bold etica">The quick brown fox jumps over the lazy dog.</p>
	<p class="bold italic etica">The quick brown fox jumps over the lazy dog.</p>
	</div>
	</div>
	</div>
	<!-- Text Styles -->
	<div class="container">
	<h2>Text Styles</h2>
	<div class="text-styles-container">
	<div class="text-style-panel">
	<h1>H1: Main page heading</h1>
	<ul class="style-attributes">
	<li>Font-weight: Display (Default)</li>
	<li>Font-size: 42px</li>
	<li>Font-family: Bely Display</li>
	</ul>
	</div>
	<div class="text-style-panel">
	<h2>H2: Subheading</h2>
	<ul class="style-attributes">
	<li>Font-weight: Bold (700)</li>
	<li>Font-size: 32px</li>
	<li>Font-family: LFT Etica Mono</li>
	</ul>
	</div>
	<div class="text-style-panel paragraph">
	<p>P:Paragraph text</p>
	<ul class="style-attributes">
	<li>Font-weight: Normal (400)</li>
	<li>Font-size: 16px</li>
	<li>Font-family: LFT Etica Mono</li>
	</ul>
	</div>
	</div>
	</div>
	</body>
	.container {
	max-width: 1080px;
	border-radius: 4px;
	background-color: #f2f0eb;
	margin: 64px;
	padding: 20px 40px;

	}

	.color-panel {
	display: inline-block;
	width: 160px;
	height: 160px;
	border-radius: 100%;
	margin: 0 20px;
	text-align: center;
	}

	.blue {
	background-color: #61a4e9;
	}

	.red {
	background-color: #f34649;
	}

	.yellow {
	background-color: #fdb32b;
	}

	.beige {
	background-color: #f2f0eb;
	border: 1px solid darkgray;
	}

	h1 {
	font-family: "bely-display";
	font-size: 42px;
	margin: 40px 0px 16px 0px;
	}

	h2 {
	font-family: "lft-etica-mono";
	font-weight: bold;
	font-size: 32px;
	margin: 40px 0px 16px 0px;
	}

	p {
	font-family: "lft-etica-mono";
	font-weight: normal;
	font-size: 16;
	}

	ul {
	font-family: "lft-etica-mono";
	}
	.text-style-panel {
	margin: 20px 0px;
	}

	.paragraph {
	margin: 40px 0px;
	}

	.container h2 {
	font-family: "lft-etica-mono";
	font-weight: bold;
	text-align: left;
	line-height: 1.1;
	font-size: 36px;
	}

	.color-panel-content {
	position: relative;
	top: 34px;
	}

	.color-label {
	font-family: "lft-etica-mono", monospace;
	font-style: normal;
	}

	.color-hex {
	font-family: "lft-etica-mono", monospace;
	font-style: italic;
	}

	.bold {
	font-weight: bold;
	}

	.italic {
	font-style: italic;
	}

	.bely {
	font-family: "bely-display";
	}

	.etica {
	font-family: "lft-etica-mono";
	}

	.font-label {
	font-weight: bold;
	}

	.font-panel {
	display: inline-block;
	top: 0px;
	position: relative;
	margin: 0px 80px 0px 0px;
	height: 200px;
	vertical-align: top;
	}

	.font-container {
	width: 100%;
	margin: 0;
	}