├── 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 | 2 | 3 | 4 | 5 | 6 | 7 | G3 Architects 8 | 9 | 10 | 11 | 12 |
13 | 23 | 33 |
34 |
35 | 36 |
37 |
38 | two architect discussing about design 39 | 40 | 41 | 42 |
43 |
44 |

Quick list of Our 45 | Features

46 |

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

49 | 50 |
51 |
52 | 53 | 54 |
55 |
56 |

Features you will
love & enjoy

57 |

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

58 | 59 | 60 |
61 |

Desktop & Mobile Version

62 |

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised...........

63 |
64 |
65 |

Desktop & Mobile Version

66 |

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised...........

67 |
68 |
69 |

Desktop & Mobile Version

70 |

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised...........

71 |
72 |
73 |

Desktop & Mobile Version

74 |

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised...........

75 |
76 | 77 |
78 | 86 |
87 | 88 | 89 |
90 |

Some Facts

91 |

There are many variations of passages of Lorem Ipsum available, but the majority 92 | have suffered alteration.

93 |
94 | 95 |
96 |
97 | 98 |

54

99 |
Awards Winnings
100 |
101 |
102 |
103 |
104 | 105 |

1458

106 |
Project Finished
107 |
108 |
109 |
110 |
111 | 112 |

590

113 |
Clients Worked
114 |
115 |
116 |
117 |
118 | 119 |

22578

120 |
Email Send
121 |
122 |
123 | 124 |
125 |
126 | 127 | 128 |
129 | 133 | 140 |
141 |
142 | 145 | 146 | 147 | --------------------------------------------------------------------------------