src/app/modules/public/components/landing-page/landing-page.component.ts
OnInit
| selector | app-landing-page |
| styleUrls | ./landing-page.component.scss |
| templateUrl | ./landing-page.component.html |
Properties |
|
Methods |
constructor(layoutService: LayoutService)
|
||||||
|
Parameters :
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| layoutConfiguration |
| Public layoutService |
Type : LayoutService
|
import { Component, OnInit } from '@angular/core';
import { LayoutService } from '@sunbird/shared';
@Component({
selector: 'app-landing-page',
templateUrl: './landing-page.component.html',
styleUrls: ['./landing-page.component.scss']
})
export class LandingPageComponent implements OnInit {
layoutConfiguration;
constructor(public layoutService: LayoutService) { }
ngOnInit() {
this.layoutConfiguration = this.layoutService.initlayoutConfig();
}
}
<app-landing-section [textToDisplay]=""
[layoutConfiguration]="layoutConfiguration" [noTitle]="false"></app-landing-section>
<div class="sbt-fluid-content-bg">
<div class="landing-page-section mb-20 relative9">
<div class="ui container">
<div class="ui stackable grid pb-20 mt-0">
<div class="six wide column">
<img class="ui fluid image" src="{{'assets/images/landingPage.jpg' | cdnprefixurl}} " />
</div>
<div class="six wide column">
<p>In 2000, ten years later, the international community met again at the World Education Forum in Dakar, Senegal,
an event which drew 1100 participants.</p>
<p>The forum took stock of the fact that many countries were far from having reached the goals established at the
World Conference on Education for All in 1990.</p>
<br/>
<p>The participants agreed on the Dakar Framework for Action which re-affirmed their commitment to achieving Education
for All by the year 2015, and identified six key measurable education goals which aim to meet the learning
needs of all children, youth and adults by 2015.</p>
<br/>
<a href="#">Read More > </a>
</div>
</div>
</div>
</div>
<div class="ui container relative9">
<div class="ui stackable grid">
<div class="eight wide column ">
<div class="ui segment">
<div class="header p-10 segment-heading">
<span>Featured Articles</span>
<a href="#" class="right-floated">View All</a>
</div>
<br>
<div class="ui two stackable cards">
<div class="ui card">
<div class="content card-opacity">
<div class="description">
<p>Enrollment info for life skill training Enrollment info for life skill training Enrollment info
for life skill training Enrollment info for life skill training Enrollment info for life
skill training Enrollment info for life skill training</p>
</div>
</div>
<h4 class="article-header-padding">Enrollment info for life skill training</h4>
</div>
<div class="ui card">
<div class="content card-opacity">
<div class="description">
<p>Polytechnics information june 2017 Polytechnics information june 2017 Polytechnics information
june 2017 Polytechnics information june 2017 Polytechnics information june 2017 Polytechnics
information june 2017</p>
</div>
</div>
<h4 class="article-header-padding">Polytechnics information june 2017</h4>
</div>
<div class="ui card">
<div class="content card-opacity">
<div class="description">
<p>Academic inspection formats Academic inspection formats Academic inspection formats Academic
inspection formats Academic inspection formats Academic inspection formats</p>
</div>
</div>
<h4 class="article-header-padding">Academic inspection formats</h4>
</div>
<div class="ui card">
<div class="content card-opacity">
<div class="description">
<p>ABC initiatives in practice ABC initiatives in practice ABC initiatives in practice ABC initiatives
in practice ABC initiatives in practice ABC initiatives in practice</p>
</div>
</div>
<div class="article-header-padding">ABC initiatives in practice</div>
</div>
</div>
</div>
</div>
<div class="four wide column">
<div class="ui segment">
<div class="content">
<div class="header segment-heading">
<span>Announcements</span>
<a class="right-float">View All</a>
</div>
<div class="description mt-10">
<div class="ui relaxed divided list">
<div class="item">
<div class="content">
<a class="header text-decoration-underline">Exam Date Announced </a>
<br>
<div class="description">An excellent polish restaurant, quick delivery and hearty, filling meals.</div>
</div>
</div>
<br/>
<div class="item">
<div class="content">
<br/>
<a class="header text-decoration-underline">Exam Date Announced </a>
<br>
<div class="description">An excellent polish restaurant, quick delivery and hearty, filling meals.</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="ui segment">
<div class="content">
<div class="header segment-heading">
<span>Calendar</span>
<a class="right-float">View All</a>
</div>
</div>
</div>
<button type="button" onclick="openModal()" class="ui basic fluid button mt-5">ORGANIZATIONS</button>
</div>
</div>
</div>
</div>
<router-outlet></router-outlet>
./landing-page.component.scss
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.landing-page-section {
background-color:var(--sb-landing-page-bg);
border-bottom: calculateRem(1px) solid rgba(var(--rc-rgba-gray), 0.79);
-webkit-box-shadow: 0 calculateRem(1px) calculateRem(3px) rgba(var(--rc-rgba-black), 0.075);
box-shadow: 0 calculateRem(1px) calculateRem(3px) rgba(var(--rc-rgba-black), 0.075);
}
.landing-page-image {
margin: calculateRem(40px) 0 calculateRem(40px) 0;
}
.landing-page-image img {
border-radius: 0.65em;
}
.landing-page-description {
padding-top: 3em;
}
.landing-page-description p {
margin: 0;
font-size: calculateRem(14px);
}
.ui.card>.card-opacity {
opacity: 0.2;
}
.ui.card .article-header-padding {
padding: 0 0 1em 1em;
font-weight: bold;
font-size: 1.25em;
}
.ui.segment .segment-heading {
font-weight: bold;
font-size: 1.25em;
}