colours/complementary.html at gh-pages · will0684/colours · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Colour Assignment</title>
    <!-- three pages are
    index.html with a monochromatic colour scheme
    analogous.html with an analogous colour scheme
    complementary.html with a complementary colour scheme

    Be sure to replace EVERY color or background-color or border-color that is black,
    white, or grey with a colour from your scheme
    -->
    <meta name="viewpoint" content="width=device-width" />
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        html{
            font-size: 16px;
            line-height: 1.6;
            font-family: Helvetica, Arial, sans-serif;
            color: #0073B2;
        }
        html,body{
            background-color: #B26808;
        }
        h1{
            font-family: Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', Georgia, serif;
            font-size: 3.998rem;
            padding:1rem 2rem;
        }
        h2{
            font-family: Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', Georgia, serif;
            font-size: 2.827rem;
            padding:1rem 2rem;
        }
        nav ul{
            padding:1rem 0;
        }
        nav li{
            font-size: 1.999rem;
            list-style-type: none;
        }
        nav li>a{
            display: block;
            text-decoration: none;
            border-bottom: 0.2rem solid #74CEFF;
            padding: 0.2rem 2rem;
            color: #0073B2;
        }
        nav li>a:hover,
        nav li>a:active{
            color: #222;
        }
        p{
            font-size: 1.414rem;
            padding:0.5rem 2rem;
        }
        main p:last-child{
            padding-bottom: 4rem;
        }
        .wrapper{
            width: 80%;
            max-width: 1200px;
            margin: 0 auto;
            background-color: #FFBC64;
        }
        header{
            width:100%;
            border-bottom: 1rem solid #74CEFF;
        }
        nav{
            float:left;
            width: 38.2%;
        }
        main{
            float:right;
            width: 61.8%;
        }
        footer{
            clear:both;
            width: 100%;
            border-top: 0.5rem solid #74CEFF;
        }
        footer p{
            font-size: 1rem;
            padding: 2rem;
            color: #0073B2;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <header>
            <h1>Jordan Willis - Complementary</h1>
        </header>
        <nav>
            <ul>
                <li><a href="index.html">Monochromatic</a></li>
                <li><a href="complementary.html">Complementary</a></li>
                <li><a href="analogous.html">Analogous</a></li>
                <li><a href="#">Link 4</a></li>
                <li><a href="#">Link 5</a></li>
            </ul>
        </nav>
        <main>
            <h2>Some Important Content</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, nesciunt assumenda praesentium amet libero. Eius placeat quasi voluptatibus illo libero, fugiat, quidem temporibus laboriosam rem. Dolores iste, quia neque provident.</p>
            <p>Sed magnam ullam atque minus, perspiciatis distinctio recusandae vitae a, esse enim voluptatibus! A corrupti, ipsum voluptates aliquam, impedit recusandae quae iusto ea maiores delectus voluptatum illo porro, dignissimos similique!</p>
            <p>Ea quo, ab sequi, in quia sed expedita quas aliquam dolorem velit vel quis nulla voluptate, atque. Accusamus labore, laboriosam alias quia, officiis, quis earum natus illum corrupti, ratione animi.</p>
            <p>Culpa quis modi porro. Quae non incidunt dolorem, at in modi expedita, asperiores minima nam? Aperiam nemo ea tempora deleniti omnis aliquid? Nesciunt ea quidem iure quod incidunt officiis sed.</p>
            <p>Nam assumenda quaerat eius delectus porro perspiciatis labore? Facere, quaerat, doloribus. Perspiciatis numquam vel, dicta optio molestias modi ad accusamus quod excepturi architecto in laboriosam deserunt quibusdam fugiat distinctio pariatur.</p>
        </main>
        <footer>
            <p>&copy; 2017 Squid Inc.</p>
        </footer>
    </div>
</body>
</html>