CSS_Challenges_master/challenge-3.html at main · EpiXCoder/CSS_Challenges_master · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Challenge 3</title>
  <style>
    /* Styling the body */
    body {
      /* foreground */
      color: rgb(21, 5, 131);
      background-color: rgb(199, 144, 5);
    }


    /* Style the blockquote */
    blockquote {
      /* make the font size large size : 2em */
      font-size: 2em;
      /* Use a serif font family : Georgia */
      font-family: Georgia;
      /* Needs some line space use 1.5 */
      line-height: 1.5;
      /* Set the color #777 medium gray */
      color: rgb(21, 5, 131);
      /* Use text-align: right */
      text-align: right;
    }

    /* Style the first letter */
    /* Look at this selector it applies it's rules only to the first
    letter of the blockaquote */
    blockquote::first-letter {
      /* Set the color #000 */
      font-family: fantasy;
      font-size: 1.7em;
      color: rgb(21, 5, 131);
    }

    /* Style the author */
    /* Look at this selector. The styles are only applied to footer
    tags that are inside a blockquote */
    blockquote footer {
      /* Make the font smaller size 0.5em */
      font-size: 0.5em;
      /* Make the font bold */
      font-weight: bold;
      /* Change the color #666 */
      color:  rgb(21, 5, 131);
    }

    /* Notice the styles above don't apply to the footer at the
    the bottom of the page because it is not inside a blockquote. */

    /* Stretch Challenges:
      - Adjust the values here to taste
        - Change the font-size
        - Change the line-height
        - Change the color
        - Add a rule that applies to the body tag
          - Change the background color
          - Adjust the foreground color to make sure the text is easy to read
        - Add a style for the footer at the bottom of the page
     */
  </style>
</head>

<body>
  <blockquote>
    &ldquo;The first step toward success is taken when you refuse
    to be a captive of the environment in which you first
    find yourself.&rdquo;
    <footer>
      <p>&mdash; Mark Caine</p>
    </footer>
  </blockquote>
  <footer>
    <small>Copyright 2020</small>
  </footer>
</body>
</html>