<!DOCTYPE html>
<html lang="en-EN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>UXPD</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/stylesheets.main.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/animations.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Neucha&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="page">
<header>
<div class="logo-container">
<a href="/" title="" class="logo"><img src="img/logo.png" alt="" title=""></a>
<div class="slogan"><span>Give your users the maximum</span></div>
<div class="clearfix"></div>
</div><!-- end div.logo-container -->
<div class="header-right">
<div class="contacts">
<span class="row"><span class="fa fa-envelope-o"></span>e-mail: info@uxpd.net</span>
</div>
</div><!-- end div.header-right -->
<div class="clearfix"></div>
<div class="nav-header">
<nav>
<ul>
<li><a href="#" class="active"><span class="fa fa-home"></span> Home</a></li>
<div class="work-principle uxd" id="uxd">Interaction Design</div>
<div class="work-principle testing" id="testing">Testing and Validation</div>
</div>
</div>
<div class="item">
<div class="item-three">
<div class="dyne-logo" id="dyneLogo">
<img src="img/logo-intro-white.png" alt="">
</div><!-- end div.dyne-logo -->
<div class="fivestars-quality">
<div class="fivestars-icons">
<img src="img/icons/star.png" alt=" " id="star1">
<img src="img/icons/star.png" alt=" " id="star2">
<img src="img/icons/star.png" alt=" " id="star3">
<img src="img/icons/star.png" alt=" " id="star4">
<img src="img/icons/star.png" alt=" " id="star5">
</div><!-- end div.fivestars-icons -->
<div class="fivestars-description">
</div><!-- end div.fivestars-description -->
</div><!-- end div.fivestars-quality -->
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.carousel -->
</div><!-- end div.sub-header-inner -->
</div><!-- end div.sub-header -->
<section class="intro">
<div class="intro-block">
<h2 class="intro-block-heading"><img src="img/icons/infod.png" alt=" "> <span>About UXPD</span></h2>
<div class="description">
</div><!-- end div.description -->
<div class="info-ref">
<a href="#" class="about-us"><span class="fa fa-flask"></span> How I Work?</a>
</div><!-- end of div.info-ref-->
</div><!-- end div.intro-block -->
<div class="description-block">
<div class="description">
<div class="row">
<div class="clearfix"></div>
</div><!-- end div.row -->
<div class="row">
<div class="clearfix"></div>
</div><!-- end div.row -->
<div class="row">
y clients wisely, widely and I always try to give them the maximum of me.</span>
<div class="clearfix"></div>
</div><!-- end div.row -->
</div><!-- end div.description -->
<div class="info-ref">
</div><!-- end div.info-ref -->
</div><!-- end div.description-block -->
<div class="clearfix"></div>
</section>
body {
padding: 0;
margin: 0;
font-family: "Ubuntu Condensed", sans-serif;
background-color: #dedede;
background-attachment: fixed;
}
.page {
margin: 1% 0% 0 0;
}
header {
}
.logo-container {
float: left;
}
.logo-container .slogan {
display: inline-block;
float: left;
margin-left: 12px;
height: 69px;
width: 420px;
position: relative;
font-size: 1.5em;
}
.slogan span {
position: absolute;
bottom: 0;
display: block;
background-color: #999999;
padding: 4px 9px;
color: #ffffff;
}
header .logo {
float: left;
margin-left: 10px;
}
header img {
max-width: 120px;
}
header .header-right {
float: right;
margin-right: 15px;
}
header .contacts {
margin-top: 20px;
}
header .contacts .row {
display: inline-block;
margin-right: 10px;
font-size: 1.6em;
padding: 3px;
}
header .contacts .row:last-child {
display: block;
}
header .contacts .row .fa {
margin-right: 7px;
}
.nav-header {
position: relative;
z-index: 2;
margin-bottom: 0px;
}
header nav {
display: block;
margin: 10px 0 0 0;
background-color: #de1e23;
}
header nav ul {
margin: 0;
padding: 0;
display: block;
width: 100%;
}
header nav ul li {
float: left;
list-style: none;
margin: 0;
}
header nav ul li a {
display: block;
text-transform: uppercase;
padding: 16px 32px;
color: #ffffff;
letter-spacing: 1px;
font-size: .94em;
background: #990033;
text-decoration: none;
text-shadow: 0 1px 0px #000000;
}
header nav ul li a.active {
background-color: #5a050d;
}
header nav ul li a:hover {
background-color: #5a050d;
color: #ffffff;
text-decoration: none;
}
header nav ul li:last-child {
/*border-right: 1px #901b26 solid;*/
}
header nav ul li .fa {
margin-right: 3px;
}