Skip to content
This repository was archived by the owner on Jan 31, 2023. It is now read-only.
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ Skills based review for the Junior Web Developer CSS Introduction lesson.
- Copy the entire ```<link rel=...stylesheet">``` 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

Expand Down Expand Up @@ -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`
Expand Down Expand Up @@ -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`;

Expand All @@ -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
Expand Down
97 changes: 94 additions & 3 deletions assets/css/style.css
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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 */
Expand All @@ -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;
Expand All @@ -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 */
Expand Down Expand Up @@ -106,3 +191,9 @@ td {
border: 2px solid #8c6b48;
width: 300px;
}

#concert-schedule-sec h3{
font-size: font-siz;


}
24 changes: 19 additions & 5 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,15 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" href="./assets/css/style.css" /> -->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">


<link rel="stylesheet" href="./assets/css/style.css" />



</head>

<body>
<!-- Navigation -->


<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Concert Schedule</a></li>
<!-- <a href="https://www.seventeen.com/celebrity/movies-tv/a40244091/harry-styles-my-policeman-movie/" target="_blank">See Movies</a> -->

<li><a href="#">Home</a></li>
<li><a href="#concert-schedule-sec">Concert Schedule</a></li>
<li><a href="#">Order Tickets</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
Expand Down Expand Up @@ -38,7 +51,7 @@ <h2>About.</h2>

<div>
<figure>
<img src="./assets/images/harrystyles.png" alt="harrystyles" width="1000">
<img src="./assets/images/harrystyles.png" alt="harrystyles" >
<!-- Figcaption element to caption your image -->
<figcaption>
Harry Styles performing free concert fundraiser for US wildfire relief
Expand All @@ -54,7 +67,8 @@ <h2>About.</h2>
<li>From Redditch, United Kingdom</li>
<li>Height: 6'0"</li>
<li>Music Group: One Direction (since 2010)</li>
<li><a href="">See Movies</a></li>

<li><a href="https://www.seventeen.com/celebrity/movies-tv/a40244091/harry-styles-my-policeman-movie/" target="_blank">See Movies</a>></li>
</ul>
</aside>
</div>
Expand Down