codeschool-projects · naitsabus · Feb 11, 2017 · Feb 11, 2017 · Feb 11, 2017 · Feb 11, 2017
diff --git a/src/1.png b/src/1.png
diff --git a/src/2.png b/src/2.png
diff --git a/src/3.jpg b/src/3.jpg
diff --git a/src/4.png b/src/4.png
diff --git a/src/5.png b/src/5.png
diff --git a/src/6.png b/src/6.png
diff --git a/src/index.html b/src/index.html
@@ -7,44 +7,221 @@
   <link rel="stylesheet" href="main.css">
   <title>HTML Portfolio</title>
 </head>
-<body>
-
+<body data-spy="scroll" data-target="#portfolio-collapse-menu" data-offset="70">
+  <script>
+    var counter = 0;
+  </script>
   <!--
     Previous project placeholder begins
   -->
-  <div class="header">
-    <h1>Morgan McCircuit</h1>
-    <h2>I write code</h2>
+  <nav class="navbar navbar-default navbar-fixed-top">
+  <div class="container">
+  <div class="navbar-header">
+    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
+      data-target="#portfolio-collapse-menu">
+      <span class="sr-only">Toggle navigation</span>
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+    </button>
+    <a class="navbar-brand" href="#">
+      <img class="avg_logo" alt="Sebo Prime" src="logo.png">
+    </a>
+  </div>
+    <div class="collapse navbar-collapse" id="portfolio-collapse-menu">
+      <ul class="nav navbar-nav">
+        <li class="nav-item">
+          <a class="nav-link" href="#portfolio-carousel">Sebo Prime</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#skills">Skills</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#mailbox">Thor's Mailbox</a>
+        </li>
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
+          aria-haspopup="true" aria-expanded="false">Avanger Team <span class="caret"></span>
+          </a>
+              <ul class="dropdown-menu">
+                    <li><a href="#thor">Thor</a></li>
+                    <li><a href="#natasha">Black Widow</a></li>
+                    <li><a href="#steve">Captain America</a></li>
+                    <li role="separator" class="divider"></li>
+                    <li><a href="#bruce">Hulk</a></li>
+                    <li><a href="#clint">Hawkeye</a></li>
+                    <li><a href="#tony">Iron Man</a></li>
+              </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+  </nav>
+
+
+<div id="portfolio-carousel" class="carousel slide" data-ride="carousel">
+  <ol class="carousel-indicators">
+    <li data-target="#portfolio-carousel" data-slide-to="0" class="active"></li>
+    <li data-target="#portfolio-carousel" data-slide-to="1"></li>
+    <li data-target="#portfolio-carousel" data-slide-to="2"></li>
+  </ol>
+  <div class="carousel-inner" role="listbox">
+    <div class="item active">
+      <div class="container">
+        <div class="carousel-caption">
+          <h1>Who I am</h1>
+          <p>Hi, my name is Sebo Prime and I am an Avanger!</p>
+        </div>
+      </div>
+    </div>
+    <div class="item">
+      <div class="container">
+        <div class="carousel-caption">
+          <h1>What I do</h1>
+          <p>I love to smash a Zombie head and throw it on the ground! ;)</p>
+        </div>
+      </div>
+    </div>
+    <div class="item">
+      <div class="container">
+        <div class="carousel-caption">
+          <h1>What I've done</h1>
+          <p>Once I lifted Thors hammer!</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <a class="left carousel-control" href="#portfolio-carousel" role="button" data-slide="prev">
+    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+    <span class="sr-only">Previous</span>
+  </a>
+  <a class="right carousel-control" href="#portfolio-carousel" role="button" data-slide="next">
+    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+    <span class="sr-only">Next</span>
+  </a>
+</div>
+
+
+<div class="marketing offset" id="skills">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-4">
+        <span class="glyphicon glyphicon-king"></span>
+        <h2>King of the Avangers</h2>
+        <p>I lead them to victory!</p>
+      </div>
+      <div class="col-md-4">
+        <span class="glyphicon glyphicon-flash"></span>
+        <h2>Lightning superpower</h2>
+        <p>I am able to fire lightning bolts!</p>
+      </div>
+      <div class="col-md-4">
+        <span class="glyphicon glyphicon-sunglasses"></span>
+        <h2>Appearence</h2>
+        <p>.. yeah, I'm just looking damn good!</p>
+      </div>
+      </a>
+    </div>
   </div>
+</div>
+
 
-  <div class="tagline">
-    <h3>Who I am</h3>
-    <p>Hi, my name is Morgan and I love to write code that is efficient.</p>
+  <div class="cont offset" id="mailbox">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-6">
+          <button type="button" id="thorsButton" class="glyphicon glyphicon-envelope"
+            onclick="increase();">
+          </button>
+          <script>
+          function increase()
+          {
+          counter++;
+          document.getElementById('thorSendMail').innerHTML= +counter;
+          }
+          </script>
+          <h2>Want to email Thor ?</h2>
+          <p>Press the envelope to drop Thor a thundermail</p>
+        </div>
+        <div class="col-md-6">
+          <h2>Thundermail overview</h2>
+          <ul class="list-group">
+            <li class="list-group-item">
+              <span class="badge"><div id="thorSendMail">0</div></span>
+                <div class="email-desc">Thor's Inbox</div>
+            </li>
+            <li class="list-group-item">
+              <span class="badge">3</span>
+                <div class="email-desc">Spam folder</div>
+            </li>
+          </ul>
+        </div>
+        <div class="col-md-4">
+        </div>
+      </div>
+    </div>
   </div>
 
 
-  <div class="skills">
-    <h3>What I do</h3>
-    <p>Here are some of the languages I use on a day-to-day.</p>
-    <ul>
-      <li>HTML</li>
-      <li>CSS</li>
-      <li>JavaScript</li>
-    </ul>
+<div class="marketing" id="team">
+<div class="container">
+  <div class="row">
+    <div class="col-md-3 offsetPic" id="thor">
+      <a href="#thor" class="thumbnail">
+        <img src="1.png" alt="Thor" class="image">
+        <div class="middle"><div class="img-text">Thor</div></div>
+      </a>
+    </div>
+    <div class="col-md-3 offsetPic" id="natasha">
+      <a href="#natasha" class="thumbnail">
+        <img src="2.png" alt="Black Widow" class="image">
+        <div class="middle"><div class="img-text">Natasha</div></div>
+      </a>
+    </div>
+    <div class="col-md-3 offsetPic" id="steve">
+      <a href="#steve" class="thumbnail">
+        <img src="3.jpg" alt="Captain America" class="image">
+        <div class="middle"><div class="img-text">Steve</div></div>
+      </a>
+    </div>
+    <div class="col-md-3 offsetPic" id="bruce">
+      <a href="#bruce" class="thumbnail">
+        <img src="4.png" alt="Hulk" class="image">
+        <div class="middle"><div class="img-text">Bruce</div></div>
+      </a>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-3 offsetPic" id="clint">
+      <a href="#clint" class="thumbnail">
+        <img src="5.png" alt="Hawkeye" class="image">
+        <div class="middle"><div class="img-text">Clint</div></div>
+      </a>
+    </div>
+    <div class="col-md-3 offsetPic" id="tony">
+      <a href="#tony" class="thumbnail">
+        <img src="6.png" alt="Tony" class="image">
+        <div class="middle"><div class="img-text">Tony</div></div>
+      </a>
+    </div>
+  </div>
   </div>
+</div>
+</div>
 
-  <div class="contact">
-    <h3>Get in touch</h3>
-    <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>
+
+<footer>
+  <div class="container">
+    <h3>Check my Avanger profile</h3>
+    <p>I live in the cloud and can't be seen. Send messages to the good people at <a target="_blank" href="https://de.linkedin.com/in/sebastian-kahl-85a356123">LinkedIN</a> and they'll notify me.</p>
   </div>
+</footer>
   <!--
     Previous project placeholder ends
     (unused pieces will be deleted at the last task)
   -->
 
-
   <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
-
 </body>
 </html>
diff --git a/src/logo.png b/src/logo.png
diff --git a/src/main.css b/src/main.css
@@ -5,6 +5,12 @@
   margin-bottom: 0;
 }
 
+.avg_logo {
+  width: 33px;
+  max-height: 100%;
+  border-radius: 50%;
+}
+
 /* CUSTOMIZED CAROUSEL
 -------------------------------------------------- */
 
@@ -62,16 +68,109 @@
   color: #444;
 }
 
+/* for Avanger pictures
+-------------------------------------------------- */
+.marketing .col-md-3   {
+  padding-bottom: 25px;
+}
+/* -------------------------- */
+
+.cont {
+  background-color: #777;
+}
+
+.cont .col-md-6 {
+  text-align: center;
+  font-size: 16px;
+  color: white;
+  padding: 40px;
+}
+
+.cont .col-md-6 .glyphicon{
+  font-size: 60px;
+  background-color: #EAEAEA;
+  border-radius: 50%;
+  padding: 40px;
+  color: #444;
+}
+
+.cont .email-desc {
+  color: black;
+  text-align: left;
+}
+
+.cont p a {
+  color: white;
+}
+
+/* Pictures
+-------------------------------------------------- */
+.offset:target {
+	display: block;
+ 	padding-top: 60px;
+}
+
+@media (min-width: 200px) and (max-width: 767px) {
+  .offsetPic:target {
+	   display: block;
+ 	   padding-top: 60px;
+   }
+}
+
+.thumbnail {
+  border: none;
+  height: 200px;
+  width: 200px;
+  display: block;
+  margin: auto;
+}
+
+.middle {
+  opacity: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%)
+}
+
+.img-text {
+  color: white;
+  font-weight: 800;
+  font-family: fantasy;
+  font-size: 20px;
+  padding: auto 16px;
+  border-radius: 50%;
+}
+
+.thumbnail:hover .image {
+  opacity: 0.75;
+  border-radius: 50%;
+  box-shadow: 0 0 20px 10px black;
+  transition: 0.7s ease;
+  transition-timing-function: cubic-bezier(0.1, 2.0, 0.5, 0.1);
+}
+
+.thumbnail:hover .middle {
+  opacity: 1;
+}
+
+.image {
+  opacity: 1;
+}
 
 /* STICKY FOOTER
 -------------------------------------------------- */
 
 html {
   position: relative;
   min-height: 100%;
+/*  cache-control: max-age=60, public;*/
 }
 
 body {
+  /* Padding top for navbar static */
+  padding-top: 25px;
   /* Margin bottom by footer height */
   margin-bottom: 160px;
 }
@@ -89,5 +188,9 @@ footer {
   padding: 40px 0;
 }
 
+img {
+/*  cache-control: max-age=600;*/
+}
+
 /* RESPONSIVE CSS
 -------------------------------------------------- */