mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-19 08:50:13 +01:00
feat(demo): add landing page with docs (#1951)
This commit is contained in:
Dmitry Nehaychik
Sergey Andrievskiy
parent
67c9587b87
commit
43cc3a1556
190 changed files with 15425 additions and 21 deletions
|
|
@ -0,0 +1,36 @@
|
|||
<ngx-landing-section-title>
|
||||
More from Akveo
|
||||
</ngx-landing-section-title>
|
||||
|
||||
<ul class="projects">
|
||||
<li class="project">
|
||||
<div class="project-img">
|
||||
<img class="lazy-load-image"
|
||||
defaultImage="assets/img/default.png"
|
||||
lazyLoad="assets/img/nebular.png"
|
||||
alt="Nebular" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="title">Nebular</div>
|
||||
<div class="description">
|
||||
Nebular is a great toolkit if you build Rich UI web applications based on Angular. Complete with a set of native Angular components, themeable components, authentication and security layers that are easily configurable to your API. Nebular offers a world of possibilities
|
||||
</div>
|
||||
<a class="btn" href="https://akveo.github.io/nebular?utm_source=ngx_admin_landing&utm_medium=more_from_akveo_section" target="_blank">Learn more</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="project">
|
||||
<div class="project-img">
|
||||
<img class="lazy-load-image"
|
||||
defaultImage="assets/img/default.png"
|
||||
lazyLoad="assets/img/eva-icons.png"
|
||||
alt="Eva Icons" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="title">Eva Icons</div>
|
||||
<div class="description">
|
||||
Eva Icons is a pack of more than 480 beautifully crafted Open Source icons. Download for desktop and use them in your creations for Web, iOS, and Android. The icons are available in several formats: PNG, SVG, font, Sketch
|
||||
</div>
|
||||
<a class="btn" href="https://akveo.github.io/eva-icons?utm_source=ngx_admin_landing&utm_medium=more_from_akveo_section" target="_blank">Learn more</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
@import '../../../@theme/styles/themes';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
$our-projects-section-offset: 7.125rem;
|
||||
|
||||
display: block;
|
||||
padding-top: 5.125rem;
|
||||
|
||||
.project-img {
|
||||
min-width: 39.75rem;
|
||||
min-height: 20.375rem;
|
||||
|
||||
.lazy-load-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
visibility: hidden;
|
||||
transition: opacity 1s;
|
||||
opacity: 0;
|
||||
|
||||
&.ng-lazyloaded {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
width: calc(100% - #{$our-projects-section-offset} * 2);
|
||||
margin: 0 auto;
|
||||
padding: 4rem 0 3.5rem;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
margin-top: 5.5rem;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& > div {
|
||||
margin-left: 3.75rem;
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
.project-img {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: 'Helvetica Neue Bold', sans-serif;
|
||||
color: #000000;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-family: nb-theme(font-secondary), sans-serif;
|
||||
font-size: nb-theme(font-size-lg);
|
||||
margin-top: 1.125rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-family: nb-theme(font-main), sans-serif;
|
||||
background-color: nb-theme(color-active-bg);
|
||||
border-radius: 3px;
|
||||
box-shadow: nb-theme(shadow-btn);
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
margin-top: 2.625rem;
|
||||
padding: 1rem 0.875rem;
|
||||
|
||||
&:hover {
|
||||
box-shadow: nb-theme(shadow-hover-green-btn);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: nb-theme(shadow-active-green-btn);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
ul {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 1.375rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
.project-img {
|
||||
min-width: 33rem;
|
||||
min-height: 16.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.project-img {
|
||||
min-width: 25rem;
|
||||
min-height: auto;
|
||||
max-height: 17rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
padding-top: 2.5rem;
|
||||
|
||||
.project-img {
|
||||
max-height: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-top: 3.625rem;
|
||||
flex-direction: column;
|
||||
|
||||
& > div {
|
||||
margin-top: 1rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: nb-theme(font-size);
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 1rem 0.875rem;
|
||||
margin-top: 2.375rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-landing-our-projects-section',
|
||||
templateUrl: './our-projects-section.component.html',
|
||||
styleUrls: ['./our-projects-section.component.scss'],
|
||||
})
|
||||
export class OurProjectsSectionComponent {
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue