<!-- The Header starts! -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Oswald:400,700);

a, a:hover, a:visited {
  text-decoration: none;
  color: #FFF;
}

a:hover {
  text-decoration: none;
}

ul li {
  list-style-type: none;
}

font{
  font-size:1em !important
}

/* ######## ######## ######## */



/* ######## BODY ######## */

body {
  margin: 0;
  background: #EEEEEE;
    font: normal 100% 'Open Sans', sans-serif;
    color: #000;
}

.sCont{
  width: 95%;
    margin-left: auto;
}

.bg-w{
  padding: 10px;
  background-color: #FFF;
}

.bg-w h1{
  margin: 0 0 15px;
  padding: 0 0 10px;
  border-bottom: 1px solid #8C8C8C;
  font: bold 2em 'Oswald', sans-serif;
  line-height: 42px;
  color: #444;
}

/* ######## ######## ######## */



/* ######## HEADER ######## */

header {
    width: 100%;
    margin: 0;
    clear: both;
    background: #fff;
}

header #logo{
  margin: 0px;
  padding: 30px 0;
}

header #logo img{
  max-width: 100%;
}


header #logo .mTitle{
  padding: 0 0 5px;
  font: bold 1.8em 'Oswald', sans-serif;
  line-height: 60px;
  color: #3498db;
}

header #logo .sTitle{
  padding: 0;
  font: 400 0.9em 'Open Sans', sans-serif;
  line-height: 30px;
  color: #666;
}

/* ######## ######## ######## */



/* ######## NAV ######## */

nav {
  margin: 0;
  background-color: #3498db;
  color: #FFF;
}

nav ul{
  width: 100%;
  margin: 0 auto;
  padding: 15px 0 15px;
  font: bold 1em 'Ubuntu', sans-serif;
}

nav ul li{
  display: inline-block;
  width: 40%;
  margin: 0.5% 4.5%;
  padding: 0;
  text-align: center;
}

nav ul li a{
  display: block;
  padding: 15px 0;
  border: 0;
  font: 400 0.9em 'Oswald';
  text-transform: uppercase;
  color: #FFF;
}

nav ul li a i{
    padding-right: 10px;
}

nav ul li a .fa{
  font-size: 1.2em;
}

nav ul li a:hover, nav ul li a:active{
  padding: 15px 0;
  border-radius:2px;
  background:#fff;
  color: #3498db;
}

/* ######## ######## ######## */



/* ######## TITLE CONTENT ######## */

.lTitle{
  max-width:95%;
}

.lTitle h1{
    margin: 30px 0 25px;
    padding: 0;
    font: 500 1.4em 'Oswald', sans-serif;
    color: #444;
    text-align: center;
}

/* ######## ######## ######## */



/* ######## LEFT SECTION ######## */

.l-col{
    display: block;
    width: 95%;
    height: auto;
    margin: 0 0 2% 0;
    background-color: #FFF;
    border-bottom: 2px solid #bbb;
    border-radius: 0 0 3px 3px;
}

.l-col h1{
  margin: 0 0 15px;
  padding: 0 0 10px;
  border-bottom: 1px solid #8C8C8C;
  font: bold 2em 'Oswald', sans-serif;
  line-height: 42px;
  color: #3498db;
}

.l-col .list-img{
    margin: auto 0;
    text-align: center;
}

.l-col .list-img img{
  max-height: 100%;
  max-width: 100%;
}

/* ######## ######## ######## */



/* ######## RIGHT COLUMN ######## */

.r-col{
  display: block;
  width: 95%;
  padding: 0;
  margin: 1% 0 0;
  background-color: #FFF;
  border-radius: 0 0 3px 3px;
}

.r-col h1{
  margin: 0 0 15px;
  padding: 0 0 10px;
  border-bottom: 1px solid #8C8C8C;
  font: bold 2em 'Oswald', sans-serif;
  line-height: 42px;
  color: #3498db;
}

.r-col .bt{
  padding: 10px;
  border-bottom: 2px solid #bbb;
  background: #fff;
}

.r-col .pr-price{
  margin: 5px 0 10px;
  padding: 5px 0;
  border: 1px solid #ccc;
  background: #eee;
  border-radius: 2px;
  text-align: center;
  line-height: 1.4;
  font-family: 'Oswald';
  font-size: 1.4em;
}

.r-col .pr-price .text{
  display: inline-block;
  font: 600 0.8em 'Oswald';
  padding-right: 5px;
  color: #444;
}

.r-col .pr-price .price{
  display: inline-block;
  font-size: 0.8em;
  font-weight: 600;
  color: #3498db;
}

.r-col .bt .btEbay{
  text-align: center;
}

.r-col .bt .btEbay a{
  display: block;
  padding: 13px 10px;
  margin: 0 0 10px;
  background-color: #3498db;
  font: 500 1.1em 'Oswald';
  border-radius: 3px;
    color: #FFF;
}

.r-col .bt .btEbay a i{
  display: none;
}

.r-col .bt .btEbay a:hover{
  background-color: #0064d8;
  text-decoration: none;
}

.r-col .bt .btEbay i{
  padding-left:5px;
}

.r-col .bt .sbt{
  width: 100%;
}

.r-col .bt .sbtEbay{
  display: inline-block;
  width: 48%;
  margin: 0 1.2% 0 0;
  text-align: center;
}

.r-col .bt .sbt a{
    display: inline-block;
    width: 42.2%;
    padding: 10px 3%;
    background-color: #666;
    font: 400 0.8em 'Oswald';
    text-align: center;
    border-radius: 2px;
    color: #FFF;
}

.r-col .bt .sbt a:hover{
  background-color: #3498db;
  text-decoration: none;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

.r-col .bt .sbt i{
  padding-left: 5px;
  display: none;
  font-size: 0.86em;
}

.r-col .bt .sbt .shareLink i{
  color:#F44336;
  font-size:0.8em;
}

.r-col .ourBest{
  padding: 10px 0;
  text-align: center;
  background: #eee;
}

.r-col .ourBest .oBTrump{
  display: block;
  width: auto;
  margin: 15px 0;
  padding: 8px 10px;
  border-bottom: 2px solid #bbb;
  text-align: center;
  background: #fff;
}

.r-col .ourBest .oBTrump .oBTCircle{
  height: 60px;
  width: 60px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background-color: #3498db;
}

.r-col .ourBest .oBTrump .oBTCircle img{
    width: 24px;
    margin: 20px 0 0;
}

.r-col .ourBest .oBTrump h4{
    margin: 0;
    padding: 10px 0;
    font-size: 1em;
    font-weight: 500;
    font-family:'Oswald', sans-serif;
    text-transform: uppercase;
    color: #3498db;
}

.r-col .ourBest .oBTrump .oBTDesc{
  line-height: 1.4;
  font-size: 0.8em;
  font-weight: 400;
  color: #888;
  font-family: 'Open Sans', sans-serif;
}

/* ######## ######## ######## */



/* ######## ITEM DESCRIPTION ######## */

.desc-fw{
  width: 95%;
  margin: 2% 0;
}

.desc-fw-title{
  padding: 15px 0 15px 30px;
  background-color: #3498db;
  border-radius: 3px 3px 0 0;
}

.desc-fw-title h1{
  margin: 0;
  padding: 0;
  font: 400 1em 'Oswald', sans-serif;
  color: #FFF;
}

.desc-fw-cont{
    padding: 4%;
    background-color: #FFF;
    border-bottom: 2px solid #bbb;
    border-radius: 0 0 3px 3px;
}

.desc-fw-cont h2{
  margin: 15px 0;
  font: 600 2em 'Ubuntu';
    color: #3498db;
}

.desc-fw-cont h3{
  margin: 15px 0;
  font: 600 1.5em 'Ubuntu';
    color: #3498db;
    text-align: center;
}

.desc-fw-cont h4{
  margin: 12px 0;
  font: 500 1em 'Oswald';
  line-height: 24px;
  color: #3498db;
}

.desc-fw-cont img{
  max-width: 100%;
}

.desc-fw-cont p{
  margin: 0;
  padding: 0;
  font: 400 0.8em 'Open Sans' !important;
  line-height: 1.8 !important;
  color: #666;
}

.desc-fw-cont ul{
  margin: 0;
    padding-left: 25px;
}

.desc-fw-cont ol{
  margin: 0;
    padding-left: 25px;
}

.desc-fw-cont ul li{
    margin: 0;
    padding: 0;
    font: 400 0.84em 'Open Sans';
    line-height: 30px;
    color: #3498db;
    list-style-type: circle;
}

.desc-fw-cont ol li{
    margin: 0;
    padding: 0;
    font: 400 0.9em 'Open Sans';
    line-height: 30px;
    color: #3498db;
}

.desc-fw-cont .dButton{
  text-align:center;
}

.desc-fw-cont .dButton a{
  display:block;
  max-width:240px;
  margin:20px auto 0px;
  background-color:#3498db;
  font:500 0.86em 'Oswald';
  padding:10px 0;
  border-radius:2px;
}

.desc-fw-cont .dButton a:hover{
  text-decoration: underline;
}

.desc-fw-cont ul.colors{
  padding: 10px 0;
  text-align:center;
}

.desc-fw-cont ul.colors li{
  font:400 0.9em 'Oswald', sans-serif;
  list-style-type:none;
  display:inline-block;
  width:32%;
  margin-bottom:5px;
  border-radius: 2px;
}

.desc-fw-cont ul.colors li a{
  display:block;
  padding:30px 0;
  color: #fff;
  background-color:#ddd;
  border-radius: 2px;
}

.desc-fw-cont ul.colors li a:hover{
  text-decoration:underline;
}

/* ######## ######## ######## */



/* ######## FOOTER ######## */

footer{
  background: #222;
  color: #bbb;
}

footer .footer{
  padding:15px 0px;
}

footer .footer .col{
  display:block;
  padding:0 20px 10px;
  text-align:center;
  margin:0 0 25px;
}

footer .footer .col h1{
  padding:10px 0 10px;
  margin:0;
  border-bottom: 1px solid #333;
  font:500 1em 'Oswald', sans-serif;
  color:#3498db;
}

footer .footer .col .content{
  padding:15px 0 0;
  font:500 1em 'Open Sans', sans-serif;
  overflow:hidden;
}


footer .footer .col .content p{
  margin:0 0 6px;
  line-height:1.4;
}

footer .footer .col #about{
  font-size:0.8em;
  color:#888
}

footer .footer .col #seller{

}

footer .footer .col #seller ul{
  padding:0;
  margin:10px 0;
}

footer .footer .col #seller ul li{
  font-size:0.9em;
  padding:0 0 3px;
}

footer .footer .col #seller ul li:before{
  content:"\f054";
  display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 0.8em;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-right:5px;
    color:#3498db;
}

footer .footer .col #menu{

}

footer .footer .col #menu ul{
  padding:0;
  margin:10px 0;
}

footer .footer .col #menu ul li{
  padding:0 0 1px;
}

footer .footer .col #menu ul li a{
  font:400 0.9em 'Open Sans', sans-serif;
  color:#bbb;
}

footer .footer .col #menu ul li a:hover{
  color:#3498db;
  text-decoration:underline;
}


footer .footer .col #contact{
  font-size:0.9em;
}

footer .footer .col #contact.content p{
  font-size:0.9em;
  margin:0;
  padding:0 0 3px;
}

footer .footer .col #contact.content p strong{
  color:#3498db;
  font-weight:400;
}

footer .footer .col #contact.content p span{
  color:#888;
}


/* ######## ######## RESPONSIVE ######## ######## */



/* ######## MOBILE ######## */

@media only screen and (min-device-width: 320px) and (min-width: 320px) {

.r-col .bt .sbt a{
  width: 42.815%;
}

}


/* ######## MOBILE WIDE ######## */

@media only screen and (min-device-width: 480px) and (min-width: 480px) {

nav ul li a{
}

.r-col .bt .btEbay a i{
  display: inline-block;
}

.r-col .bt .sbt a{
    width: 43.09%;
}

.r-col .bt .sbt i{
  display: inline-block;
}

.r-col .ourBest .oBTrump h4{
  font-size: 1em;
}

}

/* ######## ######## ######## */



/* ######## TABLET ######## */

@media only screen and (min-device-width: 768px) and (min-width: 768px) {

.r-col .pr-price{
  padding: 7px 0;
}

.r-col .bt .btEbay a{
  font-size: 1em;
}

.r-col .bt .sbt a{
    width: 42.68%;
    font-size: 0.84em;
}

.r-col .ourBest .oBTrump .oBTCircle img{
    width: 24px;
    margin: 20px 0 0;
}

.r-col .ourBest .oBTrump h4{
  padding: 8px 0 9px;
  font-size: 0.9em;
}

.r-col .ourBest .oBTrump .oBTDesc{
  line-height: 22px;
}

.desc-fw{
  width: 95%;
  margin:2% 0;
}

.desc-fw-cont{
  padding: 3%;
}

.desc-fw-cont p{
  line-height: 1.8 !important;
}

footer .footer{
  padding:15px 0 30px;
  margin:0 auto;
  max-width: 960px;
}

footer .footer .col{
  display:inline-block;
  vertical-align:top;
  width:23%;
  padding:0 1% 10px;
  text-align:left;
  margin:0;
}

footer .footer .col h1{
  padding: 10px 0 10px;
  margin:0 0 6px;
  max-width:90%;
  font-size:0.9em;
}

footer .footer .col .content{
  padding:15px 0 0;
  font-size:0.9em;
}

footer .footer .col #seller ul{
  margin:0;
}

footer .footer .col #seller ul li{
  padding:0 0 2px;
}

footer .footer .col #menu ul{
  margin:0;
}

footer .footer .col #menu ul li{
  padding:0;
}

footer .footer .col #contact.content p{
  padding:0 0 2px;
}


}

/* ######## ######## ######## */



/* ######## PC & TABLET WIDE ######## */

@media only screen  and (min-device-width: 992px) and (min-width: 992px){

header #logo{
  padding: 15px 0;
}

header #logo .mTitle{
  font: bold 2.2em 'Oswald', sans-serif;
  line-height: 46px;
}

.sCont{
  width: 960px;
  margin: 0 auto;
  padding: 0;
}

nav ul{
  max-width: 960px;
  padding: 15px 0;
}

nav ul li{
  display: inline-block;
  width: 24.5%;
  margin: 0;
}

nav ul li:first-of-type{
  border-top: 0;
}

nav ul li a{
  display: inline;
  padding: 7px 15px;
  border: 0;
  font-size: 0.8em;
}

nav ul li a i{
    padding-right: 8px;
}

nav ul li a:hover, nav ul li a:active{
  padding: 7px 15px;
}

.lTitle{
  max-width:100%;
}


.l-col{
    width: 60%;
    padding: 15px 10px;
    vertical-align: top;
    display: inline-block;
}

.r-col{
  display: inline-block;
  width: 35%;
  margin: 0 0 0 2%;
  vertical-align: top;
}

.r-col .pr-price{
  font-size:1em;
}

.r-col .pr-price .text{
  font-size: 1.1em;
}

.r-col .pr-price .price{
  font-size: 1.1em;
}

.r-col .bt .btEbay a{
  font-size: 1em;
  padding: 11px 10px;
}

.r-col .bt .sbt a{
    width: 42.919%;
    padding: 8px 3%;
}

.r-col .ourBest .oBTrump{
    padding: 15px 10px 15px;
}

.r-col .ourBest .oBTrump .oBTCircle{
  margin: 0 auto;
}
.r-col .ourBest .oBTrump h4{
  padding: 9px 0;
}

.r-col .ourBest .oBTrump .oBTDesc{
    line-height: 1.2;
}

.desc-fw{
  width: 100%;
}

.desc-fw-title{
  padding: 10px 0 10px 30px;
}

.desc-fw-title h1{
  font-size: 1em;
}

.desc-fw-cont{
  padding: 25px 15px 25px 30px;
}

.desc-fw-cont p{
    font-size: 1em;
}

.desc-fw-cont h3{
  text-align: left;
}

.desc-fw-cont .dButton{
  text-align:center;
}

.desc-fw-cont .dButton a{
  display:block;
  max-width:240px;
  margin:20px auto 0px;
  background-color:#3498db;
  font:500 0.86em 'Oswald';
  padding:10px 0;
  border-radius:2px;
}

.desc-fw-cont .dButton a:hover{
  text-decoration: underline;
}

.desc-fw-cont ul.colors{
}

.desc-fw-cont ul.colors li{
  width:10%;
  margin: 0;
}

.desc-fw-cont ul.colors li a{
  padding: 20px 0;
}

.desc-fw-cont ul.colors li a:hover{
  text-decoration:underline;
}

}

/* ######## ######## ######## */

.r-col .bt .sbt a.btColor{
  background-color: #3498db;
}
</style>
<header>
<div class="sCont">
<div id="logo">
<div class="mTitle">Company Name</div> <!-- Enter Website TITLE Here -->
<div class="sTitle">Some text</div> <!-- Enter Website subTITLE Here -->
</div>
</div>
</header>
<!-- ###### ###### -->
<!-- MENU -->
<nav>

	<ul>
		<li><a title="My Items" class="otherItemsLink" href="https://www.ebay.de/sch/moritz-bay/m.html?_nkw=&_armrs=1&_ipg=&_from=" target="_blank"><i class="fa fa-home"></i>My Items</a></li>
		<li><a title="About Us" class="userName" href="https://www.ebay.de/usr/moritz-bay" target="_blank"><i class="fa fa-info-circle"></i>About Us</a></li>
		<li><a title="My Feedbacks" class="myFeedback" href="https://feedback.ebay.de/ws/eBayISAPI.dll?ViewFeedback2&userid=moritz-bay" target="_blank"><i class="fa fa-star"></i>Feedback</a></li>
		<li><a title="Contact" class="contactLink" href="https://contact.ebay.de/ws/eBayISAPI.dll?ReturnUserEmail&amp;requested=moritz-bay" target="_blank"><i class="fa fa-envelope"></i>Contact</a></li>
	</ul>

</nav>
<!-- ###### ###### -->
<!-- LEFT COLUMN -->
<div class="sCont">
<div class="lTitle">
<h1>Listing Title</h1>
</div>
<div class="l-col">
<div class="list-img">
<img src="https://atwebdesigner.co.uk/newEbay/standard/up/img/replace.jpg">
</div>
</div>
<!-- ###### ###### -->
<!-- RIGHT COLUMN -->
<div class="r-col">
<div class="bt">

			<div class="pr-price">
				<div class="text">Price:</div><div class="price"> £4.99</div>
			</div>

			<div class="sbt">
					<a class="contactLink btColor" href="https://contact.ebay.de/ws/eBayISAPI.dll?ReturnUserEmail&amp;requested=moritz-bay" target="_blank" style="margin-right:1%;">Ask Question<i class="fa fa-question-circle"></i></a>
					<a class="shareLink" style="float:right;" href="https://my.ebay.de/ws/eBayISAPI.dll?AcceptSavedSeller&sellerid=moritz-bay" target="_blank">Save Seller<i class="fa fa-heart"></i></a>
			</div>
</div>
<div class="ourBest">

			<div class="oBTrump">
				<div class="oBTCircle"><img src="https://atwebdesigner.co.uk/newEbay/standard/up/img/done.png"></div>
				<h4>Description #1</h4>
				<div class="oBTDesc">Lorem ipsum dolor sit amet adipisicing.</div>
			</div>

			<div class="oBTrump">
				<div class="oBTCircle"><img src="https://atwebdesigner.co.uk/newEbay/standard/up/img/done.png"></div>
				<h4>Description #2</h4>
				<div class="oBTDesc">Lorem ipsum dolor sit amet adipisicing.</div>
			</div>

			<div class="oBTrump">
				<div class="oBTCircle"><img src="https://atwebdesigner.co.uk/newEbay/standard/up/img/done.png"></div>
				<h4>Description #3</h4>
				<div class="oBTDesc">Lorem ipsum dolor sit amet adipisicing.</div>
			</div>

		</div>
</div>
</div>
<!-- ###### ###### -->
<!-- ITEM DESCRIPTION -->
<div class="sCont">
<!-- DESCRIPTION #1 -->
<div class="desc-fw">
<div class="desc-fw-title">
<h1>Product Description</h1>
</div>
<div class="desc-fw-cont">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus veritatis minima pariatur, fugiat dolor, id mollitia sunt odio in magnam eius! Expedita assumenda rerum rem, voluptatibus ipsa, nulla perferendis recusandae?</p>
</div>
</div>
<!-- DESCRIPTION #2 -->
<div class="desc-fw">
<div class="desc-fw-title">
<h1>Delivery Information</h1>
</div>
<div class="desc-fw-cont">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi reiciendis exercitationem fuga aut, eveniet dolorem itaque repellendus architecto eligendi ea ipsum ratione! Similique perspiciatis ad animi temporibus quaerat, veniam illo.</p>
</div>
</div>
<!-- DESCRIPTION #3 -->
<div class="desc-fw">
<div class="desc-fw-title">
<h1>Returns Information</h1>
</div>
<div class="desc-fw-cont">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur optio adipisci rem laboriosam, ratione ad inventore eum eos reiciendis nemo. Aperiam odit modi mollitia nulla numquam. Molestiae eligendi ducimus, ratione?</p>
</div>
</div>
</div>
<!-- ###### ###### -->
<!-- FOOTER -->


<footer>
	<div class="footer">
		<div class="col">

			<h1>About us</h1>
			<div id="about" class="content">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
				<p>In voluptates, ut officia quas voluptatibus nemo, esse maxime.</p>
			</div>

		</div><div class="col">
			<h1>Our advantages</h1>
			<div id="seller" class="content">
				<ul>
					<li>Advantage #1</li>
					<li>Advantage #2</li>
					<li>Advantage #3</li>
					<li>Advantage #4</li>
				</ul>
			</div>
		</div><div class="col">
			<h1>Ebay links</h1>
			<div id="menu" class="content">
				<ul>
					<li><a href="https://www.ebay.de/usr/moritz-bay" target="_blank">My ebay</a></li>
					<li><a href="https://www.ebay.de/sch/moritz-bay/m.html?_nkw=&_armrs=1&_ipg=&_from=" target="_blank">Other Items</a></li>
					<li><a href="https://feedback.ebay.de/ws/eBayISAPI.dll?ViewFeedback2&userid=moritz-bay" target="_blank">Feedback</a></li>
					<li><a href="https://contact.ebay.de/ws/eBayISAPI.dll?ReturnUserEmail&amp;requested=moritz-bay" target="_blank">Send message</a></li>
				</ul>
			</div>
		</div><div class="col">
			<h1>Contact</h1>
			<div id="contact" class="content">
				<div class="adres">
					<p>Address: <span>Street 1/1 XXX XXXX Ciy, Country</span></p>
				</div>
				<div class="phone">
					<p>Phone:<strong> 111 111 1111</strong></p>
				</div>
				<div class="email">
					<p>Email:<strong> email@gmail.com</strong></p>
				</div>
			</div>
		</div>
	</div>
</footer>


<!-- ###### ###### -->