Try It Yourself: CSS Media Queries

HTML Code

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS - Responsive Web Design | Media Queries</title>
  <meta charset="UTF-8">
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>

<div class="demo-page-header">
  <div class="centered">
    <div class="page-logo">
      <h1><i class="fa fa-briefcase"></i> Elite Business</h1>
    </div>
    <div class="page-navigation">
      <ul class="nav-contents">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </div>
  </div>
</div>

<div class="page-banner">
  <div class="centered">
    <div class="banner-img">
      <img src="web-design.jpg">
    </div>
    <div class="banner-txt">
      <h2>Lorem ipsum dolor sit amet</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <a href="#" class="page-btn">take a tour</a> <a href="#" class="page-btn">signup</a>
    </div>
  </div>
</div>

<div class="page-content">
  <div class="centered">
    <div class="content-column">
      <h3><i class="fa fa-star"></i> Content Title</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.</p>
    </div>
    <div class="content-column">
      <h3><i class="fa fa-smile-o"></i> Content Title</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.</p>
    </div>
    <div class="content-column">
      <h3><i class="fa fa-television"></i> Content Title</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.</p>
    </div>
  </div>
</div>

<div class="page-content">
  <div class="centered">
    <div class="content-column">
      <h3><i class="fa fa-heart"></i> Content Title</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.</p>
    </div>
    <div class="content-column">
      <h3><i class="fa fa-bar-chart"></i> Content Title</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.</p>
    </div>
    <div class="content-column">
      <h3><i class="fa fa-group"></i> Content Title</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.</p>
    </div>
  </div>
</div>

<div class="page-footer">
  <div class="centered">
    <div class="content-column">
      <h3>From The Blog</h3>
      <ul class="f-nav">
        <li><a href="#">Lorem ipsum dolor sit amet</a></li>
        <li><a href="#">Lorem ipsum dolor sit amet</a></li>
        <li><a href="#">Lorem ipsum dolor sit amet</a></li>
        <li><a href="#">Lorem ipsum dolor sit amet</a></li>
        <li><a href="#">Lorem ipsum dolor sit amet</a></li>
      </ul>
    </div>
    <div class="content-column footer-content-column">
      <div class="inner-column">
        <h3>Archives</h3>
        <ul class="f-nav">
          <li><a href="#">Lorem ipsum</a></li>
          <li><a href="#">Lorem ipsum</a></li>
          <li><a href="#">Lorem ipsum</a></li>
          <li><a href="#">Lorem ipsum</a></li>
          <li><a href="#">Lorem ipsum</a></li>
        </ul>
      </div>
      <div class="inner-column">
        <h3>Stay In Touch</h3>
        <ul class="f-nav">
          <li><a href="#">Dolor sit amet</a></li>
          <li><a href="#">Dolor sit amet</a></li>
          <li><a href="#">Dolor sit amet</a></li>
          <li><a href="#">Dolor sit amet</a></li>
          <li><a href="#">Dolor sit amet</a></li>
        </ul>
      </div>
    </div>
    <div class="content-column">
      <h3>About Company</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.</p>
    </div>
  </div>
  <div class="clear"></div>
  <div class="centered page-copyright">
    &copy; 2017 All rights reserved.
  </div>
</div>




<style>
*{
	margin: 0;
}
.demo-page-header{
  display: table;
  width: 100%;
  background: #272727;
  padding: 10px;
  color: #fff;
  box-sizing: border-box;
}
.centered{
  width: 90%;
  margin: auto;
}
.page-logo{
  width: 30%;
  float: left;
}
.page-logo h1{
  font-size: 22px;
  margin-bottom: 0;
  margin-top: 0;
}
.page-navigation{
  width: 70%;
  float: right;
}
.nav-contents{
  display: flex;
  list-style-type: none;
  margin-bottom: 0;
  margin-top: 4px;
}
.nav-contents li{
  width: 100%;
}
.nav-contents li a{
  color: #fff;
  display: block;
  text-decoration: none;
}
.nav-contents li a:hover, .nav-contents li a:focus{
  color: #ccc;
}
.page-banner{
  background: linear-gradient(to bottom right,#448cc7,#2e6492);
  display: table;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  color: #222;
  margin-bottom: 20px;
}
.banner-img{
  width: 38%;
  float: left;
}
.banner-txt{
  width: 58%;
  float: right;
}
.banner-img img{
  width: 100%;
}
.banner-txt h2{
  margin-top: 0;
  text-transform: uppercase;
}
.banner-txt p{
  text-align: justify;
}
.page-btn{
  display: inline-block;
  padding: 10px 20px;
  background: linear-gradient(#4c5554,#282828);
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: 10px;
}
.page-btn:hover, .page-btn:focus{
  color: #fff;
  background: linear-gradient(#282828,#4c5554);
}
.page-content{
  display: table;
  width: 100%;
  margin-bottom: 20px;
}
.content-column{
  width: 30%;
  float: left;
}
.content-column:nth-child(2){
  margin-left: 5%;
}
.content-column:last-child{
  float: right;
}
.content-column p{
  text-align: justify;
}
.page-footer{
  background: #272727;
  padding: 15px;
  display: table;
  box-sizing: border-box;
  color: #fff;
}
.page-footer h3{
  margin-top: 0;
  text-transform: uppercase;
}
.f-nav{
  padding: 0;
  list-style-type: none;
}
.f-nav li a{
  color: #fff;
  text-decoration: none;
  display: block;
  border-bottom: 1px dotted #fff;
  padding: 3px 0;
}
.footer-content-column{}
.inner-column{
  width: 47%;
  float: left;
}
.inner-column:last-child{
  float: right;
}
.centered::after{
	content: '';
	clear: both;
	display: table;
}
.clear{
  width: 90%;
  margin: auto;
  clear: both;
  height: 3px;
  background: #242424;
  border-top: 2px solid #2a2a2a;
  border-bottom: 2px solid #2a2a2a;
  margin-bottom: 10px;
  margin-top: 10px;
}
@media(max-width: 767px){
	.page-logo{
		width: 100%;
		float: none;
	}
	.page-navigation{
		width: 100%;
		float: none;
	}
	.nav-contents{
		padding: 0;
		flex-wrap: wrap;
	}
	.nav-contents li a{
		display: block;
		padding: 5px 0;
	}
	.banner-img, .banner-txt{
		width: 100%;
	}	
	.content-column{
		width: 100%;
		float: none;
		margin-bottom: 20px;
	}
	.content-column:nth-child(2){
		margin-left: 0;
	}
	.inner-column{
		width: 100%;
		float: none;
		margin-bottom: 20px;
	}
}
</style>

</body>
</html>

CSS Code

/* Write your CSS here */

CSS Media Queries - Playground