├── images
    ├── Macbook.png
    ├── Profile.png
    ├── ai-brain.svg
    ├── chess.svg
    ├── mail.svg
    ├── portfolio-img.svg
    ├── portfolio1.svg
    ├── portfolio2.svg
    ├── portfolio3.svg
    ├── virtual.svg
    └── wireframe.svg
├── index.html
└── styles.css


/images/Macbook.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/briancodex/html-css-portfolio/6faf123f26af2617230a30befefcf36c1fed824b/images/Macbook.png


--------------------------------------------------------------------------------
/images/Profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/briancodex/html-css-portfolio/6faf123f26af2617230a30befefcf36c1fed824b/images/Profile.png


--------------------------------------------------------------------------------
/images/chess.svg:
--------------------------------------------------------------------------------
 1 | <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0)">
 3 | <path d="M52.0227 62.4164C56.969 57.57 60.3604 51.3607 61.7645 44.5797C63.1686 37.7987 62.5219 30.7533 59.9068 24.3412C57.2918 17.9291 52.8268 12.4409 47.0809 8.57593C41.335 4.71097 34.5685 2.64433 27.6437 2.6394V7.62082L11.4541 23.8104L15.1902 30.0372L30.1344 25.0558C40.0972 42.4907 17.6809 42.4907 17.6809 62.4164" stroke="white" stroke-width="4.98141" stroke-linecap="round" stroke-linejoin="round"/>
 4 | <path d="M67.495 62.4164H7.71802V77.3606H67.495V62.4164Z" stroke="white" stroke-width="4.98141" stroke-linecap="round" stroke-linejoin="round"/>
 5 | </g>
 6 | <defs>
 7 | <clipPath id="clip0">
 8 | <rect width="79.7026" height="79.7026" fill="white" transform="translate(0.24585 0.148682)"/>
 9 | </clipPath>
10 | </defs>
11 | </svg>
12 | 


--------------------------------------------------------------------------------
/images/mail.svg:
--------------------------------------------------------------------------------
 1 | <svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0)">
 3 | <path d="M27.1251 3.875H3.87508C2.44835 3.875 1.29175 5.0316 1.29175 6.45833V24.5417C1.29175 25.9684 2.44835 27.125 3.87508 27.125H27.1251C28.5518 27.125 29.7084 25.9684 29.7084 24.5417V6.45833C29.7084 5.0316 28.5518 3.875 27.1251 3.875Z" stroke="black" stroke-width="3.21918" stroke-linecap="round" stroke-linejoin="round"/>
 4 | <path d="M6.4585 9.0415L15.5002 16.7915L24.5418 9.0415" stroke="black" stroke-width="3.21918" stroke-linecap="round" stroke-linejoin="round"/>
 5 | </g>
 6 | <defs>
 7 | <clipPath id="clip0">
 8 | <rect width="31" height="31" fill="white"/>
 9 | </clipPath>
10 | </defs>
11 | </svg>
12 | 


--------------------------------------------------------------------------------
/images/virtual.svg:
--------------------------------------------------------------------------------
 1 | <svg width="75" height="75" viewBox="0 0 75 75" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0)">
 3 | <path d="M72.6341 44.5165H51.8364C49.9977 44.5165 48.2344 43.7861 46.9343 42.486C45.6342 41.1859 44.9038 39.4226 44.9038 37.584V28.3405C44.9038 26.5019 44.1734 24.7386 42.8733 23.4385C41.5732 22.1384 39.8098 21.408 37.9712 21.408C36.1326 21.408 34.3693 22.1384 33.0691 23.4385C31.769 24.7386 31.0386 26.5019 31.0386 28.3405V37.584C31.0386 39.4226 30.3082 41.1859 29.0081 42.486C27.708 43.7861 25.9447 44.5165 24.1061 44.5165H3.30835" stroke="white" stroke-width="4.62172" stroke-linecap="round" stroke-linejoin="round"/>
 4 | <path d="M63.3906 35.2732V7.54286C63.3906 6.3171 62.9037 5.14155 62.037 4.27481C61.1702 3.40807 59.9947 2.92114 58.7689 2.92114H17.1735C15.9477 2.92114 14.7722 3.40807 13.9054 4.27481C13.0387 5.14155 12.5518 6.3171 12.5518 7.54286V35.2732" stroke="white" stroke-width="4.62172" stroke-linecap="round" stroke-linejoin="round"/>
 5 | <path d="M12.5518 53.76V67.6252C12.5518 68.8509 13.0387 70.0265 13.9054 70.8932C14.7722 71.7599 15.9477 72.2469 17.1735 72.2469H58.7689C59.9947 72.2469 61.1702 71.7599 62.037 70.8932C62.9037 70.0265 63.3906 68.8509 63.3906 67.6252V53.76" stroke="white" stroke-width="4.62172" stroke-linecap="round" stroke-linejoin="round"/>
 6 | </g>
 7 | <defs>
 8 | <clipPath id="clip0">
 9 | <rect width="73.9474" height="73.9474" fill="white" transform="translate(0.997559 0.610352)"/>
10 | </clipPath>
11 | </defs>
12 | </svg>
13 | 


--------------------------------------------------------------------------------
/images/wireframe.svg:
--------------------------------------------------------------------------------
 1 | <svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0)">
 3 | <path d="M3.34521 19.9375H64.5975" stroke="white" stroke-width="5.56839" stroke-linecap="round" stroke-linejoin="round"/>
 4 | <path d="M25.6187 19.9375V64.4846" stroke="white" stroke-width="5.56839" stroke-linecap="round" stroke-linejoin="round"/>
 5 | <path d="M59.0291 3.2323H8.91361C5.83827 3.2323 3.34521 5.72535 3.34521 8.80069V58.9162C3.34521 61.9916 5.83827 64.4846 8.91361 64.4846H59.0291C62.1045 64.4846 64.5975 61.9916 64.5975 58.9162V8.80069C64.5975 5.72535 62.1045 3.2323 59.0291 3.2323Z" stroke="white" stroke-width="5.56839" stroke-linecap="round" stroke-linejoin="round"/>
 6 | </g>
 7 | <defs>
 8 | <clipPath id="clip0">
 9 | <rect width="66.8207" height="66.8207" fill="white" transform="translate(0.561035 0.447998)"/>
10 | </clipPath>
11 | </defs>
12 | </svg>
13 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <title>Portfolio Website</title>
  7 |     <link rel="stylesheet" href="styles.css" />
  8 |   </head>
  9 |   <body>
 10 |     <div class="hero__section">
 11 |       <div class="hero__wrapper">
 12 |         <div class="column__left">
 13 |           <span>01 - Robert Atkinsons</span>
 14 |           <h1>User Experience Designer</h1>
 15 |           <p>
 16 |             I have years of experience working with small and large companies
 17 |             and I'm currently looking for the next opportunity.
 18 |           </p>
 19 |         </div>
 20 |         <div class="column__right">
 21 |           <img src="/images/ai-brain.svg" alt="brain" class="hero__img" />
 22 |         </div>
 23 |       </div>
 24 |     </div>
 25 |     <!-- About Section -->
 26 |     <div class="main__section">
 27 |       <div class="main__container">
 28 |         <h1>Hello, I'm Rob!</h1>
 29 |         <div class="main__content">
 30 |           <div class="main__text">
 31 |             <h2>
 32 |               I am Robert Atkinsons, a UI/UX Consultant currently living in San
 33 |               Francisco, CA.
 34 |             </h2>
 35 |             <p>
 36 |               There are many variations of passages of Lorem Ipsum available,
 37 |               but the majority have suffered alteration in some form, by
 38 |               injected humour, or randomised words which don't look even
 39 |               slightly believable.
 40 |             </p>
 41 |           </div>
 42 |           <div class="main__image">
 43 |             <img src="./images/Profile.png" alt="face" class="main__img" />
 44 |           </div>
 45 |         </div>
 46 |       </div>
 47 |     </div>
 48 |     <!-- Services Section -->
 49 |     <div class="services">
 50 |       <div class="services__container">
 51 |         <h1>Services</h1>
 52 |         <div class="services__grid">
 53 |           <div class="services__left">
 54 |             <div class="services__content">
 55 |               <img src="./images/chess.svg" alt="chess piece" />
 56 |               <div class="services__desc">
 57 |                 <h2>UX Strategy</h2>
 58 |                 <p>
 59 |                   Lorem Ipsum available, but the majority have suffered
 60 |                   alteration in some form, by injected humour, or randomised
 61 |                   words.
 62 |                 </p>
 63 |               </div>
 64 |             </div>
 65 |             <div class="services__content">
 66 |               <img src="./images/wireframe.svg" alt="chess piece" />
 67 |               <div class="services__desc">
 68 |                 <h2>websites and web apps</h2>
 69 |                 <p>
 70 |                   Lorem Ipsum available, but the majority have suffered
 71 |                   alteration in some form, by injected humour, or randomised
 72 |                   words which don't look even slightly believable.
 73 |                 </p>
 74 |               </div>
 75 |             </div>
 76 |             <div class="services__content">
 77 |               <img src="./images/virtual.svg" alt="chess piece" />
 78 |               <div class="services__desc">
 79 |                 <h2>Mobile Apps</h2>
 80 |                 <p>
 81 |                   Lorem Ipsum available, but the majority have suffered
 82 |                   alteration in some form.
 83 |                 </p>
 84 |               </div>
 85 |             </div>
 86 |           </div>
 87 |           <div class="services__right">
 88 |             <img src="./images/Macbook.png" alt="macbook" class="macbook" />
 89 |           </div>
 90 |         </div>
 91 |       </div>
 92 |       <div class="yellow__bar">
 93 |         <img src="./images/mail.svg" alt="email icon" />
 94 |         <p>Email</p>
 95 |         <span>robert-01@info.com</span>
 96 |       </div>
 97 |     </div>
 98 |     <!-- Portfolio -->
 99 |     <div class="portfolio">
100 |       <div class="portfolio__container">
101 |         <h1>Portfolio</h1>
102 |         <div class="portfolio__main">
103 |           <div class="portfolio__left">
104 |             <img
105 |               src="./images/portfolio-img.svg"
106 |               alt="dashboard"
107 |               class="portfolio__img"
108 |             />
109 |           </div>
110 |           <div class="portfolio__right">
111 |             <h2>Web App for Company XYZ</h2>
112 |             <p>
113 |               Lorem Ipsum available, but the majority have suffered alteration
114 |               in some form, by injected humour, or randomised words which don't
115 |               look even slightly believable.
116 |             </p>
117 |             <a href="#">See more ></a>
118 |           </div>
119 |         </div>
120 |         <div class="portfolio__projects">
121 |           <img src="./images/portfolio1.svg" alt="portfolio" />
122 |           <img src="./images/portfolio2.svg" alt="portfolio" />
123 |           <img src="./images/portfolio3.svg" alt="portfolio" />
124 |         </div>
125 |       </div>
126 |     </div>
127 |     <!-- Contact -->
128 |     <div class="contact">
129 |       <div class="contact__bar">
130 |         <img src="./images/mail.svg" alt="email icon" />
131 |         <p>Email</p>
132 |         <span>robert-01@info.com</span>
133 |       </div>
134 |       <h1>Contact Me</h1>
135 |     </div>
136 |     <!-- Footer -->
137 |     <div class="footer">
138 |       <div class="footer__container">
139 |         <div class="footer__left">
140 |           <h2>Robert Atkinsons</h2>
141 |           <p>
142 |             Some copyright text ipsum available, but the majority have suffered
143 |             alteration in some form.
144 |           </p>
145 |         </div>
146 |         <div class="footer__right">
147 |           <a href="#">About</a> <a href="#">Services</a>
148 |           <a href="#">Portfolio</a> <a href="#">Contacts</a>
149 |         </div>
150 |       </div>
151 |     </div>
152 |   </body>
153 | </html>
154 | 


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   box-sizing: border-box;
  3 |   margin: 0;
  4 |   padding: 0;
  5 |   font-family: Arial, Helvetica, sans-serif;
  6 | }
  7 | 
  8 | .hero__section {
  9 |   background: #002ed0;
 10 |   padding: 0 60px;
 11 |   color: #fff;
 12 | }
 13 | 
 14 | .hero__wrapper {
 15 |   display: grid;
 16 |   grid-template-columns: 1fr 1fr;
 17 |   grid-template-rows: 820px;
 18 | }
 19 | 
 20 | .column__left {
 21 |   display: flex;
 22 |   flex-direction: column;
 23 |   justify-content: space-evenly;
 24 |   align-items: flex-start;
 25 | }
 26 | 
 27 | .column__left h1 {
 28 |   font-size: 90px;
 29 | }
 30 | 
 31 | .column__left p {
 32 |   font-size: 16px;
 33 |   line-height: 2.3;
 34 | }
 35 | 
 36 | .column__right {
 37 |   display: flex;
 38 |   flex-direction: column;
 39 |   justify-content: center;
 40 |   align-items: center;
 41 | }
 42 | 
 43 | .hero__img {
 44 |   width: 100%;
 45 |   height: 100%;
 46 | }
 47 | 
 48 | /* Media Queries */
 49 | @media screen and (max-width: 1100px) {
 50 |   .hero__section {
 51 |     padding: 30px;
 52 |   }
 53 | 
 54 |   .hero__wrapper {
 55 |     grid-template-columns: 1fr;
 56 |   }
 57 | 
 58 |   .column__left h1 {
 59 |     font-size: 80px;
 60 |   }
 61 | }
 62 | 
 63 | @media screen and (max-width: 468px) {
 64 |   .hero__wrapper {
 65 |     grid-template-rows: 600px;
 66 |   }
 67 | 
 68 |   .column__left h1 {
 69 |     font-size: 32px;
 70 |   }
 71 | }
 72 | 
 73 | /* Main Section */
 74 | .main__section {
 75 |   padding: 60px 60px;
 76 |   background: #002ed0;
 77 |   color: #fff;
 78 | }
 79 | 
 80 | .main__container {
 81 |   display: flex;
 82 |   flex-direction: column;
 83 |   justify-content: flex-start;
 84 | }
 85 | 
 86 | .main__container h1 {
 87 |   font-size: 110px;
 88 |   color: black;
 89 |   -webkit-text-fill-color: transparent; /* Will override color (regardless of order) */
 90 |   -webkit-text-stroke-width: 2px;
 91 |   -webkit-text-stroke-color: #fff;
 92 |   margin-bottom: 32px;
 93 | }
 94 | 
 95 | .main__content {
 96 |   display: grid;
 97 |   grid-template-columns: 1fr 1fr;
 98 |   grid-template-rows: 700px;
 99 | }
100 | 
101 | .main__text {
102 |   padding-right: 20px;
103 | }
104 | 
105 | .main__text h2 {
106 |   font-size: 48px;
107 |   line-height: 1.5;
108 |   margin-bottom: 32px;
109 | }
110 | 
111 | .main__text p {
112 |   line-height: 2.3;
113 | }
114 | 
115 | .main__image {
116 |   display: flex;
117 |   justify-content: center;
118 | }
119 | 
120 | .main__img {
121 |   width: 420px;
122 |   height: 610px;
123 | }
124 | 
125 | /* Media Queries */
126 | @media screen and (max-width: 1000px) {
127 |   .main__section {
128 |     padding: 30px;
129 |   }
130 |   .main__content {
131 |     grid-template-columns: 1fr;
132 |     grid-template-rows: 1fr;
133 |   }
134 | 
135 |   .main__image {
136 |     margin-top: 40px;
137 |   }
138 | 
139 |   .main__container h1 {
140 |     font-size: 70px;
141 |   }
142 | }
143 | 
144 | @media screen and (max-width: 468px) {
145 |   .main__text h2 {
146 |     font-size: 32px;
147 |   }
148 | 
149 |   .main__img {
150 |     width: 100%;
151 |     height: 100%;
152 |   }
153 | }
154 | 
155 | /* Services */
156 | .services {
157 |   background: #002ed0;
158 |   color: #fff;
159 |   position: relative;
160 | }
161 | 
162 | .services__container {
163 |   background: #000;
164 |   padding-top: 100px;
165 |   padding-bottom: 100px;
166 |   padding-left: 60px;
167 | }
168 | 
169 | .services__grid {
170 |   display: grid;
171 |   grid-template-columns: 2fr 1fr;
172 |   grid-template-rows: 700px;
173 | }
174 | 
175 | .services__container h1 {
176 |   font-size: 50px;
177 | }
178 | 
179 | .services__left {
180 |   display: flex;
181 |   flex-direction: column;
182 |   justify-content: space-evenly;
183 |   padding: 0 50px;
184 | }
185 | 
186 | .services__content {
187 |   display: flex;
188 |   align-items: flex-start;
189 | }
190 | 
191 | .services__content img {
192 |   margin-right: 50px;
193 | }
194 | 
195 | .services__desc h2 {
196 |   font-size: 16px;
197 |   text-transform: uppercase;
198 |   margin-bottom: 16px;
199 | }
200 | 
201 | .services__desc p {
202 |   line-height: 2;
203 | }
204 | 
205 | .macbook {
206 |   height: 700px;
207 |   width: 100%;
208 | }
209 | 
210 | .yellow__bar {
211 |   position: absolute;
212 |   background: yellow;
213 |   height: 80px;
214 |   bottom: -40px;
215 |   right: 0;
216 |   width: 80%;
217 |   color: #000;
218 |   display: flex;
219 |   justify-content: flex-start;
220 |   align-items: center;
221 | }
222 | 
223 | .yellow__bar img {
224 |   margin: 0 40px;
225 | }
226 | 
227 | .yellow__bar p {
228 |   margin-right: 40px;
229 |   font-weight: 700;
230 |   text-transform: uppercase;
231 | }
232 | 
233 | /* Media Queries */
234 | @media screen and (max-width: 768px) {
235 |   .services__grid {
236 |     grid-template-columns: 1fr;
237 |   }
238 | 
239 |   .macbook {
240 |     display: none;
241 |   }
242 | 
243 |   .yellow__bar {
244 |     width: 100%;
245 |     justify-content: flex-start;
246 |   }
247 | }
248 | 
249 | @media screen and (max-width: 468px) {
250 |   .services__container {
251 |     padding-top: 100px;
252 |     padding-bottom: 160px;
253 |     padding-left: 16px;
254 |   }
255 | 
256 |   .services__grid {
257 |     grid-template-columns: 1fr;
258 |     grid-template-rows: 900px;
259 |   }
260 | 
261 |   .services__container h1 {
262 |     text-align: center;
263 |     margin-bottom: 100px;
264 |   }
265 | 
266 |   .services__left {
267 |     padding: 0 24px;
268 |   }
269 | 
270 |   .services__content {
271 |     margin-top: 40px;
272 |   }
273 | 
274 |   .services__content img {
275 |     margin-right: 16px;
276 |   }
277 | 
278 |   .yellow__bar img {
279 |     margin: 0 20px;
280 |   }
281 | 
282 |   .yellow__bar p {
283 |     margin-right: 20px;
284 |   }
285 | }
286 | 
287 | /* Portfolio Section */
288 | .portfolio {
289 |   background: #002ed0;
290 |   color: #fff;
291 | }
292 | 
293 | .portfolio__container {
294 |   padding-top: 100px;
295 |   padding-bottom: 100px;
296 |   padding-left: 60px;
297 | }
298 | 
299 | .portfolio__container h1 {
300 |   font-size: 110px;
301 |   color: black;
302 |   -webkit-text-fill-color: transparent; /* Will override color (regardless of order) */
303 |   -webkit-text-stroke-width: 2px;
304 |   -webkit-text-stroke-color: #fff;
305 |   margin-bottom: 32px;
306 | }
307 | 
308 | .portfolio__main {
309 |   display: grid;
310 |   grid-template-columns: 1fr 1fr;
311 | }
312 | 
313 | .portfolio__img {
314 |   height: 100%;
315 |   width: 100%;
316 | }
317 | 
318 | .portfolio__right {
319 |   padding: 150px 100px 0 20px;
320 | }
321 | 
322 | .portfolio__right h2 {
323 |   margin-bottom: 40px;
324 |   font-size: 30px;
325 | }
326 | 
327 | .portfolio__right p {
328 |   margin-bottom: 50px;
329 |   line-height: 2.5;
330 | }
331 | 
332 | .portfolio__right a {
333 |   color: #fff;
334 |   text-decoration: none;
335 | }
336 | 
337 | .portfolio__projects {
338 |   display: flex;
339 |   flex-direction: row;
340 |   justify-content: center;
341 |   padding: 32px 64px;
342 | }
343 | 
344 | .portfolio__projects img {
345 |   padding: 0 8px;
346 |   width: 100%;
347 |   height: 100%;
348 | }
349 | 
350 | /* Media Queries */
351 | @media screen and (max-width: 1368px) {
352 |   .portfolio__projects {
353 |     flex-direction: column;
354 |   }
355 | }
356 | @media screen and (max-width: 1000px) {
357 |   .portfolio {
358 |     padding: 30px;
359 |   }
360 | 
361 |   .portfolio__container h1 {
362 |     font-size: 70px;
363 |   }
364 | 
365 |   .portfolio__main {
366 |     grid-template-columns: 1fr;
367 |   }
368 | 
369 |   .portfolio__container {
370 |     padding-left: 0px;
371 |   }
372 | 
373 |   .portfolio__right {
374 |     margin-bottom: 60px;
375 |   }
376 | }
377 | 
378 | @media screen and (max-width: 468px) {
379 |   .portfolio {
380 |     padding: 10px;
381 |   }
382 | 
383 |   .portfolio__container h1 {
384 |     font-size: 40px;
385 |   }
386 | }
387 | 
388 | /* Contact */
389 | .contact {
390 |   display: flex;
391 |   align-items: center;
392 |   background: #002ed0;
393 |   padding: 100px 0;
394 | }
395 | 
396 | .contact__bar {
397 |   background: yellow;
398 |   height: 80px;
399 |   width: 68%;
400 |   color: #000;
401 |   display: flex;
402 |   justify-content: flex-end;
403 |   align-items: center;
404 | }
405 | 
406 | .contact__bar img {
407 |   margin-right: 40px;
408 | }
409 | 
410 | .contact__bar p {
411 |   margin-right: 40px;
412 |   font-weight: 700;
413 | }
414 | 
415 | .contact__bar span {
416 |   margin-right: 40px;
417 | }
418 | 
419 | .contact h1 {
420 |   margin-left: 100px;
421 |   font-size: 40px;
422 |   color: #fff;
423 | }
424 | 
425 | @media screen and (max-width: 768px) {
426 |   .contact {
427 |     flex-direction: column;
428 |   }
429 | 
430 |   .contact__bar {
431 |     width: 100%;
432 |     justify-content: center;
433 |   }
434 | 
435 |   .contact__bar img {
436 |     margin-left: 16px;
437 |     margin-right: 16px;
438 |   }
439 | 
440 |   .contact__bar p {
441 |     margin-right: 16px;
442 |   }
443 | 
444 |   .contact__bar span {
445 |     font-size: 16px;
446 |   }
447 | 
448 |   .contact h1 {
449 |     margin-left: 0;
450 |     margin-top: 24px;
451 |     font-size: 32px;
452 |   }
453 | }
454 | 
455 | .footer {
456 |   background: #0030db;
457 |   color: #fff;
458 | }
459 | 
460 | .footer__container {
461 |   padding: 60px;
462 |   display: grid;
463 |   grid-template-columns: 1fr 2fr;
464 | }
465 | 
466 | .footer__left {
467 |   display: flex;
468 |   flex-direction: column;
469 | }
470 | 
471 | .footer__left h2 {
472 |   margin-bottom: 24px;
473 | }
474 | 
475 | .footer__left p {
476 |   line-height: 2;
477 | }
478 | 
479 | .footer__right {
480 |   display: flex;
481 |   justify-content: space-between;
482 |   padding: 0 100px;
483 | }
484 | 
485 | .footer__right a {
486 |   color: #fff;
487 |   text-decoration: none;
488 |   text-transform: uppercase;
489 |   font-weight: 700;
490 | }
491 | 
492 | @media screen and (max-width: 1000px) {
493 |   .footer__container {
494 |     padding: 60px 24px;
495 |     grid-template-columns: 1fr 1fr;
496 |   }
497 | 
498 |   .footer__right {
499 |     flex-direction: column;
500 |   }
501 | }
502 | 
503 | @media screen and (max-width: 468px) {
504 |   .footer__right {
505 |     padding: 0 16px;
506 |   }
507 | }
508 | 


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