forked from Hostea/website
feat: add call to action component
parent
39cda06aeb
commit
0cf7bdbf78
|
@ -1,4 +1,5 @@
|
||||||
@import "./card-main";
|
@import "./card-main";
|
||||||
|
@import "./service-card-main";
|
||||||
@import "./vision";
|
@import "./vision";
|
||||||
|
|
||||||
$heading-letter-spacing: 20px;
|
$heading-letter-spacing: 20px;
|
||||||
|
@ -52,10 +53,47 @@ $heading-letter-spacing: 20px;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.index-banner__main-action-link{
|
.index-banner__main-action-link {
|
||||||
color: black !important;
|
color: black !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.index-banner__main-action-btn:hover {
|
.index-banner__main-action-btn:hover {
|
||||||
background-color: lightgray;
|
background-color: lightgray;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.home__features {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home__features-title {
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
$page-content-width: 80%;
|
||||||
|
.index__group-content {
|
||||||
|
.page__container {
|
||||||
|
width: $page-content-width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-call__container {
|
||||||
|
background: #1f5818;
|
||||||
|
width: 100%;
|
||||||
|
padding: 60px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-call__margin-container {
|
||||||
|
display: flex;
|
||||||
|
width: $page-content-width;
|
||||||
|
margin: auto;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-call__prompt {
|
||||||
|
color: white;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.7rem;
|
||||||
|
}
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
@import "./card-mobile";
|
@import "./card-mobile";
|
||||||
|
@import "./vision-mobile";
|
||||||
|
|
||||||
.home__container {
|
.home__container {
|
||||||
max-height: 100vh;
|
max-height: 100vh;
|
||||||
|
@ -18,3 +19,10 @@
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.index__group-content {
|
||||||
|
.page__container {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -0,0 +1,81 @@
|
||||||
|
.service__features {
|
||||||
|
margin: 20px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card__group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 0px auto;
|
||||||
|
}
|
||||||
|
.service-card__conatiner {
|
||||||
|
// background-color: #eee;
|
||||||
|
margin: 10px 0px;
|
||||||
|
// wpadding: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
display: flex;
|
||||||
|
// height: 250px;
|
||||||
|
height: 100vh;
|
||||||
|
border-top: 1px solid grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card__conatiner:first-child {
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card__icon {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
margin: auto;
|
||||||
|
flex: 2;
|
||||||
|
border-radius: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card__title {
|
||||||
|
margin: auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card__text {
|
||||||
|
// font-size: 0.7rem;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card__text-container {
|
||||||
|
flex: 2;
|
||||||
|
margin: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card__aciton-btn {
|
||||||
|
margin: auto;
|
||||||
|
padding: 10px;
|
||||||
|
display: block;
|
||||||
|
font-weight: 400;
|
||||||
|
border: none;
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service__features {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service__features-title {
|
||||||
|
margin: 10px auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card__icon-container {
|
||||||
|
width: 30%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card__aciton-btn--inactive {
|
||||||
|
margin: auto;
|
||||||
|
padding: 10px;
|
||||||
|
display: block;
|
||||||
|
font-weight: 400;
|
||||||
|
border: none;
|
||||||
|
background-color: lightgrey;
|
||||||
|
color: #000;
|
||||||
|
}
|
|
@ -1,6 +1,7 @@
|
||||||
.home__vision-container{
|
.home__vision-container{
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
height: 320px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
{% import "macros.html" as macros %}
|
{% import "macros.html" as macros %}
|
||||||
{% import "home/components/home-card.html" as card_macro %}
|
{% import "home/components/home-card.html" as card_macro %}
|
||||||
|
{% import "home/components/home-card-new.html" as card_macro2 %}
|
||||||
|
|
||||||
{% extends "base.html" %} {% block meta %}
|
{% extends "base.html" %} {% block meta %}
|
||||||
{% set description = "Hostea: Dedicated managed Gitea hosting, including CI/CD
|
{% set description = "Hostea: Dedicated managed Gitea hosting, including CI/CD
|
||||||
|
@ -7,12 +8,25 @@ and static pages with upgrades, backups and 24/7 monitoring" %} {% set title =
|
||||||
"Home" %} {{ macros::get_meta_tags(title=title, description=description) }} {%
|
"Home" %} {{ macros::get_meta_tags(title=title, description=description) }} {%
|
||||||
endblock meta %} {% block content %}
|
endblock meta %} {% block content %}
|
||||||
|
|
||||||
{% include "home/components/_banner.html" %}
|
{% include "home/components/_banner-new.html" %}
|
||||||
<div class="index__container">
|
<div class="index__container">
|
||||||
<div class="index__group-content">
|
<div class="index__group-content">
|
||||||
<div class="page__container">
|
|
||||||
<div class="page__group-content">
|
<div class="page__group-content">
|
||||||
|
<div class="page__container">
|
||||||
{% include "home/components/_vision.html" %}
|
{% include "home/components/_vision.html" %}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="action-call__container">
|
||||||
|
<div class="action-call__margin-container">
|
||||||
|
<p class="action-call__prompt">Need an indepandent forge? Talk to an expert!</p>
|
||||||
|
<button class="action-call__button"><a href="/contact" class="action-call_link">Contact Us</a></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="page__container">
|
||||||
|
{% include "home/components/_services-new.html" %}
|
||||||
|
</div>
|
||||||
|
<div class="page__container">
|
||||||
{% include "home/components/_features.html" %}
|
{% include "home/components/_features.html" %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue