diff --git a/challenge_1/style.css b/challenge_1/style.css index 042bc54..94aaa2c 100644 --- a/challenge_1/style.css +++ b/challenge_1/style.css @@ -1,37 +1,39 @@ -bod { - background-color: black - color: white - font-familia: Helveticalalala; - font-size: 22px +body { + background-color: black; + color: white; + font-family: Helvetica; + font-size: 22px; padding: 20px; } h1 { - colour: 255, 203, 5; /* rgb value */ - textalign: center; + color: rgb(255, 203, 5); + text-align: center; } -#big_div - border: 3px solid 2E549B; /* hex value */ +.big_div { + border: 3px solid #2E549B; margin: 30px; - pading: 20px; + padding: 20px; } -pokemon_name { - text-align: center - font-size: 150; - font: bold +.pokemon_name { + text-align: center; + font-size: 150%; + font-weight: bold; margin: 10px; +} .sub_div { display: flex; } img { - width: 250; + width: 250px; padding-right: 50px; } -special { - font-wieght: cold - color: 255, 203, 5; /* rgb value */ \ No newline at end of file +#special { + font-weight: bold; + color: rgb(255, 203, 5); +} \ No newline at end of file diff --git a/challenge_2/index.html b/challenge_2/index.html index a4b4b49..df325e0 100644 --- a/challenge_2/index.html +++ b/challenge_2/index.html @@ -3,17 +3,35 @@ Challenge #2 + + -
Happy Birthday Pikachu! -
-

Pikachu's birthday wishes:

-
  • To always remain yellow
    • -li>To never evolve into Raichu -
  • To stop electrocuting Ash -
  • To always defeat Team Rocketimg id="team-rocket" source="images/team_rocket.jpg">
    • -
    -

    Click here to visit Pikachu's Pokedex entry

    + +
    +

    Happy Birthday Pikachu!

    +
    + +
    +

    Pikachu's birthday wishes:

    + +
      +
    • To always remain yellow
      • +
    • To never evolve into Raichu
      • +
    • To stop electrocuting Ash
      • +
    • To always defeat Team Rocket
      • +
    +
    + +
    +

    + + Click here + + to visit Pikachu's Pokedex entry +

    +
    + \ No newline at end of file diff --git a/challenge_3/challenge_3_extra_credit/style.css b/challenge_3/challenge_3_extra_credit/style.css index 2d2ad5e..dbe197e 100644 --- a/challenge_3/challenge_3_extra_credit/style.css +++ b/challenge_3/challenge_3_extra_credit/style.css @@ -1,14 +1,35 @@ h1 { - font-family: Helvetica; - text-align: center; + font-family: Helvetica; + text-align: center; } img { - width: 100px; + width: 100px; } #big_div { - margin: auto; - border: 5px solid black; - width: 516px; + margin: auto; + border: 5px solid black; + width: 516px; + display: flex; + justify-content: center; + align-items: center; +} + +#a, #e { + display: flex; + flex-direction: column; +} + +#b { + display: flex; + flex-direction: column; +} + +#c, #d { + display: flex; +} + +#a img, #e img, #c img, #d img { + margin: 5px; } \ No newline at end of file diff --git a/challenge_3/challenge_3a/style.css b/challenge_3/challenge_3a/style.css index 8c6e487..81ebd9c 100644 --- a/challenge_3/challenge_3a/style.css +++ b/challenge_3/challenge_3a/style.css @@ -1,15 +1,17 @@ h1 { - font-family: Helvetica; - text-align: center; + font-family: Helvetica; + text-align: center; } img { - width: 100px; + width: 100px; } div { - margin: auto; - width: 600px; - border: 5px solid black; - display: flex; + margin: auto; + width: 600px; + border: 5px solid black; + display: flex; + justify-content: space-around; + align-items: center; } \ No newline at end of file diff --git a/challenge_3/challenge_3b/style.css b/challenge_3/challenge_3b/style.css index cd92d42..b8386e8 100644 --- a/challenge_3/challenge_3b/style.css +++ b/challenge_3/challenge_3b/style.css @@ -1,15 +1,20 @@ h1 { - font-family: Helvetica; - text-align: center; + font-family: Helvetica; + text-align: center; } img { - width: 100px; + width: 100px; } div { - margin: auto; - width: 1250px; - height: 400px; - border: 5px solid black; + margin: auto; + width: 1250px; + height: 400px; + border: 5px solid black; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: center; + gap: 20px; } \ No newline at end of file diff --git a/challenge_3/challenge_3c/style.css b/challenge_3/challenge_3c/style.css index 71d5d22..fce6958 100644 --- a/challenge_3/challenge_3c/style.css +++ b/challenge_3/challenge_3c/style.css @@ -1,18 +1,35 @@ h1 { - font-family: Helvetica; - text-align: center; + font-family: Helvetica; + text-align: center; } img { - width: 100px; + width: 100px; } div div { - margin: auto; - width: 33%; - height: 250px; + margin: auto; + width: 33%; + height: 250px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } #big_div { - border: 5px solid black; + border: 5px solid black; + display: flex; +} + +#sub_div1 { + background-color: lightblue; +} + +#sub_div2 { + background-color: lightyellow; +} + +#sub_div3 { + background-color: lightsalmon; } \ No newline at end of file diff --git a/warm_up_challenge/style.css b/warm_up_challenge/style.css index 96d202e..6e0d462 100644 --- a/warm_up_challenge/style.css +++ b/warm_up_challenge/style.css @@ -1,7 +1,4 @@ -/* Figure out 5 or more DIFFERENT ways to fill in the blank - to produce the desired output */ - -_________ { +.pika { font-family: Helvetica; font-size: 300%; color: #ffd63e; @@ -9,10 +6,9 @@ _________ { } /* Record your solutions here: - #1 - - #2 - - #3 - - #4 - - #5 - - - e.g. - .pika */ \ No newline at end of file + #1 - .pika + #2 - .chuuuuu + #3 - #unique + #4 - h1 + #5 - div h1 +*/ \ No newline at end of file