Skip to content

Commit b02ed8f

Browse files
JerBearsJerBears
committed
1 parent 836e098 commit b02ed8f

File tree

2 files changed

+103
-25
lines changed

2 files changed

+103
-25
lines changed

‎src/index.html

Lines changed: 98 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,44 +4,118 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
66
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
7+
<script src="https://use.fontawesome.com/730786c612.js"></script>
78
<link rel="stylesheet" href="main.css">
9+
810
<title>HTML Portfolio</title>
911
</head>
1012
<body>
13+
<!--Hier begint de NavBar! -->
14+
<nav class="navbar navbar-default">
15+
<div class="container">
16+
<!-- Brand and toggle get grouped for better mobile display -->
17+
<div class="navbar-header">
18+
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#portfolio-collapse-menu">
19+
<span class="sr-only">Toggle navigation</span>
20+
<span class="icon-bar"></span>
21+
<span class="icon-bar"></span>
22+
<span class="icon-bar"></span>
23+
</button>
24+
<a class="navbar-brand" href="#">Jeremy Sikkens</a>
25+
</div>
1126

27+
<!-- Collect the nav links, forms, and other content for toggling -->
28+
<div class="collapse navbar-collapse" id="portfolio-collapse-menu">
29+
<ul class="nav navbar-nav">
30+
<li><a href="#">Home</a></li>
31+
<li><a href="#">About</a></li>
32+
</ul>
33+
</div>
34+
<!-- /.navbar-collapse -->
35+
</div>
36+
<!-- /.container-fluid -->
37+
</nav>
1238
<!--
1339
Previous project placeholder begins
1440
-->
15-
<div class="header">
16-
<h1>Jeremy McCircuit</h1>
17-
<h2>I write code</h2>
18-
</div>
41+
<!--Hier eindigt de NavBar! -->
1942

20-
<div class="tagline">
21-
<h3>Who I am</h3>
22-
<p>Hi, my name is Morgan and I love to write code that is efficient.</p>
23-
</div>
2443

2544

26-
<div class="skills">
27-
<h3>What I do</h3>
28-
<p>Here are some of the languages I use on a day-to-day.</p>
29-
<ul>
30-
<li>HTML</li>
31-
<li>CSS</li>
32-
<li>JavaScript</li>
33-
</ul>
45+
<!--Hier begint de Carousel! -->
46+
<div id="portfolio-carousel" class="carousel slide" data-ride="carousel">
47+
<!-- Indicators -->
48+
<ol class="carousel-indicators">
49+
<li data-target="#portfolio-carousel" data-slide-to="0" class="active"></li>
50+
<li data-target="#portfolio-carousel" data-slide-to="1"></li>
51+
<li data-target="#portfolio-carousel" data-slide-to="2"></li>
52+
</ol>
53+
<div class="carousel-inner" role="listbox">
54+
<div class="item active">
55+
<div class="container">
56+
<div class="carousel-caption">
57+
<h1>Dit ben ik</h1>
58+
<p>Mijn naam is Jeremy Sikkens, Growth Hacker bij TransIP.</p>
59+
</div>
60+
</div>
61+
</div>
62+
<div class="item">
63+
<div class="container">
64+
<div class="carousel-caption">
65+
<h1>Growth Hacking als procesmatige methode voor groei.</h1>
66+
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
67+
</div>
68+
</div>
69+
</div>
70+
<div class="item">
71+
<div class="container">
72+
<div class="carousel-caption">
73+
<h1>Als je het kunt meten, kun je het verbeteren.</h1>
74+
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
75+
</div>
76+
</div>
77+
</div>
3478
</div>
79+
<a class="left carousel-control" href="#portfolio-carousel" role="button" data-slide="prev">
80+
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
81+
<span class="sr-only">Previous</span>
82+
</a>
83+
<a class="right carousel-control" href="#portfolio-carousel" role="button" data-slide="next">
84+
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
85+
<span class="sr-only">Next</span>
86+
</a>
87+
</div>
88+
<!--Hier eindigt de Carousel! -->
3589

36-
<div class="contact">
37-
<h3>Get in touch</h3>
38-
<p>I live in the cloud and can't be seen. Send messages to the good people at <a target="_blank" href="https://twitter.com/codeschool">Code School</a> and they'll notify me.</p>
39-
</div>
40-
<!--
41-
Previous project placeholder ends
42-
(unused pieces will be deleted at the last task)
43-
-->
90+
<div class="marketing">
91+
<div class="container">
92+
<div class="row">
93+
<div class="col-md-4">
94+
<span class="fa fa-hand-spock-o fa-10x"></span>
95+
<h2>Geekiness +1</h2>
96+
<p>Lui, op een goede manier.</p>
97+
<p> Meer automatiseren == meer beter.</p>
98+
</div>
99+
<div class="col-md-4">
100+
<span class="fa fa-space-shuttle fa-10x"></span>
101+
<h2>Snelle groei</h2>
102+
<p>Combineer product/ market fit met audience/ message fit en je groei is ongeremd.</p>
103+
</div>
104+
<div class="col-md-4">
105+
<span class="fa fa-heart fa-10x"></span>
106+
<h2>Passie</h2>
107+
<p>Geen dag gaat voorbij zonder iets te leren, automatiseren of te optimaliseren.</p>
108+
</div>
109+
</div>
110+
</div>
111+
</div>
44112

113+
<div class="footer">
114+
<div class="container">
115+
<h3>Neem contact op</h3>
116+
<p>Je kunt me bereiken via <a target="_blank" href="[email protected]">[email protected]</a> of +31 (0) 6 54154603</p>
117+
</div>
118+
</div>
45119

46120
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
47121
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

‎src/main.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,10 @@
6262
color: #444;
6363
}
6464

65+
.fa-10x{
66+
font-size: 120px;
67+
}
68+
6569

6670
/* STICKY FOOTER
6771
-------------------------------------------------- */
@@ -90,4 +94,4 @@ footer {
9094
}
9195

9296
/* RESPONSIVE CSS
93-
-------------------------------------------------- */
97+
-------------------------------------------------- */

0 commit comments

Comments
 (0)