ﺍﺮﮔ ﺶﻨﮐﺍﻭ ﺖﯾﺎﺳ ﺏﻭ ﯽﺣﺍﺮﻃ ﯽﻓﺮﻌﻣ

فهرست مطالب

نمایش فهرست مطالب

؟ﺖﺴﯿﭼ ﻮﯿﺴﻧﺎﭙﺴﯾﺭ ﺖﯾﺎﺳ ﯽﺣﺍﺮﻃ

.ﺪﺳﺮﺑ ﺮﻈﻧ ﻪﺑ ﺏﻮﺧ ﺎﻫ ﻩﺎﮕﺘﺳﺩ ﻪﻤﻫ ﺭﺩ ﺎﻤﺷ ﺏﻭ ﻪﺤﻔﺻ ﺩﻮﺷ ﯽﻣ ﺚﻋﺎﺑ ﻮﯿﺴﻧﺎﭙﺴﯾﺭ ﺏﻭ ﯽﺣﺍﺮﻃ

.ﺪﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ CSS ﻭ HTML ﺯﺍ ﻂﻘﻓ ﻮﯿﺴﻧﺎﭙﺴﯾﺭ ﺏﻭ ﯽﺣﺍﺮﻃ

.ﺖﺴﯿﻧ ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﺎﯾ ﻪﻣﺎﻧﺮﺑ ﮏﯾ ﻮﯿﺴﻧﺎﭙﺴﯾﺭ ﺏﻭ ﯽﺣﺍﺮﻃ

ﻥﺍﺮﺑﺭﺎﮐ ﻪﻤﻫ ﯼﺍﺮﺑ ﻪﺑﺮﺠﺗ ﻦﯾﺮﺘﻬﺑ ﯼﺍﺮﺑ ﯽﺣﺍﺮﻃ

.ﺪﺷﺎﺑ ﻥﺎﺳﺁ ﻥﺁ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ،ﻩﺎﮕﺘﺳﺩ ﻪﺑ ﻪﺟﻮﺗ ﻥﻭﺪﺑ ﻭ ﺪﺷﺎﺑ ﻪﺘﺷﺍﺩ ﯽﺑﻮﺧ ﺮﻫﺎﻇ ﺪﯾﺎﺑ ﺎﻤﺷ

:ﺪﻨﻨﮐ ﻢﯿﻈﻨﺗ ﯽﻫﺎﮕﺘﺳﺩ ﺮﻫ ﺎﺑ ﺐﺳﺎﻨﺘﻣ ﺍﺭ ﻥﺁ ﯼﺍﻮﺘﺤﻣ ﻪﮑﻠﺑ ،ﺪﻧﺭﺍﺬﮕﺑ ﺭﺎﻨﮐ ﺮﺗﮏﭼﻮﮐ ﯼ

Desktop

Tablet

Phone

.ﺪﻨﯾﻮﮔﯽﻣ ﺍﺮﮔﺶﻨﮐﺍﻭ ﺏﻭ ﯽﺣﺍﺮﻃ ﻥﺁ ﻪﺑ ،ﺪﯿﻫﺩ ﻥﺎﺸﻧ ﺎﺒﯾﺯ ﯼﺍﻪﺤﻔﺻ ﺮﻫ ﺭﺩ ﺍ

:ﻢﯿﻨﮐ ﯽﻣ ﻪﯾﺰﺠﺗ ﯼﺪﻌﺑ ﯼﺎﻫ ﻞﺼﻓ ﺭﺩ ﻡﺎﮔ ﻪﺑ ﻡﺎﮔ ﺕﺭﻮﺻ ﻪﺑ ﺍﺭ ﺪﮐ ﺎﻣ ،ﺪﯿﺷﺎﺒﻧ ﻥﺍﺮﮕﻧ ﺪﯾﺪﺸﻧ

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!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>Chania</h1>
</div>

<div class="row">
  <div class="col-3 col-s-3 menu">
    <ul>
      <li>The Flight</li>
      <li>The City</li>
      <li>The Island</li>
      <li>The Food</li>
    </ul>
  </div>

  <div class="col-6 col-s-9">
    <h1>The City</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
  </div>

  <div class="col-3 col-s-12">
    <div class="aside">
      <h2>What?</h2>
      <p>Chania is a city on the island of Crete.</p>
      <h2>Where?</h2>
      <p>Crete is a Greek island in the Mediterranean Sea.</p>
      <h2>How?</h2>
      <p>You can reach Chania airport from all over Europe.</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>