<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<meta http-equiv="Content-Style-Type" content="text/css">

<style>


* {

  box-sizing: border-box;

}


.row::after {

  content: "";

  clear: both;

  display: table;

}


[class*="col-"] {

  float: left;

  padding: 15px;

}


html {

    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック" , "MS Gothic", "Noto Sans CJK JP", TakaoPGothic, sans-serif;

}


.header {

  background-color: #2E04C7;

  color: #ffffff;

  padding: 15px;

  font-family: Flat Brush;

}


.menu ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

  width: 200px;

  background-color: #f1f1f1;

}


.menu li {

  display: block;

  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);

  text-align: center;

}


.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: 14px;

  padding: 15px;

  font-family: Flat Brush;

}


/* 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%;}

}

ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

  width: 200px;

  background-color: #f1f1f1;

}


li a {

  display: block;

  color: #FFFFFF;

  padding: 4px 8px;

  text-decoration: none;

  text-align: center;

}

</style>

<link rel="stylesheet" type="text/css" href="pages_style.css" />

<title>Index Page</title>

</head>

<div class="header">

  <h1>Westwood 英会話</h1>

</div>

<body>

<div class="row">

  <div class="col-3 col-s-3 menu">

    <ul>

	  <li><a href="index.html">HOME</a></li> 

      <li><a href="profile.html">PROFILE</a></li>

	  <li><a href="qa.html">Q & A</a></li>

      <li><a href="kids.html">KIDS</a></li>

      <li><a href="album_index.html">ALBUM</a></li>

      <li><a href="http://ameblo.jp/westwood-english/">WHAT'S NEW?</a></li>

      <li><a href="http://preply.com/en/tutor/4439906">ONLINE LESSONS</a></li>

	  <li><a href="map.html">MAP</a></li>

	  <li><a href="mailto:westwood2003@sala.dti.ne.jp">MAIL</a></li>

	  <li><a href="https://preply.com/en/?pref=MTE4Mjk5NjE=&id=1707200296.843417">ONLINE LESSONS 30% OFF</a></li>

      
    </ul>

  </div>


  <div class="col-6 col-s-9">

  
    <h1>Welcome To Westwood 英会話 Homepage</h1>

    <p>We specialize in teaching English to Japanese students between the age of five years old to adults.</p>

  </div>


  <div class="col-3 col-s-12">

    <div class="aside">

      <h2>What?</h2>

      <p>Kids' classes, beginners, intermediate and advance classes.</p>

      <h2>Where?</h2>

      <p>Aichi-ken Toyokawa-shi</p>

      <h2>How?</h2>

      <p>Group lessons, private one-to-one lessons and more.</p>

    </div>

  </div>

</div>


<div class="footer">

  <p>Westwood 英会話 2025</p>

</div>


</body>

</html>