Untitled

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
</style>
<link href="css/global.css" rel="stylesheet" type="text/css">
<style type="text/css"></style>
<!--The following script tag downloads a font from the free fonts server for use within the web page. We recommend that you do not modify it.-->
<script src="http://webfonts.creativecloud.com/playfair-display:n4:default.js" type="text/javascript"></script>
</head>

<div id="jumbotron">
          <div id="jumbotron-headline">
            <h1> Announcement Cards<br>
            The ideal way to announce details of the funeral service </h1>
            <div id="product-button">
<ul id="dropdown-menu-freebie">
                <li>
                  <ul class="dropdown-menu">
                    <li><a href="#">1. Select a Product <img src="img/arrow.png" alt=""/></a>
                      <ul>
                        <li><a href="#">Item 1</a></li>
                        <li><a href="#">Item 2</a></li>
                        <li><a href="#">Item 3</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="main-content-container">
      <div id="testimonial-content">
<blockquote class="testimonial">
          <p>I just wanted to say a massive thank you for your help in printing the order of service for my father’s funeral. You were amazingly efficient and helpful, and we were hugely impressed by the finished product- the printing was beautiful. Thank you so much</p>
</blockquote>
<div class="arrow-down"></div>
<p class="testimonial-author">Terase | <span>Location</span>      </p>
      </div>
</body></html>

/* CSS */
/* TESTIMONIAL */

#testimonial-content {
	width: 920px;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFF;
	border: 2px solid #000;
	margin-bottom: 20px;
	margin-top: 10px;
	clear: both;
	padding: 20px;
}

.testimonial {
	margin: 0;
	background: #cadcdc;
	padding: 10px 50px;
	position: relative;
	font-family: Georgia, serif;
	color: #666;
	border-radius: 5px;
	font-style: italic;
	text-shadow: 0 1px 0 #ECFBFF;
}

.testimonial:before, .testimonial:after {
    content: "\201C";
    position: absolute;
    font-size: 80px;
    line-height: 1;
    color: #999;
    font-style: normal;
}

.testimonial:before {
    top: 0;
    left: 10px;
}
.testimonial:after {
    content: "\201D";
    right: 10px;
    bottom: -0.5em;
}
.arrow-down {
	width: 0;
	height: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 15px solid #cadcdc;
	margin: 0 0 0 25px;
}
.testimonial-author {
    margin: 0 0 0 25px;
    font-family: Arial, Helvetica, sans-serif;
    color: #999;
    text-align:left;
}
.testimonial-author span {
    font-size: 12px;
    color: #666;
}

/* PRODUCT BUTTON */

#product-button {
	width: 380px;
	float: right;
	margin-right: 35px;
	text-align: left;
	padding-top: 10px;
}

.rounded {
	border-radius:15px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
}

		ul#dropdown-menu-freebie {
	display: table-row;
	list-style: none;
	padding: 0;
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: 0;
	margin-left: 0px;
}
		ul#dropdown-menu-freebie > li { float: right; margin-right: 0px; margin-bottom: 20px; }
		ul#dropdown-menu-freebie > li:last-child { margin-right: 0; }

ul.dropdown-menu li ul
{
	display: none;
	list-style: none;
	text-align: left;
}

ul.dropdown-menu li:hover ul
{
	display: table;
	margin: 0 auto;
	background-color: #23aef1;
	-moz-box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.5);
}

ul.dropdown-menu
{
	padding: 0 20px;
	border-radius: 10px;
	list-style: none;
	position: relative;
	display: table;
	padding: 0;
	margin: 0;
}

ul.dropdown-menu::after
{
	content: "";
	display: table;
	margin: 0 auto;
}

ul.dropdown-menu ul > li:hover
{
	background: #4b545f;
	background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
	background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
	background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}

ul.dropdown-menu li:hover a
{
	color: #2b2b2b;
}

ul.dropdown-menu li a
{
	display: block;
	color: #2b2b2b;
	text-decoration: none;
}

ul.dropdown-menu > li
{
	border-radius: 8px;
}

ul.dropdown-menu > li > a
{
	color: #2b2b2b;
	background-color: #f9d329;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	position: relative;
	padding: 10px 15px;
	width: 380px;
	z-index: 5;
	font-size: 22px;
	-moz-box-shadow: 0 4px 10px -3px #000;
	-webkit-box-shadow: 0 4px 10px -3px #000;
	box-shadow: 0 4px 10px -3px #000;
}

ul.dropdown-menu > li > a:hover
{
	background-color: #f9d329;
	color: #2b2b2b;
}

ul.dropdown-menu > li > a > img
{
	float: right;
	border: none;
}

ul.dropdown-menu ul
{
	border-radius: 0px;
	padding: 0;
}

ul.dropdown-menu ul li
{
	float: none;
	position: relative;
	border-bottom: 1px solid transparent;
}

ul.dropdown-menu ul li a
{
	font-size: 16px;
	padding: 10px;
	color: #2b2b2b;
	width: 300px;
}

ul.dropdown-menu ul li:hover
{
	background: #cecece;
	border-bottom: 1px solid #fff;
	-moz-box-shadow: inset 0 7px 9px -8px #000;
	-webkit-box-shadow: inset 0 7px 9px -8px #000;
	box-shadow: inset 0 7px 9px -8px #000;
}

ul.dropdown-menu ul li:last-child:hover
{
	border-bottom: none;
}