Mockup01/index.html at master · ihabau/Mockup01 · 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
<!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">
    <link rel="stylesheet" href="responsive.css">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Premium Quality & Tradition</title>
</head>

<body id="top">
    <header class="row">
        <nav id=navi>
            <ul class="col-12" id=links>
                <li><a href="#top" id="link">HOME</a></li>
                <li><a href="#meetUs" id="link">ABOUT US</a></li>
                <li><a href="" id="link">SOCIAL</a></li>
                <li><a href="#contact-us" id="link">CONTACT</a></li>
            </ul>
        </nav>
        <article class="col-12" id="intro">
            <h2>Premium Quality & Tradition</h2>
            <h5>Family bussines since 1978</h5>
        </article>
        <div class="overlay"></div>
    </header>

    <main>
        <section class="row" id="AboutUs">
            <article class="col-12" id="meetUs">
                <h1>Meet Our Team</h1>
            </article class="">
            <article class="col-4" id="personal">
                <img src="https://appworksinc.com/wp-content/uploads/2013/05/Team-Member-3.jpg" alt="John-Doe" id="personal-img">
                <h3>John Doe</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, ut est veritatis esse at et
                    perspiciatis praesentium nesciunt adipisci non debitis repudiandae consectetur cupiditate assumenda
                    laudantium mollitia. Veritatis, sequi minima rerum sint aliquid nisi. Nulla nesciunt velit,
                    consequatur nihil perferendis aperiam quas ipsam esse alias laudantium excepturi ut nemo hic itaque
                    ipsum similique, ipsa corporis exercitationem cumque! Ipsum voluptatum, molestiae, omnis quibusdam
                    ipsa veniam accusantium repellat adipisci enim iure reprehenderit illum illo voluptatem ea deserunt
                    asperiores? Maxime ducimus pariatur quaerat atque nemo explicabo rem aspernatur! Tempora, possimus
                    ad! Illum esse adipisci aperiam ex debitis non aut modi quaerat, in enim.</p>
            </article>
            <article class="col-4" id="personal">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Woodlawn_279ufmd_Reconstruction_004.jpg/250px-Woodlawn_279ufmd_Reconstruction_004.jpg"
                    alt="Jane-Doe" id="personal-img">
                <h3>Jane doe</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, ipsum, vel sapiente nesciunt
                    architecto porro corporis veniam accusamus non harum aut repellat voluptatum libero laborum
                    exercitationem et quibusdam dolores explicabo eos amet adipisci eligendi nisi? Esse incidunt
                    dolores corporis eius quia quasi alias sint qui maiores, ullam earum sed necessitatibus dolor
                    minima nobis aliquam, obcaecati aut optio minus neque soluta vel fuga. Libero autem eos aspernatur
                    veritatis eaque harum exercitationem dignissimos, voluptate delectus velit architecto! Tenetur
                    aliquam nam facilis. Tempora, accusamus repellat? Sed nemo ipsum id assumenda fugiat quae magnam
                    labore aliquid ad neque esse, tenetur unde aperiam ipsam voluptatum?</p>
            </article>
            <article class="col-4" id="personal">
                <img src="http://swipemarket.com/wp-content/uploads/2014/06/Untitled-4.jpg" alt="Jack-Doe" id="personal-img">
                <h3>Jack Doe</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda expedita dolor eos totam nobis
                    obcaecati doloremque iusto libero sint ex harum accusamus fuga, vero dolores consequatur
                    voluptatibus officiis beatae? Velit eveniet deleniti sint magnam voluptatum veritatis
                    exercitationem reiciendis inventore, consequatur voluptates doloribus, nesciunt beatae autem veniam
                    itaque praesentium! Numquam in dolore placeat quis aut qui porro, voluptate doloribus enim
                    voluptatibus eum quod voluptas ut adipisci, mollitia nulla repellendus nam dolorum id beatae sed
                    repudiandae recusandae optio iste. Tempore voluptatibus architecto consectetur voluptatum rem
                    quidem, quisquam at impedit dolores nihil maiores rerum! Nulla perspiciatis dolore consectetur
                    sequi est velit voluptates magni.</p>
            </article>
        </section>
        <section class="row" id="img-selector">
            <div class="col-12" id="random-imgs">
                <img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-750x500.jpg"
                    alt="nature-img" class="col-3" id="img-size">
                <img src="https://cdn-images-1.medium.com/max/1600/1*mONNI1lG9VuiqovpnYqicA.jpeg" alt="cat-img" class="col-3"
                    id="img-size">
                <img src="https://content.presspage.com/uploads/1763/1920_year-of-the-bird-george-grall.jpg?10000" alt="bird-img"
                    class="col-3" id="img-size">
                <img src="https://www.stratoscale.com/wp-content/uploads/bigstock-168398480-1920x960.jpg" alt="clouds-img"
                    class="col-3" id="img-size">
            </div>
        </section>

        <section class="row" id="contact-us">
            <h2>Contact Us</h2>
            <div class="col-6" id="contact-info">

                <form action="/action_page.php" >
                    <input type="text" id="fname" name="firstname" placeholder="Your name.." >
                </form>
                <form action="/action_page.php">
                    <input type="text" id="mail-address" name="email" placeholder="Your email address..">
                </form>
                <form action="/action_page.php">
                    <input id="input-message" type="text" id="message" name="message" placeholder="Your Message..">
                </form>
                <form action="/action_page.php">
                    <input type="submit" value="Send" >
                </form>
            </div>
            <a id="map-border" class="col-6" href="https://www.google.com/maps/place/Komvux+Helsingborg/@56.0366018,12.6982728,17z/
                data=!3m1!4b1!4m5!3m4!1s0x465233b46e8f3ba9:0x6336a999ab7a9e4d!8m2!3d56.0366018!4d12.7004615">
                <img src="img/map.png" alt="comvux-map"  id="map">
            </a>

            </div>
        </section>


        <footer class="row">
            <nav id=bottom-navi>
                <ul class="col-12" id=bottom-links>
                    <li><a href="#top" id="link">HOME</a></li>
                    <li><a href="#meetUs" id="link">ABOUT US</a></li>
                    <li><a href="#icons" id="link">SOCIAL</a></li>
                    <li><a href="#contact-us" id="link">CONTACT</a></li>
                </ul>
            </nav>
            <div class="col-12" id="icons">
                <i class="fa fa-facebook-official" aria-hidden="true"></i>
                <i class="fa fa-twitter" aria-hidden="true"></i>

            </div>

        </footer>
    </main>

</body>

</html>