second-assigenment/index.html at main · dev-pritamdutta/second-assigenment · 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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!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">
    <title>Architects Web</title>
    <link rel="stylesheet" href="style.css">
    <!-- google font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>

<body>
    <!-- header start -->
    <header class="header">
        <div class="header-container">
            <div class="header-section">
                <div class="header-logo">
                    <h2>G3 <span class="span-style1">Architects</span></h2>
                </div>
                <div class="nav-bar">
                    <nav class="nav">
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Contact Us</a></li>
                            <li><a href="#">Login</a></li>
                        </ul>
                    </nav>
                </div>
            </div>

        </div>
        <div class="header-data">
            <h2 class="header-title">Brand New <br>
                Group of Architects</h2>
            <p class="header-para">
                Whether you’re an aspiring architect looking for sound advice,<br> or merely an enthusiast scoping hot
                designs from around the world, there’s no wrong reason to check out<br> the best architecture blogs.
                some form, by injected humour, or randomised words which don't look even</p>
            <button class="btn">Explore More</button>
            <div class="header-img">
                <img src="./images/banner.png" alt="banner img">
            </div>
        </div>


    </header>
    <!-- header end -->
    <main class="main">
        <!-- first section start -->
        <section class="features-section">
            <div class="features-img">
                <img src="./images/team1.png" alt="img1">
                <img src="./images/team2.png" alt="img2">
                <img src="./images/team3.png" alt="img3">
                <img src="./images/team4.png" alt="img4">
            </div>
            <div class="features-data">
                <h2 class="features-title"><span class="span-style2">Quick list </span>of Our <span
                        class="span-style1">Features</span></h2>
                <p class="features-para"> If you want the latest in design, technology, education, culture and even
                    social media, enhanced by a friendly, personal touch, accept no substitute.</p>
                <button class="btn">Explore More</button>
            </div>

        </section>
        <!-- first section end -->
        <!-- second section start -->
        <section class="features-tech-section">
            <div class="features-tech-container">
                <div class="features-tech-start">
                    <p class="front-color"></p>
                    <h2 class="features-tech-title">Features you will <br> love & enjoy</h2>
                </div>
                <p class="features-tech-para">We’ve got three fun features to introduce to you today. One to cut through
                    the clutter, another to make connections more meaningful, and two to make you more productive.</p>
                <div class="blogs">
                    <h2 class="blog-title">Desktop & Mobile Version</h2>
                    <p class="blog-para">This article will explain how developers can open Chrome mobile view via
                        desktop. It also explains how one can test websites on real mobile devices online............
                    </p>
                </div>
                <div class="blogs">
                    <h2 class="blog-title">Drag and drop builder</h2>
                    <p class="blog-para">Do you want to create a website, but don’t have coding experience? We provide
                        thorough comparisons of the most popular and successful website builders. Take a look at our
                        analyses you decide which website builder will meet your particular needs.</p>
                </div>
                <div class="blogs">
                    <h2 class="blog-title">Awesome modern design</h2>
                    <p class="blog-para">You may not be a web designer or a professional coder - that’s where website
                        builders come in. They facilitate the process of creating a website, making it accessible to
                        everyone, regardless of your programming know-how.</p>
                </div>

            </div>
            <div class="features-tech-img-btn">
                <div class="tech-img">
                    <img src="./images/architect.png" class="architect-img" alt="architect img">
                </div>
                <button class="box-button">
                    <h3 class="box-btn-title">10+ Year <br><span class="span-style3">Experience</span></h3>
                </button>
            </div>


        </section>

        <!-- second section end -->
        <!-- third section start -->
        <section class="third-section">
            <div class="third-section-data">
                <h2 class="third-section-title">Some Facts</h2>
                <p class="third-section-para">There are many variations of passages of Lorem Ipsum available, <br> but
                    the majority have suffered alteration.</p>
            </div>

            <div class="company-achieve">
                <div class="company-acheieve-box">
                    <img src="./images/icons/ribon.png" alt="">
                    <h2 class="box-num">54</h2>
                    <p class="box-para">Awards Winnings</p>
                </div>
                <div class="company-acheieve-box">
                    <img src="./images/icons/projects.png" alt="">
                    <h2 class="box-num">1458</h2>
                    <p class="box-para">Project Finished</p>
                </div>
                <div class="company-acheieve-box">
                    <img src="./images/icons/customers.png" alt="">
                    <h2 class="box-num">590</h2>
                    <p class="box-para">Client Worked</p>
                </div>
                <div class="company-acheieve-box">
                    <img src="./images/icons/email.png" alt="">
                    <h2 class="box-num">22578</h2>
                    <p class="box-para">Email Send</p>
                </div>
            </div>
        </section>

        <!-- third section end -->

        <!-- sponsor section start -->
        <section class="sponsor-section">
            <div class="sponsor-data">
                <h2 class="sponsor-title">Our Sponspors</h2>
                <div class="sponsor-para">There are many variations of passages of Lorem Ipsum available, <br> but the
                    majority have suffered alteration.</div>
            </div>
            <div class="sponsor-team">
                <img src="./images/sponsors/spotify.png" alt="">
                <img src="./images/sponsors/amazon.png" alt="">
                <img src="./images/sponsors/google.png" alt="">
                <img src="./images/sponsors/telerama.png" alt="">
                <img src="./images/sponsors/figma.png" alt="">
            </div>
        </section>
    </main>

    <!-- sponsor section end -->
    <!-- footer start -->
    <footer class="footer">
        <div class="footer-title">All rights reserved copyright@2023 startup landing page design</div>
    </footer>
    <!-- footer start -->

</body>

</html>