Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/index.html Secret

Created April 18, 2020 19:14
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/7ed8dfdf183ca20b91fd4110200f2f31 to your computer and use it in GitHub Desktop.
Save codecademydev/7ed8dfdf183ca20b91fd4110200f2f31 to your computer and use it in GitHub Desktop.
Download ZIP
Codecademy export
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>To Do App</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet">
</head>
<body>
<!-- Header -->
<div id="header">
<h1>To Do or Not To Do</h1>
<h2 class="tagline">(your priorities at a glance)</h2>
</div>
<!-- App Container -->
<div class="container">
<!-- To Do Section -->
<div class="week">
<div class="row secondary-background">
<div class="day square"><h3>MON</h3></div>
<div class="task square">
<p> Insert some information about your week here :) </p>
</div>
<div class="task square"></div>
<div class="task square"></div>
</div>
<div class="row">
<div class="day square"><h3>TUE</h3></div>
<div class="task square"></div>
<div class="task square"></div>
<div class="task square"></div>
</div>
<div class="row secondary-background">
<div class="day square"><h3>WED</h3></div>
<div class="task square"></div>
<div class="task square"></div>
<div class="task square"></div>
</div>
<div class="row">
<div class="day square"><h3>THU</h3></div>
<div class="task square"></div>
<div class="task square"></div>
<div class="task square"></div>
</div>
<div class="row secondary-background">
<div class="day square"><h3>FRI</h3></div>
<div class="task square"></div>
<div class="task square"></div>
<div class="task square"></div>
</div>
</div>
<!-- Reminders Section -->
<div class="reminders">
<h3>Reminders</h3>
</div>
</div>
<!-- Footer -->
<footer>
<span class="tagline">copyright nottodo.com</span>
</footer>
</body>
</html>
Raw
style.css
/* Universal Styles */
body {
margin: 0px;
background-color: WhiteSmoke;
font-family: 'Rock Salt', cursive;
text-align: center;
}
.secondary-background {
background-color: Snow;
}
.tagline {
font-family: 'Quicksand', sans-serif;
color: LightSlateGrey;
line-height: 125px;
}
/* Header */
h1 {
margin: 0;
background-color: SkyBlue;
line-height: 100px;
color: Khaki;
}
h2 {
margin: 10px;
}
/* App Container */
.container {
border: 2px solid Snow;
display: flex;
}
/* To Do Section */
.week {
display: inline-flex;
flex-grow: 3;
flex-direction: column;
flex-wrap: wrap;
}
.row {
min-height: 200px;
display: flex;
justify-content: space-around;
align-items: center;
}
.square {
width: 125px;
height: 125px;
padding: 10px;
display: inline-flex;
justify-content: square;
align-items: center;
}
.day.square {
background-color: SkyBlue;
border: 1px solid white;
}
.task.square {
background-color: Khaki;
border: 1px solid white;
}
.task p {
font-family: 'Quicksand', sans-serif;
font-weight: 700;
font-size: 12px;
}
/* Reminders */
.reminders {
background-color: Khaki;
display: inline-flex;
flex-grow: 2;
}
.reminders h3 {
width: 100%;
margin: 10px;
color: black;
line-height: 90px;
font-size: 24px;
}
/* Footer */
footer {
font-size: 24px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment