Resto

A sample webpage with simple and elegant styling.

by pragya91

HTML

<script src="https://github.com/iamshaunjp/psd-to-wp/tree/master"></script>
	<body>
		<header>
			<div class="wrapper">
				<h1 class="logo">Resto</h1>
				<nav>
					<h2>Main Navigation</h2>
					<ul>
						<li><a href="">Our Story</a></li>
						<li><a href="">Menu</a></li>
						<li><a href="">Reservation</a></li>
						<li><a href="">News</a></li>
						<li><a href="">Reviews</a></li>
					</ul>
				</nav>
			</div>
		</header>

		<!-- start homepage content -->
		<div id="main-banner">
			<img src="https://rawgit.com/iamshaunjp/psd-to-wp/master/images/banner.jpg" alt="Welcome to Resto">
		</div>

		<div class="wrapper">
			<section id="home-menu">
				<h2>Menu</h2>
				<ul>
					<li>
						<span class="dish">Viognier</span>
						<span class="price">$30</span>
						<span class="description">White Wine, well known for their floral aromas</span>
					</li>
					<li>
						<span class="dish">Syrah/Shiraz</span>
						<span class="price">$30</span>
						<span class="description">Dark skinned grape variety</span>
					</li>
					
					<li>
						<span class="dish">Cabernet Sauvignon</span>
						<span class="price">$30</span>
						<span class="description">Most widely recognized red wine grape</span>
					</li>
					
					<li>
						<span class="dish">Gamay</span>
						<span class="price">$30</span>
						<span class="description">Gamay is a purple-colored grape variety </span>
					</li>
					
					<li>
						<span class="dish">Pinot noir</span>
						<span class="price">$30</span>
						<span class="description">The most romantic of wines</span>
					</li>
					
					<li>
						<span class="dish">Riesling</span>
						<span class="price">$30</span>
						<span class="description">Dry, semi-sweet, sparkling white wines</span>
					</li>
					
					<li>
						<span class="dish">Chardonnay</span>
						<span class="price">$30</span>
						<span class="description">An important component of many sparkling wines around the world, including...

CSS

body {
  font-family: Georgia;
  margin:0;
}

.wrapper{
  width:100%;
  max-width:1180px;
  padding: 0 10px;
  margin: 0 auto;
}

h1.logo{
  width:100px;
  background-image : url(https://rawgit.com/iamshaunjp/psd-to-wp/master/images/logo.png);
  background-repeat: no-repeat;
  text-indent: -10000px;
  float:left;
}

header nav{
  float: right;
}

header nav h2{
  text-indent:-10000px;
  height:0;
  margin:0;
}

header nav li{
  float:left;
  list-style-type: none;
  margin:10px 20px;
}

header nav li a{
  text-decoration: none;
  color:#333;
  font-size: 18px;
}

#main-banner, #main-banner img{
  width:100%;
}

#main-banner img{
  border-bottom: 5px solid #f45949;
}

#home-menu h2{
  background-image: url(https://rawgit.com/iamshaunjp/psd-to-wp/master/images/menu-head.png);
  background-repeat: no-repeat;
  width:156px;
  height:76px;
  margin: 0 auto;
  text-indent: -10000px;
  position:relative;
  margin-top:-5px;
}
  
header nav li a{
  text-decoration: none;
  color:#333;
  font-size: 18px;
}

#main-banner, #main-banner img{
  width:100%;
}

#main-banner img{
  border-bottom: 5px solid #f45112;
}

#home-menu ul{
  padding:0;
  list-style-type:none;
}

#home-menu ul:after{
  content:"";
  clear: both;
  display: block;
}

#home-menu li{
  float:left;
  width:42%;
  margin: 20px 0 20px 8%;
  padding: 0;
}

#home-menu li:nth-child(odd){
  margin: 20px 8% 20px 0;
}

.dish{
  font-weight: bold;
  float:left;
  position: relative;
  z-index:1;
  background-color:#fff;
  padding-right:12px;
}

.price{
  float:right;
  font-weight: bold;
  position: relative;
  z-index:1;
  background-color:#fff;
  padding-left:15px;
}

.description{
  clear:both;
  display:block;
  font-size:9px;
  color:#999;
  font-style: italic;
  border-top: 1px solid #ddd;
  position: relative;
  top:-8px;
  padding-top:10px;
}

#featured{
  padding:0;
}

#featured li{
  float:left;
  width:23%;
  margin:1%;
  list-style-type:none;
}

#featured li img{
  width:100%;
 ...