From 9f21faf6884ad79d1154b2fbb89aef441de1fca6 Mon Sep 17 00:00:00 2001
From: Abernachy
Date: Sun, 23 Jan 2022 15:43:35 -0500
Subject: [PATCH] working CSS Challenge 3
---
projectfolder/css/shopStyle.css | 24 ++++++++++++--
projectfolder/css/style.css | 50 ++++++++++++++++++++++++++++-
projectfolder/index.html | 10 +++---
projectfolder/pages/challenges.html | 8 +++++
4 files changed, 84 insertions(+), 8 deletions(-)
diff --git a/projectfolder/css/shopStyle.css b/projectfolder/css/shopStyle.css
index 33e24f982..82704d8c3 100644
--- a/projectfolder/css/shopStyle.css
+++ b/projectfolder/css/shopStyle.css
@@ -15,9 +15,9 @@ 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;
@@ -25,6 +25,17 @@ p {
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;
+}
diff --git a/projectfolder/css/style.css b/projectfolder/css/style.css
index 594eb380f..01380fe5a 100644
--- a/projectfolder/css/style.css
+++ b/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;
+}
diff --git a/projectfolder/index.html b/projectfolder/index.html
index d91724da9..06e5ed1f2 100644
--- a/projectfolder/index.html
+++ b/projectfolder/index.html
@@ -25,15 +25,16 @@ 📘 The Code Magazine
+
diff --git a/projectfolder/pages/challenges.html b/projectfolder/pages/challenges.html
index 412c30386..e8248df72 100644
--- a/projectfolder/pages/challenges.html
+++ b/projectfolder/pages/challenges.html
@@ -18,6 +18,14 @@ Converse Chuck Taylor All Start Low Top
Ready to dress up or down, these classic convo Chucks are an everyday wardrobe staple
More information →
+
Product Details
- Lightweight, durable and painful
+ 
The Uknown Power of CSS
Why Javascript is Awsome
@@ -104,7 +104,7 @@