diff --git a/learncss/12. flex complete landing page/index.html b/learncss/12. flex complete landing page/index.html index 46a0018..d6dcaa3 100644 --- a/learncss/12. flex complete landing page/index.html +++ b/learncss/12. flex complete landing page/index.html @@ -1,258 +1,57 @@ - - - - + + + My Website - - - - - - - + + +
-
- +
+ +
- - -
-
-
-

Design Confidently

-

UsabilityHub is a remote user research platform that takes the guesswork out of design decisions by validating them with real users.

- Get Started -
-
- hero image -
-
-
- - - -
-
-
The world’s best companies rely on UsabilityHub to make better design decisions.
-
- - - - - - - -
-
-
- - - -
-
-
-

Your user research Swiss Army knife

- See all features -
-
-
- -

Card Sorting

-

Discover how people group and label information.

- Learn More -
-
- -

Prototype tests

-

Discover how people navigate your Figma prototypes.

- Learn more -
-
- -

First click tests

-

Test interaction with first click and navigation tests.

- Learn more -
-
- -

Design surveys

-

Get feedback on images, videos or audio files.

- Learn more -
-
- -

Preference tests

-

Find out which designs users prefer and why.

- Learn more -
-
- -

Five second tests

-

Test comprehensibility by measuring first impressions.

- Learn more -
-
-
-
- - - -
-
-
- -
-
-

Effortless validation for

-

Design professionals

-

Test interfaces, interaction flows, iconography and more, to help you create intuitive and delightful experiences for your users.

-
-
-
- -
-
-
- -
-
-

Effortless validation for

-

Design professionals

-

Test interfaces, interaction flows, iconography and more, to help you create intuitive and delightful experiences for your users.

-
-
-
- -
-
-
- -
-
-

Effortless validation for

-

Design professionals

-

Test interfaces, interaction flows, iconography and more, to help you create intuitive and delightful experiences for your users.

-
-
-
- - - -
-
-
-

One platform, endless possibilities

- See more examples -
-
- -

Can user complete a task in my software interface?

- - -

Can users find important pages on my website?

- - -

Is my website’s intended audience clear?

- - -

Do visitors understand what a page is about?

- -
-
-
- - - -
-
-

Start testing today

-

Take the guesswork out of design decisions

- Get Started -
-
- - - - - - - -
-
- Privacy policy - Terms & Condition - Security Information - - -
-
- - +
+
+
- + +
- - \ No newline at end of file + + + diff --git a/learncss/12. flex complete landing page/style.css b/learncss/12. flex complete landing page/style.css index 5637031..b4c7a88 100644 --- a/learncss/12. flex complete landing page/style.css +++ b/learncss/12. flex complete landing page/style.css @@ -1,66 +1,64 @@ -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&family=Roboto:wght@400;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Roboto:wght@400;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap'); -/* resets */ +/*resets*/ -* { +*{ margin: 0; padding: 0; - box-sizing: border-box; + box-sizing: border-box; } -:root { +:root{ + --primary-text-color: #183b56; --secondary-text-color: #577592; --accent-color: #2294ed; --accent-color-dark: #1d69a3; - --padding-inline-section: 20px; + --padding-inline-section:20px; } -body { - font-family: 'Poppins', sans-serif; +body{ + font-family: "Poppins", sans-serif; color: var(--primary-text-color); } -h1 { - font-size: 3rem; +h1{ + font-size : 3rem; } -h2 { +h2{ font-size: 2rem; } -h3 { +h3{ font-size: 1.5rem; } -p { +p{ font-family: 'Roboto', sans-serif; - font-size: 1.25rem; + font-size: 1.5rem; color: var(--secondary-text-color); line-height: 1.8rem; } -a { +a{ text-decoration: none; display: inline-block; } -ul { - list-style: none; -} - -/* utility classes */ +/* utils */ +.small-bold-text{ -.small-bold-text { font-size: 1rem; font-weight: 700; } -.container { +.container{ max-width: 1180px; + padding: var(--padding-inline-section); margin-inline: auto; - padding-inline: var(--padding-inline-section); - overflow: hidden; + } .flex { @@ -68,60 +66,19 @@ ul { align-items: center; } -.hover-link { - color: var(--primary-text-color); - transition: 0.2s ease-out; -} -.hover-link:hover { - color: var(--accent-color); -} - -.primary-button { - background-color: var(--accent-color); - border-radius: 6px; - font-weight: 700; - color: white !important; - padding: 12px 24px; - box-shadow: 0 0 2px var(--secondary-text-color); - transition: 0.2s ease-out; +.banner-text{ + color: black; + padding: 15px 10px; text-align: center; } -.primary-button:hover { - background-color: var(--accent-color-dark); -} - -.secondary-button { - border: 0.5px solid var(--secondary-text-color); - border-radius: 6px; - font-weight: 700; - color: var(--primary-text-color) !important; - padding: 12px 24px; - transition: 0.2s ease-out; -} - -.secondary-button:hover { - border-color: var(--accent-color); - color: var(--accent-color) !important; -} - -/* top banner */ - -.top-banner { +.top-banner{ + background-color: pink; background-image: url('./assets/asset\ 30.png'); - background-color: #4fb3d4; background-size: 300px; } -.banner-text { - color: white; - padding: 15px 30px; - text-align: center; -} - -/* nav bar */ - .main-nav { margin-top: 20px; justify-content: space-between; @@ -129,10 +86,11 @@ ul { .company-logo img { width: 200px; + justify-content: flex-start; } .nav-links { - flex-basis: 730px; + flex-basis: 700px; } .nav-links ul { @@ -140,210 +98,4 @@ ul { gap: 40px; } -.nav-toggle { - display: none; -} - -/* header section */ - -header { - padding: 50px var(--padding-inline-section) 0; -} - -.header-section { - justify-content: center; - gap: 50px; -} - -.header-left { - max-width: 40vw; -} - -.header-left h1 { - margin-top: 20px; -} - -.get-started-btn { - margin-top: 20px; -} - -.header-right img { - width: 100%; -} - -/* companies section */ - -.companies-header { - text-align: center; - margin-block: 30px; - color: var(--primary-text-color); -} - -.logos { - justify-content: space-evenly; - flex-wrap: wrap; - gap: 20px; -} - -.logo { - height: 46px; -} - -/* features section */ - -.features-section { - padding: 80px var(--padding-inline-section) 0; - background-image: url(./assets/asset\ 32.svg); - background-repeat: no-repeat; - background-position: center; -} - -.features-header { - text-align: center; - margin-bottom: 40px; -} - -.features-heading-text { - margin-bottom: 20px; -} - -.features-area { - flex-wrap: wrap; - justify-content: space-between; - gap: 20px; - margin-top: 20px; -} - -.features-card { - flex-direction: column; - gap: 20px; - max-width: 30%; - text-align: center; -} - -.features-card img { - width: 60px; -} - -/* big feature section */ - -.big-feature-section { - padding: 30px var(--padding-inline-section) 0; -} - -.big-feature-container { - gap: 30px; -} - -#second-big-feature { - flex-direction: row-reverse; -} - -.feature-img img { - width: 100%; -} - -.feature-desc { - flex-direction: column; - align-items: flex-start; -} - -/* examples section */ - -.examples-section { - padding: 80px var(--padding-inline-section) -} - -.examples-header { - flex-direction: column; - gap: 20px; - text-align: center; -} - -.examples-area { - justify-content: space-between; - margin-block: 30px; - flex-wrap: wrap; -} - -.examples-card { - width: 23%; - position: relative; - height: 300px; - background: black; - background: linear-gradient(rgb(0, 0, 0, 0.1), rgb(0, 0, 0, 0.8)), url(./assets/asset\ 35.jpeg); - background-size: cover; - transition: 0.2s ease-out; -} - -.examples-card:hover { - box-shadow: 0 0 10px #888; -} - -.examples-card:nth-child(3) { - background: linear-gradient(rgb(0, 0, 0, 0.1), rgb(0, 0, 0, 0.8)), url(./assets/asset\ 36.jpeg); - background-size: cover; -} - -.examples-card:nth-child(4) { - background: linear-gradient(rgb(0, 0, 0, 0.1), rgb(0, 0, 0, 0.8)), url(./assets/asset\ 37.jpeg); - background-size: cover; -} - -.card-text { - position: absolute; - bottom: 20px; - left: 20px; - right: 20px; - color: white; -} - -/* cta section */ - -.cta-section-container { - flex-direction: column; - gap: 30px; - color: white; - text-align: center; -} - -.cta-section { - padding: 120px var(--padding-inline-section) 80px; - background-color: #183b54; -} - -.cta-section-container p { - color: white; - margin-top: 20px; -} - -/* footer */ - -footer { - padding-block: 80px; - background-color: #ebf2fa; -} - -.link-column { - flex-direction: column; - align-items: flex-start; - gap: 20px; -} - -.footer-container { - align-items: flex-start; - justify-content: space-between; -} - -/* subfooter */ - -.subfooter { - background-color: #b9cde4; - padding: var(--padding-inline-section); -} -.subfooter-container { - justify-content: center; - gap: 30px; - flex-wrap: wrap; -} \ No newline at end of file