BasicSiteHTMLCSS/index.html at master · CraigNock/BasicSiteHTMLCSS · 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
<!DOCTYPE html>

<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="img/icons/leaf-48.png" />
    <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="style.css" rel="stylesheet" />
</head>

<body>

    <nav id ="nav">
        <a class="top" href="#intro">
            <i class="material-icons"> vertical_align_top </i>
        </a>
        <span class="menu">
            <i class="material-icons">clear_all</i>
            <ul class="jumpto">
                <li><a href="#features">Features</a> </li>
                <li><a href="#halves">Halves</a></li>
                <li><a href="#gallery">Gallery</a></li>
            </ul>
        </span>


        <ul class="navquad">
            <li><a class="a" href="#features">Features</a> </li>
            <li><a class="a" href="#halves">Halves</a></li>
            <li><a class="a" href="#gallery">Gallery</a></li>
            <li class="drop">
                <a href="#">Resources</a>
                <ul class="dropdown">
                    <li><a href="https://earth.nullschool.net/" target="_blank">Earth Wind</a></li>
                    <li><a href="https://en.wikipedia.org/wiki/Portal:Current_events" target="_blank">Current Events</a></li>
                    <li><a href="https://xkcd.com/418/" target="_blank">Comic</a></li>
                </ul>
            </li>
        </ul>

    </nav>

    <div id ="intro">
        <div class="titlebox">
            <h1 class="title">Introducing Effervescent Mongeese</h1>
            <h2>They're pretty alright if you squint</h2>
            <p class="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porta varius orci non posuere. Sed consequat aliquet massa rhoncus venenatis. </p>
            <p class="p2">Aliquam ut tortor sit amet neque sodales tristique ac vitae justo. Curabitur scelerisque neque justo, at scelerisque nibh blandit nec. </p>
        </div>
    </div>

    <div id ="features">
        <feature class="feature">
            <img src="img/icons/leaf-48.png" alt="leaf">
            <h3>Leafy</h3>
            <p>It's featurific and all that good stuff. It's extra featurific and all that good stuff. It's extra featurific and all that good stuff</p>
            <button class="button">Grow</button>
        </feature>
        <feature class="feature">
            <img src="img/icons/open-door-48.png" alt="open door">
            <h3>Dooriffic</h3>
            <p>It's extra featurific and all that good stuff. It's extra featurific and all that good stuff. It's extra featurific and all that good stuff.</p>
            <button class="button">Open</button>
        </feature>
        <feature class="feature">
            <img src="img/icons/gas-48.png" alt="gas flame">
            <h3>Flametastic</h3>
            <p>It's super extra featurific and all that good stuff. It's extra featurific and all that good stuff. It's extra featurific and all that good stuff</p>
            <button class="button">Spark</button>
        </feature>
    </div>

    <div id="halves">
        <div class="half1">
            <h1>Half of a Whole</h1>
            <p>This half is darker. This half is darker. This half is darker. This half is darker. This half is darker. This half is darker. This half is darker. This half is darker. </p>
        </div>

        <spinbox class="spinbox">
            <h2>Fancy a Spin?</h2>
            <p>Maybe you should hover over me?<br>Yeah, you would.</p>
        </spinbox>

        <div class="half2">
            <h1>True to Form</h1>
            <p>Gradient Edition</p>
        </div>
    </div>

    <div id="gallery">
        <framing class="frame">
            <img class="gallery-image" title="img1?" src="img/gallery1.jpg" alt="Dog on Mountain">
            <h3>What A Doggo</h3>
        </framing>
        <framing class="frame">
            <img class="gallery-image" src="img/gallery2.jpg" alt="">
            <h3>A Galaxy Away</h3>
        </framing>
        <framing class="frame">
            <img class="gallery-image" src="img/gallery3.jpg" alt="">
            <h3>Lazy Cat</h3>
        </framing>
        <framing class="frame">
            <img class="gallery-image" src="img/gallery4.png" alt="">
            <h3>Solar System Flag</h3>
        </framing>
        <framing class="frame">
            <img class="gallery-image" src="img/gallery5.jpg" alt="">
            <h3>Sharks For Larks</h3>
        </framing>
        <framing class="frame">
            <img class="gallery-image" src="img/gallery6.jpg" alt="">
            <h3>True North</h3>
        </framing>
        </div>

    <form class="register">
        <label class="regbox">Register to our mailing list:</label>
        <regbox>
            <input type="email" class="email" required>
            <button type="submit">
            <i class="material-icons">send</i>
            </button>
        </regbox>
        <label>
        <input type="checkbox" class="check"> Send me daily dog images!
        </label>
    </form>

    <footer>
        <p><a href="https://www.goodreads.com/book/show/21423525-us" target="_blank">About Us</a></p>
        <p><a href="https://www.blindsblindsblinds.ca/" target="_blank">Privacy Policy</a></p>
        <p><a href="https://en.wikipedia.org/wiki/List_of_circulating_currencies" target="_blank">Legal Notes</a></p>
        <p><a href="https://www.wikihow.com/Copy-and-Paste" target="_blank">Copyright</a></p>
    </footer>


</body>

</html>