mirror of https://github.com/knative/docs.git
chore: improve hero and need to know more sections
Signed-off-by: thisisobate <obasiuche62@gmail.com>
This commit is contained in:
thisisobate
parent
51e8c9815c
commit
f70252231e
|
|
@ -60,8 +60,16 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.main-headline {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.headline-section p {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.why-serverless-container, .need-to-know-more-container,
|
||||
.knative-components-container, .trying-it-all-container,
|
||||
.trying-it-all-container,
|
||||
.whats-next-container, .whats-next-container,
|
||||
.case-studies-container, .cncf-notice-container {
|
||||
text-align: center;
|
||||
|
|
@ -110,6 +118,11 @@ body {
|
|||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.md-button--secondary {
|
||||
background-color: var(--md-primary-fg-color--dark);
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.home-container .md-button,
|
||||
.need-to-know-more-container .md-button {
|
||||
background-color: var(--md-primary-fg-color--light);
|
||||
|
|
@ -124,9 +137,19 @@ body {
|
|||
border-radius: 8px;
|
||||
}
|
||||
|
||||
h2.secondary-headline, h3.trusted-by {
|
||||
color: black;
|
||||
h3.trusted-by {
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
font-size: 1.3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2.secondary-headline {
|
||||
color: var(--nav-item-color);
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
max-width: 70%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -182,6 +205,10 @@ h2.secondary-headline, h3.trusted-by {
|
|||
}
|
||||
}
|
||||
|
||||
.trusted-by-container {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.trusted-by-container #usedby {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -245,17 +272,21 @@ h2.secondary-headline, h3.trusted-by {
|
|||
/* need to know more section css */
|
||||
.need-to-know-more-container, .knative-components-container,
|
||||
.whats-next-container {
|
||||
background-color: var(--md-primary-fg-color--dark);
|
||||
padding: 2rem 1rem;
|
||||
background-color: white;
|
||||
color: var(--nav-item-color);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.need-to-know-more-container {
|
||||
padding: 5em 1em 0em 1em;
|
||||
}
|
||||
|
||||
.need-to-know-more-container h1, .whats-next-container h1 {
|
||||
color: white;
|
||||
color: var(--md-primary-fg-color--dark);
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.need-to-know-more-container .md-button {
|
||||
/* .need-to-know-more-container .md-button {
|
||||
margin: 1em 0;
|
||||
color: white;
|
||||
border-radius: 0.5rem;
|
||||
|
|
@ -265,7 +296,7 @@ h2.secondary-headline, h3.trusted-by {
|
|||
font-size: large;
|
||||
padding: 0.525em 1em;
|
||||
min-width: fit-content;
|
||||
}
|
||||
} */
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.need-to-know-more-container {
|
||||
|
|
@ -314,9 +345,10 @@ h2.secondary-headline, h3.trusted-by {
|
|||
|
||||
/* why serverless container css */
|
||||
.why-serverless-container, .trying-it-all-container {
|
||||
margin-top: -2px;
|
||||
background-color: white;
|
||||
color: var(--md-primary-fg-color--light);
|
||||
padding: 2em 1em;
|
||||
padding: 8em 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -448,7 +480,7 @@ h2.secondary-headline, h3.trusted-by {
|
|||
|
||||
/* knative components container css */
|
||||
.knative-components-container h1 {
|
||||
color: white;
|
||||
color: var(--md-primary-fg-color--dark);
|
||||
}
|
||||
|
||||
.knative-components-container .text-table .normal-text {
|
||||
|
|
@ -826,6 +858,10 @@ position: relative;
|
|||
gap: 50px;
|
||||
}
|
||||
|
||||
.md-typeset .md-button.black {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.md-typeset .md-button.white {
|
||||
color: white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,10 +39,10 @@
|
|||
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>
|
||||
<h2 class="secondary-headline">The easiest way to build and run serverless workloads on Kubernetes. Built by the community, for modern cloud-native teams</h2>
|
||||
<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>
|
||||
<a href="{{ 'getting-started/tutorial' | url }}" class="md-button black md-button--primary">Try the tutorial</a>
|
||||
<a href="{{ 'install/' | url }}" class="md-button white md-button--secondary">Install Knative on your cluster</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -69,9 +69,7 @@
|
|||
Learn about how Knative works with Kubernetes and the underlying ideas behind containers <br class="br">
|
||||
and serverless infrastructure.
|
||||
</p>
|
||||
<a href="{{ 'getting-started/' | url }}" class="md-button call-to-action">
|
||||
Explore Knative
|
||||
</a>
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/69OfdJ5BIzs?si=3rM6m3LfA-OMCmCO" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue