011- Styling

src/011-styling/example/example.css

@@ -1,5 +1,126 @@
 /*
  * Practice : Styling Buttons, links and lists
  * Version: 1
- * By: xxx
+ * By: Laura Alvarez
  */
+
+ .page-content {
+ 	padding: 0
+ }
+
+.title {
+	background-image: url("../resources/background.jpg");
+	background-color: rgba(248, 247, 216, 0.7);
+	box-shadow: inset 0 0 0 5000px rgba(0,0,0,.54);
+	background-attachment: fixed;
+	background-position: center top;
+	text-align: center;
+	height: 300px;
+}
+
+h1 {
+	font-size: 30px;
+	margin: 0;
+	text-transform: uppercase;
+	color: white;
+	padding: 120px;
+	opacity: 0.7;
+}
+
+form {
+	text-align: center;
+	margin-top: 20px;
+	display: grid;
+    width: auto;
+    margin: 20px 30% 0;
+}
+
+form p {
+	margin: 10px 0;
+	text-align: left;
+	color: gray;
+	font-size: 1em;
+}
+
+input {
+	height: 30px;
+}
+
+textarea {
+	padding-top: 10px;
+}
+
+textarea, input {
+	padding-left: 10px;
+	margin-bottom: 10px;
+	border: 0;
+	font-size: 12px;
+	background-color: rgb(239,239,239);
+}
+
+button {
+	width: 50%;
+    height: 50px;
+    background-color: pink;
+    color: white;
+    font-size: 14px;
+    border: 1px solid pink;
+}
+
+button:hover {
+	background-color: white;
+	color: pink;
+}
+
+footer {
+	width: 100%;
+    text-align: center;
+	background-color: pink;
+	padding: 50px 0;
+}
+
+ul {
+	list-style: none;
+    padding: 0;
+}
+
+li a{
+	color: white;
+	text-decoration: none;
+	 padding: 20px 0;
+    font-size: 12px;
+}
+
+li a:hover{
+	color: black;
+}
+
+.footer-list {
+	justify-content: center;
+	display: inline-flex;
+	flex-wrap: wrap;
+	color: white;
+}
+
+.footer-list div {
+	text-align: left;
+	margin: 0 50px;
+}
+
+.footer-list p {
+	border-bottom: 1px solid white;
+    line-height: 3;
+    width: 200px;
+}
+
+.footer-list p, button {
+	text-transform: uppercase;
+	font-family:sans-serif;
+	font-weight: bold;
+}
+
+@media only screen and (max-width: 991px) {
+	form {
+		margin: 20px 15% 0;
+	}
+}

src/011-styling/example/index.html

@@ -34,11 +34,11 @@
     <div class="page-content">
       <!-- Practice Content Goes Here -->
       <div class="page-wrap">
-        <div>
+        <div class="title">
           <h1>contact us</h1>
         </div>
 
-        <div>
+        <div class="form">
           <form name="form" novalidate autocomplete="off">
             <input type="text" name="name" placeholder="Name">
             <input type="email" name="email" placeholder="Email">
@@ -51,7 +51,7 @@ <h1>contact us</h1>
       </div>
 
       <footer>
-        <div>
+        <div class="footer-list">
           <div>
             <p>Products</p>
             <ul>