MMP310-Assignment-1

In this example below you will see how to do a MMP310-Assignment-1 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by dreamsniper, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright dreamsniper ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>MMP310-Assignment-1</title>
  <meta charset="utf-8">
      <title>AllianceBernstein</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <script>window.onload=function(){write_year();}</script>
      <link href="css/style.css" rel="stylesheet">
      <script src="js/date.js"></script>
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <header></header>
      <div>
         <main>
            <h1>Proin varius leo quis odio suscipit ac mollis nunc aliquet.</h1>
            <p>Etiam tristique, justo sit amet ornare dignissim, diam turpis sollicitudin nunc, pharetra scelerisque sem justo ac libero. Praesent odio est, faucibus ac dapibus vitae, posuere in nisl. Nunc tempor ultricies tellus, id tincidunt diam lacinia in. Curabitur sagittis urna eu turpis ultricies pharetra. Cras auctor varius elit, eu scelerisque neque aliquam vitae.</p>
            <p>Proin cursus tristique velit in blandit. Aenean lacinia risus eget eros volutpat sed lacinia augue elementum. Donec consectetur cursus diam, in tristique purus rutrum id, or <a href="http://www.npr.org">click here for more information</a>.</p>
         </main>
         <aside>
            <a href="http://www.npr.org"><img src="https://raw.githubusercontent.com/dreamsniper/mmp310-assignments/master/assignment-01/img/video-player.png" height="153" width="195" alt="[Play webcast image placeholder]"></a>
            <p>Proin cursus tristique velit in blandit. Aenean lacinia risus eget eros volutpat sed lacinia augue elementum.</p>
         </aside>
      </div>
      <footer>
         <p>Sed non dolor ac mi egestas gravida. Aliquam ut negue vitae odio tristique tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Ut vitae neque nulla.</p>
         <p>&copy; <span></span> AllianceBernstein L.P.</p>
      </footer>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/dreamsniper/mmp310-assignment-1-xgzYda */
body {
  height: 630px;
  width: 650px;
  margin: 0 auto;
  margin-top: 50px;
}

p {
  font-size: 13px;
}

header {
  background: black url("https://raw.githubusercontent.com/dreamsniper/mmp310-assignments/master/assignment-01/img/logo.png") no-repeat scroll 50% 50%;
  width: 650px;
  height: 161px;
}

div {
  margin: 25px;
}
div main {
  width: 375px;
  float: left;
}
div main h1 {
  font-family: 'Times New Roman', serif;
  color: #6fa0a1;
  font-size: 1.6em;
  font-weight: 400;
}
div main a:link {
  color: #bdc785;
}
div aside {
  width: 200px;
  float: right;
  background-image: linear-gradient(#bdc785, white);
}
div aside img {
  width: 100%;
}
div aside p {
  margin: 0 auto;
  width: 180px;
  font-style: italic;
}

footer {
  margin: 25px;
  padding-top: 50px;
  clear: both;
}
footer p {
  font-family: "Arial", sans-serif;
}


/*Downloaded from https://www.codeseek.co/dreamsniper/mmp310-assignment-1-xgzYda */
function write_year() {
   var y = new Date();
   document.getElementsByTagName("span")[0].textContent = y.getFullYear();
}

Comments