Portfolio demo course

In this example below you will see how to do a Portfolio demo course with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by tibomahe, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tibomahe ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Portfolio demo course</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <header id="top">
  <img src="http://vignette3.wikia.nocookie.net/anchorman/images/0/0c/Brick-tamland-39895.jpg/revision/latest?cb=20120329162028" alt="photo Brick Tamland" class="header__picture">
  <h1 class="h1">Brick Tamland</h1>
  <h2 class="h2">Chief Meteorologist</h2>
</header>

<nav class="nav">
  <a class="js-smoothScroll" href="#appearance" title="">Appearance</a>
  <a class="js-smoothScroll" href="#personality" title="">Personality</a>
  <a class="js-smoothScroll" href="#video" title="video">Video</a>
  <a class="js-smoothScroll" href="#skills" title="skills">Skills</a>
  <a href="#quotes" class="js-smoothScroll">Quotes</a>
</nav>

<div class="container grid-content clearfix">

  <aside class="grid-content__left aside-content">
    <h3 class="h3">Présentation</h3>
    <p class="p">I'm Brick Tamland. People seem to like me because I am polite and I am rarely late. I like to eat ice cream and I really enjoy a nice pair of slacks. Years later, a doctor will tell me that I have an I.Q. of 48 and am what some people call mentally
      retarded.</p>
    <img src="https://a1-images.myspacecdn.com/images01/66/4cce0a3361347ffcc4d8d47e44c3cf18/full.jpg" alt="brick picture" class="media media--picture">
  </aside>
  <main class="grid-content__right main-content">

    <section>
      <p class="p lead">Brick Tamland is the weatherman in Anchorman: The Legend of Ron Burgundy and Anchorman 2: The Legend Continues. He is one of the main characters of the series and is portrayed by Steve Carell.</p>
    </section>

    <hr>

    <section>
      <h3 class="h3" id="appearance">Appearance</h3>
      <p class="p">Brick is a nerdy-looking short, broad guy in his forties, with dark hair in a side-part, and 1970s-style glasses and clothing. Although at the time of the first film, Brick's clothing (and glasses) were in fashion when the film was set. (i.e- the
        1970's).</p>
    </section>

    <hr>

    <section>
      <h3 class="h3" id="personality">Personality</h3>
      <p class="p"><strong>Brick Tamland</strong> is a simple-minded, kind person, who occasionally has fits of rage, like when he speared someone with a trident in the first movie. He is socially awkward and has few friends, but his coworkers include him in their
        adventures. Doctors claim that Brick has an I.Q. of 48 and is what some people call: "Mentally Retarded". He is a loveable character. It is hypothesized that Brick has Wernicke's Aphasia.</p>
    </section>

    <hr>

    <section>
      <h3 class="h3" id="video">Video presentation</h3>
      <div class="media">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/QN8j8wLmKIA?rel=0" frameborder="0" allowfullscreen></iframe>
      </div>
    </section>

    <hr>

    <section>
      <h3 class="h3" id="skills">Skills</h3>
      <div class="skills-table clearfix">
        <div class="skills-table__label">
          Back End
        </div>
        <ul class="skills-table__list">
          <li class="clearfix">
            <div class="skill-table__name">
              <p class="p">PHP (Symfony2)</p>
            </div>
            <ul class="skill-table__stars">
              <li class="fa fa-star"></li>
              <li class="fa fa-star"></li>
              <li class="fa fa-star"></li>
              <li class="fa fa-star"></li>
              <li class="fa fa-star-o"></li>
            </ul>
          </li>
          <li class="clearfix">
            <div class="skill-table__name">
              <p class="p">NodeJS</p>
            </div>
            <ul class="skill-table__stars">
              <li class="fa fa-star"></li>
              <li class="fa fa-star"></li>
              <li class="fa fa-star-o"></li>
              <li class="fa fa-star-o"></li>
              <li class="fa fa-star-o"></li>
            </ul>
          </li>
          <li class="clearfix">
            <div class="skill-table__name">
              <p class="p">Ruby On Rails</p>
            </div>
            <ul class="skill-table__stars">
              <li class="fa fa-star"></li>
              <li class="fa fa-star"></li>
              <li class="fa fa-star"></li>
              <li class="fa fa-star-o"></li>
              <li class="fa fa-star-o"></li>
            </ul>
          </li>
          <li class="clearfix">
            <div class="skill-table__name">
              <p class="p">Python</p>
            </div>
            <ul class="skill-table__stars">
              <li class="fa fa-star"></li>
              <li class="fa fa-star"></li>
              <li class="fa fa-star"></li>
              <li class="fa fa-star"></li>
              <li class="fa fa-star-o"></li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="skills-table clearfix">
        <div class="skills-table__label">
          Front End
        </div>
        <ul class="skills-table__list">
          <li class="clearfix">
            <div class="skill-table__name">
              <p class="p">JavaScript</p>
            </div>
            <ul class="skill-table__stars">
              <li class="fa fa-star"></li>
              <li class="fa fa-star"></li>
              <li class="fa fa-star"></li>
              <li class="fa fa-star"></li>
              <li class="fa fa-star-o"></li>
            </ul>
          </li>
          <li class="clearfix">
            <div class="skill-table__name">
              <p class="p">AngularJS</p>
            </div>
            <ul class="skill-table__stars">
              <li class="fa fa-star"></li>
              <li class="fa fa-star"></li>
              <li class="fa fa-star-o"></li>
              <li class="fa fa-star-o"></li>
              <li class="fa fa-star-o"></li>
            </ul>
          </li>
          <li class="clearfix">
            <div class="skill-table__name">
              <p class="p">ReactJS</p>
            </div>
            <ul class="skill-table__stars">
              <li class="fa fa-star"></li>
              <li class="fa fa-star"></li>
              <li class="fa fa-star"></li>
              <li class="fa fa-star-o"></li>
              <li class="fa fa-star-o"></li>
            </ul>
          </li>
          <li class="clearfix">
            <div class="skill-table__name">
              <p class="p">Redux</p>
            </div>
            <ul class="skill-table__stars">
              <li class="fa fa-star"></li>
              <li class="fa fa-star"></li>
              <li class="fa fa-star"></li>
              <li class="fa fa-star"></li>
              <li class="fa fa-star-o"></li>
            </ul>
          </li>
          <li class="clearfix">
            <div class="skill-table__name">
              <p class="p">CycleJS</p>
            </div>
            <ul class="skill-table__stars">
              <li class="fa fa-star"></li>
              <li class="fa fa-star"></li>
              <li class="fa fa-star"></li>
              <li class="fa fa-star"></li>
              <li class="fa fa-star-o"></li>
            </ul>
          </li>
          <li class="clearfix">
            <div class="skill-table__name">
              <p class="p">Flux</p>
            </div>
            <ul class="skill-table__stars">
              <li class="fa fa-star"></li>
              <li class="fa fa-star"></li>
              <li class="fa fa-star-o"></li>
              <li class="fa fa-star-o"></li>
              <li class="fa fa-star-o"></li>
            </ul>
          </li>
          <li class="clearfix">
            <div class="skill-table__name">
              <p class="p">xstream</p>
            </div>
            <ul class="skill-table__stars">
              <li class="fa fa-star"></li>
              <li class="fa fa-star"></li>
              <li class="fa fa-star"></li>
              <li class="fa fa-star-o"></li>
              <li class="fa fa-star-o"></li>
            </ul>
          </li>
          <li class="clearfix">
            <div class="skill-table__name">
              <p class="p">RxJS</p>
            </div>
            <ul class="skill-table__stars">
              <li class="fa fa-star"></li>
              <li class="fa fa-star"></li>
              <li class="fa fa-star"></li>
              <li class="fa fa-star"></li>
              <li class="fa fa-star-o"></li>
            </ul>
          </li>
        </ul>
      </div>
    </section>

    <hr />

    <section>
      <h3 class="h3" id="quotes">Quotes</h3>
      <ul class="quotes-list">
        <li>I would like to extend to you an invitation to the pants party.</li>
        <li>"Yeah, I ate a big red candle."</li>
        <li>"I think you should name it (squirrel) Dave."</li>
        <li>"Where'd you get those clothes, at the toilet store?"</li>
        <li>"I just burnt my tongue."</li>
        <li>"I read somewhere that periods attract bears...the bears can smell the menstruation!"</li>
        <li>"I love carpet. I love lamp."</li>
        <li>"I DON'T KNOW WHAT WE'RE YELLING ABOUT!"</li>
        <li>"LOUD NOISES!"</li>
        <li>"....You're not Ron..."</li>
        <li>"I don't have any legs, Ron."'</li>
      </ul>
    </section>

    <section>
      <a href="#top" class="js-smoothScroll back-to-top">Back to top</a>
    </section>
  </main>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/tibomahe/portfolio-demo-course-ygBrOV */
/* --------------- *\
	CONTENTS

	#Reset
	#Global
	#Typography
	#Header
	#Navigation
	#Grid
	#Utilities
	#Content
	#Skills-table

\* --------------- */

/* --------------- *\
	#Reset
\* --------------- */

/* https://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* http://www.paulirish.com/2012/box-sizing-border-box-ftw/ (2015/04/28)*/
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/* --------------- *\
	#Global
\* --------------- */

:root {
	/* Colors */
	--blue-navy: #2C4158;
	--blue-steel: #3F5E7F;
	--blue-sky: #7EBCFF;
	--grey-dark: #d9d9d9;
	--grey-light: #ebebeb;
	--grey-text: #303030;
	/* Default spacing */
	--spacing-factor: 8;
}

html,
body {
	font-size: 12px;
	color: var(--grey-text);
	font-family: Helvetica;
}

@media (min-width: 768px) {
	html,
	body {
		font-size: 16px;
	}
}

/* --------------- *\
	#Typography
\* --------------- */

.h1 {
	color: var(--blue-sky);
	font-size: 3rem;
	text-transform: uppercase;
	margin: 0 0 calc(var(--spacing-factor) * 1px) 0;
}

.h2 {
	color: var(--blue-navy);
	margin: 0 0 calc(var(--spacing-factor) * 1px) 0;
	font-size: 2rem;
}

.h3 {
	color: var(--blue-sky);
	margin: 0 0 calc(var(--spacing-factor) * 2px) 0;
	font-size: 1.5rem;
}

.p {
	margin: 0 0 calc(var(--spacing-factor) * 1px) 0;
	font-size: 1rem;
	line-height: 1.4;
}

.lead {
	font-size: 1.3rem;
	line-height: 1.5;
	opacity: 0.8;
	margin: 0 0 calc(var(--spacing-factor) * 3px) 0;
}

/* --------------- *\
	#Header
\* --------------- */

header {
	text-align: center;
	padding: calc(var(--spacing-factor) * 1px)
}

.header__picture {
	width: 140px;
	border-radius: 5px;
	margin: 0 0 calc(var(--spacing-factor) * 2px) 0;
}

/* --------------- *\
	#Navigation
\* --------------- */

.nav {
	text-align: center;
	background: var(--grey-light);
	margin: calc(var(--spacing-factor) * 3px) 0;
}

.nav a {
	display: inline-block;
	text-decoration: none;
	text-transform: lowercase;
	font-variant: small-caps;
	font-size: 1.5rem;
	padding: 1rem;
	background: var(--grey-dark);
	color: var(--grey-text);
	transition: background 0.4s, color 0.4s;
}

.nav a:hover,
.nav a:focus {
	background: var(--blue-sky);
	color: white;
}

/* --------------- *\
	#Grid
\* --------------- */

/* Container */
.container {
	position: relative;
	margin: 0 auto;
	max-width: 100%;
}

@media (min-width: 768px) {
	.container {
		width: 1140px;
	}
}

/* grid content */
.grid-content__left,
.grid-content__right {
	float: left;
	width: 100%;
}

@media (min-width: 768px) {
	.grid-content__left {
		width: 25%;
	}

	.grid-content__right {
		width: 75%;
	}
}

/* section */

section {
	margin-bottom: calc(var(--spacing-factor) * 4px);
}

/* --------------- *\
	#Utilities
\* --------------- */

.media {
	max-width: 100%;
	margin: calc(var(--spacing-factor) * 3px) auto;
}

.media--picture {
	width: 300px;
}

iframe {
	width: 100%;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

hr {
	margin: 0 auto calc(var(--spacing-factor) * 4px);
	max-width: 500px;
	border-color: var(--grey-light);
}

/* --------------- *\
	#Content
\* --------------- */

.aside-content {
	padding: 0 calc(var(--spacing-factor) * 2px);
}

.main-content {
	padding: 0 calc(var(--spacing-factor) * 2px) calc(var(--spacing-factor) * 10px);
}

.quotes-list li {
  padding-bottom: calc(var(--spacing-factor) * 2px);
}

.quotes-list li {
  position: relative;
  text-align: center;
  font-size: 2rem;
  font-style: italic;
  padding: calc(var(--spacing-factor) * 2px) calc(var(--spacing-factor) * 2px) calc(var(--spacing-factor) * 6px);
  width: 90%;
  margin: auto;
}
@media (min-width: 768px) {
  .quotes-list li {
      width: 60%;
  }
}

.quotes-list li:before,
.quotes-list li:after {
  content: '"';
  position: absolute;
  font-size: 4rem;
  color: var(--blue-steel);
}
.quotes-list li:before {
  top: 0;
  left: -0.5rem;
}
.quotes-list li:after {
  bottom: 0;
  right: -0.5rem;
}
.quotes-list li:nth-child(even):before,
.quotes-list li:nth-child(even):after {
    color: var(--blue-sky);
}

.back-to-top {
  display: block;
  text-align: center;
  color: var(--blue-sky);
  text-decoration: none;
  transition: color 0.4s;
}
.back-to-top:hover,
.back-to-top:focus {
  color: var(--blue-navy);
}

/* --------------- *\
	#Skills-table
\* --------------- */

.skills-table__label,
.skills-table__list,
.skill-table__name,
.skill-table__stars {
	float: left;
	width: 100%;
	padding: 0;
}

@media (min-width: 768px) {
	.skills-table__label {
		width: 25%;
	}
	.skills-table__list {
		width: 75%;
	}
	.skill-table__name {
		width: 50%;
	}
	.skill-table__stars {
		width: 50%;
	}
}

.skills-table {
	padding-bottom: calc(var(--spacing-factor) * 2px);
}
.skills-table__label {
	color: var(--grey-dark);
	padding-bottom: calc(var(--spacing-factor) * 1px);
}

.skill-table__stars {
	text-align: right;
	li {
		list-style: none;
		display: inline-block;
	}
}



/*Downloaded from https://www.codeseek.co/tibomahe/portfolio-demo-course-ygBrOV */
// Handle click event on our selector
$('.js-smoothScroll').on('click', function() {
	// cache the target and the parameter
	var $target = $(this.hash),
		paddingTop = 80;
	// Check feasibility
	if ($target.length) {
		// Animate method on body
		$('html, body').animate({
			// paramaeter --> scroll the distance to target
			// minus the paddingTop parameter
			scrollTop: $target.offset().top - paddingTop,
		}, 1000);
		return false;
	}
});

Comments