Locus/index.html at main · Razavik/Locus · 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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./CSS/normalize.css">
    <link rel="stylesheet" href="./CSS/style.css">
    <title>Locus</title>
</head>
<body>
    <header class="navigation">
        <a href="#" class="logo">
            <img src="./Image/Logo.svg" alt="logo">
            <p>Locus</p>
        </a>
        <nav>
            <ul>
                <li>
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li>
                    <a class="nav-link" href="#">Contact</a>
                </li>
                <li>
                    <a class="nav-link" href="#">Location</a>
                </li>
                <li>
                    <a class="nav-link" href="#">About Us</a>
                </li>
            </ul>
        </nav>
        <a href="#" class="button">Sign Up</a>
    </header>
    <main>
        <section class="header-block">
            <div class="header-text">
                <h1>Locus <span>architecture</span></h1>
                <p>architecture not only about engineering, it even<br>
                lands to art and aesthetics. With us, you will get <br>
                a residentical design with an extraordinary touch
                <br>of art.</p>
                <a href="#" class="button">Let's go</a>
            </div>
            <img src="./Image/HeaderImg.png" alt="HeaderImg">
        </section>
        <section class="block-1">
            <div class="block-1-article">
                <h3>How it works</h3>
                <p>Spice up your space even simpler<br> than you think</p>
            </div>
            <div class="bl1-source">
                <img src="./Image/BLock-1-Img.png" alt="Img">
                <div class="bl1-other-text">
                    <p>We provide design and build <br> for commercial building, <br> interior and furniture to improve the better life.</p>
                    <pre><a href="#">S E E  V I D E O</a></pre>
                </div>
                <a href="#" class="play-video"></a>
            </div>
        </section>
        <section class="block-2">
            <img src="./Image/Block-2-Img.png" alt="Img">
            <div class="block-2-text">
                <h4>Our mission is to deliver aesthetic visual for your home</h4>
                <p>By applying bacis psychology principles, <br> we are going to explain how perception <br> works and how we can use this understanding to maximise the space that we occupy in <br> our homes.</p>
            </div>
        </section>
        <section class="block-3">
            <div class="block-3-article">
                <h3>Our project </h3>
                <p>Introducing our first official project</p>
            </div>
            <img  src="./Image/Design.svg" alt="Design">
            <div class="bl3-projects-group">
                <div class="project project-1">
                    <h4 class="pta">Project Livingroom</h4>
                    <p class="ptp">A simple guide to create the perfect livingroom for. Night Watc works beautifully in a wide gamut of arrangements.</p>
                    <img src="./Image/Project1.png" alt="Project1">
                </div>
                <div class="project project-2">
                    <img src="./Image/Project2.png" alt="Project2">
                    <h4 class="pta">Project workspace</h4>
                    <p class="ptp">A simple guide to create the perfect livingroom for. Night Watc works beautifully in a wide gamut of arrangements.</p>
                </div>
                <div class="project project-3">
                    <h4 class="pta">Library</h4>
                    <p class="ptp">A simple guide to create the perfect livingroom for. Night Watc works beautifully in a wide gamut of arrangements.</p>
                    <img src="./Image/Project3.png" alt="Project3">
                </div>
            </div>
        </section>
        <section class="block-4">
                <h3 class="bl4-article">Testimonial</h3>
                <div class="companies">
                    <img src="./Image/Comp1.png" alt="KLAMBY">
                    <img src="./Image/Comp2.png" alt="Mayoutfit">
                    <img src="./Image/Comp3.png" alt="ZALORA">
                    <img src="./Image/Comp4.png" alt="Geuli">
                </div>
                <div class="bl4-source">
                    <img src="./Image/TestimonialIMG.png" alt="TestimonialIMG">
                    <div class="bl4-text">
                        <ul class="facts-list">
                            <li class="fact-1">
                                <h5>105</h5>
                                <p>project done</p>
                            </li>
                            <li class="fact-2">
                                <h5>12</h5>
                                <p>year of experience</p>
                            </li>
                            <li class="fact-3">
                                <h5>10+</h5>
                                <p>big company partnership</p>
                            </li>
                        </ul>
                        <p>"Not able to tell you how happy I am with interior design. Interior design has completely surpassed our expectations. Interior design saved my business. Interior design is worth much more than I paid."<br><br><span>- Roscoe</span></p>
                    </div>
                </div>
        </section>
        <section class="block-contact">
            <div class="contact-text">
                <h4>Contact Us</h4>
                <p>Have any questions? Want help before getting started?</p>
                <img src="./Image/Design.svg" alt="Design">
            </div>
            <form class="input-data" action="#">
                <input class="input-contacts" type="text" placeholder="Full Name">
                <input class="input-contacts input-email" type="text" placeholder="Email address">
                <input class="input-contacts input-description" type="text" placeholder="Description">
                <button type="submit">Send now</button>
            </form>
        </section>
    </main>
    <footer>
        <div class="footer-inner">
            <a href="#" class="footer-logo">
                <img src="./Image/Logo.svg" alt="logo">
                <p>Locus</p>
            </a>
            <nav class="footer-nav">
                <ul>
                    <li>
                        <a class="nav-link" href="#">Home</a>
                    </li>
                    <li>
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                    <li>
                        <a class="nav-link" href="#">Location</a>
                    </li>
                    <li>
                        <a class="nav-link" href="#">About Us</a>
                    </li>
                </ul>
            </nav>
        </div>
    </footer>
</body>
</html>