changmo-sung-project-one/index.html at master · ChangmoSung/changmo-sung-project-one · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://kit.fontawesome.com/9c84465531.js" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700|Playfair+Display:400,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style/style.css">
    <title>Document</title>
</head>
<body>

<header>

    <nav class="wrapper clearfix">
        <h1><a href="#">Shutter</a></h1>
        <label for="check">
            <i class="fas fa-bars"></i>
        </label>
        <input name="check" id ="check" type="checkbox">
        <ul class="slide-in clearfix">
            <li><a href="https://junocollege.com/" target="_blank">home</a></li>
            <li><a href="https://junocollege.com/company" target="_blank">about</a></li>
            <li><a href="https://junocollege.com/blog" target="_blank">blog</a></li>
            <li><a href="#contact">contact</a></li>
        </ul>
    </nav>

    <div class="header-sign">
        <p><span>WELCOME TO</span>Shutter</p>
    </div>

    <div class="icons">
        <a href=""><i aria-hidden="true" title="facebook" class="fab fa-facebook-f"></i></a>
        <a href=""><i aria-hidden="true" title="instagram" class="fab fa-instagram"></i></a>
        <a href=""><i aria-hidden="true" title="linkedin" class="fab fa-linkedin-in"></i></a>
        <a href=""> <i aria-hidden="true" title="twitter" class="fab fa-twitter"></i></a>
    </div>

</header>

<main>
    <div class="about-shutter">
        <h2>About Shutter</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar tortor a elementum eleifend. Vestibulum consequat vestibulum felis pharetra luctus. Quisque interdum orci quis convallis dapibus. Vestibulum vitae tincidunt sem, a blandit sem.</p>
        <button>find out more</button>
    </div>

    <div class="photo-gallery clearfix wrapper">
        <div><img src="shutter-assets/asset-2.jpg" alt="two pines under the sunset"></div>
        <div><img src="shutter-assets/asset-3.jpg" alt="tangled wire in a lightening glass bottle on a hand"></div>
        <div><img src="shutter-assets/asset-4.jpg" alt="cars waiting for the light to change at a crosswalk in downtown"></div>
    </div>

    <div class="info">
        <ul>
            <li><i aria-hidden="true" class="fas fa-images"></i><a href="#">Gallery</a></li>
            <li><i aria-hidden="true" class="fas fa-camera"></i><a href="#">Photo Tips</a></li>
            <li><i aria-hidden="true" class="fas fa-image"></i><a href="#">About</a></li>
            <li><i aria-hidden="true" class="fas fa-envelope"></i><a href="#">Contact</a></li>
        </ul>
    </div>

</main>

<aside>

    <div class="behind-the-lens clearfix wrapper">
        <div class="behind-the-lens-image">
            <img src="shutter-assets/asset-6.jpg" alt="a woman with black backpack in black shirt taking a photo with a camera on her hands">
        </div>
        <div class="behind-the-lens-description">
            <h2>Behind the Lens</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar tortor nulla elementum eleifend. Vestibulum consequat vestibulum felis pharetra luctus. Quisque interdum orci quis convallis dapibus nulla pulvinar tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar tortor nulla elementum eleifend. Vestibulum consequat vestibulum felis pharetra luctus. Quisque interdum orci quis convallis dapibus nulla pulvinar tortor. Lorem ipsum dolor sit amet, consectetur adipiscing lit. Nulla pulvinar tortor nulla elementum eleifend.</p>
            <button>find out more</button>
        </div>
    </div>

    <div class="story">
        <div class="nature-and-scenery-content clearfix">
            <div class="story-image1">

            </div>
            <div class="nature-and-scenery">
                <h3>Nature & Scenery</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar tortor a elementum eleifend. Vestibulum consequat vestibulum.</p>
                <button>read more</button>
            </div>
        </div>
        <div class="candid-photography-content clearfix">
            <div class="story-image2">

            </div>
            <div class="candid-photography">
                <h3>Candid Photography</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar tortor a elementum eleifend. Vestibulum consequat vestibulum.</p>
                <button>read more</button>
            </div>
        </div>
    </div>

</aside>

<footer id="contact" class="clearfix">
    <div class="wrapper">
        <div class="stay-updated">
            <p><span>STAY UPDATED</span>Subscribe to our newsletter to stay updated</p>
            <form class="clearfix" action="#">
                <input type="text" value="email address">
                <button>describe</button>
            </form>
        </div>
        <ul class="contact">
            <li>CONTACT</li>
            <li>info@gmail.com</li>
            <li>123-456-7890</li>
            <li>123 some road</li>
            <li>Toronto, ON</li>
        </ul>
        <ul class="pages">
            <li>pages</li>
            <li>home</li>
            <li>about</li>
            <li>blog</li>
            <li>contact</li>
        </ul>
    </div>
</footer>

<p class="copyright">Copyright <i class="far fa-copyright"></i> 2018 HackerYou</p>
</body>
</html>