diff --git a/assets/images/top-card-image-01.svg b/assets/images/top-card-image-01.svg new file mode 100644 index 0000000..be82592 --- /dev/null +++ b/assets/images/top-card-image-01.svg @@ -0,0 +1,13 @@ + diff --git a/assets/images/top-card-image-02.svg b/assets/images/top-card-image-02.svg new file mode 100644 index 0000000..d330029 --- /dev/null +++ b/assets/images/top-card-image-02.svg @@ -0,0 +1,12 @@ + diff --git a/assets/images/top-card-image-03.svg b/assets/images/top-card-image-03.svg new file mode 100644 index 0000000..ea11a3d --- /dev/null +++ b/assets/images/top-card-image-03.svg @@ -0,0 +1,6 @@ + diff --git a/assets/styles/style.css b/assets/styles/style.css index 90b2821..bb6532f 100644 --- a/assets/styles/style.css +++ b/assets/styles/style.css @@ -84,6 +84,41 @@ a { width: 100%; } +/* MAIN TOP CARDS */ + +.top-cards { + display: flex; + max-width: 100%; + align-items: center; + justify-content: center; + gap: 21px; + padding: 178px 0 80px; +} + +.top-card { + display: flex; + flex-direction: column; + align-items: center; + width: 18%; + background: #FFFFFF; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); +} + +.top-card-image { + display: block; + width: 29%; + padding: 35px 0 27px; +} + +.top-card-description { + max-width: 80%; + text-align: center; + font-weight: 400; + font-size: 16px; + line-height: 24px; + padding-bottom: 27px; +} + /* MOBILE */ @media (max-width: 1024px) { diff --git a/index.html b/index.html index 40d66fc..2fbaec6 100644 --- a/index.html +++ b/index.html @@ -48,6 +48,29 @@ + +