CSS_Challenges_master/challenge-4.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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Challenge 4</title>
  <style>

    /* In this example you will need to write the selectors yourself! */

    /* Style the list use the selector: ul { ... your styles here... } */
    ul{
    /* Remove the bullet list-style none */
      list-style: none;
    }
    /* Style the blockquote: blockquote { ... } */
    blockquote{
    /* make the font large 2em */
    font-size: 2em;
    /* Set the font to a serif use Gerogia */
    font-family: Georgia;
    /* Needs some line height 1.5 */
    line-height: 1.5;
  }
    /* Here are some new selectors */

    /* Even numbered list items */
    li:nth-child(even) {
      /* Set the color #775 */
      color: #775;
      /* Align the text to the right */
      text-align: right;
    }

    /* These style will use some advanced selectors. */
    /* You in this case you need to select only the */
    /* odd numbered list items */
    li:nth-child(odd) {
      /* Set the color #757 */
      color: #757;
      /* Align the text to the left */
      text-align: left;
    }

    /* Style the first letter */
    blockquote::first-letter {
      /* Set the color #000 */
      font-family: fantasy;
      color: #000;
      /* Try changing the font size */
      font-size: 1.7em;
    }

    /* Here you need to style the authors name. */
    /* The name is in a footer tag that is inside a blockquote. */
    /* If you use footer as the selector it would also affect the */
    /* the footer at the top of the page. To solve this use  */
    /* blockqoute footer { ... } This selector will only target */
    /* footer tags that exist inside a blockquote */

    /* Style the author */
    blockquote footer {
      /* Make the font smaller 0.5em */
      font-size: 0.5em;
      /* Make the font weight bold */
      font-weight: bold;
      /* Change the color #666 */
      color: #666;
    }

    /* Now style the footer at the bottom of the page */
    /* This footer is a child of main. Use this selector: */
    /* main > footer */
    main > footer {
      /* text align center */
      text-align: center;
    }

    /* Stretch Challenges

      - Adjust the colors.
      - Swap the alignment. Currently the even list items are on the
      left and the odd numbered items are on the right. Swap these.
      - Choose some different fonts. The example currently uses Georgia.
      - Adjust the style of the author's name. Your goal is to make the
      legible but have a style that makes it clear that it's associated
      with the quote but not part of quoted text itself.
     */
  </style>
</head>

<body>
<main>
  <header>
    <h1>Famous Quotes</h1>
  </header>

  <ul>
    <li>
      <blockquote>
        <p>&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;</p>
        <footer>
          <p>&mdash; Mark Caine</p>
        </footer>
      </blockquote>
    </li>

    <li>
      <blockquote>
        <p>&ldquo;Twenty years from now you will be more disappointed by
          the things that you didn't do than by the ones you
          did do.&rdquo;</p>
        <footer>
          <p>&mdash; Mark Twain</p>
        </footer>
      </blockquote>
    </li>

    <li>
      <blockquote>
        <p>&ldquo;Those who dare to fail miserably can achieve greatly.&rdquo;</p>
        <footer>
          <p>&mdash; John F. Kennedy</p>
        </footer>
      </blockquote>
    </li>
  </ul>

  <footer>
    <small>Copyright 2020 FamousQuotes.com</small>
  </footer>
</main>
</body>

</html>