Zipcoder · charlottebeale · Dec 21, 2019 · Dec 21, 2019 · Dec 22, 2019 · Dec 22, 2019
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/HTML-CSS-PrepWork.iml b/.idea/HTML-CSS-PrepWork.iml
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/Assessment 1/dove.png b/Assessment 1/dove.png
diff --git a/Assessment 1/favorite-1.jpg b/Assessment 1/favorite-1.jpg
diff --git a/Assessment 1/favorite-1_th.jpg b/Assessment 1/favorite-1_th.jpg
diff --git a/Assessment 1/favorite-2.jpg b/Assessment 1/favorite-2.jpg
diff --git a/Assessment 1/favorite-2_th.jpg b/Assessment 1/favorite-2_th.jpg
diff --git a/Assessment 1/favorite-3.jpg b/Assessment 1/favorite-3.jpg
diff --git a/Assessment 1/favorite-3_th.jpg b/Assessment 1/favorite-3_th.jpg
diff --git a/Assessment 1/favorite-4.jpg b/Assessment 1/favorite-4.jpg
diff --git a/Assessment 1/favorite-4_th.jpg b/Assessment 1/favorite-4_th.jpg
diff --git a/Assessment 1/index.html b/Assessment 1/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Birdwatching</title>
+    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300|Cinzel+Decorative:700" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="style.css">
+
+    <!--[if lt IE 9]>
+    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+</head>
+
+<body>
+
+<header>
+    <h1>Birdwatching</h1>
+    <img src="dove.png" alt="a simple dove logo">
+
+    <nav>
+        <ul>
+            <li><span>Home</span></li>
+            <li><a href="#">Get started</a></li>
+            <li><a href="#">Photos</a></li>
+            <li><a href="#">Gear</a></li>
+            <li><a href="#">Forum</a></li>
+        </ul>
+    </nav>
+</header>
+
+
+<main>
+    <article>
+        <h2>Welcome</h2>
+
+        <p>Welcome to our fake birdwatching site. If this were a real site, it would be the ideal place to come to learn more about birdwatching, whether you are a beginner looking to learn how to get into birding, or an expert wanting to share ideas, tips, and photos with other like-minded people.</p>
+
+        <p>So don't waste time! Get what you need, then turn off that computer and get out into the great outdoors!</p>
+    </article>
+
+    <aside>
+        <h2>Favourite photos</h2>
+
+        <a href="favorite-1.jpg"><img src="favorite-1_th.jpg" alt="Small black bird, black claws, long black slender beak, links to larger version of the image"></a>
+        <a href="favorite-2.jpg"><img src="favorite-2_th.jpg" alt="Top half of a pretty bird with bright blue plumage on neck, light colored beak, blue headdress, links to larger version of the image"></a>
+        <a href="favorite-3.jpg"><img src="favorite-3_th.jpg" alt="Top half of a large bird with white plumage, very long curved narrow light colored break, links to larger version of the image"></a>
+        <a href="favorite-4.jpg"><img src="favorite-4_th.jpg" alt="Large bird, mostly white plumage with black plumage on back and rear, long straight white beak, links to larger version of the image"></a>
+    </aside>
+</main>
+
+<footer>
+    <p>This fake website example is CC0 — any part of this code may be reused in any way you wish. Original example written by Chris Mills, 2016.</p>
+
+    <p><a href="http://game-icons.net/lorc/originals/dove.html">Dove icon</a> by Lorc.</p>
+</footer>
+
+</body>
+</html>
diff --git a/Assessment 1/style.css b/Assessment 1/style.css
@@ -0,0 +1,138 @@
+/* || General setup */
+
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 10px;
+  background-color: #a9a9a9;
+}
+
+body {
+  width: 70%;
+  min-width: 800px;
+  margin: 0 auto;
+}
+
+/* || typography */
+
+h1, h2, h3 {
+  font-family: 'Cinzel Decorative', cursive;
+  color: #2a2a2a;
+}
+
+p, input, li {
+  font-family: 'Roboto Condensed', sans-serif;
+  color: #2a2a2a;
+}
+
+h1 {
+  font-size: 4rem;
+  text-align: center;
+  text-shadow: 2px 2px 8px black;
+}
+
+h2 {
+  font-size: 3rem;
+  text-align: center;
+}
+
+h3 {
+  font-size: 2.2rem;
+}
+
+p, li {
+  font-size: 1.6rem;
+  line-height: 1.5;
+}
+
+/* || header layout */
+
+header {
+  margin-bottom: 10px;
+  display: flex;
+  flex-flow: row wrap;
+}
+
+body > * {
+  background-color: red;
+  padding: 1%;
+}
+
+main, header, nav, article, aside, footer, section {
+  background-color: rgba(0,255,0,0.5);
+  padding: 1%;
+}
+
+h1 {
+  flex: 5;
+  text-transform: uppercase;
+}
+
+header img {
+  display: block;
+  height: 60px;
+  padding-top: 20.15px;
+}
+
+nav {
+  height: 50px;
+  flex: 100%;
+  display: flex;
+}
+
+nav ul {
+  padding: 0;
+  list-style-type: none;
+  flex: 2;
+  display: flex;
+}
+
+nav li {
+  display: inline;
+  text-align: center;
+  flex: 1;
+}
+
+nav a, nav span {
+  display: inline-block;
+  font-size: 2rem;
+  height: 3rem;
+  line-height: 1.7;
+  text-transform: uppercase;
+  text-decoration: none;
+  color: black;
+
+}
+
+/* || main layout */
+
+main {
+  display: flex;
+}
+
+article, section {
+  flex: 4;
+}
+
+aside {
+  flex: 1;
+  margin-left: 10px;
+  padding: 1%;
+}
+
+aside a {
+  display: block;
+  float: left;
+  width: 50%;
+}
+
+aside img {
+  max-width: 100%;
+}
+
+footer {
+  margin-top: 10px;
+}
diff --git a/Assessment 2/image/charlotte.jpg b/Assessment 2/image/charlotte.jpg
diff --git a/Assessment 2/index.html b/Assessment 2/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Fundamental CSS comprehension</title>
+    <link rel="stylesheet" type="text/css" href="style-resources.css">
+</head>
+<body>
+
+<section class="card" style="border: 0.2em solid black; border-radius: 20px;">
+    <header>
+        <h2>Charlotte Beale</h2>
+    </header>
+    <article>
+        <img src="image/charlotte.jpg" alt="placeholder">
+
+        <p>1007 W Orange Street</br>
+            Wilmington, Delaware 19805<br>
+            USA<br>
+            <strong>Tel</strong>: 215.512.1695<br>
+            <strong>E-Mail</strong>: cbeale2000@gmail.com</p>
+    </article>
+    <footer>
+        <p>Software Developer In Training</p>
+    </footer>
+</section>
+
+</body>
+</html>
diff --git a/Assessment 2/style-resources.css b/Assessment 2/style-resources.css
@@ -0,0 +1,89 @@
+/* General styles - put these straight into your stylesheet */
+
+body {
+  margin: 100px 0 0;
+  position: center;
+  max-width: 350px;
+}
+
+html {
+  font-family: 'Helvetica neue', Arial, 'sans serif';
+  font-size: 10px;
+  background-color: #bbc8cc;
+}
+
+/* Selectors to be matched up with rulesets */
+
+.card article img
+.card footer
+.card header
+.card
+
+/* Rulesets to be matched up with selectors */
+.card {
+  width: 35em;
+  height: 22em;
+  margin: 5em auto;
+  background-colour: #927fff;
+  border: 0.2em solid black;
+  border-radius: 1.5em;
+
+  /* Add shadows to create the "card" effect */
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+  transition: 0.3s;
+
+}
+
+/* Styles for the header/footer of the card */
+.card footer {
+  background-image: linear-gradient(to bottom,rgba(0,0,0,0), rgba(0,0,0,0.1));
+  border-radius: 0 0 1.5em 1.5em;
+}
+
+.card header {
+  background-image: linear-gradient(to bottom,rgba(0,0,0,0.1), rgba(0,0,0,0));
+  border-radius: 1.5em 1.5em 0 0;
+}
+
+.card header, .card footer {
+  height: 3em;
+  padding: 1em;
+  background-color: #072c80;
+}
+
+/* Styles for the main content of the card */
+.card article img {
+  max-height: 100%;
+  float: right;
+}
+
+.card h2, .card p {
+  margin: 0;
+}
+.card h2 {
+  font-size: 2em;
+  line-height: 1.5em;
+
+}
+
+.card footer p {
+  font-size: 1.5em;
+  line-height: 2em;
+}
+
+.card article {
+  height: 12em;
+  background: #3452a0;
+}
+
+.card article p {
+  padding: 1em;
+  color: rgba(7, 4, 4, 0.99);
+  line-height: 1.4;
+
+}
+
+/* On mouse-over, add a deeper shadow */
+.card:hover {
+  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+}
diff --git a/Assessment 3/external-link-52.png b/Assessment 3/external-link-52.png