W3Schools Tryit Editor

Get your own website

<!DOCTYPE html>

<html>
<title>W3.CSS Black & White Photo Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
body,h1 {
  font-family:"Raleway",Arial,sans-serif
}

h1 {
  letter-spacing:6px
}

.gallery {
  column-count:2;
  column-gap:12px;
}

.gallery img {
  display:block;
  width:100%;
  margin-bottom:12px;
}

@media (max-width:600px) {
  .gallery {
    column-count:1;
  }
}
</style>

<body>

<div class="w3-content" style="max-width:1500px">

<header class="w3-panel w3-center w3-opacity"
style="padding:128px 16px">

<h1 class="w3-xlarge">PHOTOGRAPHER</h1>
  <h1>John Doe</h1>

<div class="w3-padding-32">

```
<nav class="w3-flex w3-border"
style="display:inline-flex">

<a href="#" class="w3-button">Home</a>

<a href="#"
  class="w3-button w3-light-grey">
  Portfolio
  </a>

<a href="#" class="w3-button">
  Contact
  </a>

<a href="#"
  class="w3-button w3-hide-small">
  Weddings
  </a>

</nav>
```

</div>

</header>

<div class="gallery w3-grayscale"
style="margin-bottom:128px">

<img src="/w3images/wedding.jpg"
alt="Wedding" width="800" height="500">

<img src="/w3images/rocks.jpg"
alt="Rocks" width="500" height="850">

<img src="/w3images/falls2.jpg"
alt="Waterfall" width="1000" height="500">

<img src="/w3images/paris.jpg"
alt="Paris" width="400" height="300">

<img src="/w3images/nature.jpg"
alt="Nature" width="600" height="400">

<img src="/w3images/mist.jpg"
alt="Mist" width="1500" height="380">

<img src="/w3images/paris.jpg"
alt="Paris" width="400" height="300">

<img src="/w3images/underwater.jpg"
alt="Underwater" width="800" height="800">

<img src="/w3images/ocean.jpg"
alt="Ocean" width="1000" height="500">

<img src="/w3images/wedding.jpg"
alt="Wedding" width="800" height="500">

<img src="/w3images/mountainskies.jpg"
alt="Mountain Sky" width="1000" height="500">

<img src="/w3images/rocks.jpg"
alt="Rocks" width="500" height="850">

<img src="/w3images/underwater.jpg"
alt="Underwater" width="800" height="800">

</div>

</div>

<footer class="w3-container w3-padding-64
w3-light-grey w3-center w3-large">

<i class="fa fa-facebook-official w3-hover-opacity"></i> <i class="fa fa-instagram w3-hover-opacity"></i> <i class="fa fa-snapchat w3-hover-opacity"></i> <i class="fa fa-pinterest-p w3-hover-opacity"></i> <i class="fa fa-twitter w3-hover-opacity"></i> <i class="fa fa-linkedin w3-hover-opacity"></i>

<p>
  Powered by
  <a href="https://www.w3schools.com/w3css/default.asp"
  target="_blank"
  class="w3-hover-text-green">w3.css</a>
  </p>

</footer>

</body>
</html>