diff --git a/README.md b/README.md
index 52e58c3..b74bc68 100644
--- a/README.md
+++ b/README.md
@@ -51,7 +51,7 @@ Skills based review for the Junior Web Developer CSS Introduction lesson.
- Copy the entire `````` link in the pop-up side menu (you may have to widen your screen to view). Then paste the stylesheet link in the index.html, above the local CSS file.
- Copy the entire `font-family rule`, and paste in Step 5.
-5. In the `body` selector ruleset, add a font-family property with a value of `'Open Sans', sans-serif`
+5. In the `body` selector ruleset, add a font-family property with a value of `'Open Sans', sans-serif`
#### Style
@@ -80,7 +80,7 @@ Skills based review for the Junior Web Developer CSS Introduction lesson.
- Add a `font-weight` property with a value of `600`
- and a `font-size` property with a value of `1.25em`
- - Add a `background-color` property, with a value of `rgb(35, 47, 58)`
+ - Add a `background-color` property, with a value of `rgb(35, 47, 58)`
- Add a `color` property, with a value of `whitesmoke`
- Add a `padding` property, with a value of `0.5em` on all sides
- Add a `margin` property, with a value of `0`
@@ -119,11 +119,11 @@ Skills based review for the Junior Web Developer CSS Introduction lesson.
19. Directly below the `#about-sec h2` ruleset, add an `#about-sec #about-blurb` ruleset:
- Add a `padding` property, with a value of `0 2.5em`
-20. Locate the `Table - Concert Schedule` in both the `index.html` and `style.css`, as well as in the `browser`
+20. Locate the `Table - Concert Schedule` in both the `index.html` and `style.css`, as well as in the `browser`
21. In the `#concert-schedule-sec` ruleset:
- - Add a `color` property, and a value of `rgb(255, 54, 154)`
- - Add a `background-color` property, with a value of `black`
+ - Add a `color` property, and a value of `rgb(255, 54, 154)`
+ - Add a `background-color` property, with a value of `black`
- Replace the `max-width` property with the `width` property, and set the value to `100vw`
- Add a `padding` property with a value of `2em`;
@@ -132,15 +132,15 @@ Skills based review for the Junior Web Developer CSS Introduction lesson.
Last: Continue to modify the colors, borders, and transitions however you like with the remaining elements! Experiment with positioning, margins, padding, user-experience, etc.
-*** BONUS ***
+*** BONUS ***
-* Find a website with a list of the movies Harry Styles has been in and hyperlink it to the `See Movies` a tag. Can you get the link to open in a new tab?
+* Find a website with a list of the movies Harry Styles has been in and hyperlink it to the `See Movies` a tag. Can you get the link to open in a new tab?
* Link the navigation list items to jump to the corresponding section on the page
### Part 3 - _Pushing_ new changes to repository
-* From a _terminal_ navigate to the root directory of the _cloned_ project.
+* From a _terminal_ navigate to the root directory of the _cloned_ project.
* From the root directory of the project, execute the following commands:
* `git add .`
* Add all files in current directory to the staging area
diff --git a/assets/css/style.css b/assets/css/style.css
index 098a004..711aff4 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,8 +1,17 @@
+*{
+ box-sizing: border-box;
+}
+
body {
+ font-family: 'Open Sans', sans-serif;
+ background-image: linear-gradient(whitesmoke,rgb(35, 47, 58));
+
+
}
+
/* Navigation Styles */
nav ul {
list-style-type: none;
@@ -19,9 +28,11 @@ li a {
color: white;
padding: 30px 30px 30px 30px;
text-decoration: none;
+ text-align: center;
}
li a:hover {
background-color: rgb(40, 39, 39);
+ text-align: center;
}
/* Header Styles */
@@ -39,19 +50,38 @@ h1 {
section {
display: flex;
justify-content: center;
-
width: 80%;
margin: auto;
+ flex-direction: column;
+
}
+
.center-title {
+ text-align: center;
}
/* About Section Styles */
#about-sec {
display: flex;
+ flex-direction: column;
}
+
+#about-sec h2{
+font-size: 1.95em;
+padding: 0 1.5em;
+
+}
+
+
+#about-sec #about-blurb{
+padding: 0 2.5em;
+}
+
+
+
+
#about-sec div {
display: inline-flex;
flex-direction: row;
@@ -60,21 +90,76 @@ section {
}
figure {
display: flex;
+ width: 30%;
+ flex-direction: column;
+}
+
+
+figcaption{
+ font-family: italic;
+ background-color: rgba(35, 47, 58);
+ color: whitesmoke;
+ padding: 0.25em;
+ opacity: 0.5;
+ font-size: 0.85em;
}
+
+
/* Aside Styles */
aside {
display: flex;
flex-direction: column;
+ border: 4px double black;
+ margin: 1em, 0;
+ color: rgba(35, 47, 58, 0.05);
+ /* background-color: rgba(35, 47, 58, 0.05); */
+
+
+}
+aside p{
+ font-family: 600;
+ font-size: 1.25em;
+ background-color: rgb(35, 47, 58);
+ color: whitesmoke;
+ padding: 0.5em;
+ margin: 0;
+ text-transform: uppercase;
+ border-bottom: rgba(0, 0, 0, 0.77);
+ opacity: 0.6;
+
+}
+
+aside ul{
+font-size: 0.9em;
+margin: 1em;
+padding: 0, 0.75em;
+
+}
+
+
+aside ul li a{
+text-align: justify;
+padding: o;
+color: rgb(35, 47, 58);
+text-decoration: underline;
}
/* Table - Concert Schedule Styles */
#concert-schedule-sec {
- max-width: 940px;
- margin: 0 auto;
+ width: 100vw;
+ /* margin: 0 auto; */
height: max-content;
+ color: rgb(255, 54, 154);
+ background-color: black;
+ padding: 2em;
+
+
+
+
+
}
/* Form - Ticket Form Styles */
@@ -106,3 +191,9 @@ td {
border: 2px solid #8c6b48;
width: 300px;
}
+
+#concert-schedule-sec h3{
+font-size: font-siz;
+
+
+}
diff --git a/index.html b/index.html
index 75b7a7b..f354835 100644
--- a/index.html
+++ b/index.html
@@ -1,15 +1,28 @@
-
+
+
+
+
+
+
+
+
+
+
+
+