Responsive websites

  • Post author:
  • Post Category:CSS
  • Post Comments:0 Comments

This methodology used ‘float’ to position elements in the browser.

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>My website</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="UTF-8">
     <link rel="stylesheet" a href="browser-reset.css">
     <link rel="stylesheet" a href="style.css">
  </head>
  <body>
    <img class="banner" src="img/myBanner.png" alt="banner">
    <div class="wrapper">
      <article class="imageinformation">
        <h1>My title</h1>
        <p>Aenean finibus bibendum diam at elementum. Proin id varius mi, quis luctus est. Aenean pulvinar nunc at risus sollicitudin aliquam. Duis sit amet pellentesque ipsum, et auctor felis. Sed tempor at ante et posuere. Nulla tincidunt, tortor et vulputate sagittis, felis metus ultrices risus, eget euismod mauris nisi sed nunc. Cras accumsan justo a nibh elementum tristique. Nulla facilisi. Suspendisse ac volutpat sapien, non dapibus quam. Praesent non condimentum orci. Suspendisse diam nisl, congue at ultrices a, congue sed elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque odio arcu, interdum non pretium in, posuere eu ligula.</p>
      </article>
      <img class="img-park" src="img/park.png" alt="park">
    </div>
  </body>
</html>
/* style.css */
.wrapper {
  width: 100%;
}

.banner {
  /* stops the image banner displaying*/
  display: none;
  width: 100%;

}

.imageinformation {
  width: 100%;

}

.imageinformation h1{
  padding: 30px 30px 20px;
  font-family: Arial;
  font-size: 50px;
  color: #111;
  line-height: 44px;
}

.imageinformation p{
  padding: 0px 30px 20px;
  font-family: Arial;
  font-size: 14px;
  color: #111;
  line-height: 24px;
}

.img-park {
  width: 100%;
}

@media only screen and (min-width: 768px) {

  .banner {
    /* stops the image banner displaying*/
    display: block;
  }

  .wrapper {
    width: 600px;
  }
}

@media only screen and (min-width: 1000px) {

  .wrapper {
    width:100%;
  }

  .banner {
    /* stops the image banner displaying*/
    display: block;
  }

  .imageinformation {
    float: left;
    width: 30%;
  }
   .img-park {
     float: right;
     width: 70%;
     margin-top: 40px;
   }
}

Leave a Reply