Difference between revisions of "Team:Newcastle/Team"

Line 1: Line 1:
−
 
+
{{Newcastle5}}
  
 
<!DOCTYPE html>
 
<!DOCTYPE html>
−
<html lang="en-us">
+
<html>
 
<head>
 
<head>
−
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 
<style>
 
<style>
−
.city {
+
#customers {
−
     float: left;
+
     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
−
     margin: 5px;
+
     border-collapse: collapse;
−
     padding: 15px;
+
     width: 100%;
−
    max-width: 300px;
+
}
−
    height: 300px;
+
−
    border: 1px solid black;
+
−
}  
+
−
</style>
+
−
</head>
+
−
<body>
+
  
−
<h1>Responsive Web Design Demo</h1>
+
#customers td, #customers th {
 +
    border: 1px solid #ddd;
 +
    padding: 8px;
 +
}
  
−
<div class="city">
+
#customers tr:nth-child(even){background-color: #f2f2f2;}
−
  <h2>London</h2>
+
−
  <p>London is the capital city of England.</p>
+
−
  <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
+
−
</div>
+
  
−
<div class="city">
+
#customers tr:hover {background-color: #ddd;}
−
  <h2>Paris</h2>
+
−
  <p>Paris is the capital of France.</p>
+
−
  <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
+
−
</div>
+
  
−
<div class="city">
+
#customers th {
−
  <h2>Tokyo</h2>
+
    padding-top: 12px;
−
  <p>Tokyo is the capital of Japan.</p>
+
    padding-bottom: 12px;
−
  <p>It is the center of the Greater Tokyo Area,  and the most populous metropolitan area in the world.</p>
+
    text-align: left;
−
</div>
+
    background-color: #4CAF50;
 +
    color: white;
 +
}
 +
</style>
 +
</head>
 +
<body>
  
−
<div class="city">
+
<table id="customers">
−
   <h2>New York</h2>
+
   <tr>
−
   <p>The City of New York is the most populous city in the United States.</p>
+
    <th>Company</th>
−
   <p>New York is an important center for international diplomacy and has been described as the cultural and financial capital of the world.</p>
+
    <th>Contact</th>
−
</div>
+
    <th>Country</th>
 +
   </tr>
 +
  <tr>
 +
    <td>Alfreds Futterkiste</td>
 +
    <td>Maria Anders</td>
 +
    <td>Germany</td>
 +
   </tr>
 +
  <tr>
 +
    <td>Berglunds snabbköp</td>
 +
    <td>Christina Berglund</td>
 +
    <td>Sweden</td>
 +
  </tr>
 +
  <tr>
 +
    <td>Centro comercial Moctezuma</td>
 +
    <td>Francisco Chang</td>
 +
    <td>Mexico</td>
 +
  </tr>
 +
  <tr>
 +
    <td>Ernst Handel</td>
 +
    <td>Roland Mendel</td>
 +
    <td>Austria</td>
 +
  </tr>
 +
  <tr>
 +
    <td>Island Trading</td>
 +
    <td>Helen Bennett</td>
 +
    <td>UK</td>
 +
  </tr>
 +
  <tr>
 +
    <td>Königlich Essen</td>
 +
    <td>Philip Cramer</td>
 +
    <td>Germany</td>
 +
  </tr>
 +
  <tr>
 +
    <td>Laughing Bacchus Winecellars</td>
 +
    <td>Yoshi Tannamuri</td>
 +
    <td>Canada</td>
 +
  </tr>
 +
  <tr>
 +
    <td>Magazzini Alimentari Riuniti</td>
 +
    <td>Giovanni Rovelli</td>
 +
    <td>Italy</td>
 +
  </tr>
 +
  <tr>
 +
    <td>North/South</td>
 +
    <td>Simon Crowther</td>
 +
    <td>UK</td>
 +
  </tr>
 +
  <tr>
 +
    <td>Paris spécialités</td>
 +
    <td>Marie Bertrand</td>
 +
    <td>France</td>
 +
  </tr>
 +
</table>
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 20:52, 7 September 2017

Show Menu

<!DOCTYPE html>

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
North/South Simon Crowther UK
Paris spécialités Marie Bertrand France