Merge pull request #7 from Aber-Learningforks/lesson2/css

working CSS Challenge 3

Author: Abernachy

projectfolder/css/shopStyle.css

@@ -15,16 +15,27 @@ p {
 .product-container {
 	border: black 4px solid;
 	width: 825px;
-	margin: 5 0px auto;
+	margin: 25px auto;
+	position: relative;
 }
-
 .product-name {
 	background: #f7f7f7;
 	text-transform: uppercase;
 	text-align: center;
 	padding: 20px 0;
 }
 
+.product-name::after {
+	content: 'SALE';
+	position: absolute;
+	top: 25px;
+	left: -25px;
+	background: red;
+	color: white;
+	letter-spacing: 2px;
+	padding: 5px 5px;
+}
+
 .product-details {
 	text-transform: uppercase;
 	margin-bottom: 20px;
@@ -105,3 +116,12 @@ nav {
 	opacity: 0.8;
 	justify-content: center;
 }
+
+.colored-boxes li {
+	display: block-inline;
+}
+
+.black {
+	background-color: black;
+	border: solid 5px black;
+}

projectfolder/css/style.css

@@ -8,6 +8,7 @@ body {
 	border-top: 5px solid #1098ad;
 	color: #444;
 	font-family: sans-serif;
+	position: relative;
 }
 
 .container {
@@ -48,6 +49,8 @@ aside {
 	width: 500px;
 }
 
+/* SMALLER ELEMENTS */
+
 h1,
 h2,
 h3 {
@@ -62,7 +65,7 @@ h1 {
 
 h2 {
 	font-size: 40px;
-	border-bottom: 5px solid #1098ad;
+	position: relative;
 	margin-bottom: 30px;
 }
 
@@ -166,6 +169,20 @@ a:active {
 	font-style: italic;
 }
 
+nav a:link {
+	/* background-color: orangered;
+	margin: 20px;
+	padding: 20px;
+	display: block; */
+	margin-right: 30px;
+	margin-top: 10px;
+	display: inline-block;
+}
+
+nav a:link:last-child {
+	margin-right: 0px;
+}
+
 /* Resolving conflicts */
 /*
 footer p {
@@ -204,3 +221,34 @@ High to Low
 	width: 100%;
 	height: auto;
 }
+
+button {
+	font-size: 22px;
+	padding: 20px;
+	cursor: pointer;
+	position: absolute;
+	bottom: 50px;
+	right: 50px;
+}
+
+h1::first-letter {
+	font-style: normal;
+	margin-right: 5px;
+}
+
+h3 + p {
+	/* color: red; */
+}
+
+h2::after {
+	content: 'TOP';
+	background-color: #ffe70e;
+	color: black;
+	font-size: 16px;
+	font-weight: bold;
+	display: inline-block;
+	padding: 5px 10px;
+	position: absolute;
+	top: -10px;
+	right: -25px;
+}

projectfolder/index.html

@@ -25,15 +25,16 @@ <h1>📘 The Code Magazine</h1>
 				<nav>
 					<a href="./pages/blog.html">Blog</a>
 					<a href="./pages/challenges.html">Challenges</a>
-					<a href="#">Fexbox</a>
+					<a href="#">Flexbox</a>
 					<a href="#">CSS Grid </a>
 				</nav>
+				<button>❤Like</button>
 			</header>
 
 			<article>
 				<header class="post-header">
 					<h2>The Basic Langauge of The Web: HTML</h2>
-					<img src="./imgs/laura-jones.jpg" src="the person who wrote this" width="50" height="50" />
+					<img src="./imgs/laura-jones.jpg" alt="the person who wrote this" width="50" height="50" />
 					<p id="author">Posted by <strong>Laura Jones </strong> on Monday, June 21st 2027</p>
 					<br />
 
@@ -88,13 +89,12 @@ <h4><strong>Related Posts</strong></h4>
 						<a href="#"> How to Learn Web Development</a>
 						<p class="related-author">By Jonas Schmeltmann</p>
 					</li>
-					<br />
+
 					<li>
 						<img src="imgs/related-2.jpg" alt="Unknown Power of CSS" height="50" width="50" />
 						<a href="#"> The Uknown Power of CSS</a>
 						<p class="related-author">By Jonas Schmeltmann</p>
 					</li>
-					<br />
 					<li>
 						<img src="imgs/related-3.jpg" alt="Why Javascript is Awsome" height="50" width="50" />
 						<a href="#"> Why Javascript is Awsome</a>
@@ -104,7 +104,7 @@ <h4><strong>Related Posts</strong></h4>
 			</aside>
 
 			<footer>
-				<p id="copyright" class="copyright text">Copyright &copy 2017 by The Code Magazine</p>
+				<p id="copyright" class="copyright text">Copyright &copy; 2017 by The Code Magazine</p>
 			</footer>
 		</div>
 	</body>

projectfolder/pages/challenges.html

@@ -18,6 +18,14 @@ <h2 class="product-name">Converse Chuck Taylor All Start Low Top</h2>
 				<p>Ready to dress up or down, these classic convo Chucks are an everyday wardrobe staple</p>
 				<a class="more-info" href="#"> <p>More information &RightArrow;</p></a>
 
+				<ul class="colored-boxes">
+					<li class="black"><div></div></li>
+					<li class="blue"></li>
+					<li class="red"></li>
+					<li class="yellow"></li>
+					<li class="green"></li>
+					<li class="brown"></li>
+				</ul>
 				<h3 class="product-details">Product Details</h3>
 				<ul>
 					<li>Lightweight, durable and painful</li>