download page design
parent
2905047311
commit
5d94f865ce
@ -0,0 +1,56 @@
|
|||||||
|
<!--Navbar-->
|
||||||
|
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar indigo">
|
||||||
|
<logo>
|
||||||
|
<a class="logo navbar-brand waves-light" mdbWavesEffect href="#"><strong>SupFile</strong></a>
|
||||||
|
</logo>
|
||||||
|
<links>
|
||||||
|
<ul class="navbar-nav mr-auto">
|
||||||
|
</ul>
|
||||||
|
</links>
|
||||||
|
</mdb-navbar>
|
||||||
|
|
||||||
|
<section class="view intro-2 mask rgba-gradient">
|
||||||
|
<div class="container-fluid full-bg-img mask rgba-gradient">
|
||||||
|
<!--Grid column-->
|
||||||
|
<div class="col-lg-6 col-md-8">
|
||||||
|
|
||||||
|
<!--Card-->
|
||||||
|
<div class="card text-white card-cascade narrower card-image">
|
||||||
|
|
||||||
|
<div class="text-white text-center align-items-center">
|
||||||
|
<!--Card image-->
|
||||||
|
<div class="card-header text-center">
|
||||||
|
<h2 class="h2-responsive">File Download</h2>
|
||||||
|
</div>
|
||||||
|
<!--/Card image-->
|
||||||
|
|
||||||
|
|
||||||
|
<!--Card content-->
|
||||||
|
<div class="card-body text-center">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<i class="fa fa-file fa-4x" aria-hidden="true"></i>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<p><strong>Name</strong></p>
|
||||||
|
<p>Lenght</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="hr-light mb-3 mt-4">
|
||||||
|
|
||||||
|
<button class="btn btn-outline-white wow fadeInleft waves-light">Download</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!--/.Card content-->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!--/.Card-->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!--Grid column-->
|
||||||
|
</div>
|
||||||
|
</section>
|
@ -0,0 +1,44 @@
|
|||||||
|
.container-fluid {
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
margin-top: 5rem;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro-2 {
|
||||||
|
background: url("http://mdbootstrap.com/img/Photos/Others/img%20(42).jpg")no-repeat center center;
|
||||||
|
background-size: cover;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
.view {
|
||||||
|
height: 100vh !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 740px) {
|
||||||
|
.full-height,
|
||||||
|
.full-height body,
|
||||||
|
.full-height header,
|
||||||
|
.full-height header .view {
|
||||||
|
height: 1040px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rgba-gradient .full-bg-img {
|
||||||
|
background: linear-gradient(45deg, rgba(83, 125, 210, 0.4), rgba(178, 30, 123, 0.4) 100%);
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
background-color: rgba(229, 228, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-form .prefix {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
.md-form label {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
@ -0,0 +1,25 @@
|
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { DownloadLinkComponent } from './download-link.component';
|
||||||
|
|
||||||
|
describe('DownloadLinkComponent', () => {
|
||||||
|
let component: DownloadLinkComponent;
|
||||||
|
let fixture: ComponentFixture<DownloadLinkComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ DownloadLinkComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(DownloadLinkComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
@ -0,0 +1,15 @@
|
|||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-download-link',
|
||||||
|
templateUrl: './download-link.component.html',
|
||||||
|
styleUrls: ['./download-link.component.scss']
|
||||||
|
})
|
||||||
|
export class DownloadLinkComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
Loading…
Reference in New Issue