mirror of
https://github.com/Nezumi-2711/html-css-practice-one.git
synced 2026-09-22 05:31:49 +00:00
Init project
This commit is contained in:
@@ -0,0 +1,11 @@
|
||||
# editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
@@ -0,0 +1,6 @@
|
||||
.parcel-cache
|
||||
|
||||
node_modules
|
||||
|
||||
dist
|
||||
.vercel
|
||||
@@ -0,0 +1,62 @@
|
||||
# PROJECT
|
||||
|
||||
- This is a basic web application written by HTML5, CSS3.
|
||||
|
||||
## Overview
|
||||
|
||||
- Introduce:
|
||||
- Build a website using HTML5, CSS3.
|
||||
- Design: [link](<https://www.figma.com/file/yZoAxrvKsf3mke9VZLNIrw/Responsive-Startup-Website-(Community)>)
|
||||
- Plan: [practice-one](https://docs.google.com/document/d/142yCLkrdfBK6uohQzY1Q9DheIuVU5K8H/edit)
|
||||
- Deploy: _update later_
|
||||
|
||||
## Requirements
|
||||
|
||||
- Work fine on Chrome browser latest version
|
||||
- Use the right HTML tags
|
||||
- Use validate tools: https://validator.w3.org/
|
||||
|
||||
## Target
|
||||
|
||||
- Understand HTML/CSS properties and use them correctly
|
||||
- Slice from Figma to HTML/CSS
|
||||
- Understand the concepts of Flex
|
||||
|
||||
## Technical
|
||||
|
||||
- [HTML5](https://www.tutorialspoint.com/html5/html5_overview.htm): CSS (Cascading Style Sheets) consist of a group of formatting rules that you use to control the layout and appearance of the content on a web page.
|
||||
- [CSS3](https://www.htmlgoodies.com/html5/an-overview-of-css3/): Cascading Style Sheets (CSS) is a language used to illustrate a document’s look, style, and format in any markup language. In simple words, it is used to style and organize the layout of Web pages. CSS3 is the latest version of an earlier CSS version, CSS2.
|
||||
|
||||
## Information
|
||||
|
||||
- Timeline:
|
||||
- The practice should be done in 3 days. However, my code is not clean so be needed to review more and it takes about 4 days to complete.
|
||||
- Calendar:
|
||||
- Start: 2023/06/28
|
||||
- End: 2023/07/03
|
||||
|
||||
## Development Environment
|
||||
|
||||
- Node: v18.16.1
|
||||
- Npm: v9.5.1
|
||||
|
||||
## Getting started
|
||||
|
||||
- Step 1: Clone repository.
|
||||
- With HTTPS:
|
||||
- `$ git clone https://github.com/phuocduong-agilityio/loi-phan-internship.git`.
|
||||
- Step 2: Move to folder which just cloned in your computer.
|
||||
- `cd internship-loi-phan\practice\practice-01`.
|
||||
- Step 3: Move it to branch html-css-practice-one.
|
||||
- `$ git checkout html-css-practice-one`.
|
||||
- Step 4:
|
||||
- Open terminal > `npm i` or `yarn i`.
|
||||
- Step 5:
|
||||
- Run `npm start` or `yarn start`.
|
||||
- Step 6:
|
||||
- Open http://localhost:1234/ in browser.
|
||||
|
||||
## Author
|
||||
|
||||
- Loi Phan.
|
||||
- Email: [phanhuuloi15@gmail.com](phanhuuloi15@gmail.com).
|
||||
Generated
+3182
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"name": "practice-01",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"source": "src/index.html",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"start": "parcel --no-cache"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"parcel": "^2.9.3"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg width="10" height="19" viewBox="0 0 10 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Group 33">
|
||||
<path id="Vector" d="M9.00944 10.6251L9.50902 7.36758H6.38326V5.25323C6.38326 4.3619 6.81978 3.49347 8.21986 3.49347H9.64077V0.719781C9.64077 0.719781 8.3516 0.5 7.1184 0.5C4.54363 0.5 2.86171 2.05982 2.86171 4.88439V7.36758H0V10.6251H2.86171V18.5H6.38326V10.6251H9.00944Z" fill="white"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 415 B |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
@@ -0,0 +1,7 @@
|
||||
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Group 34">
|
||||
<path id="Vector" d="M14.4058 3.71362C13.8228 3.71362 13.3502 4.18624 13.3502 4.76874C13.3502 5.35175 13.8228 5.82436 14.4058 5.82436C14.9883 5.82436 15.4609 5.35175 15.4609 4.76874C15.4609 4.18624 14.9883 3.71362 14.4058 3.71362Z" fill="white"/>
|
||||
<path id="Vector_2" d="M9.71404 12.3392C8.14816 12.3392 6.87428 11.0654 6.87428 9.49999C6.87428 7.93411 8.14816 6.66025 9.71404 6.66025C11.2794 6.66025 12.5533 7.93411 12.5533 9.49999C12.5533 11.0654 11.2794 12.3392 9.71404 12.3392ZM9.71404 5.06689C7.26958 5.06689 5.28094 7.05553 5.28094 9.49999C5.28094 11.9439 7.26958 13.9326 9.71404 13.9326C12.158 13.9326 14.1466 11.9439 14.1466 9.49999C14.1466 7.05553 12.158 5.06689 9.71404 5.06689Z" fill="white"/>
|
||||
<path id="Vector_3" d="M6.04706 2.19357C3.99941 2.19357 2.33381 3.85917 2.33381 5.90682V13.0932C2.33381 15.1408 3.99941 16.8064 6.04706 16.8064H13.2334C15.2811 16.8064 16.9472 15.1408 16.9472 13.0932V5.90682C16.9472 3.85917 15.2811 2.19357 13.2334 2.19357H6.04706ZM13.2334 18.5H6.04706C3.06538 18.5 0.640747 16.0744 0.640747 13.0932V5.90682C0.640747 2.92513 3.06538 0.5 6.04706 0.5H13.2334C16.2146 0.5 18.6402 2.92513 18.6402 5.90682V13.0932C18.6402 16.0744 16.2146 18.5 13.2334 18.5Z" fill="white"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
@@ -0,0 +1,7 @@
|
||||
<svg width="187" height="50" viewBox="0 0 187 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M39.7719 12.3454C40.9881 11.1262 41.7406 9.44383 41.7406 7.5851C41.7406 3.86264 38.7226 0.844696 35.0001 0.844696C32.6467 0.844696 30.5777 2.05287 29.372 3.88062C29.0517 4.2014 2.21949 37.2729 1.96866 37.6531C0.752489 38.8723 0 40.5551 0 42.4129C0 46.1358 3.01794 49.1538 6.7404 49.1538C9.0938 49.1538 11.1629 47.9461 12.3686 46.1178C12.6889 45.7971 39.5211 12.7251 39.7719 12.3454Z" fill="white"/>
|
||||
<path d="M55.2974 28.0393C56.5171 26.8192 57.271 25.1348 57.271 23.2736C57.271 19.5511 54.2531 16.5332 50.5306 16.5332C48.1762 16.5332 46.1061 17.7423 44.9005 19.5716C44.5777 19.8949 30.4848 37.2665 30.2325 37.6493C29.0128 38.8695 28.2588 40.5538 28.2588 42.4145C28.2588 46.1375 31.2767 49.1555 34.9992 49.1555C37.3536 49.1555 39.4237 47.9463 40.6289 46.117C40.9517 45.7942 55.0451 28.4221 55.2974 28.0393Z" fill="white"/>
|
||||
<path d="M70.0002 7.5851C70.0002 11.3081 66.9822 14.3255 63.2598 14.3255C59.5368 14.3255 56.5193 11.3081 56.5193 7.5851C56.5193 3.86264 59.5368 0.844696 63.2598 0.844696C66.9822 0.844696 70.0002 3.86264 70.0002 7.5851Z" fill="white"/>
|
||||
<path d="M13.4808 7.5851C13.4808 11.3081 10.4629 14.3255 6.7404 14.3255C3.01794 14.3255 0 11.3081 0 7.5851C0 3.86264 3.01794 0.844696 6.7404 0.844696C10.4629 0.844696 13.4808 3.86264 13.4808 7.5851Z" fill="white"/>
|
||||
<path d="M100.92 12.2C103.293 12.2 105.347 12.6533 107.08 13.56C108.813 14.44 110.28 15.7467 111.48 17.48L108.6 20.24C107.587 18.6933 106.44 17.5867 105.16 16.92C103.907 16.2267 102.413 15.88 100.68 15.88C99.4001 15.88 98.3468 16.0533 97.5201 16.4C96.6935 16.7467 96.0801 17.2133 95.6801 17.8C95.3068 18.36 95.1201 19 95.1201 19.72C95.1201 20.5467 95.4001 21.2667 95.9601 21.88C96.5468 22.4933 97.6268 22.9733 99.2001 23.32L104.56 24.52C107.12 25.08 108.933 25.9333 110 27.08C111.067 28.2267 111.6 29.68 111.6 31.44C111.6 33.0667 111.16 34.48 110.28 35.68C109.4 36.88 108.173 37.8 106.6 38.44C105.053 39.08 103.227 39.4 101.12 39.4C99.2535 39.4 97.5735 39.16 96.0801 38.68C94.5868 38.2 93.2801 37.5467 92.1601 36.72C91.0401 35.8933 90.1201 34.9467 89.4001 33.88L92.3601 30.92C92.9201 31.8533 93.6268 32.6933 94.4801 33.44C95.3335 34.16 96.3201 34.72 97.4401 35.12C98.5868 35.52 99.8535 35.72 101.24 35.72C102.467 35.72 103.52 35.5733 104.4 35.28C105.307 34.9867 105.987 34.56 106.44 34C106.92 33.4133 107.16 32.72 107.16 31.92C107.16 31.1467 106.893 30.4667 106.36 29.88C105.853 29.2933 104.893 28.84 103.48 28.52L97.6801 27.2C96.0801 26.8533 94.7601 26.36 93.7201 25.72C92.6801 25.08 91.9068 24.3067 91.4001 23.4C90.8935 22.4667 90.6401 21.4267 90.6401 20.28C90.6401 18.7867 91.0401 17.44 91.8401 16.24C92.6668 15.0133 93.8535 14.04 95.4001 13.32C96.9468 12.5733 98.7868 12.2 100.92 12.2ZM122.824 13.12V33C122.824 33.9867 123.078 34.7067 123.584 35.16C124.118 35.6133 124.824 35.84 125.704 35.84C126.424 35.84 127.051 35.7333 127.584 35.52C128.118 35.28 128.611 34.96 129.064 34.56L130.024 37.68C129.411 38.2133 128.651 38.64 127.744 38.96C126.864 39.2533 125.878 39.4 124.784 39.4C123.638 39.4 122.584 39.2133 121.624 38.84C120.664 38.4667 119.918 37.8667 119.384 37.04C118.851 36.1867 118.571 35.08 118.544 33.72V14.32L122.824 13.12ZM129.704 19V22.36H114.704V19H129.704ZM145.614 26.16C145.614 24.8267 145.241 23.8 144.494 23.08C143.774 22.3333 142.774 21.96 141.494 21.96C140.294 21.96 139.268 22.24 138.414 22.8C137.561 23.36 136.934 24.2667 136.534 25.52L132.934 24C133.441 22.3733 134.428 21.0667 135.894 20.08C137.388 19.0933 139.308 18.6 141.654 18.6C143.254 18.6 144.668 18.8667 145.894 19.4C147.121 19.9067 148.081 20.68 148.774 21.72C149.494 22.76 149.854 24.0933 149.854 25.72V34.64C149.854 35.6267 150.348 36.12 151.334 36.12C151.814 36.12 152.281 36.0533 152.734 35.92L152.494 38.88C151.881 39.1733 151.108 39.32 150.174 39.32C149.321 39.32 148.548 39.1733 147.854 38.88C147.188 38.56 146.654 38.0933 146.254 37.48C145.881 36.84 145.694 36.0533 145.694 35.12V34.84L146.574 34.8C146.334 35.84 145.841 36.7067 145.094 37.4C144.348 38.0667 143.481 38.5733 142.494 38.92C141.508 39.24 140.508 39.4 139.494 39.4C138.241 39.4 137.108 39.2 136.094 38.8C135.108 38.4 134.321 37.8 133.734 37C133.174 36.1733 132.894 35.16 132.894 33.96C132.894 32.4667 133.374 31.24 134.334 30.28C135.321 29.32 136.708 28.6667 138.494 28.32L146.254 26.8L146.214 29.8L140.574 30.96C139.454 31.1733 138.614 31.48 138.054 31.88C137.494 32.28 137.214 32.8667 137.214 33.64C137.214 34.3867 137.494 34.9867 138.054 35.44C138.641 35.8667 139.414 36.08 140.374 36.08C141.041 36.08 141.681 36 142.294 35.84C142.934 35.68 143.508 35.4267 144.014 35.08C144.521 34.7067 144.908 34.24 145.174 33.68C145.468 33.0933 145.614 32.4 145.614 31.6V26.16ZM156.867 39V19H160.507L160.907 22.6C161.44 21.2933 162.227 20.3067 163.267 19.64C164.334 18.9467 165.64 18.6 167.187 18.6C167.587 18.6 167.987 18.64 168.387 18.72C168.787 18.7733 169.12 18.8667 169.387 19L168.787 22.76C168.494 22.6533 168.16 22.5733 167.787 22.52C167.44 22.44 166.96 22.4 166.347 22.4C165.52 22.4 164.707 22.6267 163.907 23.08C163.107 23.5067 162.44 24.16 161.907 25.04C161.4 25.92 161.147 27.04 161.147 28.4V39H156.867ZM178.293 13.12V33C178.293 33.9867 178.546 34.7067 179.053 35.16C179.586 35.6133 180.293 35.84 181.173 35.84C181.893 35.84 182.52 35.7333 183.053 35.52C183.586 35.28 184.08 34.96 184.533 34.56L185.493 37.68C184.88 38.2133 184.12 38.64 183.213 38.96C182.333 39.2533 181.346 39.4 180.253 39.4C179.106 39.4 178.053 39.2133 177.093 38.84C176.133 38.4667 175.386 37.8667 174.853 37.04C174.32 36.1867 174.04 35.08 174.013 33.72V14.32L178.293 13.12ZM185.173 19V22.36H170.173V19H185.173Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.5 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg width="15" height="19" viewBox="0 0 15 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Group 36">
|
||||
<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M6.33834 12.2417C6.32307 12.2936 6.30933 12.3368 6.29763 12.3806C5.63626 14.9706 5.56301 15.546 4.88384 16.7497C4.55926 17.321 4.1945 17.8628 3.79056 18.3817C3.74477 18.4402 3.70255 18.5155 3.61148 18.4972C3.51177 18.4758 3.50412 18.3863 3.49293 18.3064C3.38406 17.5194 3.32455 16.7298 3.3505 15.9357C3.38458 14.9004 3.51276 14.5453 4.8472 8.93284C4.86704 8.84737 4.84516 8.77666 4.81667 8.69882C4.49718 7.83752 4.43411 6.96299 4.7129 6.07676C5.31678 4.16236 7.48706 4.01584 7.86658 5.59549C8.10009 6.57227 7.48199 7.85023 7.00733 9.7397C6.61408 11.299 8.44909 12.407 10.0181 11.269C11.4639 10.22 12.0256 7.70423 11.9187 5.92159C11.7086 2.36752 7.81165 1.59932 5.33815 2.74399C2.50394 4.05451 1.85935 7.56839 3.13935 9.17398C3.30113 9.37849 3.4263 9.50314 3.37289 9.71071C3.29047 10.0317 3.21772 10.3558 3.1292 10.6758C3.06306 10.9134 2.8636 11.0004 2.62297 10.9022C2.15136 10.7114 1.75812 10.4112 1.43914 10.0154C0.352468 8.66982 0.0416091 6.00706 1.4783 3.75384C3.07066 1.25642 6.03259 0.246569 8.73605 0.553341C11.9655 0.920144 14.0066 3.12707 14.3892 5.63008C14.5632 6.77069 14.438 9.5825 12.8375 11.5702C10.9953 13.8539 8.01005 14.005 6.63289 12.6034C6.52707 12.4961 6.44212 12.3699 6.33834 12.2417Z" fill="white"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg width="16" height="19" viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Group 37">
|
||||
<path id="Vector" d="M15.8491 7.78289C15.702 7.79686 15.5543 7.80434 15.4062 7.80534C13.7851 7.80534 12.2738 6.98832 11.3859 5.6321V13.0312C11.3859 16.0519 8.93684 18.5 5.91714 18.5C2.89644 18.5 0.448364 16.0519 0.448364 13.0312C0.448364 10.011 2.89644 7.56293 5.91714 7.56293C6.03087 7.56293 6.1426 7.57291 6.25483 7.57989V10.2749C6.1426 10.2614 6.03236 10.241 5.91714 10.241C4.37537 10.241 3.12588 11.4909 3.12588 13.0317C3.12588 14.5735 4.37537 15.823 5.91714 15.823C7.45892 15.823 8.82013 14.6084 8.82013 13.0666L8.84756 0.5H11.4258C11.6687 2.81191 13.5327 4.61805 15.8516 4.78764V7.78289" fill="white"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 735 B |
@@ -0,0 +1,5 @@
|
||||
<svg width="23" height="19" viewBox="0 0 23 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Group 35">
|
||||
<path id="Vector" d="M22.4202 2.65762C21.7253 2.97202 20.9576 3.16229 20.2082 3.28795C20.5638 3.22842 21.0863 2.58436 21.2959 2.32389C21.6154 1.92707 21.8804 1.47428 22.0295 0.985381C22.0488 0.947225 22.0636 0.899404 22.0249 0.870406C21.9771 0.851583 21.9461 0.861255 21.9079 0.880079C21.071 1.32828 20.2062 1.65336 19.2854 1.88382C19.2091 1.90265 19.1521 1.88382 19.1042 1.83549C19.0284 1.74951 18.9562 1.66812 18.8753 1.60147C18.4882 1.27232 18.073 1.01387 17.605 0.823092C16.9904 0.572791 16.3189 0.46647 15.657 0.509204C15.0124 0.55143 14.3801 0.732542 13.8088 1.03117C13.2359 1.33031 12.7246 1.74697 12.3171 2.2491C11.8964 2.76903 11.5861 3.38207 11.4268 4.03275C11.2742 4.66053 11.2864 5.2812 11.38 5.9156C11.3943 6.02091 11.3846 6.03516 11.2895 6.02091C7.68807 5.4847 4.70277 4.19656 2.27913 1.43461C2.17382 1.31454 2.11685 1.31454 2.03087 1.44376C0.970149 3.03357 1.48447 5.58695 2.80923 6.84202C2.98628 7.0099 3.16741 7.17677 3.36328 7.32939C3.29155 7.34414 2.41039 7.24901 1.62438 6.84202C1.51958 6.77537 1.46618 6.81404 1.45702 6.93308C1.44735 7.10504 1.46209 7.26326 1.48549 7.44946C1.68899 9.06064 2.80518 10.5507 4.33344 11.1327C4.51455 11.2091 4.71551 11.2757 4.91087 11.3093C4.56289 11.3856 4.20423 11.44 3.20557 11.3617C3.08144 11.3383 3.03411 11.4003 3.08143 11.5199C3.83233 13.5645 5.45113 14.1735 6.66448 14.5199C6.82677 14.5484 6.98959 14.5484 7.15238 14.5866C7.14221 14.6013 7.13252 14.6013 7.12286 14.6156C6.72095 15.2286 5.326 15.685 4.67634 15.9119C3.49504 16.325 2.20844 16.5107 0.959984 16.3875C0.760557 16.358 0.718335 16.3606 0.664408 16.3875C0.609464 16.4216 0.656777 16.4694 0.721387 16.5213C0.97474 16.6887 1.23266 16.8368 1.49568 16.9802C2.2883 17.4004 3.115 17.7352 3.97986 17.9738C8.44407 19.2065 13.4725 18.3004 16.8246 14.9702C19.4568 12.3547 20.3797 8.74776 20.3797 5.13671C20.3797 4.99528 20.5465 4.91744 20.6452 4.84266C21.3305 4.32832 21.883 3.71224 22.3938 3.02493C22.5087 2.87027 22.5097 2.73291 22.5097 2.67644C22.5097 2.66677 22.5097 2.65762 22.5097 2.65762C22.5097 2.59962 22.5087 2.61743 22.4202 2.65762Z" fill="white"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@@ -0,0 +1,6 @@
|
||||
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Group 38">
|
||||
<path id="Vector" d="M5.93199 15.3997L6.23673 15.5813C7.35546 16.2478 8.62835 16.6003 9.91701 16.6003C13.8929 16.6003 17.127 13.3662 17.127 9.39036C17.127 5.41501 13.8929 2.1804 9.91701 2.1804C5.94217 2.1804 2.70704 5.41501 2.70704 9.39036C2.70704 10.7029 3.0718 11.9957 3.76217 13.1286L3.94888 13.4354L3.22849 16.1241L5.93199 15.3997ZM0.851624 18.5L2.14181 13.6857C1.41125 12.367 1.02716 10.8902 1.02716 9.39036C1.02716 4.48858 5.01472 0.5 9.91701 0.5C14.8193 0.5 18.8079 4.48858 18.8079 9.39036C18.8079 14.2927 14.8193 18.2812 9.91701 18.2812C8.44571 18.2812 6.99221 17.9093 5.69134 17.2042L0.851624 18.5Z" fill="white"/>
|
||||
<path id="Vector_2" fill-rule="evenodd" clip-rule="evenodd" d="M13.2241 10.6271C12.8578 10.4079 12.3821 10.1637 11.9507 10.3397C11.6205 10.4755 11.4094 10.9934 11.1947 11.2575C11.0848 11.3933 10.9536 11.4142 10.7847 11.3465C9.54333 10.8515 8.59198 10.0228 7.9067 8.88112C7.79071 8.70357 7.81154 8.56367 7.95145 8.39934C8.15851 8.15565 8.41848 7.87889 8.47445 7.55024C8.53041 7.2221 8.37628 6.8385 8.24044 6.54546C8.06696 6.17204 7.87312 5.63939 7.49868 5.42775C7.15477 5.23341 6.70147 5.34227 6.39521 5.59156C5.86611 6.02298 5.6107 6.69759 5.61833 7.3671C5.62087 7.55737 5.64428 7.74713 5.68854 7.93028C5.79537 8.37136 5.99888 8.78395 6.22883 9.17518C6.40181 9.47076 6.59005 9.7577 6.79304 10.0334C7.45695 10.9355 8.28317 11.7194 9.23962 12.3055C9.71784 12.598 10.2322 12.855 10.7653 13.031C11.3631 13.2284 11.8958 13.4339 12.5414 13.3113C13.217 13.1831 13.884 12.7649 14.1521 12.1137C14.2314 11.9204 14.2711 11.7057 14.2269 11.5022C14.1348 11.0809 13.565 10.8306 13.2241 10.6271Z" fill="white"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg width="27" height="19" viewBox="0 0 27 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Group 39">
|
||||
<path id="Vector" d="M18.0369 10.0035L11.566 13.205C11.3121 13.3416 10.4502 13.1578 10.4502 12.8695V6.29853C10.4502 6.00671 11.3192 5.8229 11.5731 5.96738L17.7672 9.33693C18.0268 9.48498 18.2993 9.86121 18.0369 10.0035ZM26.5219 6.14262C26.5219 3.02627 23.9956 0.5 20.8793 0.5H6.44979C3.33344 0.5 0.807892 3.02627 0.807892 6.14262V12.8574C0.807892 15.9744 3.33344 18.5 6.44979 18.5H20.8793C23.9956 18.5 26.5219 15.9744 26.5219 12.8574V6.14262Z" fill="white"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 585 B |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
+303
@@ -0,0 +1,303 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Practice 01</title>
|
||||
<link rel="stylesheet" href="./style/base/reset.css" />
|
||||
<link rel="stylesheet" href="./style/main.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="background">
|
||||
<!-- Header -->
|
||||
<div class="width-container">
|
||||
<header>
|
||||
<div class="container flex-center-row-space-between">
|
||||
<img src="./assets/images/logo.svg" alt="" class="logo" />
|
||||
<nav class="nav">
|
||||
<ul class="nav__lists">
|
||||
<li class="nav__item">
|
||||
<a href="javascript:void(0)" class="nav__item-link">Home</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="javascript:void(0)" class="nav__item-link"
|
||||
>Portfolio</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="javascript:void(0)" class="nav__item-link"
|
||||
>Services</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="javascript:void(0)" class="nav__item-link"
|
||||
>Contact</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Welcome section -->
|
||||
<section class="welcome">
|
||||
<div class="welcome__content">
|
||||
<span class="welcome__title">Welcome</span>
|
||||
<h1 class="welcome__heading">
|
||||
Lorem ipsum dolor sit amet consectetur
|
||||
</h1>
|
||||
<p class="welcome__description">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
|
||||
Suscipit nemo hic quos, ab, dolor aperiam nobis cum est eos
|
||||
error ipsum, voluptate culpa nesciunt delectus iste?
|
||||
</p>
|
||||
<a href="javascript:void(0)" class="btn btn-primary">Explore</a>
|
||||
</div>
|
||||
<img
|
||||
src="./assets/images/header-image.png"
|
||||
alt="Header Image"
|
||||
class="welcome__image"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="width-container">
|
||||
<!-- Sponsor section -->
|
||||
<section class="sponsor">
|
||||
<div class="sponsor__container align-center">
|
||||
<div class="sponsor__content align-center">
|
||||
<span class="sponsor__title text--primary-color-uppercase"
|
||||
>Partners</span
|
||||
>
|
||||
<h2 class="sponsor__heading">Lorem Ipsum Dolor</h2>
|
||||
<p class="sponsor__description text--black-fs-md">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Logo items -->
|
||||
<ul class="sponsor__logos">
|
||||
<li class="sponsor__logo-item">
|
||||
<img src="./assets/images/logo-1.png" alt="Logo Sponsor" />
|
||||
</li>
|
||||
<li class="sponsor__logo-item">
|
||||
<img src="./assets/images/logo-2.png" alt="Logo Sponsor" />
|
||||
</li>
|
||||
<li class="sponsor__logo-item">
|
||||
<img src="./assets/images/logo-3.png" alt="Logo Sponsor" />
|
||||
</li>
|
||||
<li class="sponsor__logo-item">
|
||||
<img src="./assets/images/logo-4.png" alt="Logo Sponsor" />
|
||||
</li>
|
||||
<li class="sponsor__logo-item">
|
||||
<img src="./assets/images/logo-5.png" alt="Logo Sponsor" />
|
||||
</li>
|
||||
</ul>
|
||||
<a href="javascript:void(0)" class="btn btn-secondary"
|
||||
>Learn More</a
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Conversation section -->
|
||||
<section class="conversation">
|
||||
<div class="conversation__container flex-center-row-space-between">
|
||||
<!-- Conversation image -->
|
||||
<img
|
||||
src="./assets/images/conversation.png"
|
||||
alt="Conversation Image"
|
||||
class="conversation__image"
|
||||
/>
|
||||
|
||||
<!-- Conversation content -->
|
||||
<div class="conversation__content">
|
||||
<h2 class="conversation__heading">
|
||||
Lorem ipsum dolor sit amet consectetur
|
||||
</h2>
|
||||
<p class="conversation__description text--gray-fs-sm">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
|
||||
Suscipit nemo hic quos, ab, dolor aperiam nobis cum est eos
|
||||
error ipsum, voluptate culpa nesciunt delectus iste?
|
||||
</p>
|
||||
<a href="javascript:void(0)" class="btn btn-secondary"
|
||||
>Learn More</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Security section -->
|
||||
<section class="security">
|
||||
<div class="security__container flex-center-row-space-between">
|
||||
<!-- Security content -->
|
||||
<div class="security__content">
|
||||
<h2 class="security__heading">
|
||||
Lorem ipsum dolor sit amet consectetur
|
||||
</h2>
|
||||
<p class="security__description text--gray-fs-sm">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
|
||||
Suscipit nemo hic quos, ab, dolor aperiam nobis cum est eos
|
||||
error ipsum, voluptate culpa nesciunt delectus iste?
|
||||
</p>
|
||||
<a href="javascript:void(0)" class="btn btn-secondary"
|
||||
>Learn More</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Security image -->
|
||||
<img
|
||||
src="./assets/images/security.png"
|
||||
alt="Image Security"
|
||||
class="security__image"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Team section -->
|
||||
<section class="team">
|
||||
<div class="team__container align-center">
|
||||
<!-- Team content -->
|
||||
<div class="team__content align-center">
|
||||
<span class="team__title text--primary-color-uppercase"
|
||||
>Team</span
|
||||
>
|
||||
<h2 class="team__heading">Our talents</h2>
|
||||
<p class="team__description text--black-fs-md">
|
||||
Lorem ipsum, dolor sit amet consectetur Suscipit nemo hic quos,
|
||||
ab,
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Avatar Image -->
|
||||
<div class="team__image-container">
|
||||
<!-- Frame 1 -->
|
||||
<div class="team__frame">
|
||||
<div class="team__image-content align-center">
|
||||
<img
|
||||
src="./assets/images/avatar-1.png"
|
||||
alt="Avatar Image"
|
||||
class="team__image"
|
||||
/>
|
||||
<div class="team__information">
|
||||
<span class="team__name">Peg legge</span>
|
||||
<span class="team__position">Ceo</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Frame 2 -->
|
||||
<div class="team__frame">
|
||||
<div class="team__image-content align-center">
|
||||
<img
|
||||
src="./assets/images/avatar-2.png"
|
||||
alt="Avatar Image"
|
||||
class="team__image"
|
||||
/>
|
||||
<div class="team__information">
|
||||
<span class="team__name">Richard guerra</span>
|
||||
<span class="team__position">Cto</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Frame 3 -->
|
||||
<div class="team__frame">
|
||||
<div class="team__image-content align-center">
|
||||
<img
|
||||
src="./assets/images/avatar-3.png"
|
||||
alt="Avatar Image"
|
||||
class="team__image"
|
||||
/>
|
||||
<div class="team__information">
|
||||
<span class="team__name">Alexandra stolz</span>
|
||||
<span class="team__position">Designer</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Frame 4 -->
|
||||
<div class="team__frame">
|
||||
<div class="team__image-content align-center">
|
||||
<img
|
||||
src="./assets/images/avatar-4.png"
|
||||
alt="Avatar Image"
|
||||
class="team__image"
|
||||
/>
|
||||
<div class="team__information">
|
||||
<span class="team__name">Peg legge</span>
|
||||
<span class="team__position">Developer</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="javascript:void(0)" class="btn btn-secondary">View Team</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="background">
|
||||
<div class="footer__content">
|
||||
<div class="footer__logos">
|
||||
<a href="javascript:void(0)"
|
||||
><img
|
||||
src="./assets/images/facebook.svg"
|
||||
alt="Facebook logo"
|
||||
class="footer__logo-item"
|
||||
/></a>
|
||||
<a href="javascript:void(0)"
|
||||
><img
|
||||
src="./assets/images/instagram.svg"
|
||||
alt="Instagram logo"
|
||||
class="footer__logo-item"
|
||||
/></a>
|
||||
<a href="javascript:void(0)">
|
||||
<img
|
||||
src="./assets/images/twitter.svg"
|
||||
alt="Twitter logo"
|
||||
class="footer__logo-item"
|
||||
/>
|
||||
</a>
|
||||
<a href="javascript:void(0)">
|
||||
<img
|
||||
src="./assets/images/pinterest.svg"
|
||||
alt="Pinterest logo"
|
||||
class="footer__logo-item"
|
||||
/>
|
||||
</a>
|
||||
<a href="javascript:void(0)">
|
||||
<img
|
||||
src="./assets/images/tiktok.svg"
|
||||
alt="Tiktok logo"
|
||||
class="footer__logo-item"
|
||||
/>
|
||||
</a>
|
||||
<a href="javascript:void(0)">
|
||||
<img
|
||||
src="./assets/images/wechat.svg"
|
||||
alt="Wechat logo"
|
||||
class="footer__logo-item"
|
||||
/>
|
||||
</a>
|
||||
<a href="javascript:void(0)">
|
||||
<img
|
||||
src="./assets/images/youtube.svg"
|
||||
alt="Youtube Logo"
|
||||
class="footer__logo-item"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<span class="footer__text"
|
||||
>@ Start, 2022. All rights reserved.</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,16 @@
|
||||
:root {
|
||||
--primary-color: #74c69d;
|
||||
--text-dark: #d6d6d6;
|
||||
--white: #ffffff;
|
||||
--black: #000000;
|
||||
--gray: rgba(33, 37, 41, 0.50);
|
||||
--fs-sm: 15px;
|
||||
--fs-md: 20px;
|
||||
--fs-lg: 40px;
|
||||
--max-width: 1180px;
|
||||
--ff-secondary-regular: CrimsonText-Regular;
|
||||
--ff-secondary-bold: CrimsonText-Bold;
|
||||
--ff-primary-medium: WorkSans-Medium;
|
||||
--ff-primary-bold: WorkSans-Bold;
|
||||
--ff-primary-regular: WorkSans-Regular;
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
span,
|
||||
applet,
|
||||
object,
|
||||
iframe,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
a,
|
||||
abbr,
|
||||
acronym,
|
||||
address,
|
||||
big,
|
||||
cite,
|
||||
code,
|
||||
del,
|
||||
dfn,
|
||||
em,
|
||||
img,
|
||||
ins,
|
||||
kbd,
|
||||
q,
|
||||
s,
|
||||
samp,
|
||||
small,
|
||||
strike,
|
||||
strong,
|
||||
sub,
|
||||
sup,
|
||||
tt,
|
||||
var,
|
||||
b,
|
||||
u,
|
||||
i,
|
||||
center,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
fieldset,
|
||||
form,
|
||||
label,
|
||||
legend,
|
||||
table,
|
||||
caption,
|
||||
tbody,
|
||||
tfoot,
|
||||
thead,
|
||||
tr,
|
||||
th,
|
||||
td,
|
||||
article,
|
||||
aside,
|
||||
canvas,
|
||||
details,
|
||||
embed,
|
||||
figure,
|
||||
figcaption,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
output,
|
||||
ruby,
|
||||
section,
|
||||
summary,
|
||||
time,
|
||||
mark,
|
||||
audio,
|
||||
video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before,
|
||||
blockquote:after,
|
||||
q:before,
|
||||
q:after {
|
||||
content: "";
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
@font-face {
|
||||
font-family: CrimsonText-Regular;
|
||||
src: url(../../font/CrimsonText-Regular.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: CrimsonText-Bold;
|
||||
src: url(../../font/CrimsonText-700.ttf);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: WorkSans-Medium;
|
||||
src: url(../../font/WorkSans-500.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: WorkSans-Bold;
|
||||
src: url(../../font/WorkSans-700.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: WorkSans-Regular;
|
||||
src: url(../../font/WorkSans-Regular.ttf);
|
||||
}
|
||||
@@ -0,0 +1,312 @@
|
||||
@import url("./abstracts/variables.css");
|
||||
@import url("./base/typo.css");
|
||||
|
||||
* {
|
||||
line-height: 125%;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 1440px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.width-container {
|
||||
width: var(--max-width);
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.flex-center-row-space-between {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.text--black-fs-md {
|
||||
font-size: var(--fs-md);
|
||||
font-family: var(--ff-primary-regular);
|
||||
}
|
||||
|
||||
.text--gray-fs-sm {
|
||||
font-size: var(--fs-sm);
|
||||
font-family: var(--ff-primary-regular);
|
||||
color: var(--gray);
|
||||
}
|
||||
|
||||
.text--primary-color-uppercase {
|
||||
font-family: var(--ff-primary-bold);
|
||||
letter-spacing: 5px;
|
||||
text-transform: uppercase;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.background {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 37px 0px;
|
||||
margin: auto;
|
||||
color: var(--white);
|
||||
font-family: var(--ff-primary-regular);
|
||||
font-size: var(--fs-md);
|
||||
}
|
||||
|
||||
.logo {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav__lists {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.nav__item-link {
|
||||
text-decoration: none;
|
||||
color: var(--white);
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.nav__item-link:hover {
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
/* Welcome section */
|
||||
.welcome {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
gap: 120px;
|
||||
padding-bottom: 82.87px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.welcome__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.welcome__title {
|
||||
font-family: var(--ff-primary-bold);
|
||||
letter-spacing: 5px;
|
||||
text-transform: uppercase;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.welcome__heading {
|
||||
font-size: var(--fs-lg);
|
||||
font-family: var(--ff-secondary-bold);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.welcome__description {
|
||||
font-size: var(--fs-sm);
|
||||
font-family: var(--ff-primary-regular);
|
||||
color: var(--white);
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
/* Display & Box Models */
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 170px;
|
||||
height: 48px;
|
||||
border: none;
|
||||
|
||||
/* Text */
|
||||
font-family: var(--ff-primary-regular);
|
||||
font-size: var(--fs-md);
|
||||
text-decoration: none;
|
||||
|
||||
/* Other */
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
/* Button */
|
||||
.btn-primary {
|
||||
color: var(--black);
|
||||
background-color: var(--white);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--black);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
color: var(--white);
|
||||
background-color: var(--black);
|
||||
border: 1px solid var(--black);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: var(--white);
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
/* Pattern Section */
|
||||
.sponsor__container {
|
||||
margin: 60 auto;
|
||||
gap: 55px;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sponsor__content {
|
||||
gap: 16px;
|
||||
width: 411px;
|
||||
}
|
||||
|
||||
.sponsor__heading {
|
||||
font-size: var(--fs-lg);
|
||||
font-family: var(--ff-secondary-bold);
|
||||
}
|
||||
|
||||
.sponsor__description {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sponsor__logos {
|
||||
display: flex;
|
||||
gap: 68px;
|
||||
}
|
||||
|
||||
.sponsor__logo-item {
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.sponsor__logo-item:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
/* Conversation Section */
|
||||
.conversation__container {
|
||||
margin: 60px auto;
|
||||
}
|
||||
|
||||
.conversation__content {
|
||||
width: 470px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.conversation__heading {
|
||||
font-size: var(--fs-lg);
|
||||
font-family: var(--ff-secondary-bold);
|
||||
}
|
||||
|
||||
/* Security section */
|
||||
.security__container {
|
||||
margin: 60px auto;
|
||||
}
|
||||
|
||||
.security__content {
|
||||
width: 470px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.security__heading {
|
||||
font-size: var(--fs-lg);
|
||||
font-family: var(--ff-secondary-bold);
|
||||
}
|
||||
|
||||
/* Team section */
|
||||
|
||||
.team__container {
|
||||
gap: 45px;
|
||||
margin-bottom: 54px;
|
||||
}
|
||||
|
||||
.team__content {
|
||||
width: 404px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.team__heading {
|
||||
font-size: var(--fs-lg);
|
||||
font-family: var(--ff-secondary-bold);
|
||||
}
|
||||
|
||||
.team__description {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.team__image-container {
|
||||
display: flex;
|
||||
gap: 35px;
|
||||
}
|
||||
|
||||
.team__frame {
|
||||
width: 270px;
|
||||
height: 299px;
|
||||
box-shadow: 3px 4px 12px 1px rgba(0, 0, 0, 0.25);
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.team__frame:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.team__image-content {
|
||||
padding: 20px 40px;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.team__image {
|
||||
width: 175px;
|
||||
height: 175px;
|
||||
}
|
||||
|
||||
.team__information {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 17px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.team__name {
|
||||
font-size: 24px;
|
||||
font-family: var(--ff-secondary-bold);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.team__position {
|
||||
font-size: var(--fs-sm);
|
||||
font-family: var(--ff-primary-regular);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer__content {
|
||||
padding: 50px 131px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: var(--max-width);
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.footer__logos {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.footer__text {
|
||||
font-size: var(--fs-md);
|
||||
font-family: var(--ff-primary-regular);
|
||||
line-height: 125%;
|
||||
|
||||
color: var(--white);
|
||||
}
|
||||
Reference in New Issue
Block a user