I have problem with connecting landing page to angular project. Before creation of main web application I've done landing in simple html / css / bootstrap / and some js libraries with down-scroll animations. But now when I implement my landing page to app, there appears white stripes and my landing does not stretch to the full width and height of the screen. Where I've made mistakes and how to fix them?
(Also I have css instead of scss in my landing.component.scss, and when I change it to scss there appears syntax problem)
index.html (here added js library with down-scroll animation)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Trainvia</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script defer src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyCpVhQiwAllg1RAFaxMWSpQruuGARy0Y1k&libraries=places"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
( ^^^ js library with animations)
</head>
<body class="mat-typography">
<ngx-app>Penis is loading...</ngx-app>
</body>
</html>
app content
app-routing.module
export const routes: Routes = [
{
path: 'panel',
canActivate: [AuthGuard],
loadChildren: () => import('./panel/panel.module')
.then(m => m.PanelModule),
},
{
path: '',
component: LandingComponent,
},
{
path: 'terms&conditions',
component: TermsConditionsComponent,
},
{
path: 'auth',
component: NbAuthComponent,
children: [
{
path: 'login',
component: NgxLoginComponent,
},
{
path: 'register',
component: NgxRegisterComponent,
},
{
path: 'request-password',
component: NgxRequestPasswordComponent,
},
{
path: 'reset-password',
component: NgxResetPasswordComponent,
},
],
},
{ path: '', redirectTo: '', pathMatch: 'full' },
{ path: '**', redirectTo: '' },
];
landing.component.html
<div style="background-color: black;">
<div class="content">
<div class="app-container body-tabs-shadow fixed-header">
<div class="section mx-auto">
<div class="container_landing">
<nav data-aos="fade-down" class="navbar navbar-expand-lg navbar-light bg-none div_bottom_margins">
<div class="nav_content2">
<a href=""><img src="assets/images/logo-landing.png" style="margin-top: 5px;" width=110px></a>
</div>
<button data-aos="fade-down" class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<!-- <li class="nav_link nav_content">-->
<!-- <a class="navbar_text" href="">How it works?<span class="sr-only">(current)</span></a>-->
<!-- </li>-->
<!-- <li class="nav_link nav_content ">-->
<!-- <a class="navbar_text" href="">Community</a>-->
<!-- </li>-->
<li class="nav-item">
<a class="navbar_text d-block d-md-block d-lg-none" href="/auth/login">Log in</a>
</li>
<li data-aos="fade-right" type="button" name="button"
class="btn-hover-shine btn btn-shadow btn-light d-block d-md-block d-lg-none get_started"
href="/auth/register"
>
GET STARTED
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col-md-7">
<div class="">
<div data-aos="fade-right">
<h1 class="h1_landing">LEIDKE OMA SPORDIALA<br>PERSONAALTREENER</h1>
</div>
<h2 data-aos="fade-right" class="h2_landing mt-3 mb-4 d-sm-block d-md-none">
Treener teab kõige paremini, kuidas edu sünnib.</h2>
<h2 data-aos="fade-left" class="h2_landing mt-4 d-none d-sm-none d-md-block div_bottom_margins">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusm tempor
<br> incididunt ut labore et dolore magna aliqua.</h2>
</div>
<div data-aos="fade-right" class="div_bottom_margins">
<a href="https://www.apple.com/ios/app-store/">
<img class="appstore_and_googleplay" src="assets/images/appstore.svg">
</a>
<a href="https://play.google.com/store">
<img class="appstore_and_googleplay" src="assets/images/playmarket.svg">
</a>
</div>
</div>
<div data-aos="fade-left" class="pointer_events col-md-5 d-none d-sm-none d-md-block">
<div class="section__hero">
<img class="crossFade__image" src="./images/1.png">
<img style="width:440px;top:-15%;right:35%;" class="crossFade__image" src="assets/images/2.png">
<img style="height: 680px;width:850px;top:-100px;right:7%;" class="crossFade__image"
src="assets/images/3.png">
</div>
</div>
</div>
<div class="div_bottom_margins d-sm-block d-md-none"></div>
</div>
</div>
<div class="section mx-auto mt-5">
<div class="container_landing container_margin_bottom">
<div class="row">
<div class="col-md-7">
<div class="">
<h1 data-aos="fade-right" class="h1_landing" style="line-height: 1.3;font-size:45px;">
Treenerite kliendibassi kasvatamine, moodsa<br>
tehnoloogia abil</h1>
<h2 data-aos="fade-right" class="mt-4 container_margin_bottom h2_landing">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh<br>
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad<br>
minim veniam, quis nostrud exerci tation ullamcorper.</h2>
</div>
<div class="mt-5 mb-4">
<a style="">
<button nbButton status="control" data-aos="fade-down" class="functional_buttons">BECOME A TRAINER
</button>
</a>
<a style="">
<button data-aos="fade-up" class="functional_buttons">FIND YOUR TRAINER</button>
</a>
</div>
</div>
<div data-aos="fade-left" class="col-md-5 mt-5 d-none d-sm-none d-md-block" id="huy">
<div class="card-hover-shadow-2x mb-3 card">
<div class="scroll-area-lg">
<div class="scrollbar-container">
<div class="p-2">
<ul class="todo-list-wrapper list-group list-group-flush">
<div class="col d-none d-sm-none d-md-block">
<div class="mt-3 mb-3 card text-white card-body"
style="background-color: rgb(51, 51, 51); border-color: rgb(51, 51, 51);">
<h5 class="text-white card-title cards_scrollh1">Pole aega?</h5>
<h5 class="cards_scrollh2">Me teame, mis tunne on siis, kui pole üldse vaba aega tegeleda
iga
kliendiga personaalselt. Autamatiseeri oma rutiinseid protsesse ja tegele arendamisega!
Vähe kliente?
</h5>
</div>
<div class="mb-3 card text-white card-body"
style="background-color: rgb(51, 51, 51); border-color: rgb(51, 51, 51);">
<h5 class="text-white card-title cards_scrollh1">Vähe kliente? </h5>
<h5 class="cards_scrollh2">Arendage targalt – kasutage klinetide saamiseks erinevaid
kanaleid.
Ühendage platformi kõikide suhtlusmeedia allikatega ja teenige rohkem!</h5>
</div>
<div class="mb-3 card text-white card-body"
style="background-color: rgb(51, 51, 51); border-color: rgb(51, 51, 51);">
<h5 class="text-white card-title cards_scrollh1">Kas kliendid maksavad kaardile
ülekandmisega?</h5>
<h5 class="cards_scrollh2">Kui võtate oma kursuste eest raha IP-kaardilt ja pakkumisest
vastu
- kaardilt kaardile - see pole seaduse seisukohast eriti hea. Tegutsege meie platvormil
seaduslikult!</h5>
</div>
</div>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mx-auto mt-5">
<div class="container_landing container_margin_bottom">
<div class="row justify-content-md-center">
<div class="col-md-12">
<div class="container_margin_bottom d-sm-block d-md-none">
<h1 data-aos="fade-down" class="h1_landing" style="line-height: 1.3;color: white;font-size:50px;">
<!-- <center>Connect with<br>Trainers & Experts<br>anytime, anywhere!</center> -->
Võtke ühendust
<br>Treeneritega ja Ekspertidega
<br>Ükskõik millal,
<br>Ükskõik kus
</h1>
</div>
<div class="container_margin_bottom d-none d-sm-none d-md-block">
<h1 data-aos="fade-down" class="h1_landing" style="line-height: 1.3;color: white;font-size:50px;">
Võtke ühendust Treeneritega
<br>Ükskõik millal, ükskõik kus
</h1>
</div>
<div class="mb-5">
<h2 data-aos="fade-up" class="h2_landing d-sm-block d-md-none" style="font-size:22px;">
Messenger,<br>E-planeerimine,<br>E-raamatupidamine,<br>videotreeningud.<br>
Mugav, lihtne, kaasaegne!<br>Kasuta võimalust!
</h2>
</div>
<div class="mb-5">
<h2 data-aos="fade-up" class="h2_landing d-none d-sm-none d-md-block" style="font-size:22px;">
Messenger, E-planeerimine, E-raamatupidamine, videotreeningud.<br>
Mugav, lihtne, kaasaegne! Kasuta võimalust!
</h2>
</div>
<div class="">
<a href="https://www.apple.com/ios/app-store/">
<img data-aos="fade-right" class="appstore_and_googleplay" src="assets/images/appstore.svg">
</a>
<a href="https://play.google.com/store">
<img data-aos="fade-left" class="appstore_and_googleplay" src="assets/images/playmarket.svg">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="seciton">
<div class="container_landing mb-5">
<div class="row">
<div class="col-md-6 d-none d-sm-none d-md-block">
<div data-aos="fade-down" class="row social_media_links">
<div class="col-md-1 offset-md-8 justify_contern">
<div class="d-flex justify-content-center">
<a href="https://twitter.com/">
<img src="assets/images/twitter.svg">
</a>
</div>
</div>
<div class="col-md-1">
<div class="d-flex justify-content-center">
<a href="https://www.instagram.com/">
<img src="assets/images/instagram.svg">
</a>
</div>
</div>
<div class="col-md-1">
<div class="d-flex justify-content-center">
<a href="https://www.facebook.com/">
<img src="assets/images/facebook.svg">
</a>
</div>
</div>
</div>
</div>
<div data-aos="fade-right" class="col-md-3 d-none d-sm-none d-md-block">
<ol>
<h3 class="h3_landing">SITEMAP</h3>
<br>
<a href="#">
<h4 class="footer_hover h4_landing">How it works?</h4>
</a>
<a href="#">
<h4 class="footer_hover h4_landing">Community</h4>
</a>
<br>
<a href="#">
<h4 class="footer_hover h4_landing">Techical Support</h4>
</a>
<a href="#">
<h4 class="footer_hover h4_landing">Contact</h4>
</a>
</ol>
</div>
<div data-aos="fade-left" class="col-md-3 d-none d-sm-none d-md-block">
<ol>
<h3 class="h3_landing">CONTACT</h3>
<br>
<a
href="https://www.google.ru/maps/place/%D0%9F%D0%BB%D0%BE%D1%89%D0%B0%D0%B4%D1%8C+%D1%81%D0%B2%D0%BE%D0%B1%D0%BE%D0%B4%D1%8B/@59.4345525,24.7427431,15.25z/data=!4m5!3m4!1s0x4692949e797629a3:0xe74465d7a60724db!8m2!3d59.4338268!4d24.7442177">
<h4 class="footer_hover h4_landing">The best Vatsla's office</h4>
</a>
<h4 class="h4_landing">Tallinn, Estonia</h4>
<br>
<a href="#">
<h4 class="footer_hover h4_landing">upskill@upskill.mail</h4>
</a>
<h4 class="footer_hover h4_landing">+37258878456</h4>
</ol>
</div>
<div data-aos="fade-right" class="col d-sm-block d-md-none mb-4">
<ol>
<h3 class="h3_landing">SITEMAP</h3>
<br>
<a href="#">
<h4 class="footer_hover h4_landing">How it works?</h4>
</a>
<a href="#">
<h4 class="footer_hover h4_landing">Community</h4>
</a>
<br>
<a href="#">
<h4 class="footer_hover h4_landing">Techical Support</h4>
</a>
<a href="#">
<h4 class="footer_hover h4_landing">Contact</h4>
</a>
</ol>
</div>
<div data-aos="fade-left" class="col d-sm-block d-md-none">
<ol>
<h3 class="h3_landing">CONTACT</h3>
<br>
<a
href="https://www.google.ru/maps/place/%D0%9F%D0%BB%D0%BE%D1%89%D0%B0%D0%B4%D1%8C+%D1%81%D0%B2%D0%BE%D0%B1%D0%BE%D0%B4%D1%8B/@59.4345525,24.7427431,15.25z/data=!4m5!3m4!1s0x4692949e797629a3:0xe74465d7a60724db!8m2!3d59.4338268!4d24.7442177">
<h4 class="footer_hover h4_landing">The best Vatsla's office</h4>
</a>
<h4 class="h4_landing">Tallinn, Estonia</h4>
<br>
<a href="#">
<h4 class="footer_hover h4_landing">upskill@upskill.mail</h4>
</a>
<h4 class="footer_hover h4_landing">+37258878456</h4>
</ol>
</div>
</div>
</div>
</div>
<footer id="footer" class="footer navbar-fixed-bottom">
<div class="basement mb-2">
<div class="basement_line mb-3 d-none d-sm-none d-md-block"
style="background-color:white;opacity:0.3;width:100%;height:1px;"></div>
<div class="basement_content d-none d-sm-none d-md-block">
<div class="row">
<div class="col">
<h5 class="footer_links h5_landing">© 2020 <span class="h1_landing"
style="font-size:14px;">UPSKILL</span>
All Right Reserved</h5>
</div>
<div class="col row">
<div class="d-flex col justify-content-end">
<a href="#">
<h5 class="footer_links h5_landing footer_hover">Terms & Conditions</h5>
</a>
<a href="#">
<h5 class="footer_links h5_landing footer_hover">Privacy Policy</h5>
</a>
</div>
</div>
</div>
</div>
<div class="basement_content d-sm-block d-md-none">
<div class="text-center d-flex justify-content-center mb-1">
<a href="#">
<h5 class="footer_links h5_landing footer_hover">Terms & Conditions</h5>
</a>
<a href="#">
<h5 class="footer_links h5_landing footer_hover">Privacy Policy</h5>
</a>
</div>
<div class="basement_line mb-3" style="background-color:white;opacity:0.3;width:100%;height:1px;"></div>
<div class="col d-block d-sm-block d-md-none text-center">
<h5 class="footer_links h5_landing mb-4">© 2020 <span class="h1_landing"
style="font-size:14px;">UPSKILL</span> All Right
Reserved</h5>
</div>
</div>
</div>
</footer>
</div>
landing.component.scss
body {
overflow-x: hidden;
}
.cards_scrollh1 {
font-size: 25px !important;
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-style: italic;
}
.cards_scrollh2 {
font-family: 'Roboto', sans-serif;
font-style: italic;
font-size: 18px;
}
.scrollbar-container {
scroll-behavior: smooth;
}
.content {
padding: 0px 12%;
flex: 1;
}
.phones_noborders {
display: none;
}
.phones {
position: absolute;
width: 100%;
top: 1450px;
display: block;
}
.content_inner {
padding: 0px 33px;
flex: 1;
}
.nav_content {
padding: 1rem 2rem;
display: flex;
}
.nav_content2 {
padding: 2rem 2rem 2rem 0rem;
display: flex;
}
.nav_content3 {
padding: 2rem 0rem 2rem 2rem;
display: flex;
}
.body_content {
padding: 0px 48px;
display: flex;
}
.container_landing {
width: 100%;
margin-right: auto;
margin-left: auto;
}
.h3_landing {
font-family: 'Roboto', sans-serif;
font-weight: 200;
color: white;
opacity: 0.7;
font-size: 13px;
}
.h4_landing {
font-family: 'Roboto', sans-serif;
font-weight: 400;
color: white;
font-size: 15px;
}
.h5_landing {
font-family: 'Roboto', sans-serif;
font-weight: 200;
color: white;
text-transform: none;
font-size: 12px;
opacity: 0.4;
}
.social_media_links {
img {
width: 17px;
transition: 0.2s;
&:hover {
width: 28px;
}
}
}
.footer_links {
padding: 0px 20px 0px 20px;
}
.footer_hover {
&:hover {
text-decoration: underline;
}
}
.pointer_events {
pointer-events: none;
}
.div_bottom_margins {
margin: 0px 0px 70px 0px;
}
.container_margin_bottom {
margin: 0px 0px 200px 0px;
}
.navbar_text {
&:hover {
color: white;
}
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 15px;
color: white;
}
.get_started {
color: #464646 !important;
font-size: 18px !important;
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-style: italic;
z-index: 10;
position: relative;
background-color: white !important;
}
.appstore_and_googleplay {
width: 130px;
flex: auto;
margin: 5px 10px 5px 0px;
transition: 0.3s;
&:hover {
width: 135px;
}
}
.functional_buttons {
color: #ffffff;
font-size: 20px;
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-style: italic;
border: 3px solid white;
border-radius: 5px;
padding: 13px 28px;
border-radius: 37px;
margin-right: 2%;
background-color: transparent;
margin: 0px 10px 15px 0px;
cursor: pointer;
transition: 0.5s;
&:hover {
background-color: white;
color: black;
}
&:focus {
background-color: white;
color: black;
}
}
.bar {
width: 20px;
height: 8px;
border: 1px solid #fff;
margin: 5px;
cursor: pointer;
transition: 0.5s;
&:hover {
background-color: white;
}
&:focus {
background-color: white;
}
}
.section__hero {
position: relative;
width: 650px;
height: 650px;
}
.crossFade__image {
position: absolute;
width: 100%;
height: 100%;
top: -20%;
right: 25%;
opacity: 0;
transition: all 4s ease-in-out;
}
.crossFade__image--active {
opacity: 1;
}
.h1_landing {
line-height: 1.1;
color: white;
font-size: 62px;
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-style: italic;
}
.h2_landing {
line-height: 1.8;
font-style: italic;
font-weight: 300;
color: white;
font-size: 14px;
font-family: 'Roboto', sans-serif;
position: relative;
z-index: 10;
}
@media (min-width: 1400px) {
.section {
width: 1100px !important;
}
}
@media (max-width: 1200px) {
.phones {
display: none !important;
}
}
@media (min-width: 1500px) {
.phones {
display: none !important;
}
.phones_noborders {
display: block !important;
position: absolute;
width: 1500px;
top: 1480px;
}
}
@media (max-width: 768px) {
.container_margin_bottom {
margin: 0px 0px 100px 0px !important;
}
}
@media (max-width: 1024px) {
.get_started {
margin: 20px 25px 0px 25px;
}
}
result:
Aucun commentaire:
Enregistrer un commentaire