-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
191 lines (171 loc) · 8.46 KB
/
index.html
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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Project 01</title>
<!-- Adding CSS File Here -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/explore.css">
<link rel="stylesheet" href="css/fact.css">
<link rel="stylesheet" href="css/feature.css">
<link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="css/sponsors.css">
<!-- Adding 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@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body>
<!-- Header Section Start Here ---------------->
<!-- Header Section Start Here ------------------->
<!-- Header Section Start Here ------------------------>
<header>
<div class="header-container">
<!-- Navigation Section -->
<section class="navigation">
<div class="logo">
<h3>G3 Architects</h3>
</div>
<div class="navbar-section">
<nav>
<ul>
<li><a href="https://www.linkedin.com/in/ashraf-tanvir-043864223/">Home</a></li>
<li><a href="https://www.linkedin.com/in/ashraf-tanvir-043864223/">About</a></li>
<li><a href="https://www.linkedin.com/in/ashraf-tanvir-043864223/">Contact Us</a></li>
<li><a href="https://www.linkedin.com/in/ashraf-tanvir-043864223/">Login</a></li>
</ul>
</nav>
</div>
</section>
<!-- Hero Section -->
<section class="hero">
<div class="hero-content">
<h2>Brand New </h2>
<h2>Group of Architects</h2>
<p>An architect is a person who plans, designs and oversees the construction of buildings. To practice architecture means to provide services.</p>
<input type="submit" value="Explore More" class="primary-button">
</div>
<div class="hero-image">
<img src="images/banner.png" alt="Architects Team Member Discussion">
</div>
</section>
</div>
</header>
<!-- Header End Here ---------------- -->
<!-- Header End Here ------------------ -->
<!-- Main Start here -->
<!-- Main Start here -->
<main>
<!-- Feature Section Start Here -->
<!-- Feature Section Start Here -->
<section class="feature">
<div class="feature-image">
<img src="images/team1.png" alt="">
<img src="images/team2.png" alt="">
<img src="images/team3.png" alt="">
<img src="images/team4.png" alt="">
</div>
<div class="feature-content">
<h2><span class="first">Quick list</span> <span class="second">of </span></h2>
<h2><span class="third">Features</span></h2>
<p>Let's delve deeper into some of the qualities that will turn you into a professional architect and help you stand out from the crowd.</p>
<input type="submit" value="Explore More" class="primary-button">
</div>
</section>
<!-- Explore Section Start Here -->
<!-- Explore Section Start Here -->
<section class="explore">
<div class="explore-main">
<div class="explore-content">
<div class="explore-title">
<h2>Features you will love & enjoy</h2>
</div>
<p>As an architect, you need to create designs that are both functional and visually pleasing.This skill is very important, no matter what type of building you are designing. You can improve your eye for design by studying the work.</p>
<div class="explore-sub-content">
<div class="part">
<h4>Desktop & Mobile Version</h4>
<p class="tooltip">On desktop view Android, users can see all the options and menus as seen on the desktop and also use However, due....<span class="tooltip-text"> to the fact that someone is visiting a desktop site on a mobile device.</span></p>
</div>
<div class="part">
<h4>Drag & Drop Builder</h4>
<p class="tooltip">A drag and drop website builder is a tool that allows anyone with a computer and internet connection to create ...<span class="span tooltip-text"> a customize website. It doesn't require you to write code in CSS.</span></p>
</div>
<div class="part">
<h4>Awesome Modern Design</h4>
<p class="tooltip">Modern website design is a combination of different elements that work together to create an effective and user-friendly ... <span class="tooltip-text">experience such as typography, layout and responsive designs.</span></p>
</div>
<div class="part">
<h4>Super Easy to Edit</h4>
<p class="tooltip">As the name suggests, the standard cut is one of the most commonly used editing techniques ... <span class="tooltip-text">for video creation.</span></p>
</div>
</div>
</div>
<div class="explore-image">
<img src="images/architect.png" alt="">
<div class="explore-button">
<h1>10+ Year</h1>
<p>Experience</p>
</div>
</div>
</div>
</section>
<!-- Fact Section Start Here -->
<!-- Fact Section Start Here -->
<section class="facts">
<div class="fact-main-content">
<h2>Some Facts</h2>
<p>Architects design and plan the construction of buildings, structures, and landscapes. They work with clients to understand their needs and preferences</p>
</div>
<div class="fact-option">
<div class="fact-part">
<img src="images/icons/ribon.png" alt="">
<h3>54</h3>
<p>Awards Winnings</p>
</div>
<div class="fact-part">
<img src="images/icons/projects.png" alt="">
<h3>1458</h3>
<p>Project Finished</p>
</div>
<div class="fact-part">
<img src="images/icons/customers.png" alt="">
<h3>590</h3>
<p>Clients Worked</p>
</div>
<div class="fact-part">
<img src="images/icons/email.png" alt="">
<h3>22578</h3>
<p>Email Send</p>
</div>
</div>
</section>
<!-- Sponsor section Start Here -->
<!-- Sponsor section Start Here -->
<!-- Sponsor section Start Here -->
<section class="sponsors">
<div class="sponsor-content">
<h3>Our Sponsors</h3>
<p>We are fortunate to have numerous reputable world-class companies as sponsors. Our process involves diligently acquiring these sponsors to support our endeavors.</p>
</div>
<div class="sponsor-list">
<img src="images/sponsors/figma.png" alt="">
<img src="images/sponsors/google.png" alt="">
<img src="images/sponsors/spotify.png" alt="">
<img src="images/sponsors/amazon.png" alt="">
<img src="images/sponsors/telerama.png" alt="">
<img src="images/sponsors/facebook.png" alt="">
</div>
</section>
</main>
<!-- Footer Section Start Here -->
<!-- Footer Section Start Here -->
<!-- Footer Section Start Here -->
<footer>
<div class="footer-content">
<p>Copyright @2023 All rights reserved to Md Ashraf Uddin Tanvir</p>
</div>
</footer>
</body>
</html>