webmaker-launch/activity.html at gh-pages · mozilla/webmaker-launch · 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
<DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Language" content="en">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="//code.cdn.mozilla.net/fonts/fira.css">
    <title>Make Something with Webmaker</title>
    <style>
      html {
        background: linear-gradient(135deg, #4c88ef 0%,#17e4d9 100%);
        background-attachment: fixed;
        background-size: contain;
      }

      html, body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
      }

      body {
        font-family: FiraSans, 'Fira Sans', 'Open Sans';
        font-size: 18pt;
        color: white;
      }

      a {
        color: white;
      }

      #main {
        margin: 3em auto;
        width: 800px;
      }

      h1 {
        text-align: center;
      }

      .clear {
        clear: both;
      }

      .instructions {
        width: 62.5%;
        float: right;
      }

      .screenshot.bigscreen {
        float: left;
        display: block;
        width: 300px;
        margin: 0 auto;
      }

      .screenshot.smallscreen {
        margin: 0 auto;
        width: 350px;
        display: none;
      }

      ol {
        padding-left: 2em;
      }

      li {
        padding-bottom: 1em;
      }

      @media (max-width: 800px) {
        body {
          font-size: 14pt;
        }

        #main {
          width: 350px;
        }

        .screenshot.bigscreen {
          display: none;
        }

        .screenshot.smallscreen {
          display: block;
        }

        .instructions {
          width: auto;
        }

        li {
          padding-bottom: 0;
        }
      }

      .small-text {
        font-size: .65em;
      }

    </style>
  </head>
  <body>
    <div id="main">
      <h1>Make something with Webmaker!</h1>
      <img class="screenshot left bigscreen" src="//beta.webmaker.org/images/hero@2x.png">
      <div class="instructions">
        <ol>
          <li>On an Android phone, <a href="https://play.google.com/store/apps/details?id=org.mozilla.webmaker">install</a> Webmaker.</li>
          <li>Open the Webmaker app and explore the projects people have made.</li>
          <li>Click on the "Make" tab and start a new project.</li>
          <li>Make something! Check out <a href="ideas.html">this list</a> for inspiration.</li>
          <li>Give your project a title and share it with <a href="//twitter.com/webmaker">@webmaker</a> or <a href="bobby@mozillafoundation.org">bobby@mozillafoundation.org</a>.</li>
        </ol>
      </div>
      <div class="clear"></div>
      <img class="screenshot smallscreen" src="https://beta.webmaker.org/images/hero@2x.png">
      <p class="clear"></p>
    </div>
  </body>
</html>