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