Nadhirah Shukri's Portfolio Styleguide

Text Elements

Project Title - homepage

CSS Selector

.home-project-title

code

<h2 class="home-project-title">UN Global Goals</h2>

Rendered element

NORCO

Project subtitle- homepage

CSS Selector

.home-project-subtitle

code

<h3 class="home-project-subtitle">Website</p>

Rendered Element

Website

Project page - Heading 1

CSS Selector

.project-title

code

<h1 class="project-title">UN Global Goals</h1>

Rendered element

UN Global Goals

Project page - tagline

CSS selector

.project-tagline

code

<h2 class="project-tagline">Redefinding data visualization to end extreme poverty, decrease inequality, and fix climate change</h2>

Rendered element

Redefinding data visualization to end extreme poverty, decrease inequality, and fix climate change

Project Heading 3

CSS Selector

.project-heading3

code

<h3 class="project-heading3">Understanding context</h3>

Rendered element

Understanding context

Paragraph

CSS Selector

.project-paragraph

code

<p class="project-paragraph">When customers are in-store, they can view the website on their phone or the in-store tablet and read riding stories shared by other Norco riders to reaffirm their purchase decision. Later, these customers can share their stories to riders via Twitter.</p>

Rendered element

When customers are in-store, they can view the website on their phone or the in-store tablet and read riding stories shared by other Norco riders to reaffirm their purchase decision. Later, these customers can share their stories to riders via Twitter.

Highlighted Text

CSS Selector

.text-highlight

code

<span class="text-highlight">a Digital Boardroom that displays data of the 17 Global Goals launched by United Nations, which helps stakeholders to focus on areas that requires the most work and investment </span>

Rendered element

SAP collaborated with Global Partnership for Sustainable Development Data to create a Digital Boardroom that displays data of the 17 Global Goals launched by United Nations, which helps stakeholders to focus on areas that requires the most work and investment . The Global Goals aim to end extreme poverty, decrease inequality, and fix climate change by 2030.

Navigation

Navigation button

CSS Selector

.nav-button

code

<a href="about.html"><h2 class="nav-button" id="nav-left">about</h2></a>

Rendered element

about

Grid

CSS selector

.grid

.grid-item

Sample code:


          <div class="grid">
          

            <div class="grid-item">column 1</div>
            

            <div class="grid-item">column 2</div>
            

            <div class="grid-item">column 3</div>
            

            <div class="grid-item">column 4</div>
            

            <div class="grid-item">column 5</div>
            

            <div class="grid-item">column 6</div>
            

          </div>

Rendered element:

column 1

column 2

column 3

column 4

column 5

column 6

Image

CSS Selector

.project-content-image

code

Rendered element

Colour Scheme

#5A0377

#333333

#A3A2A2

#e8e8e8