cs472/layout.html at main · merhatsidk/cs472 · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Layout</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="wrapper">
            <div class="about">
                <h1>About Us</h1>
                <p>
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam excepturi aspernatur quam autem minus! Id eligendi velit expedita voluptatum error voluptatibus officia dicta magni, enim explicabo illo praesentium facilis molestias. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, excepturi quisquam, corporis quae porro iusto suscipit at sit magni dolores
                </p>
                <p><i class="fa fa-phone"></i><a href="tel:+2064969541">+2064969541</a></p>

                <p><label class="material-icons">email</label><a href="mailto:merhatsidk.ayele@miu.edu">merhatsidk.ayele@miu.edu</a></p>
                <form>
                    <input class="text-field" type="text" placeholder="Enter your e-main">
                    <input class="btn" type="submit" value="send">
                </form>
            </div>
            <div class="tweet">
                <h1> Latest Tweet</h1>
                <div class="flex-container">
                    <i class="fa fa-twitter"></i>
                     <label>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed nostrum esse voluptatibus nulla corporis mollitia accusantium impedit ipsa, corrupti voluptates ullam officia ipsum accusamus suscipit blanditiis voluptatem. Porro, quaerat similique?</label>
                </div>
               <div class="flex-container">
                <i class="fa fa-twitter"></i>
                <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed nostrum esse voluptatibus nulla corporis mollitia accusantium impedit ipsa, corrupti voluptates ullam officia ipsum accusamus suscipit blanditiis voluptatem. Porro, quaerat similique?</span>
               </div>
                <div class="flex-container">
                    <span class="fa fa-twitter"></span>
                <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed nostrum esse voluptatibus nulla corporis mollitia accusantium impedit ipsa, corrupti voluptates ullam officia ipsum accusamus suscipit blanditiis voluptatem. Porro, quaerat similique?</span>
                </div>
            </div>
            <div class="instagram">
                <h1>Instagram</h1>
                <div class="nested">
                    <div><img src="./images/camera.jpeg" alt="camera"></div>
                    <div><img src="./images/couples.jpeg" alt="couples"></div>
                    <div><img src="./images/motorbike.jpeg" alt="motor"></div>
                    <div><img src="./images/waterfall.jpeg" alt="water"></div>
                </div>

            </div>
    </div>

    <footer>
        <hr>
        <nav class="nav-list">
            <a  href="./homepage.html">Home</a>
            <a  href="./homepage.html">About</a>
            <a  href="#">Our works</a>
            <a  href="#">Services</a>
            <a  href="#">Blog</a>
            <a  href="#">Contact</a>
            <a  href="#">Colorlib</a>
        </nav>
    </footer>
</body>
</html>