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


/images/architect.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/Batch9-g3-architects-website/0ac9580e80e04f2e116a8d8c698d88dd5fbef19e/images/architect.png


--------------------------------------------------------------------------------
/images/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/Batch9-g3-architects-website/0ac9580e80e04f2e116a8d8c698d88dd5fbef19e/images/banner.png


--------------------------------------------------------------------------------
/images/icons/customers.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/Batch9-g3-architects-website/0ac9580e80e04f2e116a8d8c698d88dd5fbef19e/images/icons/customers.png


--------------------------------------------------------------------------------
/images/icons/email.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/Batch9-g3-architects-website/0ac9580e80e04f2e116a8d8c698d88dd5fbef19e/images/icons/email.png


--------------------------------------------------------------------------------
/images/icons/projects.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/Batch9-g3-architects-website/0ac9580e80e04f2e116a8d8c698d88dd5fbef19e/images/icons/projects.png


--------------------------------------------------------------------------------
/images/icons/ribon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/Batch9-g3-architects-website/0ac9580e80e04f2e116a8d8c698d88dd5fbef19e/images/icons/ribon.png


--------------------------------------------------------------------------------
/images/sponsors/amazon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/Batch9-g3-architects-website/0ac9580e80e04f2e116a8d8c698d88dd5fbef19e/images/sponsors/amazon.png


--------------------------------------------------------------------------------
/images/sponsors/figma.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/Batch9-g3-architects-website/0ac9580e80e04f2e116a8d8c698d88dd5fbef19e/images/sponsors/figma.png


--------------------------------------------------------------------------------
/images/sponsors/google.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/Batch9-g3-architects-website/0ac9580e80e04f2e116a8d8c698d88dd5fbef19e/images/sponsors/google.png


--------------------------------------------------------------------------------
/images/sponsors/spotify.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/Batch9-g3-architects-website/0ac9580e80e04f2e116a8d8c698d88dd5fbef19e/images/sponsors/spotify.png


--------------------------------------------------------------------------------
/images/sponsors/telerama.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/Batch9-g3-architects-website/0ac9580e80e04f2e116a8d8c698d88dd5fbef19e/images/sponsors/telerama.png


--------------------------------------------------------------------------------
/images/team1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/Batch9-g3-architects-website/0ac9580e80e04f2e116a8d8c698d88dd5fbef19e/images/team1.png


--------------------------------------------------------------------------------
/images/team2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/Batch9-g3-architects-website/0ac9580e80e04f2e116a8d8c698d88dd5fbef19e/images/team2.png


--------------------------------------------------------------------------------
/images/team3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/Batch9-g3-architects-website/0ac9580e80e04f2e116a8d8c698d88dd5fbef19e/images/team3.png


--------------------------------------------------------------------------------
/images/team4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/Batch9-g3-architects-website/0ac9580e80e04f2e116a8d8c698d88dd5fbef19e/images/team4.png


--------------------------------------------------------------------------------
/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/architect.css">
  9 | </head>
 10 | 
 11 | <body>
 12 |     <!-- header start -->
 13 |     <header>
 14 |         <nav>
 15 |             <h3 class="section-title">G3 Architects</h3>
 16 |             <ul>
 17 |                 <li><a href="">Home</a></li>
 18 |                 <li><a href="">About</a></li>
 19 |                 <li><a href="">Contact</a></li>
 20 |                 <li><a href="">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="text-light-gray">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 src="images/banner.png" alt="">
 32 |         </div>
 33 |     </header>
 34 |     <!-- header end -->
 35 |     <main>
 36 |         <!-- teams sections start -->
 37 |         <section class="teams-container">
 38 |             <div class="teams-img-container">
 39 |                 <img src="images/team1.png" alt="">
 40 |                 <img src="images/team2.png" alt="">
 41 |                 <img src="images/team3.png" alt="">
 42 |                 <img src="images/team4.png" alt="">
 43 |             </div>
 44 |             <div class="teams-content">
 45 |                 <h3 class="teams-title"><span class="quick-list text-light-gray">Quick list</span> <span>of Our</span> <span class="text-features">Features</span></h3>
 46 |                 <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>
 47 |                 <button class="btn-primary">Explore More</button>
 48 |             </div>
 49 |         </section>
 50 |         <!-- features section -->
 51 |         <section class="features">
 52 |             <div class="feature-content">
 53 |                 <h3 class="section-title">Features you will <br> love & enjoy</h3>
 54 |                 <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>
 55 |                 <div class="card">
 56 |                     <h4>Desktop & Mobile Version</h4>
 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 randomized...........</p>
 58 |                 </div>
 59 |                 <div class="card">
 60 |                     <h4>Desktop & Mobile Version</h4>
 61 |                     <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 randomized...........</p>
 62 |                 </div>
 63 |                 <div class="card">
 64 |                     <h4>Desktop & Mobile Version</h4>
 65 |                     <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 randomized...........</p>
 66 |                 </div>
 67 |                 <div class="card">
 68 |                     <h4>Desktop & Mobile Version</h4>
 69 |                     <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 randomized...........</p>
 70 |                 </div>
 71 |             </div>
 72 |             <div class="feature-img">
 73 |                 <img src="images/architect.png" alt="">
 74 |                 <div class="ten-years-badge">
 75 |                     <h2>10+ years</h2>
 76 |                     <p>Experience</p>
 77 |                 </div>
 78 |             </div>
 79 |         </section>
 80 |         <!-- facts section -->
 81 |         <section class="facts">
 82 |             <h3 class="section-title">Some Facts</h3>
 83 |             <p class="text-light-gray">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration.</p>
 84 |             <div class="facts-card-container">
 85 |                 <!-- .card*4>img+h2.card-stats+p.card-title.text-light-gray -->
 86 |                 <div class="card">
 87 |                     <img src="images/icons/ribon.png" alt="">
 88 |                     <h2 class="card-stats">54</h2>
 89 |                     <p class="card-title text-light-gray">Awards Winnings</p>
 90 |                 </div>
 91 |                 <div class="card">
 92 |                     <img src="images/icons/projects.png" alt="">
 93 |                     <h2 class="card-stats">1458</h2>
 94 |                     <p class="card-title text-light-gray">Project Finished</p>
 95 |                 </div>
 96 |                 <div class="card">
 97 |                     <img src="images/icons/customers.png" alt="">
 98 |                     <h2 class="card-stats">590</h2>
 99 |                     <p class="card-title text-light-gray">Clients Worked</p>
100 |                 </div>
101 |                 <div class="card">
102 |                     <img src="images/icons/email.png" alt="">
103 |                     <h2 class="card-stats">22578</h2>
104 |                     <p class="card-title text-light-gray">Email Send</p>
105 |                 </div>
106 |             </div>
107 |         </section>
108 |         <!-- sponsors section -->
109 |         <section class="sponsors">
110 |             <h3 class="section-title">Our Sponsors</h3>
111 |             <p class="text-light-gray">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration.</p>
112 |             <div class="sponsors-img-container">
113 |                 <img src="images/sponsors/spotify.png" alt="">
114 |                 <img src="images/sponsors/amazon.png" alt="">
115 |                 <img src="images/sponsors/google.png" alt="">
116 |                 <img src="images/sponsors/telerama.png" alt="">
117 |                 <img src="images/sponsors/figma.png" alt="">
118 |             </div>
119 |         </section>
120 |     </main>
121 |     <footer>
122 | 
123 |     </footer>
124 | </body>
125 | 
126 | </html>


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


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