mryoho.github.io/design_a_band.html at master · mryoho/mryoho.github.io · 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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html>
<head>
  <!-- TODO: Update your portfolio page title -->
  <title>Mr. Yoho - Design A Band</title>

  <!-- Linked Stylesheet (Controls Navbar and Footer) -->
  <link rel="stylesheet" type="text/css" href="./css/style.css">
  <style>
  /*Reset CSS below -- this gets rid of a lot of cross-browser bugs*/
  /************  DO NOT TOUCH ANY OF THE CSS BELOW ***************/

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
      display: block;
    }
    body {
      line-height: 1;
    }
    ol, ul {
      list-style: none;
    }
    blockquote, q {
      quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
      content: '';
      content: none;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }

  /**************  END OF RESET CSS   **************/
  </style>

  <!-- TODO: Change the CSS colors below so that it fits your website theme -->
  <style type="text/css" media="screen">
    body {
      background-color: gray;
      padding:5px;
      color:white;
      font-family: Verdana;
    }

    .main {
      display:block;
      clear: left;
      min-width: 600px;
      max-width: 800px;
      height:100%;
      margin:0 auto;
      background: white;
      color: black;
      padding: 10px;
    }

    h1 {
      font-size: 2em;
      margin-bottom: 5px;
      margin-top: 5px;
    }

    h2 {
      font-size: 1.5em;
      margin-bottom: 5px;
      margin-top: 10px;
    }

    p {
      margin-bottom: 15px;
    }
    table {
      padding: 2px;
      border-width: 1px;
      border-style: solid;
    }

  </style>
</head>
<body>
    <div class="navbar">
        <ul class="navigation">
            <!-- TODO: Ensure that your Navbar is correct -->
            <li><a href="./index.html">Home</a></li>
            <li class="active"><a href="./portfolio.html">Portfolio</a></li>
        </ul>
    </div>

  <div class="main">
    <h1>Challenge: Design a Band</h1>
    <h2>Challenge Background Information</h2>
    <h3>Outline - Feel free to use the following as a skeleton for yours:</h3>
    <br>
    <p>
      Paragraph 1: Introduce Design Thinking and why we are studying it. Include the role of empathy in design thinking
    </p>
    <p>
      Paragraph 2: Introduce the DEEP design process and each step we completed in order to create our bands <br><br>
      Example: In this challenge, we used the DEEP design process to design a band. The first step of the DEEP process is Discover.
      In the discover step we...<br>
      The second step of the process is Empathize. During the empathize step we...
    </p>
    <p>
      Paragraph 3: Talk about how you made your album cover. Include your empathy survey results and how you used them.

    </p>
    <table>
      <thead>
        <tr>
          <th>Question</th>
          <th>Person 1</th>
          <th>Person 2</th>
          <th>Person 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>What kind of font appeals to you?</td>
          <td>Serif</td>
          <td>Sans Serif</td>
          <td>Sans Serif</td>
        </tr>
        <tr>
          <td>What kind of colors do you like?</td>
          <td>Black</td>
          <td>Red</td>
          <td>Black and Yellow</td>
        </tr>
        <tr>
          <td>Do you prefere realistic or abstract images?</td>
          <td>Abstract</td>
          <td>Abstract</td>
          <td>Realistic</td>
        </tr>
      </tbody>
    </table>
    <!--
    <p>
      Write in your own information about the challenge. Ideas to include:
      <ul>
        <li>---What is design thinking? Why are we studying it?</li>
        <li>---What are the steps of the DEEP design thinking process?</li>
        <li>---Summarize the steps that we did in class to make the album cover.</li>
      </ul>
    </p>
    -->

    <h2>Album Cover</h2>
    <img src="./img/portfolio/design_a_band/albumcover.png" alt="Discoursing the Trinity - Lux Veritatis">

    <h2>Band Biography</h2>
    <p>
      Lux Veritatis hails from the small mountain town of Visp, Switzerland. Members Gunther Vandosa and Jean Paul Sartre grew up together listening to Swedish Death Pop and wanting nothing more than to make music forever. Unfortunately, tragedy struck when Gunther dropped out of middle school after being attacked by an insane clown. In order to get past his PTSD from this experience, Gunther moved to Poland and joined a monastery, where he learned about Lux Veritatis and the work that they are doing there to help find thermal water. During this time, Gunther lost touch with Jean Paul and Swedish Death Pop, but never lost his love for the music. While at the monastery, he got really into Gregorian Chant, and began performing in the monk chorus. As he grew older, Gunther learned to get past his clown PTSD with the help of the other monks. Finally, when he was 17, he decided it was time to again leave and face the cold, cruel world.
    </p>

    <p>
      Meanwhile, Jean Paul had grown up and grown into a locally well-known dubstep producer after having been inspired by Skrillex. One day, Jean Paul and Gunther happened to meet each other on the street and instantly started reminiscing about their history of listening to Swedish Death Pop. The two shared their current musical interests, and 12 songs later, little did they know that they would start a regional phenomenon: Gregorian Dubstep. The inspiration of the melodies draws on Gunther’s time at the monastery and his fear of clowns. These inspirations, along with a chill-yet-complicated sounding band name came together to form the band's first album: Discoursing about the Trinity.
    </p>

    <p>
      To hear track one of the new album, check out the following link: <a href="https://www.youtube.com/watch?v=MgHclJGCOPY">Gregorian Chant Part 1</a>
    </p>

  </div>

  <div class="footer">
  </div>


</body>
</html>