From 0b3b74baf8e992e6338681554723a235563625ce Mon Sep 17 00:00:00 2001 From: Kartik Singhvi Date: Wed, 26 Jun 2024 00:45:17 +0530 Subject: [PATCH 1/3] add fonts --- .../12. flex complete landing page/index.html | 248 +------------ .../12. flex complete landing page/style.css | 349 +----------------- 2 files changed, 4 insertions(+), 593 deletions(-) diff --git a/learncss/12. flex complete landing page/index.html b/learncss/12. flex complete landing page/index.html index 46a0018..9e6945c 100644 --- a/learncss/12. flex complete landing page/index.html +++ b/learncss/12. flex complete landing page/index.html @@ -2,257 +2,13 @@ - 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..45366bf 100644 --- a/learncss/12. flex complete landing page/style.css +++ b/learncss/12. flex complete landing page/style.css @@ -1,349 +1,4 @@ -@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 */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --primary-text-color: #183b56; - --secondary-text-color: #577592; - --accent-color: #2294ed; - --accent-color-dark: #1d69a3; - --padding-inline-section: 20px; -} - -body { - font-family: 'Poppins', sans-serif; - color: var(--primary-text-color); -} - -h1 { - font-size: 3rem; -} - -h2 { - font-size: 2rem; -} - -h3 { - font-size: 1.5rem; -} - -p { - font-family: 'Roboto', sans-serif; - font-size: 1.25rem; - color: var(--secondary-text-color); - line-height: 1.8rem; -} - -a { - text-decoration: none; - display: inline-block; -} - -ul { - list-style: none; -} - -/* utility classes */ - -.small-bold-text { - font-size: 1rem; - font-weight: 700; -} - -.container { - max-width: 1180px; - margin-inline: auto; - padding-inline: var(--padding-inline-section); - overflow: hidden; -} - -.flex { - display: flex; - 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; - 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 { - 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; -} - -.company-logo img { - width: 200px; -} - -.nav-links { - flex-basis: 730px; -} - -.nav-links ul { - justify-content: end; - 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 From adc6ea2fd15ae2d4ebe7ae966255b03226767247 Mon Sep 17 00:00:00 2001 From: Kartik Singhvi Date: Wed, 26 Jun 2024 17:18:58 +0530 Subject: [PATCH 2/3] complete-code-setup --- .../12. flex complete landing page/index.html | 22 ++++++++++ .../12. flex complete landing page/style.css | 43 +++++++++++++++++++ 2 files changed, 65 insertions(+) diff --git a/learncss/12. flex complete landing page/index.html b/learncss/12. flex complete landing page/index.html index 9e6945c..ed68d17 100644 --- a/learncss/12. flex complete landing page/index.html +++ b/learncss/12. flex complete landing page/index.html @@ -8,6 +8,28 @@ +
+ + + +
+ +
+ +
+ +
+
+
+ +
+
+ +
+
+ + + diff --git a/learncss/12. flex complete landing page/style.css b/learncss/12. flex complete landing page/style.css index 45366bf..f17272e 100644 --- a/learncss/12. flex complete landing page/style.css +++ b/learncss/12. flex complete landing page/style.css @@ -2,3 +2,46 @@ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root{ + + --primary-text-color: #183b56; + --secondary-text-color: #577592; + --accent-color: #2294ed; + --accent-color-dark: #1d69a3; + --padding-inline-section:20px; +} + +body{ + font-family: "Poppins", sans-serif; + color: var(--primary-text-color); +} + +h1{ + font-size : 3rem; +} + +h2{ + font-size: 2rem; +} + +h3{ + font-size: 1.5rem; +} + +p{ + font-family: 'Roboto', sans-serif; + font-size: 1.5rem; + color: var(--secondary-text-color); + line-height: 1.8rem; +} + +a{ + text-decoration: none; + display: inline-block; +} From 156458d113682a4d833177d1e6396b520c46e608 Mon Sep 17 00:00:00 2001 From: Kartik Singhvi Date: Fri, 28 Jun 2024 01:22:55 +0530 Subject: [PATCH 3/3] complete-nav-bar --- .../12. flex complete landing page/index.html | 75 ++++++++++++------- .../12. flex complete landing page/style.css | 54 +++++++++++++ 2 files changed, 102 insertions(+), 27 deletions(-) diff --git a/learncss/12. flex complete landing page/index.html b/learncss/12. flex complete landing page/index.html index ed68d17..d6dcaa3 100644 --- a/learncss/12. flex complete landing page/index.html +++ b/learncss/12. flex complete landing page/index.html @@ -1,36 +1,57 @@ - - - + + + My Website - - - - -
- - + + + +
+
+ +
+
+ +
+
+
-
- -
- -
-
-
+
+
+
-
-
+
+
-
- - - - - - - \ 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 f17272e..b4c7a88 100644 --- a/learncss/12. flex complete landing page/style.css +++ b/learncss/12. flex complete landing page/style.css @@ -1,6 +1,7 @@ @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*/ *{ margin: 0; @@ -45,3 +46,56 @@ a{ text-decoration: none; display: inline-block; } + +/* utils */ +.small-bold-text{ + + font-size: 1rem; + font-weight: 700; +} + +.container{ + max-width: 1180px; + padding: var(--padding-inline-section); + margin-inline: auto; + +} + +.flex { + display: flex; + align-items: center; +} + + +.banner-text{ + color: black; + padding: 15px 10px; + text-align: center; +} + +.top-banner{ + background-color: pink; + background-image: url('./assets/asset\ 30.png'); + background-size: 300px; +} + +.main-nav { + margin-top: 20px; + justify-content: space-between; +} + +.company-logo img { + width: 200px; + justify-content: flex-start; +} + +.nav-links { + flex-basis: 700px; +} + +.nav-links ul { + justify-content: end; + gap: 40px; +} + +