Zipcoder · kshields412 · Dec 6, 2019 · Dec 13, 2019
diff --git a/.DS_Store b/.DS_Store
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/assessment1/.DS_Store b/assessment1/.DS_Store
diff --git a/assessment1/assets/dove.png b/assessment1/assets/dove.png
diff --git a/assessment1/assets/favorite-1.jpg b/assessment1/assets/favorite-1.jpg
diff --git a/assessment1/assets/favorite-1_th.jpg b/assessment1/assets/favorite-1_th.jpg
diff --git a/assessment1/assets/favorite-2.jpg b/assessment1/assets/favorite-2.jpg
diff --git a/assessment1/assets/favorite-2_th.jpg b/assessment1/assets/favorite-2_th.jpg
diff --git a/assessment1/assets/favorite-3.jpg b/assessment1/assets/favorite-3.jpg
diff --git a/assessment1/assets/favorite-3_th.jpg b/assessment1/assets/favorite-3_th.jpg
diff --git a/assessment1/assets/favorite-4.jpg b/assessment1/assets/favorite-4.jpg
diff --git a/assessment1/assets/favorite-4_th.jpg b/assessment1/assets/favorite-4_th.jpg
diff --git a/assessment1/assets/index.html b/assessment1/assets/index.html
@@ -0,0 +1,53 @@
+<!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/assessment1/assets/style.css b/assessment1/assets/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 10px 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/assessment2/.DS_Store b/assessment2/.DS_Store
diff --git a/assessment2/asset 2/chris.jpg b/assessment2/asset 2/chris.jpg
diff --git a/assessment2/asset 2/index.html b/assessment2/asset 2/index.html
@@ -0,0 +1,31 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Fundamental CSS comprehension</title>
+  <link href="styles.css" rel="stylesheet">
+</head>
+<body>
+
+<section class="card">
+  <header>
+    <h2>Chris Mills</h2>
+  </header>
+  <article>
+    <img src="chris.jpg" alt="A picture of Chris - a man with glasses, a beard, and a silly wooly hat">
+    <p>50 My Street</br>
+      The Town<br>
+      Gray Peach<br>
+      UK<br>
+      ZO50 1MU<br>
+      <strong>Tel</strong>: 01234 567 890<br>
+      <strong>Mail</strong>: chris@nothere.com</p>
+  </article>
+  <footer>
+    <p>Editing, writing, and web development services</p>
+  </footer>
+</section>
+
+</body>
+</html>
diff --git a/assessment2/asset 2/style.css b/assessment2/asset 2/style.css
@@ -0,0 +1,37 @@
+/* General styles - put these straight into your stylesheet */
+
+body {
+  margin: 0;
+}
+
+html {
+  font-family: 'Helvetica neue', Arial, 'sans serif';
+  font-size: 10px;
+  background-color: #ccc;
+}
+
+/* Selectors to be matched up with rulesets */
+
+.card  {
+  width: 35em;
+  height: 22em;
+  margin: 5em auto;
+  background-colour: red;
+  border: 0.2em solid black;
+  border-radius: 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 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 article img {
+  max-height: 100%;
+  float: right;
+}
diff --git a/assessment3/external-link-52.png b/assessment3/external-link-52.png
diff --git a/assessment3/index.html b/assessment3/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>St Huxley's Community College</title>
+    <link href="style.css" type="text/css" rel="stylesheet">
+</head>
+<body>
+
+<header>
+    <h1>St Huxley's Community College</h1>
+</header>
+
+<section>
+    <h2>Brave new world</h2>
+
+    <p>It's a brave new world out there. Our children are being put in increasing more competitive situations, both during recreation, and as they start to move into the adult world of <a href="https://en.wikipedia.org/wiki/Examination">examinations</a>, <a href="https://en.wikipedia.org/wiki/Jobs">jobs</a>, <a href="https://en.wikipedia.org/wiki/Career">careers</a>, and other life choices. Having the wrong mindset, becoming <a href="https://en.wikipedia.org/wiki/Emotion">too emotional</a>, or making the wrong choices can contribute to them experiencing difficulty in taking their rightful place in today's ideal society.</p>
+
+    <p>As concerned parents, guardians or carers, you will no doubt want to give your children the best possible start in life — and you've come to the right place.</p>
+
+    <h2>The best start in life</h2>
+
+    <p>At St. Huxley's, we pride ourselves in not only giving our students a top quality education, but also giving them the societal and emotional intelligence they need to win big in the coming utopia. We not only excel at subjects such as genetics, data mining, and chemistry, but we also include compulsory lessons in:</p>
+
+    <ul>
+        <li>Emotional control</li>
+        <li>Judgement</li>
+        <li>Assertion</li>
+        <li>Focus and resolve</li>
+    </ul>
+
+    <p>If you are interested, then you next steps will likely be to:</p>
+
+    <ol>
+        <li><a href="#">Call us</a> for more information</li>
+        <li><a href="#">Ask for a brochure</a>, which includes signup form</li>
+        <li><a href="#">Book a visit</a>!</li>
+    </ol>
+</section>
+
+<aside>
+
+    <h2>Top course choices</h2>
+
+    <ul>
+        <li><a href="#">Genetic engineering</a></li>
+        <li><a href="#">Genetic mutation</a></li>
+        <li><a href="#">Organic Chemistry</a></li>
+        <li><a href="#">Pharmaceuticals</a></li>
+        <li><a href="#">Biochemistry with behaviour</a></li>
+        <li><a href="#">Pure biochemistry</a></li>
+        <li><a href="#">Data mining</a></li>
+        <li><a href="#">Computer security</a></li>
+        <li><a href="#">Bioinformatics</a></li>
+        <li><a href="#">Cybernetics</a></li>
+    </ul>
+
+    <p><a href="#">See more</a></p>
+
+</aside>
+
+<nav>
+
+    <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Finding us</a></li>
+        <li><a href="#">Courses</a></li>
+        <li><a href="#">Staff</a></li>
+        <li><a href="#">Media</a></li>
+        <li><a href="#">Prospectus</a></li>
+    </ul>
+
+</nav>
+
+<footer>
+
+    <p>&copy; 2016 St Huxley's Community College</p>
+
+</footer>
+
+</body>
+</html>