webexperiments/clouds/index.html at main · wmodes/webexperiments · 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
<html>
<head>
    <title>CSS Mario Clouds</title>
    <script>
        /* check if in iframe, if NOT, redirect to the definitive page
            and don't wait for elements to be loaded */
        if (self.location.host == "modes.io") {
            if( top === self ) { // not in a frame
                location.href = "https://modes.io/mario-clouds/";
            }
        }
    </script>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <!-- for proper responsive scaling -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- META DATA -->
    <meta name="description" content="Cory Archangel's Clouds in CSS3">
    <meta property="og:title" content="CSS Mario Clouds">
    <meta property="og:description" content="Cory Archangel's Clouds in CSS3">
    <meta property="og:site_name" content="CSS Mario Clouds">
    <meta property="og:type" content="website">
    <meta property="og:url" content="http://myspace.csumb.edu/~wmodes/webexperiments/clouds/">
    <meta property="og:image" content="http://myspace.csumb.edu/~wmodes/webexperiments/clouds/images/single-cloud.png">
    <link rel="icon" type="image/png" href="images/single-cloud.png">
</head>
<body>
    <!-- orig sizes: screen 680px, clouds 70px -->
    <div class="container">
        <div class="row row1">
        </div>
        <div class="row row2">
            <img src="images/single-cloud.png" class="cloud cloud-a">
            <img src="images/single-cloud.png" class="cloud cloud-b">
            <img src="images/triple-cloud.png" class="cloud cloud-c">
        </div>
        <div class="row row3">
            <img src="images/single-cloud.png" class="cloud cloud-a">
            <img src="images/single-cloud.png" class="cloud cloud-b">
            <img src="images/triple-cloud.png" class="cloud cloud-c">
        </div>
        <div class="row row4">
            <img src="images/single-cloud.png" class="cloud cloud-a">
            <img src="images/single-cloud.png" class="cloud cloud-b">
            <img src="images/triple-cloud.png" class="cloud cloud-c">
        </div>
        <div class="row row5">
            <img src="images/single-cloud.png" class="cloud cloud-a">
            <img src="images/single-cloud.png" class="cloud cloud-b">
            <img src="images/triple-cloud.png" class="cloud cloud-c">
        </div>
        <div class="row row6">
            <img src="images/single-cloud.png" class="cloud cloud-a">
            <img src="images/single-cloud.png" class="cloud cloud-b">
            <img src="images/triple-cloud.png" class="cloud cloud-c">
        </div>
        <div class="row row7">
            <img src="images/single-cloud.png" class="cloud cloud-a">
            <img src="images/single-cloud.png" class="cloud cloud-b">
            <img src="images/triple-cloud.png" class="cloud cloud-c">
        </div>
        <div class="row row8">
            <img src="images/single-cloud.png" class="cloud cloud-a">
            <img src="images/single-cloud.png" class="cloud cloud-b">
            <img src="images/triple-cloud.png" class="cloud cloud-c">
        </div>
        <div class="row row9">
            <img src="images/single-cloud.png" class="cloud cloud-a">
            <img src="images/single-cloud.png" class="cloud cloud-b">
            <img src="images/triple-cloud.png" class="cloud cloud-c">
        </div>
        <div class="row row10"></div>
        <div class="row row11">
            <div class="explainer">A pure CSS homage to Corey Archangel's 2002 ROM hack piece Super Mario Clouds</div>
        </div>

    </div>
</body>
</html>