ECCOLAimplementation/index.html at main · josesiqueira/ECCOLAimplementation · 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
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Eccola</title>
    <link rel="stylesheet" href="./assets/css/reset.css" />
    <link rel="stylesheet" href="./assets/css/style.css" />
  </head>
  <body>
    <header class="header">
      <!-- Nav -->
      <nav class="nav">
        <a  href="index.html" class="nav__logo">Eccola</a>
        <ul class="menu">
          <li class="menu__item"><a href="index.html">Home</a></li>
          <li class="menu__item"><a href="#about">About</a></li>
          <li class="menu__item"><a href="game.html">Game</a></li>
        </ul>
      </nav>
      <!-- Seção principal -->
      <section class="principal">
        <div class="content__title">
          <h1 class="title">Game sheet</h1>
          <h3 class="subtitle">How To Play The Cards</h3>
          <a href="game.html" class="button__game">Play Game</a>
        </div>
        <div>
          <picture>
            <img
              class="illustration"
              src="./assets/img/card-game.svg"
              alt="Imagem de uma mão segurando três cartas, uma na cor azul escuro, laranja e azul claro"
            />
          </picture>
        </div>
      </section>
    </header>
    <!-- Seção About -->
    <main class="container main">
      <h2 class="about__title" id="about">About</h2>
      <p class="about__paragraph">
        ECCOLA is easy to applyin practice. It is a sprint-by-sprint evolving
        process that empowersethi- cal thinking in the product development
        process.
        As a result, ethical development is enhanced and Work Product
        Sheets (WPS) are created. The WPSs help you measure the Trustworthiness
        of the product. ECCOLAis an evolving set of cards and you choose the
        parts that are relevant to your work.
      </p>
      <div class="explication_container">
        <div class="explication">
          <p class="about__paragraph">
            <span class="strong">How to:</span> ECCOLA is intended to be used during the entire design and
            development process in three steps:
          </p>
          <ol start="1" class="about__list">
            <li>
              Prepare - Choose the relevant cards for the current sprint. Docu-
              ment selected cards and justification on WPS.
            </li>
            <li>
              Review - Keep the selected cards on hand during single tasks.
              Write down if any actions are taken based on the cards
            </li>
            <li>
              Evaluate — Review to ensure that all planned actions are taken.
              Revise the card deck, and if necessary, review tasks again.
            </li>
          </ol>
        </div>
        <div class="explication_img">
          <picture>
            <img src="./assets/img/about.jpg" alt="" srcset="" />
          </picture>
        </div>
        <p class="about__paragraph">
          <span class="strong">Practical Tip: </span> Repeat the process in every iteration. Remember to do
          a retrospective afterwards. Think about what worked & what did not.
          Choose the parts that are the most relevant for your workin the next
          round.
        </p>
      </div>
    </main>
    <!-- Seção Footer -->
    <footer class="footer">
      <a href="game.html" class="button__game">Play Game</a>
    </footer>
  </body>
</html>