<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width = device-width, initial-scale = 1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="Webpage.css" rel="stylesheet" type="text/css">
<title>Title</title>
</head>
<body>
<div class="background_image">
<div class="top-nav">
<span class="top-nav-image"></span>
<span class="top-nav-text"><span class="glyphicon glyphicon-earphone"></span> +98 919 918 6338</span>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="72">
<div class="container">
<div class="navbar-header collapse-button">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="logo" href="#">
<img src="http://importpersian.com/wp-content/themes/caspian/includes/images/logo.jpg">
</a>
</div>
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#main-text">Home</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#comments">About Us</a></li>
<li><a href="#calc">Contact Us</a></li>
</ul>
</div>
<div class="nav-bottom"></div>
</div>
</nav>
<div class="container carousel-container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="carousel-caption">
<h2>Petroleum Trading Agency is specialised in Iranian petroleum profession.</h2><br>
<p>Our focus is to build progressive business relations and continuous growth with our clients
worldwide, and to be the most effective, modern and trustworthy international trading agency
in the middle east. we have dedicated our company to sponsor foreign clients regarding their
business with Iran. We are in part with major Iranian petroleum producers.</p>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h2>We are in part with the Iranian petroleum producers responsible for trading products of
Iran’s subsidiaries.</h2><br>
<p>This amounts to $10.5 billion, annually. Normally 39% of production volumes are exported
(7.2 MMT) that would cover 45% of our production value, indicating export of high-value products.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="container gallery" id="products">
<div class="row" style="margin-bottom: 60px">
<h2>Our Products</h2>
<p>Our agency is directly connected to public and private sectors, which means our clients are directly
purchasing Polymers, Chemicals, Oil and Gas products from the Iranian industry without any middlemen.</p>
<p> These products are marketed in Europe, Middle East, North East and South East Asia, and the Indian
Subcontinent.</p>
</div>
<div class="row" style="margin-bottom: 50px">
<div class="col-md-6">
<div class="cuadro_intro_hover " style="background-color:#cccccc;">
<p style="text-align:center;">
<img src="http://ir31.uploadboy.com/d/rnnedmfljcttdpohrysh7xgqxt7m2krxkreoaxrtczxhy6spog66jpjqisknqpuuax5tzyfl/Product%201%20polymer.jpg">
</p>
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h3 style="border-top:2px solid white; border-bottom:2px solid white; padding:10px;">Polymers</h3>
<h4 style="margin-top: 30px">Polyethylene (PE)</h4>
<p>LLDPE, LDPE, HDFPE</p>
<h4>Polypropylene (PP)</h4>
<h4>Polyvinyl Chloride (PVC)</h4>
<h4>Polyethylene Terephthalate (PET)</h4>
<p>Bottle, Textile Grade</p>
<h4>Polystyrene (PS)</h4>
<p style="margin-bottom: 20px">HIPS, EPS, GPPS, ABS, SBR, Polycarbonate Melamine Crystal Epoxy Resins</p>
<!--<a class=" btn btn-default" href="http://trovacamporella.com"><span class="glyphicon glyphicon-plus"> INFO</span></a>-->
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="cuadro_intro_hover " style="background-color:#cccccc;">
<p style="text-align:center;">
<img src="http://ir31.uploadboy.com/d/rnnenmfljcttdpohrysdrrol6ucpipdzrapwqqpnvd4k35t6hno7ciqapyllufn2cratbalz/Product%202.jpg">
</p>
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h3 style="border-top:2px solid white; border-bottom:2px solid white; padding:10px;">Oil & Gas</h3>
<h4 style="margin-top: 30px">LPG</h4>
<p>Butane, Propane</p>
<h4>Bitumen 60-70</h4>
<h4>Base Oil</h4>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="cuadro_intro_hover " style="background-color:#cccccc;">
<p style="text-align:center;">
<img src="http://ir31.uploadboy.com/d/rnnepmfljcttdpohrysgfwot7os4xaipkloxzub7nym6stpinaumreagl43f6zqs24nhzxlo/Product%203.jpg">
</p>
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h3 style="border-top:2px solid white; border-bottom:2px solid white; padding:10px;">Chemicals</h3>
<h4 style="margin-top: 30px">Urea</h4>
<h4>Methanol</h4>
<h4>Butadiene</h4>
<h4>Granular Sulphur</h4>
<h4>Butene-1</h4>
<h4>RAF</h4>
<h4>MEG</h4>
<h4>Ammonium</h4>
<h4>Nitrate</h4>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="cuadro_intro_hover " style="background-color:#cccccc;">
<p style="text-align:center;">
<img src="http://ir31.uploadboy.com/d/rnnehmfljcttdpohrysdpxowx4mskmunxopcc4lyl3p4tfwbyrp2a5a7llt46i2frip4gesi/Drum-production-new-steel-drum-for-bitumen-packing.jpg">
</p>
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h3 style="border-top:2px solid white; border-bottom:2px solid white; padding:10px; margin-bottom: 30px">Petroleum Product Range</h3>
<h4 style="max-width: 350px; margin: 0 auto">Supply for each desired products are carefully assigned to the best possible manufacturer</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<h2>Services</h2>
<div class="background_image2"></div>
</body>
</html>
* {
text-align: center;
}
p {
max-width: 800px;
margin: 0 auto;
}
.background_image {
position: static;
background-repeat: no-repeat;
background-size: 1300px;
background-image: url("http://ir31.uploadboy.com/d/rnnejmfljcttdpohrysgdqec55mmrb2f6waj37zo4wcncf7jnxz6mnbtevnuow26nuuvdtgd/Slide%201.jpg");
background-position: top;
background-attachment: fixed;
height: 1100px;
margin-bottom: 100px;
}
.top-nav {
height: 72px;
/*width: 1600px;*/
right: 0;
background-color: rgb(48, 69, 90);
border-bottom: solid #666 1px;
text-align: left;
/*display: none;*/
}
.top-nav-image {
display: inline-block;
height: 100%;
width: 287.3px;
background-image: url("http://ir31.uploadboy.com/d/rnnebmfljcttdpohrysh5qw65ekebciaqm2mhtvu6wbibwxe42ikb7rbf4wb5ei3kk4kyy24/oie_puxtOwa6jn3k.png");
background-size: 100%;
margin-left: 50px;
}
.top-nav-text {
color: white;
/*vertical-align: 33px;*/
font-size: large;
position: absolute;
top: 26px;
right: 80px;
display: none;
}
.logo {
margin-right: 80px;
position: relative;
/*visibility: hidden;*/
display: none;
}
.navbar {
background: none;
border: none;
z-index: 12;
}
.navbar .collapse a{
line-height: 30px;
}
nav .container {
background-color: rgb(53, 53, 53);
/*border: solid yellow 10px;*/
border-bottom: solid #666 8px;
border-left: solid #666 3px;
border-right: solid #666 3px;
}
nav li {
margin-left: 25px;
}
.affix {
top: 0;
width: 100%;
/*position: static;*/
}
.affix + .container {
padding-top: 170px;
}
.carousel-caption{
position:static;
background-color: rgba(75, 66, 81, 0.7);
/*top: 50%;*/
transform: translateY(25%);
width: 60%;
margin: 0 auto;
color: rgb(230, 230, 230);
}
.item {
margin-bottom: 15%;
}
.carousel .carousel-control { visibility: hidden; }
.carousel:hover .carousel-control { visibility: visible; background: none;}
.carousel-container {
width:100%;
position: relative;
top: 200px;
background: none;
}
/*.carousel {*/
/*background: none;*/
/*}*/
ol {
margin-top: 450px;
/*margin-bottom: 150px;*/
}
.carousel-indicators li {
height: 19px;
width: 19px;
border: solid black 2px;
}
.carousel-indicators .active {
height: 19px;
width: 19px;
border: solid black 2px;
background-color: rgb(78, 105, 139);
}
/*.nav-bottom {*/
/*height: 10px;*/
/*background-color: yellow;*/
/*display: block;*/
/*position: relative;*/
/*bottom: 0;*/
/*}*/
/*For Gallery*/
.cuadro_intro_hover{
padding: 0;
position: relative;
overflow: hidden;
height: 400px;
max-width: 500px;
margin: 0 auto;
}
.cuadro_intro_hover:hover .caption{
opacity: 1;
transform: translateY(-350px);
-webkit-transform:translateY(-350px);
-moz-transform:translateY(-350px);
-ms-transform:translateY(-350px);
-o-transform:translateY(-350px);
}
.cuadro_intro_hover img{
z-index: 4;
}
.cuadro_intro_hover .caption{
position: absolute;
top:350px;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
width: 100%;
}
.cuadro_intro_hover .blur{
background-color: rgba(0,0,0,0.7);
height: 500px;
z-index: 5;
position: absolute;
width: 100%;
}
.cuadro_intro_hover .caption-text{
z-index: 10;
color: #fff;
position: absolute;
height: 300px;
text-align: center;
top:-20px;
width: 100%;
}
.gallery img {
height: 400px;
}
.col-md-6 {
padding: 0;
}
.background_image2 {
position: static;
background-repeat: no-repeat;
background-size: 100%;
background-image: url("http://ir21.uploadboy.com/d/wfnhbmfljcttdpohrysgpto64274yeknalmymgpc6o22wqls7vcakfwvqyqy33bvddpmwpsn/OIl-and-Gas.jpg");
background-position: top;
background-attachment: fixed;
height: 600px;
margin: 100px 0;
}
@media (min-width: 450px) {
.top-nav {
display: inherit;
}
/*.affix {*/
/*position: fixed;*/
/*}*/
}
@media (min-width: 768px) {
.top-nav-text {
display: inherit;
}
.navbar .collapse a{
line-height: 141px;
padding: 0 15px;
}
.logo {
display: inherit;
}
nav li {
margin-left: 0;
}
nav .container {
padding: 0;
}
}
@media (min-width: 992px) {
.navbar .collapse a{
padding: 0 25px;
}
.background_image {
background-size: 1400px;
}
}
@media (min-width: 1200px) {
.background_image {
background-size: 1700px;
}
}
@media (min-width: 1650px) {
.background_image {
background-size: 2103px;
}
}
