Test: Difference between revisions

From Open Source Ecology
Jump to navigation Jump to search
No edit summary
No edit summary
Line 2: Line 2:
<html>
<html>
<head>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
<style>
.flex-container {
* {
   display: flex;
   box-sizing: border-box;
  flex-wrap: wrap;
  background-color: DodgerBlue;
}
}


.flex-container > div {
.row::after {
   background-color: #f1f1f1;
  content: "";
   width: 200px;
  clear: both;
   margin: 10px;
  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;
   text-align: center;
   line-height:25px;
   font-size: 12px;
   font-size: 30px;
  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>
</style>
</head>
</head>
<body>
<body>
<h1>The flex-wrap Property</h1>


<p>The "flex-wrap: wrap;" specifies that the flex items will wrap if necessary:</p>
<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="flex-container">
  <div class="col-6 col-s-9">
  <div>There are many opppakfd afdjk fkads; dfkajd k;asjdf k</div>
    <h1>The City</h1>
  <div>href="https://wiki.opensourceecology.org/images/5/55/Marcinted.jpg"</div>
    <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>3</div>
   </div>
   <div>4</div>
 
  <div>5</div>
   <div class="col-3 col-s-12">
  <div>6</div>
    <div class="aside">
  <div>7</div>
      <h2>What?</h2>
  <div>8</div>
      <p>Chania is a city on the island of Crete.</p>
  <div>9</div>
      <h2>Where?</h2>
  <div>10</div>
      <p>Crete is a Greek island in the Mediterranean Sea.</p>
  <div>11</div>
      <h2>How?</h2>
   <div>12</div>
      <p>You can reach Chania airport from all over Europe.</p>
    </div>
   </div>
</div>
</div>


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


</body>
</body>
</html>
</html>

Revision as of 05:57, 24 July 2020

<!DOCTYPE html>

Chania

  • The Flight
  • The City
  • The Island
  • The Food

The City

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.

What?

Chania is a city on the island of Crete.

Where?

Crete is a Greek island in the Mediterranean Sea.

How?

You can reach Chania airport from all over Europe.

Resize the browser window to see how the content respond to the resizing.

Retrieved from "https://wiki.opensourceecology.org/index.php?title=Test&oldid=228352"