CloseTag | الشروحات | CSS | التصميمات المتجاوبة في لغة CSS | CSS Responsive Introduction

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}
</style>
</head>
<body>

<div class="header">
  <h1>Egypt</h1>
</div>

<div class="row">
  <div class="col-3 col-s-3 menu">
    <ul>
      <li>sphinx </li>
      <li>Cairo </li>
      <li>The pyramids </li>
    </ul>
  </div>

  <div class="col-6 col-s-9">
    <h1>The City</h1>
    <p>Egypt, a country linking northeast Africa with the Middle East, dates to the time of the pharaohs. Millennia-old monuments sit along the fertile Nile River Valley, including Giza's colossal Pyramids and Great Sphinx as well as Luxor's hieroglyph-lined Karnak Temple and Valley of the Kings tombs. The capital, Cairo, is home to Ottoman landmarks like Muhammad Ali Mosque and the Egyptian Museum.</p>
  </div>

  <div class="col-3 col-s-12">
    <div class="aside">
      <h2>Where?</h2>
      <p>   a country linking northeast Africa with the Middle East.</p>
      <h2>How?</h2>
      <p>You can reach egypt airport from all over the world.</p>
    </div>
  </div>
</div>

<div class="footer">
  <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>

PCFET0NUWVBFIGh0bWw+DQo8aHRtbD4NCjxoZWFkPg0KPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiPg0KPHN0eWxlPg0KKiB7DQogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7DQp9DQoNCi5yb3c6OmFmdGVyIHsNCiAgY29udGVudDogIiI7DQogIGNsZWFyOiBib3RoOw0KICBkaXNwbGF5OiB0YWJsZTsNCn0NCg0KW2NsYXNzKj0iY29sLSJdIHsNCiAgZmxvYXQ6IGxlZnQ7DQogIHBhZGRpbmc6IDE1cHg7DQp9DQoNCmh0bWwgew0KICBmb250LWZhbWlseTogIkx1Y2lkYSBTYW5zIiwgc2Fucy1zZXJpZjsNCn0NCg0KLmhlYWRlciB7DQogIGJhY2tncm91bmQtY29sb3I6ICM5OTMzY2M7DQogIGNvbG9yOiAjZmZmZmZmOw0KICBwYWRkaW5nOiAxNXB4Ow0KfQ0KDQoubWVudSB1bCB7DQogIGxpc3Qtc3R5bGUtdHlwZTogbm9uZTsNCiAgbWFyZ2luOiAwOw0KICBwYWRkaW5nOiAwOw0KfQ0KDQoubWVudSBsaSB7DQogIHBhZGRpbmc6IDhweDsNCiAgbWFyZ2luLWJvdHRvbTogN3B4Ow0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjMzNiNWU1Ow0KICBjb2xvcjogI2ZmZmZmZjsNCiAgYm94LXNoYWRvdzogMCAxcHggM3B4IHJnYmEoMCwwLDAsMC4xMiksIDAgMXB4IDJweCByZ2JhKDAsMCwwLDAuMjQpOw0KfQ0KDQoubWVudSBsaTpob3ZlciB7DQogIGJhY2tncm91bmQtY29sb3I6ICMwMDk5Y2M7DQp9DQoNCi5hc2lkZSB7DQogIGJhY2tncm91bmQtY29sb3I6ICMzM2I1ZTU7DQogIHBhZGRpbmc6IDE1cHg7DQogIGNvbG9yOiAjZmZmZmZmOw0KICB0ZXh0LWFsaWduOiBjZW50ZXI7DQogIGZvbnQtc2l6ZTogMTRweDsNCiAgYm94LXNoYWRvdzogMCAxcHggM3B4IHJnYmEoMCwwLDAsMC4xMiksIDAgMXB4IDJweCByZ2JhKDAsMCwwLDAuMjQpOw0KfQ0KDQouZm9vdGVyIHsNCiAgYmFja2dyb3VuZC1jb2xvcjogIzAwOTljYzsNCiAgY29sb3I6ICNmZmZmZmY7DQogIHRleHQtYWxpZ246IGNlbnRlcjsNCiAgZm9udC1zaXplOiAxMnB4Ow0KICBwYWRkaW5nOiAxNXB4Ow0KfQ0KDQovKiBGb3IgbW9iaWxlIHBob25lczogKi8NCltjbGFzcyo9ImNvbC0iXSB7DQogIHdpZHRoOiAxMDAlOw0KfQ0KDQpAbWVkaWEgb25seSBzY3JlZW4gYW5kIChtaW4td2lkdGg6IDYwMHB4KSB7DQogIC8qIEZvciB0YWJsZXRzOiAqLw0KICAuY29sLXMtMSB7d2lkdGg6IDguMzMlO30NCiAgLmNvbC1zLTIge3dpZHRoOiAxNi42NiU7fQ0KICAuY29sLXMtMyB7d2lkdGg6IDI1JTt9DQogIC5jb2wtcy00IHt3aWR0aDogMzMuMzMlO30NCiAgLmNvbC1zLTUge3dpZHRoOiA0MS42NiU7fQ0KICAuY29sLXMtNiB7d2lkdGg6IDUwJTt9DQogIC5jb2wtcy03IHt3aWR0aDogNTguMzMlO30NCiAgLmNvbC1zLTgge3dpZHRoOiA2Ni42NiU7fQ0KICAuY29sLXMtOSB7d2lkdGg6IDc1JTt9DQogIC5jb2wtcy0xMCB7d2lkdGg6IDgzLjMzJTt9DQogIC5jb2wtcy0xMSB7d2lkdGg6IDkxLjY2JTt9DQogIC5jb2wtcy0xMiB7d2lkdGg6IDEwMCU7fQ0KfQ0KQG1lZGlhIG9ubHkgc2NyZWVuIGFuZCAobWluLXdpZHRoOiA3NjhweCkgew0KICAvKiBGb3IgZGVza3RvcDogKi8NCiAgLmNvbC0xIHt3aWR0aDogOC4zMyU7fQ0KICAuY29sLTIge3dpZHRoOiAxNi42NiU7fQ0KICAuY29sLTMge3dpZHRoOiAyNSU7fQ0KICAuY29sLTQge3dpZHRoOiAzMy4zMyU7fQ0KICAuY29sLTUge3dpZHRoOiA0MS42NiU7fQ0KICAuY29sLTYge3dpZHRoOiA1MCU7fQ0KICAuY29sLTcge3dpZHRoOiA1OC4zMyU7fQ0KICAuY29sLTgge3dpZHRoOiA2Ni42NiU7fQ0KICAuY29sLTkge3dpZHRoOiA3NSU7fQ0KICAuY29sLTEwIHt3aWR0aDogODMuMzMlO30NCiAgLmNvbC0xMSB7d2lkdGg6IDkxLjY2JTt9DQogIC5jb2wtMTIge3dpZHRoOiAxMDAlO30NCn0NCjwvc3R5bGU+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPiA6Oi13ZWJraXQtc2Nyb2xsYmFye3dpZHRoOjdweDtoZWlnaHQ6N3B4O306Oi13ZWJraXQtc2Nyb2xsYmFyLXRyYWNre2JhY2tncm91bmQ6I2ZmZjt9Ojotd2Via2l0LXNjcm9sbGJhci10aHVtYntib3JkZXItcmFkaXVzOjVweDtiYWNrZ3JvdW5kOiMyZjQ1ZmY7fTwvc3R5bGU+PC9oZWFkPg0KPGJvZHk+DQoNCjxkaXYgY2xhc3M9ImhlYWRlciI+DQogIDxoMT5FZ3lwdDwvaDE+DQo8L2Rpdj4NCg0KPGRpdiBjbGFzcz0icm93Ij4NCiAgPGRpdiBjbGFzcz0iY29sLTMgY29sLXMtMyBtZW51Ij4NCiAgICA8dWw+DQogICAgICA8bGk+c3BoaW54IDwvbGk+DQogICAgICA8bGk+Q2Fpcm8gPC9saT4NCiAgICAgIDxsaT5UaGUgcHlyYW1pZHMgPC9saT4NCiAgICA8L3VsPg0KICA8L2Rpdj4NCg0KICA8ZGl2IGNsYXNzPSJjb2wtNiBjb2wtcy05Ij4NCiAgICA8aDE+VGhlIENpdHk8L2gxPg0KICAgIDxwPkVneXB0LCBhIGNvdW50cnkgbGlua2luZyBub3J0aGVhc3QgQWZyaWNhIHdpdGggdGhlIE1pZGRsZSBFYXN0LCBkYXRlcyB0byB0aGUgdGltZSBvZiB0aGUgcGhhcmFvaHMuIE1pbGxlbm5pYS1vbGQgbW9udW1lbnRzIHNpdCBhbG9uZyB0aGUgZmVydGlsZSBOaWxlIFJpdmVyIFZhbGxleSwgaW5jbHVkaW5nIEdpemEncyBjb2xvc3NhbCBQeXJhbWlkcyBhbmQgR3JlYXQgU3BoaW54IGFzIHdlbGwgYXMgTHV4b3IncyBoaWVyb2dseXBoLWxpbmVkIEthcm5hayBUZW1wbGUgYW5kIFZhbGxleSBvZiB0aGUgS2luZ3MgdG9tYnMuIFRoZSBjYXBpdGFsLCBDYWlybywgaXMgaG9tZSB0byBPdHRvbWFuIGxhbmRtYXJrcyBsaWtlIE11aGFtbWFkIEFsaSBNb3NxdWUgYW5kIHRoZSBFZ3lwdGlhbiBNdXNldW0uPC9wPg0KICA8L2Rpdj4NCg0KICA8ZGl2IGNsYXNzPSJjb2wtMyBjb2wtcy0xMiI+DQogICAgPGRpdiBjbGFzcz0iYXNpZGUiPg0KICAgICAgPGgyPldoZXJlPzwvaDI+DQogICAgICA8cD4gICBhIGNvdW50cnkgbGlua2luZyBub3J0aGVhc3QgQWZyaWNhIHdpdGggdGhlIE1pZGRsZSBFYXN0LjwvcD4NCiAgICAgIDxoMj5Ib3c/PC9oMj4NCiAgICAgIDxwPllvdSBjYW4gcmVhY2ggZWd5cHQgYWlycG9ydCBmcm9tIGFsbCBvdmVyIHRoZSB3b3JsZC48L3A+DQogICAgPC9kaXY+DQogIDwvZGl2Pg0KPC9kaXY+DQoNCjxkaXYgY2xhc3M9ImZvb3RlciI+DQogIDxwPlJlc2l6ZSB0aGUgYnJvd3NlciB3aW5kb3cgdG8gc2VlIGhvdyB0aGUgY29udGVudCByZXNwb25kIHRvIHRoZSByZXNpemluZy48L3A+DQo8L2Rpdj4NCg0KPC9ib2R5Pg0KPC9odG1sPg==