Skip to content

Commit 388b182

Browse files
committed
First attempt to complete the challenge
Based on the provided examples as well as Blasting off with bootstrap course. --- Lionel Saliou, Ph.D
1 parent cae3740 commit 388b182

File tree

1 file changed

+98
-25
lines changed

1 file changed

+98
-25
lines changed

index.html

+98-25
Original file line numberDiff line numberDiff line change
@@ -12,37 +12,110 @@
1212
<!--
1313
Previous project placeholder begins
1414
-->
15-
<div class="header">
16-
<h1>Morgan McCircuit</h1>
17-
<h2>I write code</h2>
18-
</div>
15+
<header class="navbar navbar-default">
16+
<nav class="container" role='navigation'>
17+
<div class="navbar-header">
18+
<a href='index.html' class='navbar-brand'>Morgan McCircuit</a>
19+
</div>
20+
<ul class='nav navbar-nav'>
21+
<li><a href='#'>Home</a></li>
22+
<li><a href='#'>About</a></li>
23+
</ul>
24+
</nav>
25+
</header>
1926

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>
27+
<section>
28+
<div class='container'>
29+
<div id="portfolio-carousel" class="carousel slide" data-ride="carousel">
30+
<!-- Indicators -->
31+
<ol class="carousel-indicators">
32+
<li data-target="#portfolio-carousel" data-slide-to="0" class="active"></li>
33+
<li data-target="#portfolio-carousel" data-slide-to="1"></li>
34+
<li data-target="#portfolio-carousel" data-slide-to="2"></li>
35+
</ol>
36+
<div class="carousel-inner" role="listbox">
37+
<div class="item active">
38+
<div class="container">
39+
<div class="carousel-caption">
40+
<h1>Who I am</h1>
41+
<p>Hi, my name is |redacted| and I love to write code that is efficient.</p>
42+
</div>
43+
</div>
44+
</div>
2445

46+
<div class="item">
47+
<div class="container">
48+
<div class="carousel-caption">
49+
<h1>What I do</h1>
50+
<p>Here are some of the languages I use on a from time-to-time.</p>
51+
<ul class="list-inline">
52+
<li>HTML</li>
53+
<li>CSS</li>
54+
<li>JavaScript</li>
55+
</ul>
56+
</div>
57+
</div>
58+
</div>
2559

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>
34-
</div>
60+
<div class="item">
61+
<div class="container">
62+
<div class="carousel-caption">
63+
<h1>Get in touch</h1>
64+
<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>
65+
</div>
66+
</div>
67+
</div>
68+
</div>
3569

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-
-->
70+
<a class="left carousel-control" href="#portfolio-carousel" role="button" data-slide="prev">
71+
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
72+
<span class="sr-only">Previous</span>
73+
</a>
74+
<a class="right carousel-control" href="#portfolio-carousel" role="button" data-slide="next">
75+
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
76+
<span class="sr-only">Next</span>
77+
</a>
78+
</div>
4479

80+
<div class="row marketing">
81+
<div class="col-md-4">
82+
<i class='glyphicon glyphicon-qrcode'></i>
83+
<h2>I wish I knew HTML and CSS</h2>
84+
<p>These technologies have changed tremendously since I last used them.</p>
85+
</div>
4586

87+
<div class="col-md-4">
88+
<i class='glyphicon glyphicon-flash'></i>
89+
<h2>Javascript</h2>
90+
<p>I agree to learn the basics, however the future of this technology appears to be TypeScript in my opinion. </p>
91+
<p>Clear and evident strong typing keeps your average developer saner! </p>
92+
</div>
93+
94+
<div class="col-md-4">
95+
<i class='glyphicon glyphicon-hdd'></i>
96+
<h2>RESTful API</h2>
97+
<p>The final true implementation of a Service Oriented Architecture?</p>
98+
</div>
99+
100+
</div> <!-- row -->
101+
102+
</div>
103+
</section>
104+
105+
<div class='container'>
106+
<footer class="container">
107+
<div class="row">
108+
<div class="col-md-4">
109+
<h4>Contact me:</h4>
110+
<ul class='list-unstyled'>
111+
<li><i class='glyphicon glyphicon-globe'></i> Some Contry, Code</li>
112+
<li><i class='glyphicon glyphicon-phone'></i> 1-234-krz-aramis</li>
113+
<li><i class='glyphicon glyphocon-envelope'></i> <a href='mailto:#'>[email protected]</a></li>
114+
</ul>
115+
</div>
116+
</div>
117+
</footer>
118+
</div>
46119
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
47120
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
48121

0 commit comments

Comments
 (0)