chore: create hero section

Signed-off-by: thisisobate <obasiuche62@gmail.com>
This commit is contained in:
thisisobate 2025-07-03 14:30:41 +01:00
parent a694d2324c
commit 51e8c9815c
No known key found for this signature in database
3 changed files with 109 additions and 3 deletions

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 59 KiB

View File

@ -1,3 +1,13 @@
.hero {
background-image: url("../../images/home-images/hero-bg.svg");
background-repeat: no-repeat;
background-position: bottom;
background-size: cover;
background-color: #fff;
height: 25rem;
margin-top: -50px;
}
.md-main__inner {
margin: 0;
max-width: 100%;
@ -117,6 +127,7 @@ body {
h2.secondary-headline, h3.trusted-by {
color: black;
font-weight: 700;
text-align: center;
}
.home-container h1 {

View File

@ -2,7 +2,7 @@
<link rel="stylesheet" href="{{ 'assets/stylesheets/home.css' | url }}" />
<div class="md-container home-page">
<section class="home-container">
<!-- <section class="home-container">
<div class="md-grid md-typeset">
<div class="mdx-hero">
<div class="headline-section">
@ -18,18 +18,48 @@
<h3 class="trusted-by">Trusted by</h3>
<div class="scroller">
<div class="scroller__inner">
<!-- First row of adopters will be populated dynamically -->
</div>
</div>
<div class="scroller" data-direction="right">
<div class="scroller__inner">
<!-- Second row of adopters will be populated dynamically -->
</div>
</div>
</div>
</div>
</div>
</div>
</section> -->
<section>
<div class="hero">
<div class="md-grid md-typeset">
<div class="headline-section">
<h1 class="main-headline">
Knative is an Open-Source Enterprise-level<br>
solution to build Serverless and Event Driven Applications
</h1>
<h4>The easiest way to build and run serverless workloads on Kubernetes. Built by the community, for modern cloud-native teams</h4>
<p style="display: block">
<a href="{{ 'getting-started/tutorial' | url }}" class="md-button white md-button--primary">Try the tutorial</a>
<a href="{{ 'install/' | url }}" class="md-button white">Install Knative on your cluster</a>
</p>
</div>
</div>
</div>
<div class="trusted-by-container">
<h3 class="trusted-by">Trusted by</h3>
<div class="scroller">
<div class="scroller__inner">
</div>
</div>
<div class="scroller" data-direction="right">
<div class="scroller__inner">
</div>
</div>
</div>
</section>
<section class="need-to-know-more-container">