Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/index.html Secret

Created November 24, 2019 23:37
Show Gist options
  • Save codecademydev/80668f240b7ee959166d748d94efbe28 to your computer and use it in GitHub Desktop.
Save codecademydev/80668f240b7ee959166d748d94efbe28 to your computer and use it in GitHub Desktop.
Download ZIP
Codecademy export
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Codecademy | Color For UI</title>
<!-- Meta -->
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1 user-scalable=no">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
</head>
<body>
<!-- Site Wide Header -->
<header role="banner" aria-label="site-wide-navigation" class="site-header">
<div class="container">
<nav role="navigation" aria-label="navigation" class="site-header-nav">
<ul class="site-nav-left">
<li>
<a href="#">
<img src="https://s3.amazonaws.com/codecademy-content/programs/ui-design/color-ui/logo.svg" alt="Citrus" class="logo" />
</a>
</li>
<li>
<a href="#" class="site-nav-link">About</a>
</li>
<li>
<a href="#" class="site-nav-link-active">Contact Us</a>
</li>
</ul>
<ul class="site-nav-right">
<li>
<a href="#" class="site-nav-link" aria-label="site-wide-search-button" role="button">
<img src="https://s3.amazonaws.com/codecademy-content/programs/ui-design/color-ui/icon-search.svg" alt="Search" />
</a>
</li>
<li>
<a href="#" class="button button-secondary button-small site-nav-link">Login</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- Site Main Content -->
<main role="main" class="site-main">
<header aria-labelledby="page-title" class="clearfix site-main-header">
<div class="container">
<h1 id="page-title">Contact Our Team</h1>
<p class="col-1-2">We are standing by for your questions, comments or concerns. If there is anything we can do, please reach out and let us know.</p>
</div>
</header>
<section role="region" aria-label="contact-form" class="site-main-section">
<div class="container">
<div class="card contact-form-container">
<div class="clearfix">
<div class="col-1-2">
<figure class="alert alert-error">
<div class="alert-content">
<img src="https://s3.amazonaws.com/codecademy-content/programs/ui-design/color-ui/icon-help.svg" alt="Help indicator" />
<p>Looks like you forgot to add your name!</p>
</div>
</figure>
<h2 class="section-header">Leave A Message</h2>
<form role="form" class="clearfix">
<label>Your Name</label>
<input type="text" placeholder="Full Name" class="input-error" />
<label>Your Email</label>
<input type="email" placeholder="Email Address" />
<label>Select Contact Reason</label>
<select>
<option selected disabled>Please Select One</option>
<option>Customer Service Question</option>
<option>Billing Question</option>
<option>Website Question</option>
</select>
<label>Issue Details</label>
<textarea placeholder="Provide as much detail as you can so we can address your issue."></textarea>
<input type="submit" value="Submit Message" class="button button-primary float-right" />
</form>
</div>
<div class="col-1-2">
<p><b>Our Location</b></p>
<img src="https://s3.amazonaws.com/codecademy-content/programs/ui-design/color-ui/map.jpg" alt="Office Location" />
<ul class="location-details">
<li><b>Address:</b> 233 S Wacker Dr, Chicago, IL 60606</li>
<li><b>Phone:</b> (123) 456-7890</li>
<li><b>Email:</b> [email protected]</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<div class="site-main-background" arai-hidden="true"></div>
</main>
<!-- Site Wide Footer -->
<footer role="contentinfo" class="footer">
<div class="container">
<nav role="navigation" class="clearfix">
<ul class="col-1-4 footer-section">
<li>
<img src="https://s3.amazonaws.com/codecademy-content/programs/ui-design/color-ui/logo.svg" alt="Citrus" class="logo" />
</li>
<li>
<p><smalL>All Rights Reserved | &copy; <time>2017</time></smalL></p>
</li>
</ul>
<div class="col-1-4 footer-section" aria-labelledby="product-pages">
<p id="product-pages"><b>About</b></p>
<ul>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Pricing</a>
</li>
<li>
<a href="#">Schedule Demo</a>
</li>
</ul>
</div>
<div class="col-1-4 footer-section" aria-labelledby="support-pages">
<p id="support-pages"><b>Support</b></p>
<ul>
<li>
<a href="#">FAQ</a>
</li>
<li>
<a href="#">Documentation</a>
</li>
<li>
<a href="#">API Status</a>
</li>
</ul>
</div>
<div class="col-1-4 footer-section" arai-labelledby="social-links">
<p id="support-pages"><b>Stay Up To Date</b></p>
<form>
<input type="email" placeholder="Your emaill address" class="footer-email-input">
<input type="submit" value="Submit" class="button button-secondary footer-email-button"/>
</form>
</div>
</nav>
</div>
</footer>
</body>
</html>
Raw
styles.css
/* Site Stylesheet
1. Global Styles
2. Typography Styles
3. Structure Styles
4. Module Styles
5. Component Styles
======================================== */
/* 1. Global Styles
======================================== */
* {
box-sizing: border-box;
}
html {
height: 100%;
margin: 0 auto;
overflow-x: hidden;
width: 100%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
height: 100%;
margin: 0 auto;
overflow-x: hidden;
width: 100%;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
.clearfix::after {
content: " ";
clear: both;
display: table;
}
.float-right {
float: right;
}
/* 2. Typography Styles
======================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
color: #414546;
font-family: 'Roboto', Helvetica, sans-serif;
font-weight: 700;
transition: font-size 0.25s ease;
}
h1 {
font-size: calc(64px / 1.5);
line-height: 1.25;
}
h2 {
font-size: calc(64px / 1.5);
}
h3 {
font-size: calc(45px / 1.5);
}
h4 {
font-size: calc(23px / 1.5);
}
@media(min-width: 720px) {
h1 {
font-size: calc(64px / 1.25);
}
h2 {
font-size: calc(45px / 1.25);
}
h3 {
font-size: calc(32px / 1.25);
}
h4 {
font-size: calc(23px / 1.25);
}
}
@media(min-width: 1024px) {
h1 {
font-size: 64px;
}
h2 {
font-size: 45px;
}
h3 {
font-size: 32px;
}
h4 {
font-size: 23px;
}
}
p {
color: #414546;
font-family: 'Roboto', Georgia, serif;
font-size: 16px;
line-height: 23px;
margin: 0 0 15px;
}
a {
color: #42A5F5;
font-family: 'Roboto', Helvetica, sans-serif;
font-size: 16px;
line-height: 23px;
}
li {
color: #414546;
font-family: 'Roboto', Helvetica, sans-serif;
font-size: 16px;
line-height: 23px;
list-style: none;
}
label {
color: #414546;
display: block;
font-family: 'Roboto', Helvetica, sans-serif;
font-size: 12px;
font-weight: 700;
line-height: 18px;
margin-bottom: 5px;
}
img {
width: 100%;
}
b,
strong {
font-weight: 700;
}
small {
font-size: 12px;
line-height: 1.25;
}
/* 3. Structure Styles
======================================== */
.container {
margin: 0 auto;
max-width: 1160px;
padding: 0 15px;
}
.divider {
border: none;
border-bottom: 1px solid #F2F3F5;
clear: both;
width: 100%;
}
@media(min-width: 720px) {
.col-1-2 {
float: left;
width: calc(97.5%/2);
}
.col-1-2:not(:last-child) {
margin-right: 2.5%;
}
.col-1-3 {
float: left;
width: calc(95%/3);
}
.col-1-3:not(:last-child) {
margin-right: 2.5%;
}
.col-1-4 {
float: left;
width: calc(92.5%/4);
}
.col-1-4:not(:last-child) {
margin-right: 2.5%;
}
}
/* 4. Modules Styles
======================================== */
/* Site Navigation */
.site-header {
background-color: #34474F;
padding: 30px 15px 0;
}
.site-header-nav {
align-items: center;
display: flex;
}
.site-nav-left,
.site-nav-right {
align-items: center;
display: flex;
}
.site-nav-right {
float: right;
margin-left: auto;
}
.site-nav-left li:not(:first-child),
.site-nav-right li {
font-weight: 700;
display: inline-block;
line-height: 0;
}
.site-nav-mobile li {
display: inline-block;
}
.site-nav-left li:not(:last-child),
.site-nav-right li:not(:last-child),
.site-nav-mobile li:not(:last-child) {
margin-right: 5px;
}
.site-nav-left .logo {
width: 120px;
}
.site-nav-link {
color: #FFFFFF;
text-decoration: none;
}
.site-nav-link-active {
color: #FF6600;
text-decoration: none;
}
/* Site Footer */
.footer {
padding: 30px 30px 60px;
}
.footer-section {
margin-bottom: 15px;
}
@media(min-width: 720px) {
.footer-section {
margin-bottom: 0;
}
}
.footer .logo {
margin-bottom: 5px;
width: 100px;
}
.footer a {
color: #959595;
text-decoration: none;
}
.footer p {
margin-bottom: 5px;
}
.footer-email-input {
margin-right: 2.5%;
width: 68% !important;
}
.footer-email-button {
font-size: 12px !important;
padding: 10px !important;
width: 27.5% !important;
}
@media(min-width: 768px) {
.footer-email-input {
width: 57% !important;
}
.footer-email-button {
width: 37.5% !important;
}
}
/* 5. Component Styles
======================================== */
.alert {
border-radius: 3px;
margin-bottom: 15px;
padding: 10px 15px;
text-align: left;
}
.alert-content {
align-items: center;
display: flex;
}
.alert-error {
background-color: #FC472E;
}
.alert img {
display: inline-block;
height: 15px;
margin-right: 5px;
width: 15px;
}
.alert p {
color: #FFFFFF;
display: inline-block;
margin-bottom: 0;
}
.button {
border-radius: 3px;
color: #FFFFFF;
display: inline-block;
font-family: 'Roboto', Helvetica, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: normal;
padding: 15px 30px;
text-align: center;
text-decoration: none;
transition: opacity 0.5s ease;
}
.button:hover {
opacity: 0.75;
}
.button-primary {
background-color: #00CF63;
}
.button-secondary {
background-color: #FFAA00;
}
.button-full {
width: 100%;
}
.button-small {
font-size: 13px;
padding: 10px 30px;
}
.card {
background-color: #FFFFFF;
border-radius: 10px;
box-shadow: 0 0 40px 2px rgba(0, 0, 0, 0.1);
padding: 30px 30px 15px;
}
.chip {
display: flex;
align-items: center;
}
.chip-img-container {
border-radius: 30em;
float: left;
margin-right: 15px;
overflow: hidden;
height: 60px;
width: 60px;
}
.chip-content-container {
float: left;
}
.chip-content-title {
margin-bottom: 0;
}
.chip-content-description {
color: #8F9196;
margin-bottom: 0;
}
input,
select,
textarea {
background-color: #FFFFFF;
border: 1px solid #F2F3F5;
border-radius: 3px;
box-shadow: inset 1px 1px 3px 0 rgba(189,191,192,0.10);
height: 35px;
margin-bottom: 15px;
padding: 10px;
transition: border-color 0.5s ease;
width: 100%;
}
input[type="submit"] {
cursor: pointer;
height: auto;
width: auto;
}
input:active,
input:focus,
textarea:active,
textarea:focus {
border: 1px solid #42A5F5;
outline: none;
}
textarea {
height: 100px;
}
.input-error {
border-color: #FC472E;
}
/* 6. Page Styles
======================================== */
.site-main {
padding: 0 15px;
position: relative;
}
.site-main-background {
background-color: #34474F;
height: 600px;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
.site-main-header {
margin-bottom: 0;
}
.site-main-header h1,
.site-main-header p {
color: #FFFFFF;
}
.section-header {
font-size: 23px;
line-height: 33px;
margin-bottom: 15px;
}
.location-details li {
display: block;
margin-top: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment