Portfolio Styleguide

by Sabrina He, for IAT 339

Interactive Elements

Colour Palette

Background

R232 G220 B211

#e8dcd3

Body Text

R59 G59 B59

#3B3B3B

Secondary Background

R122 G137 B163

#7a89a3

Call to Action

R87 G115 B199

#5773C7

Text Styling

This is an in-text-link.

HTML

								
<p>This is an
	<a href="#" class="hyperlink">in-text-link</a>.
</p>

CSS

								
.hyperlink{
	color: #5773C7;
	transition: all 0.3s ease;
	font-style: italic;
}

.hyperlink:hover, .hyperlink:active, .hyperlink:focus {
	text-decoration: overline;
	text-decoration-color: #5773C7;
}

Heading 1

Heading 2

Heading 3

Heading 4

This is the body text styling. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

CSS

								
h1{
	font-family: 'Libre Baskerville', Times, serif;
	font-weight: 400;
	font-size: 2em;
	color: #5773C7;
	line-height: 1.5;
	margin-bottom: 1rem;
	max-width: 80%;
}

h2{
	font-family: 'Libre Baskerville', Times, serif;
	font-weight: 400;
	font-size: 0.8em;
	color: #5773C7;
	margin-top: 1rem;
}

h3{
	font-family: 'Libre Baskerville', Times, serif;
	font-weight: 400;
	font-size: 1.5em;
	margin-top: 0; 
	margin-bottom: 0.7rem; 
	line-height: 1.8;
}

h4{
	font-family: 'Libre Baskerville', Times, serif;
	font-weight: 400;
	font-size: 1em;
	margin-bottom: 0;
}

Blockquote

The most effective teaching and learning occurred where the parents, teachers, and students communicated well, demonstrated mutual respect for one another, shared a sense of common purpose, and adopted child-centred, as opposed to teacher-centered, goals.

(Upitis, R., Abrami, P. C., Brook, J., & King, M., 2017)

HTML

								
<blockquote>The most effective teaching and learning occurred where the parents, teachers, and students communicated well, demonstrated mutual respect for one another, shared a sense of common purpose, and adopted child-centred, as opposed to teacher-centered, goals.
<p class="cite">(Upitis, R., Abrami, P. C., Brook, J., & King, M., 2017)</p>
</blockquote>

CSS

								
blockquote{
	font-size: 0.9em;
	margin-top: 3rem;
	margin-bottom: 2rem;
}

blockquote:before {
  color: #5773C7;
  content: open-quote;
  font-family: 'Libre Baskerville', Times, serif;
  font-size: 6em;
  line-height: 0.1em;
  vertical-align: -0.4em;
  opacity: 0.5;
}

Modular Pattern Elements

Main Navigation Bar

HTML

								
<nav class="nav-container" id="nav-hide">
	<div class="nav-home">
		<a href="./index.html" class="h2-nav-home home">it's Sabrina</a>
	</div>
	<div class="nav-tabs">
		<ul>
			<li class="nav-tabs-item"><a href="#projects" class="h2-nav nav-selected">projects</a></li>
			<li class="nav-tabs-item"><a href="./playground.html" class="h2-nav">playground</a></li>
			<li class="nav-tabs-item"><a href="./about.html" class="h2-nav">about</a></li>
		<ul>
	</div>
</nav>

Javascript

								
<script>
	var prevScrollpos = window.pageYOffset;
	window.onscroll = function() {
	var currentScrollPos = window.pageYOffset;
	  if (prevScrollpos > currentScrollPos) {
	    document.getElementById("nav-hide").style.top = "0";
	  } else {
	    document.getElementById("nav-hide").style.top = "-60px";
	  }
	  prevScrollpos = currentScrollPos;
	}
</script>

Footer

HTML

								
<footer>
	<div class="footer-left">
		<h2>© 2020 by Sabrina He.</h2>
	</div>
	<div class="footer-right">
		<div class="footer-tabs">
			<ul>
				<li class="footer-tabs-item"><a href="./styleguide.html" class="h2-nav">styleguide</a></li>
				<li class="footer-tabs-item"><a href="./citations.html" class="h2-nav">citations</a></li>
			</ul>
		</div>
	</div>
</footer>

Project Preview

Ensemble

UX/UI Design

illustrated ensemble app ensemble app mockups

HTML

								
<div class="project-container">
	<div class="single-project">
		<div class="project-name-container">		
			<h3 class="project-item"><a href="./project-ensemble.html" class="project-name">Ensemble</a></h3>
			<p class="project-item">UX/UI Design</p>
		</div>
		<div class="project-img-reveal">
			<a href="#">
				<img src="img/ensemble-preview.png" alt="illustrated ensemble app">
				<img src="img/ensemble-hover.png" alt="ensemble app mockups" class="change-img">
			</a>
		</div>
	</div>
</div>

CSS

							
.landing{
	margin-top: 10rem;
	margin-bottom: 10rem;
	/*height: 100vh;*/
}

.project-container{
	margin: 1.5rem 0 3rem 0;
}

.project-list{
	margin-bottom: 5rem;
}

.project-img-reveal{
	display: inline-block;
	position: relative;
}

.project-img-reveal .change-img {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}

.project-img-reveal:hover .change-img {
    display: inline;
}

Accordion List

1. Item 1

Description.

2. Item 2

Description.

3. Item 3

Description.

HTML

								
<details>
	<summary>1. Item 1</summary>
	<p>Description.</p>
</details>
<details>
	<summary>2. Item 2</summary>
	<p>Description.</p>
</details>
<details>
	<summary>3. Item 3</summary>
	<p>Description.</p>
</details>

CSS

							
details > p {
  padding: 0 1.2rem;
}

details > summary:hover, details > summary:active, details > summary:focus{
	color: #5773C7;
	text-decoration: overline;
	text-decoration-color: #5773C7;
}

summary::-webkit-details-marker{
  color: #3B3B3B;
  opacity: 0.6;
}

Image Arrangement in Playground

illustration of a girl by a blue window
Spe menu design for ZenQ dessert store
Drawing of an elephant with flowers

HTML

					
<div class="playground-container">
	<div class="playground-2 illust-1">
		<img src="img/illustration-1.jpg" alt="illustration of a girl by a blue window">
	</div>
	<div class="playground-1 playground-prj">
		<img src="img/monstermenu-thumbnail.jpg" alt="Spe menu design for ZenQ dessert store">
	</div>
	<div class="playground-3">
		<img src="img/illustration-4.jpg" alt="Drawing of an elephant with flowers">
	</div>
</div>