├── images
    ├── banner.png
    ├── team1.png
    ├── team2.png
    ├── team3.png
    ├── team4.png
    ├── architect.png
    ├── icons
    │   ├── email.png
    │   ├── ribon.png
    │   ├── projects.png
    │   └── customers.png
    └── sponsors
    │   ├── figma.png
    │   ├── amazon.png
    │   ├── google.png
    │   ├── spotify.png
    │   └── telerama.png
├── styles
    └── architects.css
└── index.html


/images/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/B10-g3-architect-website/HEAD/images/banner.png


--------------------------------------------------------------------------------
/images/team1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/B10-g3-architect-website/HEAD/images/team1.png


--------------------------------------------------------------------------------
/images/team2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/B10-g3-architect-website/HEAD/images/team2.png


--------------------------------------------------------------------------------
/images/team3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/B10-g3-architect-website/HEAD/images/team3.png


--------------------------------------------------------------------------------
/images/team4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/B10-g3-architect-website/HEAD/images/team4.png


--------------------------------------------------------------------------------
/images/architect.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/B10-g3-architect-website/HEAD/images/architect.png


--------------------------------------------------------------------------------
/images/icons/email.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/B10-g3-architect-website/HEAD/images/icons/email.png


--------------------------------------------------------------------------------
/images/icons/ribon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/B10-g3-architect-website/HEAD/images/icons/ribon.png


--------------------------------------------------------------------------------
/images/icons/projects.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/B10-g3-architect-website/HEAD/images/icons/projects.png


--------------------------------------------------------------------------------
/images/sponsors/figma.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/B10-g3-architect-website/HEAD/images/sponsors/figma.png


--------------------------------------------------------------------------------
/images/icons/customers.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/B10-g3-architect-website/HEAD/images/icons/customers.png


--------------------------------------------------------------------------------
/images/sponsors/amazon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/B10-g3-architect-website/HEAD/images/sponsors/amazon.png


--------------------------------------------------------------------------------
/images/sponsors/google.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/B10-g3-architect-website/HEAD/images/sponsors/google.png


--------------------------------------------------------------------------------
/images/sponsors/spotify.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/B10-g3-architect-website/HEAD/images/sponsors/spotify.png


--------------------------------------------------------------------------------
/images/sponsors/telerama.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/B10-g3-architect-website/HEAD/images/sponsors/telerama.png


--------------------------------------------------------------------------------
/styles/architects.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
  2 | 
  3 | 
  4 | .work-sans-font {
  5 |   font-family: "Work Sans", sans-serif;
  6 |   font-optical-sizing: auto;
  7 |   font-weight: 400;
  8 |   font-style: normal;
  9 | }
 10 | 
 11 | /* shared styles */
 12 | .display-flex{
 13 |     display: flex;
 14 | }
 15 | 
 16 | .text-primary{
 17 |     color: #FF900E;
 18 | }
 19 | 
 20 | /* dark 02 */
 21 | .text-gray{
 22 |     color: #424242;
 23 | }
 24 | 
 25 | /* dark03 */
 26 | .text-light-gray{
 27 |     color: #727272;
 28 | }
 29 | 
 30 | .bg-light{
 31 |     background-color: rgba(255, 144, 14, 0.1);
 32 | }
 33 | 
 34 | .btn-primary{
 35 |     background-color: #FF900E;
 36 |     color: white;
 37 |     padding: 20px 25px;
 38 |     font-size: 1.25rem;
 39 |     font-weight: 600;
 40 |     border-radius: 8px;
 41 |     border: none;
 42 | }
 43 | 
 44 | main{
 45 |     max-width: 1440px;
 46 |     margin: 0 auto;
 47 | }
 48 | 
 49 | main > section{
 50 |     margin-top: 130px;
 51 | }
 52 | 
 53 | .section-title{
 54 |     font-size: 2.8rem;
 55 |     font-weight: 700;
 56 | }
 57 | 
 58 | /* header styles */
 59 | 
 60 | /* navbar related styles */
 61 | .navbar{
 62 |     justify-content: space-between;
 63 |     align-items: center;
 64 | }
 65 | 
 66 | .brand{
 67 |     font-weight: 700;
 68 |     font-size: 3rem;
 69 | }
 70 | .nav-item{
 71 |     list-style: none;
 72 |     margin-right: 30px;
 73 | }
 74 | 
 75 | .nav-link{
 76 |     text-decoration: none;
 77 |     font-weight: 500;
 78 | }
 79 | 
 80 | .navbar, .banner{
 81 |     max-width: 1440px;
 82 |     margin: 0 auto;
 83 | }
 84 | 
 85 | /* banner related styles */
 86 | .banner-content{
 87 |     max-width: 850px;
 88 |     margin: 0 auto;
 89 |     text-align: center;
 90 |     margin-bottom: 50px;
 91 | }
 92 | 
 93 | .banner-title{
 94 |     font-weight: 700;
 95 |     font-size: 4rem;
 96 | }
 97 | 
 98 | .banner-image{
 99 |     width: 100%;
100 | }
101 | 
102 | /* team and feature related styles */
103 | .teams{
104 |     align-items: center;
105 | }
106 | 
107 | .team-img-container{
108 |     display: grid;
109 |     grid-template-columns: repeat(2, 1fr);
110 |     gap: 24px;
111 | }
112 | 
113 | .our-features{
114 |     margin-left: 130px;
115 |     max-width: 530px;
116 | }
117 | 
118 | #quick-list{
119 |     font-weight: 500;
120 | }
121 | 
122 | /* features section related styles */
123 | 
124 | .features{
125 |     gap: 140px;
126 | }
127 | 
128 | #feature-section-title{
129 |     border-left: 5px solid #FF900E;
130 |     padding-left: 20px;
131 | }
132 | 
133 | .feature-card{
134 |     padding: 30px;
135 |     border-radius: 8px;
136 |     box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.06);
137 |     margin-bottom: 20px;
138 | }
139 | 
140 | .feature-card .feature-title{
141 |     font-weight: 600;
142 |     font-size: 1.25rem;
143 |     margin-top: 0px;
144 |     margin-bottom: 0px;
145 | }
146 | 
147 | #experience-badge{
148 |     padding: 45px 42px;
149 |     font-size: 1.5rem;
150 |     font-weight: 500;
151 |     margin-left: -100px;
152 |     margin-top: -100px;
153 | }
154 | 
155 | #experience-year{
156 |     font-size: 4rem;
157 |     font-weight: 700;
158 | }
159 | 
160 | .featured-architect img{
161 |     width: 100%;
162 | }
163 | 
164 | /* some facts related styles */
165 | .facts-container{
166 |     display: grid;
167 |     grid-template-columns: repeat(4, 1fr);
168 | }
169 | .fact-card{
170 |     border: 1px solid #FF900E;
171 |     width: 240px;
172 |     height: 240px;
173 |     border-radius: 8px;
174 |     text-align: center;
175 |     align-items: center;
176 |     justify-content: center;
177 | }
178 | 
179 | .fact-number{
180 |     font-size: 2.8rem;
181 |     font-weight: 600;
182 |     margin-top: 5px;
183 |     margin-bottom: 10px;
184 | }
185 | 
186 | .fact-name{
187 |     font-size: 1.25rem;
188 |     font-weight: 600;
189 |     margin-top: 10px;
190 | }
191 | 
192 | .fact-description{
193 |     max-width: 540px;
194 | }
195 | 
196 | 
197 | /* sponsor related styles */
198 | .sponsor-info{
199 |     max-width: 540px;
200 |     margin: 50px auto;
201 |     text-align: center;
202 | }
203 | 
204 | .sponsor-companies{
205 |     display: grid;
206 |     grid-template-columns: repeat(5, 1fr);
207 | }
208 | 
209 | .sponsor-companies img{
210 |     filter: grayscale(100%);
211 | }
212 | 
213 | 
214 | /* responsive media query */
215 | @media screen and (max-width: 576px) {
216 |     .navbar, 
217 |     .nav-links, 
218 |     .features,
219 |     .teams{
220 |         flex-direction: column;
221 |     }
222 | 
223 |     .team-img-container, 
224 |     .facts-container, 
225 |     .sponsor-companies
226 |     {
227 |         grid-template-columns: 1fr;
228 |     }
229 | 
230 |     .facts-container{
231 |         justify-items: center;
232 |         gap: 24px;
233 |     }
234 | 
235 |     .sponsor-companies{
236 |         justify-items: center;
237 |         gap: 50px;
238 |     }
239 | 
240 |     .our-features{
241 |         margin-left: 20px;
242 |     }
243 | 
244 |     #experience-badge{
245 |         margin-top: 20px;
246 |         margin-left: 20px;
247 |     }
248 | }
249 | 
250 | /* medium size device */
251 | @media screen and (min-width: 576px) and (max-width: 992px) {
252 |     .teams, .features{
253 |         flex-direction: column;
254 |     }
255 |     .our-features{
256 |         margin: 50px auto;
257 |     }
258 | 
259 |     .sponsor-companies, .facts-container {
260 |         grid-template-columns: repeat(2, 1fr);
261 |         gap: 50px;
262 |         justify-items: center;
263 |     }
264 | 
265 |     #experience-badge{
266 |         margin-top: 20px;
267 |         margin-left: 20px;
268 |     }
269 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>G3 Architects</title>
  8 |     <link rel="stylesheet" href="styles/architects.css">
  9 | </head>
 10 | 
 11 | <body class="work-sans-font">
 12 |     <header class="bg-light">
 13 |         <nav class="navbar display-flex">
 14 |             <h3 class="brand">G3 Architects</h3>
 15 |             <ul class="nav-links display-flex">
 16 |                 <!-- li.nav-item*4>a.nav-link -->
 17 |                 <li class="nav-item"><a href="" class="nav-link text-gray">Home</a></li>
 18 |                 <li class="nav-item"><a href="" class="nav-link text-gray">About</a></li>
 19 |                 <li class="nav-item"><a href="" class="nav-link text-gray">Contact Us</a></li>
 20 |                 <li class="nav-item"><a href="" class="nav-link text-gray">Login</a></li>
 21 |             </ul>
 22 |         </nav>
 23 |         <div class="banner">
 24 |             <div class="banner-content">
 25 |                 <h1 class="banner-title">Brand New Group of Architects</h1>
 26 |                 <p class="banner-description">There are many variations of passages of Lorem Ipsum available, but the
 27 |                     majority have suffered alteration in some form, by injected humour, or randomised words which don't
 28 |                     look even</p>
 29 |                 <button class="btn-primary">Explore More</button>
 30 |             </div>
 31 |             <img class="banner-image" src="images/banner.png" alt="">
 32 |         </div>
 33 |     </header>
 34 |     <main>
 35 |         <!-- teams section start -->
 36 |         <section class="teams display-flex">
 37 |             <div class="team-img-container">
 38 |                 <img src="images/team1.png" alt="two architect discussing about design">
 39 |                 <img src="images/team2.png" alt="">
 40 |                 <img src="images/team3.png" alt="">
 41 |                 <img src="images/team4.png" alt="">
 42 |             </div>
 43 |             <div class="our-features">
 44 |                 <h3 class="section-title"><span id="quick-list" class="text-light-gray">Quick list</span> <span>of Our
 45 |                     </span><span class="text-primary">Features</span></h3>
 46 |                 <p class="feature-description text-light-gray">There are many variations of passages of Lorem Ipsum
 47 |                     available, but the majority have suffered alteration in some form, by injected humour, or randomised
 48 |                     words which don't look even</p>
 49 |                 <button class="btn-primary">Explore More</button>
 50 |             </div>
 51 |         </section>
 52 | 
 53 |         <!-- features section start -->
 54 |          <section class="features display-flex">
 55 |             <div>
 56 |                 <h3 id="feature-section-title" class="section-title">Features you will <br> love & enjoy</h3>
 57 |                 <p class="text-light-gray">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even</p>
 58 | 
 59 |                 <!-- feature card container -->
 60 |                  <div class="feature-card">
 61 |                     <h4 class="feature-title">Desktop & Mobile Version</h4>
 62 |                     <p class="text-light-gray">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised...........</p>
 63 |                  </div>
 64 |                  <div class="feature-card">
 65 |                     <h4 class="feature-title">Desktop & Mobile Version</h4>
 66 |                     <p class="text-light-gray">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised...........</p>
 67 |                  </div>
 68 |                  <div class="feature-card">
 69 |                     <h4 class="feature-title">Desktop & Mobile Version</h4>
 70 |                     <p class="text-light-gray">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised...........</p>
 71 |                  </div>
 72 |                  <div class="feature-card">
 73 |                     <h4 class="feature-title">Desktop & Mobile Version</h4>
 74 |                     <p class="text-light-gray">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised...........</p>
 75 |                  </div>
 76 | 
 77 |             </div>
 78 |             <div class="featured-architect">
 79 |                 <img src="images/architect.png" alt="">
 80 |                 <button id="experience-badge" class="btn-primary">
 81 |                     <span id="experience-year">10+Years</span>
 82 |                     <br>
 83 |                     <span>Experience</span>
 84 |                 </button>
 85 |             </div>
 86 |          </section>
 87 | 
 88 |         <!-- some facts -->
 89 |         <section>
 90 |             <h3 class="section-title">Some Facts</h3>
 91 |             <p class="text-light-gray fact-description">There are many variations of passages of Lorem Ipsum available, but the majority
 92 |                 have suffered alteration.</p>
 93 |             <div class="facts-container">
 94 |                 <!-- .fact-card*4>img.fact-icon+h4.fact-number+h5.fact-name -->
 95 |                 <div class="fact-card display-flex">
 96 |                     <div>
 97 |                         <img src="images/icons/ribon.png" alt="" class="fact-icon">
 98 |                         <h4 class="fact-number">54</h4>
 99 |                         <h5 class="fact-name">Awards Winnings</h5>
100 |                     </div>
101 |                 </div>
102 |                 <div class="fact-card display-flex">
103 |                     <div>
104 |                         <img src="images/icons/projects.png" alt="" class="fact-icon">
105 |                         <h4 class="fact-number">1458</h4>
106 |                         <h5 class="fact-name">Project Finished</h5>
107 |                     </div>
108 |                 </div>
109 |                 <div class="fact-card display-flex">
110 |                     <div>
111 |                         <img src="images/icons/customers.png" alt="" class="fact-icon">
112 |                         <h4 class="fact-number">590</h4>
113 |                         <h5 class="fact-name">Clients Worked</h5>
114 |                     </div>
115 |                 </div>
116 |                 <div class="fact-card display-flex">
117 |                     <div>
118 |                         <img src="images/icons/email.png" alt="" class="fact-icon">
119 |                         <h4 class="fact-number">22578</h4>
120 |                         <h5 class="fact-name">Email Send</h5>
121 |                     </div>
122 |                 </div>
123 | 
124 |             </div>
125 |         </section>
126 | 
127 |         <!-- Some facts  -->
128 |         <section class="our-sponsors">
129 |             <div class="sponsor-info">
130 |                 <h3 class="section-title">Our Sponsors</h3>
131 |                 <p class="text-light-gray">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration.</p>
132 |             </div>
133 |             <div class="sponsor-companies">
134 |                 <img src="images/sponsors/spotify.png" alt="">
135 |                 <img src="images/sponsors/google.png" alt="">
136 |                 <img src="images/sponsors/amazon.png" alt="">
137 |                 <img src="images/sponsors/telerama.png" alt="">
138 |                 <img src="images/sponsors/figma.png" alt="">
139 |             </div>
140 |         </section>
141 |     </main>
142 |     <footer>
143 | 
144 |     </footer>
145 | </body>
146 | 
147 | </html>


--------------------------------------------------------------------------------