Sunbird Portal Documentation
  1. Components
  2. LandingPageComponent

File

src/app/modules/public/components/landing-page/landing-page.component.ts

Implements

OnInit

Metadata

selector app-landing-page
styleUrls ./landing-page.component.scss
templateUrl ./landing-page.component.html

Index

Properties
Methods

Constructor

constructor(layoutService: LayoutService)
Defined in src/app/modules/public/components/landing-page/landing-page.component.ts:11
Parameters :
Name Type Optional
layoutService LayoutService No

Methods

ngOnInit
ngOnInit()
Defined in src/app/modules/public/components/landing-page/landing-page.component.ts:15
Returns : void

Properties

layoutConfiguration
Defined in src/app/modules/public/components/landing-page/landing-page.component.ts:11
Public layoutService
Type : LayoutService
Defined in src/app/modules/public/components/landing-page/landing-page.component.ts:13
 
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;
  }
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""