diff --git a/README.md b/README.md index 955af7c..e5c7c01 100644 --- a/README.md +++ b/README.md @@ -24,17 +24,17 @@ Wubba lubba dub dub!!! Create an out of this world app using the [Rick And Morty See an app video [here](https://www.youtube.com/watch?v=bGyZYHU3cJ0) and can be played with [here](https://joinpursuit.github.io/Module-2-Practice-Final-Assessment/) This **burp** app should have (in order of placement in the HTML): -- A title tag that starts with the text "Szechuan Sauce" -- A header tag. Make it mean and make it green. -- Inside the header an `h1` that reads "Rick & Morty" with fantasy font. -- Inside the header an image of Rick and Morty (check your assets folder!) - -- A `ul` with the id `all-characters` that contains an `li`'s with an image (id=`photo-img`) of each character in the API (first page only), as well as the characters name. -- A `main` tag that starts not on the page -- Inside of `main` should be two sections. The first section should have the id `character-info` the second should have the id `character-comments-section`. -- Inside of `character-info` should be be an `h3` an `img` and two `p` tags. -- Inside of `character-comments-section` should be a `form`, including a "text" `input` and a "submit" `input`, that allows users to submit (not save, just add to the frontend) what they would say about the character Jerry. On submission the input should clear. -- Also insider `character-comments-section` should be a `ul` with the id `character-comments-ul` that contains the submitted comments of each character. + + + + + + + + + + + Please feel free to include additional `section`s and elements if they make styling the **burp** app easier. diff --git a/index.css b/index.css new file mode 100644 index 0000000..e6be428 --- /dev/null +++ b/index.css @@ -0,0 +1,41 @@ +body { + background-color: black; + display: flex; + flex-direction: column; + align-items: center; + color: white; +} + +header { + background-color: green; + width: 70%; + height: 150px; + display: flex; + justify-content: space-between; + padding: 0 30px; + margin-bottom: 20px; +} + +h1 { + font-family: fantasy; +} + +header > img { + height: 100px; +} + +main { + width: 70%; + border: 5px solid white; + display: none; +} + +input[type="text"] { + width: 380px; +} +#all-characters { + display: flex; + list-style: none; + width: 70%; + overflow-x: scroll; +} diff --git a/index.html b/index.html index 248ffe9..67d3909 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,41 @@ -
- - - - - - - - \ No newline at end of file + + + + + + + + +
+