portfolio_starter.html

<!DOCTYPE html>
<html>
<head>
  <!-- TODO: Update your portfolio page title -->
  <title>Mr. Yoho - Portfolio</title>
  
  <!-- Linked Stylesheet (Controls Navbar and Footer) -->
  <link rel="stylesheet" type="text/css" href="./css/style.css">
  <style>
  /*Reset CSS below -- this gets rid of a lot of cross-browser bugs*/
  /************  DO NOT TOUCH ANY OF THE CSS BELOW ***************/

    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;
    }

  /**************  END OF RESET CSS   **************/
  </style>
  
  <!-- TODO: Change the CSS colors below so that it fits your website theme -->
  <style type="text/css" media="screen">
    body {
      background-color: gray;
      padding:5px;
      color:white;
      font-family: Verdana;
    }

    .grid {
      background-color: white;
      border:1px solid black;
      display: inline-block;
      margin:8px;
      color:black;
    }

    #carousel {
      background-color: #ff6600;
      padding:15px;
    }


    body {
      font-family: Verdana;
      background-color:#C2C2C2;
    }

    .main {
      display:block;
      clear: left;
      min-width: 600px;
      max-width: 800px;
      height:100%;
      margin:0 auto;
    }

    .main-page{
      float:right;
      background-color:#E0E0E0;
      height:100%;
      width:75%;
      box-sizing:border-box;
    }

    .sidebar {
      box-sizing:border-box;
      padding:10px;
      float:left;
      width:25%;
      height:100%;
      background-color: #059D8E;
    }
    
    .main-title {
      margin: 10px 15px;
      font-size: 30px;
    }

    .left-panel{
      box-sizing: border-box;
      width: 50%;
      float:left;
      padding:20px;
    }

    .right-panel{
      box-sizing: border-box;
      width: 50%;
      float:left;
      padding:20px;
    }

    .sub-title {
      text-align: center;
    }

    .text-info {
      font-size: 0.8em;
      margin: 20px;
    }


  </style>
</head>
<body>
    <div class="navbar">
        <ul class="navigation">
            <!-- TODO: Ensure that your Navbar is correct -->
            <li><a href="./index.html">Home</a></li>
            <li class="active"><a href="">Portfolio</a></li>
        </ul>
    </div>

  <div class="main">
    <div id="carousel">
      <h2>My Work</h2>
      <!-- The div below shows an Embedded Scratch Project -->
      <!-- TODO: Update for your Maze Game -->
      <div class="grid">
        <iframe allowtransparency="true" width="350" height="300" src="//scratch.mit.edu/projects/embed/90479001/?autostart=false" frameborder="0" allowfullscreen></iframe>
        <p><a href="https://scratch.mit.edu/projects/90479001/" target="_blank">Maze Game</a></p>
      </div>
      
      <!-- The div below is a screenshot of a document that you can click on to get to the document-->
      <!-- TODO: Update for your Project: Shooting Star -->
      <div class="grid">
        <a href="https://www.khanacademy.org/computer-programming/spin-off-of-project-shooting-star/6482264175542272" target="_blank"><img src="./img/portfolio/project_shooting_star.png" alt="Project Shooting Star" width="350"></a>
        <p><a href="https://www.khanacademy.org/computer-programming/spin-off-of-project-shooting-star/6482264175542272" target="_blank">Project Shooting Star</a></p>
      </div>
      
      <!-- The div below is an example of a linked Google Doc -->
      <!-- TODO: Update for your Algebra Challenge 2 (The fish tank one) -->
      <div class="grid">
        <iframe src="https://docs.google.com/document/d/1ZTqoVsyfyCs3ZU6sGfs6fJ4j9kXUNjJo_tBRSxe1rZs/pub?embedded=true" height=300 width=350></iframe>
        <p><a href="https://docs.google.com/document/d/1ZTqoVsyfyCs3ZU6sGfs6fJ4j9kXUNjJo_tBRSxe1rZs/pub" target="_blank">Live Website Challenge</a></p>
      </div>
      
      <!-- TODO: Add more div class="grid" elements for your other Khan Academy Projects and Algebra Challenges -->
    </div>
  </div>
  
  <div class="footer">
  </div>


</body>
</html>