Tiles

by Avnish Sanujay

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<nav class="nav">
    <ul>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">About Us</a>
        </li>
        <li>
            <a href="#">Bakery Menu</a>
        </li>
        <li>
           <a href="#">Restaurant Menu<span class="">&#9662;</span></a>
            <ul>
                <li><a href="#">Apetizers</a></li>
                <li><a href="#">Entres</a></li>
                <li><a href="#">Deserts</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Contact Us</a>
        </li>
        <li>
            <a href="#">More<span class="">&#9662;</span></a>
            <ul>
                <li><a href="#">Reservations</a></li>
                <li><a href="#">Customer Loyalty Program</a></li>
                <li><a href="#">Reviews</a></li>
                <li><a href="#">FBLA Credits</a></li>
            </ul>
    </ul>
</nav>

<body>
<div class="box"style="position:absolute; top:75px; left:480px">
<center>
<h1>Welcome</h1>
</center>
Here at No Wheat Treats, baking is our passion. We use only the finest and freshest ingredients to create pastries that will fill your belly and warm your heart. All of our delicious treats and dishes are all gluten and wheat-free. We have the most renouned chefs creating these great creations. Come and visit - your taste buds will thank you!</div>

</body>


<div class="aboutpic" style="position:absolute; top:100px; left:240px"></div>
<div class="tall" style="position:absolute; top:100px; left:810px;height:450px"></div>
<div class="tall2" style="position:absolute; top:100px; left:0px;height:220px"></div>
<div class="tall3" style="position:absolute; top:330px; left:0px;height:220px"></div>
<div class="tall4" style="position:absolute; top:330px;...

CSS

.nav ul {
    *zoom:1;
    list-style:none;
    margin:0 auto;
    padding:300;
    background:#F5ECCE;
}
.nav ul:before,.nav ul:after {
    content:"";
    display:table;
}
.nav ul:after {
    clear:both;
}
.nav ul > li {
    float: left;
    position:relative;
}
.nav a {
     display: block;
    padding:10px 20px;
    line-height:1.2em;
    color:#595959;
    border-left:1px solid #595959;
    text-decoration:none;
}
.nav a:hover {
    text-decoration:none;
    background:#F5ECCE;
}
.nav li ul {
    background: #FFF9DE;
}
.nav li ul li {
    width:200px;
}
.nav li ul a {
    border:none;
}
.nav li ul a:hover {
    background:rgba(0,0,0,0.2);
}
.nav li ul {
    position:absolute;
    left:0;
    top:36px;
    z-index:1;
    max-height:0;
    overflow:hidden;
    -webkit-transform:perspective(400) rotate3d(1,0,0,-90deg);
    -webkit-transform-origin:50% 0;
    -webkit-transition:350ms;
    -moz-transition:350ms;
    -o-transition:350ms;
    transition:350ms;
}
.nav ul > li:hover ul {
    max-height:1000px;
    -webkit-transform:perspective(400) rotate3d(0,0,0,0);
}
#triangle-down {
	width: 0;
	height: 0;
	border-left: 69px solid transparent;
	border-right: 69px solid transparent;
	border-top: 69px solid black;
}

.box {
    background-color: #F5ECCE;
    width: 300px;
    height: 450px;
    padding: 25px;
    margin: 25px;
}
.aboutpic {
width: 260px;
float: right;
background-image:url('https://static.wixstatic.com/media/189a587f3b713716c6b7c1addd4f8fb4.jpg/v1/fill/w_299,h_480,al_c,q_80,usm_0.66_1.00_0.01/189a587f3b713716c6b7c1addd4f8fb4.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: 110%;
height:450px; /* replace 139 px with something you need */
    border: solid 5px black;
}
.tall {
width: 260px;
float: right;
background-image:url('http://foodontap.avtech.com.au/wp-content/uploads/2013/10/Stonefruit-puff-pastry-tart-260x340.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: 135%;
height:450px;...