Website style erweitert
This commit is contained in:
@@ -1,7 +1,13 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { BesucherComponent } from './besucher/besucher.component';
|
||||
import { HomeComponent } from './home/home.component';
|
||||
|
||||
const routes: Routes = [];
|
||||
const routes: Routes = [
|
||||
{ path: '', redirectTo: '/home',pathMatch:'full'},
|
||||
{ path: 'home', component: HomeComponent},
|
||||
{ path: 'besucher',component: BesucherComponent}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forRoot(routes)],
|
||||
|
||||
@@ -1,16 +1,7 @@
|
||||
|
||||
<app-navbar></app-navbar>
|
||||
|
||||
<div class="section-heading-page">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<h1 class="heading-page">Annika & Damian</h1>
|
||||
<div class="subtitle-page text-center mt-10">04.10.2022</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<router-outlet></router-outlet>
|
||||
|
||||
|
||||
<!--<app-besucher></app-besucher>-->
|
||||
|
||||
<app-besucher></app-besucher>
|
||||
<app-countdown></app-countdown>
|
||||
|
||||
@@ -1,121 +1,50 @@
|
||||
.content-coming-soon {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
#coming-soon {
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
left: 50%;
|
||||
margin-left: -230px;
|
||||
}
|
||||
.coming-soon-wrapper {
|
||||
width: 100px;
|
||||
border-radius: 50%;
|
||||
height: 100px;
|
||||
}
|
||||
.coming-soon-time {
|
||||
font-size: 44px;
|
||||
font-weight: 100;
|
||||
line-height: 64px;
|
||||
}
|
||||
.coming-soon-date {
|
||||
line-height: 14px;
|
||||
display:block;
|
||||
font-size: 16px;
|
||||
.content-comming-soon {
|
||||
height: auto;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
|
||||
}
|
||||
|
||||
#comming-soon {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
display: flex;
|
||||
|
||||
|
||||
.wrapper-table {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wrapper-table {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.wrapper-table-cell {
|
||||
display: table-cell;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.content-coming-soon {
|
||||
height: auto;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.coming-soon-wrapper {
|
||||
text-align:center;
|
||||
background-color:#fff;
|
||||
.comming-soon-wrapper {
|
||||
text-align: center;
|
||||
padding: 0px;
|
||||
display:inline-block;
|
||||
color:white;
|
||||
display: inline-block;
|
||||
color:black;
|
||||
width: 100px;
|
||||
border-radius: 50%;
|
||||
background-color: lightblue;
|
||||
height: 100px;
|
||||
box-sizing: border-box;
|
||||
margin: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.coming-soon-wrapper-transparent {
|
||||
text-align:center;
|
||||
background-color:rgba(0,0,0,0.6);
|
||||
padding:20px;
|
||||
display:inline-block;
|
||||
color:white;
|
||||
}
|
||||
.coming-soon-wrapper+.coming-soon-wrapper,
|
||||
.coming-soon-wrapper-transparent+.coming-soon-wrapper-transparent {
|
||||
margin-left:16px;
|
||||
.comming-soon-time {
|
||||
color:black;
|
||||
font-weight: 100;
|
||||
font-size: 44px;
|
||||
line-height: 64px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
/*
|
||||
.coming-soon-wrapper,
|
||||
.coming-soon-wrapper-transparent {
|
||||
padding-p: 20px;
|
||||
}
|
||||
/*.coming-soon-time {
|
||||
font-size: 48px;
|
||||
line-height: 60px;
|
||||
}
|
||||
.coming-soon-date {
|
||||
line-height: 20px;
|
||||
font-size: 15px;
|
||||
}*/
|
||||
#coming-soon {
|
||||
top: -64px;
|
||||
margin-left: -228px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
.coming-soon-wrapper,
|
||||
.coming-soon-wrapper-transparent {
|
||||
width: 64px; /* 160, 128, 64 */
|
||||
border-radius: 35px;
|
||||
height: 64px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.coming-soon-time {
|
||||
font-size: 24px; /* 60, 48, 24 */
|
||||
line-height: 30px;
|
||||
}
|
||||
.coming-soon-date {
|
||||
line-height: 15px;
|
||||
font-size: 11px; /* 18, 15, 13 */
|
||||
}
|
||||
#coming-soon {
|
||||
top: -32px;
|
||||
margin-left: -150px;
|
||||
}
|
||||
|
||||
.coming-soon-wrapper+.coming-soon-wrapper,
|
||||
.coming-soon-wrapper-transparent+.coming-soon-wrapper-transparent {
|
||||
margin-left:8px;
|
||||
}
|
||||
|
||||
.coming-soon-date {
|
||||
display:block;
|
||||
}
|
||||
.comming-soon-date {
|
||||
color: #787873;
|
||||
line-height: 14px;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
<div id="content" class="content-comming-soon">
|
||||
|
||||
<div id="comming-soon" class="text-theme">
|
||||
<div class="comming-soon-wrapper">
|
||||
<span class="comming-soon-time">{{Counter.Tage}}</span>
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
.heading-page {
|
||||
|
||||
text-align: center;
|
||||
font-size: 60px;
|
||||
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.section-heading-page {
|
||||
background: #228fb8;
|
||||
color: white;
|
||||
|
||||
}
|
||||
.col-xs-12 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
width:1170px;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wrapper-table {
|
||||
display: table;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wrapper-table-cell {
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,30 @@
|
||||
<div class="c-block">
|
||||
<h2>Welcome Home!</h2>
|
||||
<a class="btn btn-primary" routerLink="/besucher">Zeige Besucher liste</a>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<div class="wrapper-table">
|
||||
<div class="wrapper-table-cell">
|
||||
<app-countdown></app-countdown>
|
||||
</div>
|
||||
<div class="section-heading-page">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<h1 class="heading-page">Annika & Damian</h1>
|
||||
<div class="subtitle-page text-center mt-10">20.08.2022</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Home</a>
|
||||
<a class="nav-link" routerLink="/home">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Unser Fest</a>
|
||||
@@ -17,43 +17,9 @@
|
||||
<a class="nav-link" href="#">Wunschbüechli</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Anmeldung zum Fest</a>
|
||||
<a class="nav-link" routerLink="/besucher">Anmeldung zum Fest</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- NAVBAR END -->
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
@@ -12,7 +12,7 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
</head>
|
||||
<body class="mat-typography">
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,4 +1,10 @@
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
|
||||
* {
|
||||
font-size: 15px;
|
||||
}
|
||||
html, body { height: 100%; }
|
||||
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Roboto, "Helvetica Neue", sans-serif;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user