MaDgIK
/
monitor
13
0
Fork 0
Code Issues Pull Requests Projects Releases 15 Wiki Activity

update hero section of get-started page

This commit is contained in:
Alex Martzios 2022-03-03 14:32:00 +02:00
parent 51e40a6ab0
commit 965ea8afb6
2 changed files with 22 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/get-started/get-started.component.css
View File

@ -1,6 +1,3 @@
.floating-number {
transform: translateY(-50%);
}
.floating-text {
transform: translate(50%, 50%);
.transform-translate-y {
transform: translateY(50%);
}

48
src/app/get-started/get-started.component.html
View File

@ -5,7 +5,7 @@
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
</div>
<div class="uk-container uk-container-large uk-section uk-padding-remove-top" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
<div class="uk-container uk-container-large uk-section uk-padding-remove-vertical" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
<div class="uk-padding-small uk-margin-small-top uk-text-center">
<h1 uk-scrollspy-class>Lorem ipsum dolor <br> sit amet, consetetur<span class="uk-text-primary">.</span></h1>
<div class="uk-text-large" uk-scrollspy-class>
@ -14,40 +14,32 @@
</div>
</div>
</div>
<div class="mixed-background">
<div class="uk-background-muted">
<div class="uk-container uk-container-large uk-section">
<div class="uk-padding-small uk-margin-auto uk-width-2-3 uk-grid uk-grid-large uk-child-width-1-2" uk-grid>
<div class="uk-flex uk-flex-column floating-text">
<icon name="description" ratio="3" visuallyHidden="Provide some information"
<div class="uk-background-muted">
<div class="uk-container uk-container-large uk-section uk-padding-remove-vertical" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
<div class="uk-margin-auto uk-width-1-1@m uk-width-2-3@l uk-grid uk-grid-large uk-child-width-1-2" uk-grid>
<div class="uk-flex uk-flex-center uk-flex-bottom" uk-scrollspy-class>
<img class="transform-translate-y uk-visible@m" src="assets/monitor-assets/get-started/1.svg" alt="Step 1" loading="lazy">
<div class="uk-flex uk-flex-column uk-padding-small uk-margin-small-left">
<icon name="description" ratio="2" visuallyHidden="Provide some information"
customClass="uk-text-primary-gradient"></icon>
<span class="uk-text-lead uk-text-bold uk-text-uppercase">Provide some <br> information</span>
</div>
<div class="uk-flex uk-flex-column floating-text">
<icon name="email" ratio="3" visuallyHidden="Provide some information"
customClass="uk-text-primary-gradient"></icon>
<span class="uk-text-lead uk-text-bold uk-text-uppercase">We contact <br> you</span>
<span class="uk-h5 uk-margin-remove uk-text-uppercase">Provide some <br> information</span>
</div>
</div>
</div>
</div>
<div class="normal-background">
<div class="uk-container uk-container-large uk-section uk-padding-remove-vertical">
<div class="uk-padding-small uk-padding-remove-vertical uk-margin-auto uk-width-2-3 uk-grid uk-grid-large uk-child-width-1-2 uk-position-relative" uk-grid>
<div class="floating-number">
<img src="assets/monitor-assets/get-started/1.svg" alt="">
</div>
<div class="floating-number">
<img src="assets/monitor-assets/get-started/2.svg" alt="">
<div class="uk-flex uk-flex-center uk-flex-bottom" uk-scrollspy-class>
<img class="transform-translate-y uk-visible@m" src="assets/monitor-assets/get-started/2.svg" alt="Step 2" loading="lazy">
<div class="uk-flex uk-flex-column uk-padding-small uk-margin-small-left">
<icon name="email" ratio="2" visuallyHidden="Provide some information"
customClass="uk-text-primary-gradient"></icon>
<span class="uk-h5 uk-margin-remove uk-margin-small-top uk-text-uppercase">We contact <br> you</span>
</div>
</div>
<!-- <div class="uk-padding-small uk-text-center">
TODO: Numbers with transform translate to go up by 50%
</div> -->
</div>
</div>
</div>
<div class="uk-container uk-container-large uk-section uk-padding-remove-top">
<div class="uk-container uk-container-large uk-section">
<!-- using 2 large padding to add some space? -->
<div class="uk-padding-large uk-visible@m"></div>
<div class="uk-padding-large uk-visible@m"></div>
<div class="uk-padding-small uk-text-center">
<h2 class="uk-h1">Provide some information<span class="uk-text-primary">.</span></h2>
<div class="uk-flex uk-flex-center uk-width-1-1">
@ -60,7 +52,7 @@
</div>
</div>
<div class="uk-container uk-container-large uk-section">
<div class="uk-grid uk-grid-medium" uk-grid>
<div class="uk-padding-small uk-grid uk-grid-medium" uk-grid>
<div class="uk-width-1-2@m uk-width-1-1">
<h2 class="uk-h1">We need a title that suggest to learn the full process in the about<span class="uk-text-primary">.</span></h2>
<a class="uk-display-inline-block uk-text-uppercase uk-button-text"