Merge pull request CodeYourFuture#11 from NateWr/combined_skills

Add a combined skills exercise in week 3

Author: NateWr

css/combined-skills.css

@@ -0,0 +1,239 @@
+html,
+body {
+	font-size: 16px;
+	background: #fff;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+a {
+	color: #0870c8;
+	font-weight: 700;
+}
+
+a:hover,
+a:focus {
+	color: #3497ec;
+}
+
+.site-wrapper {
+	max-width: 80rem;
+	margin: 0 auto;
+	background: #fff;
+	box-shadow: none;
+}
+
+.site-header {
+	padding-top: 0.5rem;
+	padding-bottom: 0.5rem;
+}
+
+.site-header__title,
+.main-nav {
+	padding: 0.5rem;
+}
+
+.site-header__title {
+	margin: 0 0.5rem;
+	background: #0870c8;
+	color: #fff;
+	text-align: center;
+	font-size: 2rem;
+	font-weight: 300;
+	letter-spacing: 5px;
+}
+
+.main-nav__list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	min-width: 240px;
+}
+
+.main-nav__list-item a {
+	display: inline-block;
+	padding: 0.25rem 0;
+	text-transform: uppercase;
+	text-decoration: none;
+}
+
+.site-search {
+	position: relative;
+	margin: 0.5rem;
+}
+
+.site-search label,
+.site-search button {
+	position: absolute;
+	left: -9999px;
+}
+
+.site-search svg {
+	position: absolute;
+	top: 50%;
+	left: 0.75rem;
+	transform: translateY(-50%);
+	color: #0870c8;
+	width: 16px;
+	height: 16px;
+}
+
+.site-search .site-search__input {
+	display: block;
+	padding: 0.5em 1em 0.5em 2rem;
+	border: 4px solid #0870c8;
+	width: auto;
+	max-width: none;
+}
+
+main {
+	padding: 0.5rem;
+}
+
+.hero__image,
+.item__image {
+	display: block;
+	max-width: 100%;
+	height: auto;
+}
+
+.hero__title,
+.item__title {
+	font-weight: 600;
+}
+
+.hero__author,
+.item__author {
+	font-style: italic;
+}
+
+.hero__author span,
+.item__author span {
+	font-style: normal;
+	font-weight: 600;
+}
+
+.items,
+.item + .item {
+	margin-top: 3rem;
+}
+
+.views {
+	margin-top: 3rem;
+	padding: 0.5rem 0;
+}
+
+.views__title {
+	margin: 0;
+	font-weight: 400;
+	font-size: 1rem;
+	font-style: italic;
+}
+
+.view-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.view-list__item,
+.views__all {
+	display: block;
+	padding: 0.25rem 0;
+	text-transform: uppercase;
+	text-decoration: none;
+}
+
+.contact-form {
+	max-width: 30em;
+}
+
+.contact-form__field + .contact-form__field {
+	margin-top: 1rem;
+}
+
+footer {
+	margin-top: 2rem;
+	padding-top: 2rem;
+	padding-bottom: 2rem;
+	text-align: center;
+}
+
+footer svg {
+	width: 12px;
+	height: 12px;
+}
+
+footer p:last-child {
+	margin-top: 2rem;
+	font-size: 0.9rem;
+	color: rgba(0,0,0,0.64);
+}
+
+footer p:last-child a {
+	color: rgba(0,0,0,0.64);
+	font-weight: 400;
+}
+
+@media (min-width: 768px) {
+
+	.site-header__title {
+		font-size: 3rem;
+	}
+
+	.hero {
+		position: relative;
+		overflow: hidden;
+		padding: 10vw;
+		background: #000;
+		color: rgba(255,255,255,0.9);
+	}
+
+	.hero__image {
+		position: absolute;
+		top: 0;
+		left: 0;
+		opacity: 0.7;
+	}
+
+	.hero__title,
+	.hero__author,
+	.hero__time {
+		position: relative;
+	}
+
+	.hero__title {
+		max-width: 15em;
+		font-size: 2rem;
+		font-weight: 300;
+		text-shadow: 0 2px 0 rgba(0,0,0,0.5);
+	}
+
+	.items {
+		margin-top: 1rem;
+		display: flex;
+		justify-content: space-around;
+	}
+
+	.item {
+		width: 100%;
+	}
+
+	.item + .item {
+		margin-top: 0;
+		margin-left: 1.5rem;
+	}
+
+	.views {
+		border-bottom: 1px solid rgba(0,0,0,0.2);
+	}
+}
+
+@media (min-width: 80rem) {
+
+	.hero {
+		padding: 130px;
+	}
+}

css/week3-forms.css

@@ -2,9 +2,7 @@
 body,
 html {
 	background: #25262f;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
 	font-size: 16px;
-	line-height: 1.5em;
 }
 
 * {
@@ -39,14 +37,19 @@ input[type="color"],
 input[type="password"],
 input[type="number"],
 input[type="search"],
-select {
+select,
+textarea {
 	display: block;
 	width: 100%;
 	padding: 0.75em;
 	border: 1px solid rgba(0,0,0,0.5);
 	border-radius: 3px;
 }
 
+textarea {
+	min-height: 10em;
+}
+
 input[type="text"]:hover,
 input[type="email"]:hover,
 input[type="url"]:hover,
@@ -60,7 +63,8 @@ input[type="color"]:hover,
 input[type="password"]:hover,
 input[type="number"]:hover,
 input[type="search"]:hover,
-select:hover {
+select:hover,
+textarea:hover {
 	border-color: #4491db;
 }
 
@@ -77,11 +81,23 @@ input[type="color"]:focus,
 input[type="password"]:focus,
 input[type="number"]:focus,
 input[type="search"]:focus,
-select:focus {
+select:focus,
+textarea:focus {
 	border-color: #4491db;
 	box-shadow: inset 2px 0 0 #4491db;
 }
 
+fieldset {
+	margin-left: 0;
+	margin-right: 0;
+	border: 1px solid rgba(0,0,0,0.5);
+	border-radius: 3px;
+}
+
+legend {
+	padding: 0 1em;
+}
+
 button {
 	margin-top: 0.75em;
 	padding: 0.75em 1.5em;

images/29-hero.jpg

@@ -31,6 +31,7 @@
     "24": "live-server --open=week-3/24-attributes",
     "27": "live-server --open=week-3/27-user-experience",
     "28": "live-server --open=week-3/28-git-conflict",
+    "29": "live-server --open=week-3/29-combined-skills",
     "serve": "live-server"
   },
   "devDependencies": {

images/29-initial-nav-menu.png

@@ -4,6 +4,6 @@ Forms are used everywhere on the web. One of the simplest forms you will find is
 
 1. Edit the `index.html` file. Find the line that says `<p>Delete this line and add your form.</p>`. Delete it.
 2. Add a `<form>` to the same line where you deleted the text. The `<form>` should have two attributes: a `method` attribute that is `GET` and an `action` attribute that is `https://www.google.com/search`.
-3. Inside of the `<form>` create an `<input>` field. The `type` attribute should be `search` and the `name` attribute should be `q`.
+3. Inside of the `<form>` create an `<input>` field. The `type` attribute should be `text` and the `name` attribute should be `q`.
 
 If you've done this correctly, you should be able to type into the field and hit `ENTER` and it will show you Google search results!

images/29-item-1.jpg

@@ -14,7 +14,7 @@
 
       <form method="GET" action="https://www.google.com/search">
         <!-- Add a label here -->
-      	<input type="search" name="q">
+      	<input type="text" name="q">
       </form>
 
     </main>

images/29-item-2.jpg

@@ -14,7 +14,7 @@
 
       <form method="GET" action="https://www.google.com/search">
         <label for="search-input">Search on Google</label>
-      	<input type="search" name="q" id="search-input">
+      	<input type="text" name="q" id="search-input">
         <!-- Add a submit button here -->
       </form>