TechWeb/index.html at master · mliu433/TechWeb · 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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name ="viewpoint" content="width=device-width",
          initial-scale="1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css" >
    <title>Travel Web</title>
</head>

<body>
   <!-- hedaer showcase -->
<header id="showcase" class="grid">
    <div class="bg-image"></div>
    <div class="content-wrap">
    <h1>Welcome to the page</h1>

    <p>Lorem ipsum dolor sit amet,
        consectetur adipisicing elit.
        Accusamus dignissimos doloribus error
        fugit impedit odio quae similique soluta unde voluptate.</p>
        <a href="#section-b", class="btn">Read more</a>
    </div>

</header>

    <!-- main area -->
    <!-- section a area -->
    <section id="section-a" class="grid">
    <div class="content-wrap">
        <h2 class="content-title">web and app deve</h2>
        <div class="content-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aspernatur at blanditiis debitis delectus, dignissimos distinctio facere fugit id in inventore iure laboriosam non odio officia pariatur perferendis placeat porro quia, quod ratione repudiandae sapiente sequi sint soluta veritatis voluptate!</p>
        </div>
    </div>
    </section>
    <!--section b area -->
    <section id="section-b" class="grid">
        <ul>
            <li>
                <div class="card">
                  <img src="./resource/book.jpg" alt="">
                    <div class="card-content">
                        <h3 class="card-title">Web application</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat ipsam iure laboriosam mollitia optio praesentium quasi sequi tenetur voluptates voluptatibus.</p>
                    </div>
                </div>
            </li>

            <li>
                <div class="card">
                    <img src="./resource/mobile.jpg" alt="">
                    <div class="card-content">
                        <h3 class="card-title">Mobile Application</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat ipsam iure laboriosam mollitia optio praesentium quasi sequi tenetur voluptates voluptatibus.</p>
                    </div>
                </div>
            </li>

            <li>
                <div class="card">
                    <img src="./resource/market.jpg" alt="">
                    <div class="card-content">
                        <h3 class="card-title">Tech Marketing</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat ipsam iure laboriosam mollitia optio praesentium quasi sequi tenetur voluptates voluptatibus.</p>
                    </div>
                </div>
            </li>
        </ul>
    </section>

    <!-- section c -->
    <section id="section-c" class="grid">

     <div class="content-wrap">
         <h2 class="content-title">we handle all of your digital needs</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dolor ducimus fugiat neque numquam quo temporibus voluptas? Laudantium maxime, praesentium!</p>

     </div>
    </section>

    <!-- section d -->
    <section id="section-d" class="grid">
        <div class="box">
            <h2 class="content-title">contact us</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia odio quas quidem reiciendis sit. Molestias neque perspiciatis porro quaerat voluptas?</p>
            <p>contact@maggiggqiliu81@.gomal</p>
        </div>

        <div class="box">
            <h2 class="content-title">About our company</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus delectus dicta dignissimos eius laborum praesentium quae quidem sed tempora veniam!</p>
        </div>
    </section>

    <!--footer -->
    <footer id="main-footer" class="grid">
        <div>Acme web Solution</div>
        <div>Project By <a href="http://traversymedia.com" target="_blank">Traversy Media</a> </div>
    </footer>

<script>src="function.js"</script>
</body>
</html>