Skip to content

add fonts #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
singhvikartik wants to merge 3 commits into
base: master
Choose a base branch
from
Open

add fonts #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0b3b74b
add fonts
kartikshipturtle Jun 25, 2024
adc6ea2
complete-code-setup
kartikshipturtle Jun 26, 2024
156458d
complete-nav-bar
kartikshipturtle Jun 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
287 changes: 43 additions & 244 deletions learncss/12. flex complete landing page/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,258 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Website</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="media-queries.css">
</head>
<body>

<!-- top banner -->

<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="top-banner">
<div class="container">
<div class="small-bold-text banner-text">🥳 New to Usability Hub: Open and Closed card sorting</div>
<div class="container">
<div class="small-bold-text banner-text">
New to Usability Hub: Hello Website
</div>
</div>
</div>

<!-- nav bar -->
<nav>
<div class="container main-nav flex">
<a href="#" class="company-logo">
<img src="./assets/asset 1.png" alt="company logo">
</a>
<div class="nav-links" id="nav-links">
<ul class="flex">
<li><a href="#" class="hover-link">Products</a></li>
<li><a href="#" class="hover-link">Customer</a></li>
<li><a href="#" class="hover-link">Pricing</a></li>
<li><a href="#" class="hover-link">Resources</a></li>
<li><a href="#" class="hover-link secondary-button">Sign in</a></li>
<li><a href="#" class="hover-link primary-button">Sign up</a></li>
</ul>
</div>
<a href="#" class="nav-toggle hover-link" id="nav-toggle">
<i class="fa-solid fa-bars"></i>
</a>
</div>
<div class="container">
<div class="main-nav flex">
<a href="#" class="company-logo">
<img src="assets/asset 1.png" alt="Company Logo" />
</a>
<div class="nav-links" id="nav-links">
<ul class="flex">
<li><a href="#" class="hover-link">Products</a></li>
<li><a href="#" class="hover-link">Customer</a></li>
<li><a href="#" class="hover-link">Pricing</a></li>
<li><a href="#" class="hover-link">Resources</a></li>
<li><a href="#" class="hover-link secondary-button">Sign in</a></li>
<li><a href="#" class="hover-link primary-button">Sign up</a></li>
</ul>
</div>
</div>
</div>
</nav>

<!-- header section -->
<header>
<div class="container header-section flex">
<div class="header-left">
<h1>Design Confidently</h1>
<p>UsabilityHub is a remote user research platform that takes the guesswork out of design decisions by validating them with real users.</p>
<a href="#" class="primary-button get-started-btn">Get Started</a>
</div>
<div class="header-right">
<img src="./assets/asset 2.png" alt="hero image">
</div>
</div>
</header>

<!-- companies section -->

<section class="companies-section">
<div class="container">
<div class="small-bold-text companies-header">The world’s best companies rely on UsabilityHub to make better design decisions.</div>
<div class="logos flex">
<img class="logo" src="./assets/asset 3.png" alt="">
<img class="logo" src="./assets/asset 4.png" alt="">
<img class="logo" src="./assets/asset 5.png" alt="">
<img class="logo" src="./assets/asset 6.png" alt="">
<img class="logo" src="./assets/asset 7.png" alt="">
<img class="logo" src="./assets/asset 8.svg" alt="">
<img class="logo" src="./assets/asset 9.png" alt="">
</div>
</div>
</section>

<!-- features section -->

<section class="features-section">
<div class="container">
<div class="features-header">
<h2 class="features-heading-text">Your user research Swiss Army knife</h2>
<a href="#" class="secondary-button">See all features <i class="fa-solid fa-right-long"></i></a>
</div>
<div class="features-area flex">
<div class="features-card flex">
<img src="./assets/asset 11.svg" alt="">
<h3>Card Sorting</h3>
<p>Discover how people group and label information.</p>
<a href="#" class="secondary-button">Learn More <i class="fa-solid fa-right-long"></i></a>
</div>
<div class="features-card flex">
<img src="./assets/asset 13.svg" alt="">
<h3>Prototype tests</h3>
<p>Discover how people navigate your Figma prototypes.</p>
<a href="#" class="secondary-button">Learn more <i class="fa-solid fa-right-long"></i></a>
</div>
<div class="features-card flex">
<img src="./assets/asset 14.svg" alt="">
<h3>First click tests</h3>
<p>Test interaction with first click and navigation tests.</p>
<a href="#" class="secondary-button">Learn more <i class="fa-solid fa-right-long"></i></a>
</div>
<div class="features-card flex">
<img src="./assets/asset 15.svg" alt="">
<h3>Design surveys</h3>
<p>Get feedback on images, videos or audio files.</p>
<a href="#" class="secondary-button">Learn more <i class="fa-solid fa-right-long"></i></a>
</div>
<div class="features-card flex">
<img src="./assets/asset 16.svg" alt="">
<h3>Preference tests</h3>
<p>Find out which designs users prefer and why.</p>
<a href="#" class="secondary-button">Learn more <i class="fa-solid fa-right-long"></i></a>
</div>
<div class="features-card flex">
<img src="./assets/asset 17.svg" alt="">
<h3>Five second tests</h3>
<p>Test comprehensibility by measuring first impressions.</p>
<a href="#" class="secondary-button">Learn more <i class="fa-solid fa-right-long"></i></a>
</div>
</div>
</div>
</section>

<!-- big features section -->

<section class="big-feature-section">
<div class="container flex big-feature-container">
<div class="feature-img">
<img src="./assets/asset 18.png" alt="">
</div>
<div class="feature-desc flex">
<h4>Effortless validation for</h4>
<h3>Design professionals</h3>
<p>Test interfaces, interaction flows, iconography and more, to help you create intuitive and delightful experiences for your users.</p>
</div>
</div>
</section>

<section class="big-feature-section">
<div class="container flex big-feature-container" id="second-big-feature">
<div class="feature-img">
<img src="./assets/asset 21.png" alt="">
</div>
<div class="feature-desc flex">
<h4>Effortless validation for</h4>
<h3>Design professionals</h3>
<p>Test interfaces, interaction flows, iconography and more, to help you create intuitive and delightful experiences for your users.</p>
</div>
</div>
</section>

<section class="big-feature-section">
<div class="container flex big-feature-container">
<div class="feature-img">
<img src="./assets/asset 24.png" alt="">
</div>
<div class="feature-desc flex">
<h4>Effortless validation for</h4>
<h3>Design professionals</h3>
<p>Test interfaces, interaction flows, iconography and more, to help you create intuitive and delightful experiences for your users.</p>
</div>
</div>
</section>

<!-- examples section -->

<section class="examples-section">
<div class="container">
<div class="examples-header flex">
<h2 class="examples-heading-text">One platform, endless possibilities</h2>
<a href="#" class="secondary-button">See more examples <i class="fa-solid fa-right-long"></i></a>
</div>
<div class="examples-area flex">
<a href="#" class="examples-card">
<h3 class="card-text">Can user complete a task in my software interface?</h3>
</a>
<a class="examples-card" href="#" style="background: linear-gradient(rgb(0, 0, 0, 0.1), rgb(0, 0, 0, 0.8)), url(./assets/asset\ 34.jpeg); background-size: cover;">
<h3 class="card-text">Can users find important pages on my website?</h3>
</a>
<a class="examples-card" href="#">
<h3 class="card-text">Is my website’s intended audience clear? </h3>
</a>
<a class="examples-card" href="#">
<h3 class="card-text">Do visitors understand what a page is about?</h3>
</a>
</div>
</div>
</section>

<!-- cta section -->

<section class="cta-section">
<div class="container flex cta-section-container">
<h2>Start testing today</h2>
<p>Take the guesswork out of design decisions</p>
<a href="#" class="primary-button">Get Started</a>
</div>
</section>

<!-- footer -->

<footer>
<div class="container flex footer-container">
<a href="#" class="company-logo">
<img src="./assets/asset 1.png" alt="company logo">
</a>
<div class="link-column flex">
<h4>Product</h4>
<a href="#" class="hover-link">Overview</a>
<a href="#" class="hover-link">Pricing</a>
<a href="#" class="hover-link">Usability Hub</a>
<a href="#" class="hover-link">Customers Page</a>
<a href="#" class="hover-link">Status Page</a>
</div>
<div class="link-column flex">
<h4>Methodology</h4>
<a href="#" class="hover-link">Overview</a>
<a href="#" class="hover-link">Pricing</a>
<a href="#" class="hover-link">Usability Hub</a>
<a href="#" class="hover-link">Customers Page</a>
<a href="#" class="hover-link">Status Page</a>
</div>
<div class="link-column flex">
<h4>Resources</h4>
<a href="#" class="hover-link">Overview</a>
<a href="#" class="hover-link">Pricing</a>
<a href="#" class="hover-link">Usability Hub</a>
<a href="#" class="hover-link">Customers Page</a>
<a href="#" class="hover-link">Status Page</a>
</div>
</div>
</footer>

<!-- subfooter -->

<div class="subfooter">
<div class="container flex subfooter-container">
<a class="hover-link" href="#">Privacy policy</a>
<a class="hover-link" href="#">Terms & Condition</a>
<a class="hover-link" href="#">Security Information</a>
<a class="hover-link" href="#"><i class="fa-brands fa-facebook"></i></a>
<a class="hover-link" href="#"><i class="fa-brands fa-twitter"></i></a>
</div>
</div>

<script src="https://kit.fontawesome.com/c1fc3d2826.js" crossorigin="anonymous"></script>
<header></header>
<section class="companies-section"></section>
<section class="features-section"></section>

<script>
const toggleButton = document.getElementById('nav-toggle');
const navLinks = document.getElementById('nav-links');
<section class="big-feature-section"></section>
<section class="big-feature-section"></section>
<section class="big-feature-section"></section>

toggleButton.addEventListener('click', () => {
navLinks.classList.toggle('active');
})
<section class="examples-section"></section>
<section class="cta-section"></section>

</script>
<footer></footer>
<div class="subfooter"></div>

</body>
</html>
<script
src="https://kit.fontawesome.com/d768e6b103.js"
crossorigin="anonymous"
></script>
</body>
</html>
Loading