Webpage Code

Unit 2: School and Technology | Coding & Programming | Jong Cha | Tab_5572

Webpage Code

Jong Cha

HTML

 


<html>
  <head>
    <meta charset="UTF-8">
    <title>A Pen by  Jong Hyun Cha</title>
    <link rel="stylesheet" href="css/style.css">
    </head>

  <body>

    <html>
<body id="bg">
    <head>
        <h1 id="Title">
            Hello DP
        </h1>
    </head>
<p align="center">
  <img src="https://yt3.ggpht.com/-BNai2L2CCEE/AAAAAAAAAAI/AAAAAAAAAAA/mKilsQ9YirI/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" width=200>

</p>
  <h2 align="center"><b>Darlene Bio</b></h2>
  <table align="center">
    <tr>
        <th>Birthday</th>
        <th>Gender</th>
        <th>Favorite Subject</th>
        <th>Interesting Facts</th>
    </tr>
    <tr>
        <td align="center">September 17, 1986</td>
        <td align="center">Female</td>
        <td align="center">Math</td>
        <td><a href="http://www.darlenesean.com/">DP's Special Day</a></td>
    </tr>
</table>


<div class="box">


<h2 align="center"> Reasons Why DP is Awesome</h2>
<div class="list">
  <ol>
        <li >She is incredibly smart.</li>
        <li>She has a pure love for math math math.</li>
        <li>She can relate to her students, and give them earnest advice.</li>
    <li class= amazing><b>So cute!</b></li>
    </ol>
  </div>

<h2 align="center"> Best Qualities of DP</h2>
<div class="list">
  <ul>
        <li> Empathy</li>
        <li> Intelligence</li>
        <li> Her smile</li>
    <li class = amazing> <b>Cuteness</b></li>
    </ul>
  </div>
</div>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>
</head>


<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://a1-images.myspacecdn.com/images03/32/caa630fe45ea40bf890b55a881e64019/300x300.jpg" alt="Singing">
    </div>

    <div class="item">
      <img src="https://lh4.googleusercontent.com/-X8IjTWFUwuU/AAAAAAAAAAI/AAAAAAAAAR0/on7q-1-8U-0/photo.jpg" alt="Big Eyes">
    </div>

    <div class="item">
      <img src="http://universalwebsites.theknot.com.s3.amazonaws.com/UniversalWebsites/PageMainImage/5277187612331810/2913218/42270497/med/SeanDarlene-DipKiss.jpg" alt="Cute">
    </div>

    <div class="item">
      <img src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAAajAAAAJDg0YjhhYTljLTM5NWMtNDkyNS1iNGIwLTNmODcxZmI5NzMxNQ.jpg" alt="Smile!">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</body>
</html>

 

 

  </body>
</html>

 

 

 

CSS

 

#bg {
  background-color:  #add8e6
}
img{
  align: center;
}
#Title {
  text-align: center;
  color: purple
}
#dpPhoto{
  align: center;
}

.box { margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
     }
.list {
  margin: auto;
width: 60%;
padding: 10px;
}
table {
  border-collapse: collapse;
}
table, td, th {
  border: 3px solid black;
  text-align: center;
}

th {
  background-color: black;
  color: white;
}

a{
  color: red;
}
.amazing{
  color: purple;
}