<!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; }