Skip to content

Instantly share code, notes, and snippets.

@Spesm

Spesm/index.html

Created October 17, 2018 11:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Spesm/67f1c144f9d1a26c92b06f5815c46a40 to your computer and use it in GitHub Desktop.
Save Spesm/67f1c144f9d1a26c92b06f5815c46a40 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Hello World!</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<!-- Web fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fahkwang">
<!-- Custom styles for this template go here -->
<link rel="stylesheet" href="css/styles.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target="#navbar-example">
<!-- Main jumbotron for a primary marketing message or call to action -->
<!-- <div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Sem van Lent. CareerFoundry Web Development Apprentice</h1>
<p class="lead">Hi there, my name is Sem, I'm 35 years old and I currently live in Zaandam, a cute old town in the periphery of Amsterdam in the Netherlands.
<br>I studied sociology at the University of Amsterdam, graduated as a Bachelor in 2012 and landed a job at Gall & Gall, the biggest retailer of wines and spirits in the Netherlands. I've worked in two different shops as a manager since 2015, but with a growing awareness that maybe retail is not a good place for my skills and ambition.
<br>As I've always enjoyed scrutinizing data, solving complex puzzles and creating elaborate Excel sheets with multiple embedded conditional formulae, and as I've always liked the design element in creating environments for data to become meaningful in, I feel that a career in programming and development would suit me much better.
<br>Together with the knowledge and understanding of data I've gained through academic social research, I think that the ability to write code in relevant Web Development languages should create some splendid opportunities to start a career that I can truly be passionate about.
</p>
<a href="about.html">About Me</a>
<a href="contact.html">Contact</a>
<a href="faq.html">FAQ</a>
</div>
</div> -->
<!-- navbar starts here -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" role="navigation" id="navbar-example">
<a class="navbar-brand" href="https://careerfoundry.com/en/dashboards/main">CareerFoundry
<img src="img/svl-logo-white.png" alt="My logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#faq">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav><!-- end navbar -->
<!-- <nav class="navbar">
<section class="left">
<a href="https://careerfoundry.com/en/dashboards/main">CareerFoundry</a>
</section>
<section class="right">
<a href="#index">Home</a>
<a href="#about">About</a>
<a href="#faq">FAQ</a>
<a href="#contact">Contact</a>
</section>
</nav> -->
<!-- Ends navigation -->
<!-- Hero Image Carousel comes here! -->
<div class="content" id="home">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="amsterdam" src="img/vnoutchkov-amsterdam-unsplash.jpg" alt="Houses on canal in Amsterdam.">
</div>
<div class="carousel-item">
<img class="computer" src="img/debieve-circuit-unsplash.jpg" alt="Glasses in front of monitor showing code.">
</div>
<div class="carousel-item">
<img class="world" src="img/roy-world-unsplash.jpg" alt="World map with pins and bank bills.">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- Carousel Captions -->
<!-- <div class="carousel-caption d-none d-md-block">
<h5>Sem van Lent, student at CareerFoundry.</h5>
<p>Portfolio site under construction. Keep an eye out for updates!</p>
</div> -->
<!-- Ends Image Carousel -->
<!-- Three Column Grid -->
<div class="container content" id="index">
<div class="row">
<div class="col-sm">
<h2>Portfolio Concept</h2>
<p>I guess this should consist mostly of the work I'll be doing throughout the course. I don't have much relevant prior experience, but I guess the portfolio could include a résumé with experience from life and other jobs, as well as personal interests and such. Maybe I could include some graphic representations of results I've gathered through social and cultural research, but for the most part I'll have to build my portfolio from scratch.
</p>
<a class="btn btn-primary" href="#" role="button">View details &raquo;</a>
</div><!-- /col -->
<div class="col-sm">
<h2>Project Goals</h2>
<p>I feel it's maybe a bit early to have a complete program with deadlines and such. But in general I would like to be ahead of program for the first half of the course. I would feel great if I can finish the first 5 exercises before next monday, but as I'm just starting the course, I also feel that it shouldn't bring me down if things prove to be tougher than that. In general, I want to work seriously on the material as much as I can and I aspire to really commit 20 hours per week.
</p>
<a class="btn btn-primary" href="#" role="button">View details &raquo;</a>
</div><!-- /col -->
<div class="col-sm">
<h2>Course Goals</h2>
<p>The goal for me is certainly to find a new job and career. I think I might have an underdeveloped talent for dealing with logical problems, and I hope that working on my developer skills might prove - to myself and anyone interested - that I can learn and put some of this talent to good practice. I'd like to learrn and express creativity, comprehensive programming and aesthetic functionality through coding and through the tools provided within this course.
</p>
<a class="btn btn-primary" href="#" role="button">View details &raquo;</a>
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /container -->
<div class="container content" id="work">
<div class="row">
<div class="col-6 col-md-4 col-lg-3"><img src="img/rubi1.jpg"></div>
<div class="col-6 col-md-4 col-lg-3"><img src="img/rubi2.jpg"></div>
<div class="col-6 col-md-4 col-lg-3"><img src="img/rubi3.jpg"></div>
<div class="col-6 col-md-4 col-lg-3"><img src="img/rubi4.jpg"></div>
<div class="col-6 col-md-4 col-lg-3"><img src="img/rubi5.jpg"></div>
<div class="col-6 col-md-4 col-lg-3"><img src="img/rubi6.jpg"></div>
<div class="col-6 col-md-4 col-lg-3"><img src="img/rubi7.jpg"></div>
<div class="col-6 col-md-4 col-lg-3"><img src="img/rubi8.jpg"></div>
</div>
</div>
<section class="container content" id="about">
<section class="header">
<h1>About Sem</h1>
</section><!-- Ends header -->
<!-- Grid comes here -->
<div class="container-fluid">
<div class="row" id="about">
<!-- Image column -->
<div class="col-12 col-md-6 col-lg-4 image px-0">
<img src="img/sem tara.jpg" class="img-fluid" alt="Sem on Tara Mountain viewpoint">
</div>
<!-- Intro column -->
<div class="col-12 col-md-6 col-lg-4 intro">
<h2>Introduction</h2>
<p>Hello there, nice to meet you!</h2>
</div>
<!-- Skills column -->
<div class="col-12 col-lg-4 skill">
<h3>My Skills</h3>
<ul id="skill-list">
<li>skill nr.1</li>
<li>skill nr.2</li>
<li>this gets repetitive</li>
</ul>
</div>
</div>
</div>
<section class="main-text">
<h3>Douglas Adams Quote</h3>
<p>The fact that we live at the bottom of a deep gravity well, on the surface of a gas covered planet going around a nuclear fireball 90 million miles away and think this to be normal is obviously some indication of how skewed our perspective tends to be.</p>
</section><!-- Ends main text -->
</section><!-- Ends container section -->
<!-- FAQ accordion -->
<div class="container content" id="faq">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Why did you decide to become a web developer?
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
I hate people.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
What is your design process?
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
I go from one to zero.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Who are your clients?
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
Mostly third party servers.
</div>
</div>
</div>
</div><!-- ends container for accordion -->
<section class="container background content" id="contact">
<!-- Page sections go here -->
<section class="header">
<h1>Contact Sem</h1>
</section>
<!-- Ends header -->
<section class="contact-image">
<section class="contact-details">
<h2>Contact Details</h2>
<ul id="details">
<li><i class="fas fa-user"></i> Sem van Lent</li>
<li><i class="fas fa-home"></i> Bouwmanspad 29</li>
<li><i class="fas fa-globe"></i> 1506 HA Zaandam</li>
<li><i class="far fa-envelope"></i> semvlent@gmail.com</li>
<li><i class="fas fa-phone"></i> +31 6 41636365</li>
</ul>
</section>
</section>
<!-- Ends contact-image -->
<section class="footer">
<p>Powered by CareerFoundry. And others. And me.</p>
<p>Photograph by Eckhard Hoehmann</p>
<!-- <a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, &quot;San Francisco&quot;, &quot;Helvetica Neue&quot;, Helvetica, Ubuntu, Roboto, Noto, &quot;Segoe UI&quot;, Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@ecki77?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Eckhard Hoehmann"><span style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-1px;fill:white" viewBox="0 0 32 32"><title>unsplash-logo</title><path d="M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z"></path></svg></span><span style="display:inline-block;padding:2px 3px">Eckhard Hoehmann</span></a> -->
<img src="img/maps-location-home.jpg" alt="Car route to my house in Zaandam from Google Maps">
</section>
<!-- Ends footer -->
</section>
<!-- Ends background -->
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<!-- Bootstrap core JS -->
<!-- Can place script tags with JavaScript files here -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script type="text/javascript">
var $root = $('html, body');
$('#navbar-example a').click(function() {
var href = $.attr(this, 'href');
if (href != undefined && href != '#') {
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
}
return false;
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment