خودتان امتحان کنید

<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="lib/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}
.w3-row-padding img {margin-bottom: 12px}
</style>
<body>

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

<header class="w3-panel w3-padding-128 w3-center w3-opacity">
  <h1 class="w3-xlarge">PHOTOGRAPHER</h1>
  <h1>John Doe</h1>
  
  <div class="w3-padding-32">
    <div class="w3-bar w3-border">
      <a href="#" class="w3-bar-item w3-button">Home</a>
      <a href="#" class="w3-bar-item w3-button w3-light-grey">Portfolio</a>
      <a href="#" class="w3-bar-item w3-button">Contact</a>
      <a href="#" class="w3-bar-item w3-button w3-hide-small">Weddings</a>
    </div>
  </div>
</header>

<div class="w3-row-padding w3-grayscale" style="margin-bottom:128px">
  <div class="w3-half">
    <img src="w3/w3images/wedding.jpg" style="width:100%">
    <img src="w3/w3images/rocks.jpg" style="width:100%">
    <img src="w3/w3images/falls2.jpg" style="width:100%">
    <img src="w3/w3images/paris.jpg" style="width:100%">
    <img src="w3/w3images/nature.jpg" style="width:100%">
    <img src="w3/w3images/mist.jpg" style="width:100%">
    <img src="w3/w3images/paris.jpg" style="width:100%">
  </div>

<footer class="w3-container w3-padding-64 w3-light-grey w3-center"> 
  <a href="#" class="w3-hover-text-indigo"><i class="fa fa-facebook-official"></i></a>
  <a href="#" class="w3-hover-text-red"><i class="fa fa-pinterest-p"></i></a>
  <a href="#" class="w3-hover-text-light-blue"><i class="fa fa-twitter"></i></a>
  <a href="#" class="w3-hover-text-grey"><i class="fa fa-flickr"></i></a>
  <a href="#" class="w3-hover-text-indigo"><i class="fa fa-linkedin"></i></a>
  <p>Powered by <a href="http://beyamooz.com/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-w3-css" target="_blank" class="w3-hover-text-green">w3.css</a></p>
</footer>

</body>
</html>

Report a Problem: