<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Jjohn/pen/mBkyb?limit=all&page=89&q=about+us" />
<style class="cp-pen-styles">@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Six+Caps);
*, html, body{
margin:0;padding:0;
}
nav{
position: fixed;
margin: 20px 0;
}
nav>ul>li{
list-style: none;
}
nav>ul>li>a{
display: block;
width: 110px;
text-decoration: none;
text-align: right;
font:400 30px 'Six Caps', sans-serif;
color: #85004B;
margin-left: -90px;
padding: 5px 10px;
-webkit-transition:all 1s ease;
transition: all 1s ease;
}
nav>ul>li>a:after{
display: inline-block;
vertical-align: middle;
margin: 0 0 0 10px;
font: 22px 'FontAwesome', sans-serif;
}
nav>ul>li:nth-child(1)>a:after{content: "\f015"; }
nav>ul>li:nth-child(2)>a:after{ content: "\f0c0"; }
nav>ul>li:nth-child(3)>a:after{ content: "\f0f2"; }
nav>ul>li:nth-child(4)>a:after{ content: "\f00a"; }
nav>ul>li:nth-child(5)>a:after{ content: "\f0e0"; }
nav>ul>li>a:hover{
background: #FF0000;
color: #000;
margin: 0;
}
@-webkit-keyframes rot{
0% {-webkit-transform:rotate(7deg);transform:rotate(7deg);}
50% {-webkit-transform:rotate(-7deg) scale(2);transform:rotate(-7deg) scale(2);}
100% {-webkit-transform:rotate(7deg);transform:rotate(7deg);}
}
@keyframes rot{
0% {-webkit-transform:rotate(7deg);transform:rotate(7deg);}
50% {-webkit-transform:rotate(-7deg) scale(2);transform:rotate(-7deg) scale(2);}
100% {-webkit-transform:rotate(7deg);transform:rotate(7deg);}
}
nav>ul>li>a:hover:after{
-webkit-animation: rot 0.3s linear 2;
animation: rot 0.3s linear 2;
}
section{
margin: 0 45px;
}</style></head><body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</nav>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim eveniet odit facilis quisquam consequatur voluptatum tempore nulla similique ipsam quaerat veniam magni porro nemo temporibus in ut assumenda vel saepe earum itaque libero laudantium eaque perferendis vitae amet. Harum cupiditate repudiandae quia commodi! Provident tempora fugiat illo eligendi hic dolorum quis ipsam debitis ad exercitationem. Tempora beatae qui ratione nisi sapiente eos eveniet distinctio minus quasi est consequuntur ipsam facere unde quae consectetur impedit alias fugiat officiis ab repellat nihil repellendus ex voluptate hic culpa voluptatibus nemo dolores aliquid fugit eum explicabo tenetur cumque cum veritatis accusamus dolorum dignissimos! Beatae.</p>
<p>Nesciunt doloribus inventore sunt illo architecto voluptatem quibusdam sit soluta perspiciatis exercitationem id molestiae hic nihil maxime eligendi similique doloremque consequatur at modi culpa. Est hic tempora suscipit asperiores blanditiis aliquid laborum quas quis ea eius numquam officia eum ducimus veritatis voluptates cum cumque nemo voluptate distinctio adipisci nisi doloribus ipsa mollitia minima consequuntur sapiente delectus quibusdam odio exercitationem unde velit dolor voluptatem ut praesentium molestiae maxime dolore explicabo. Maiores magni id adipisci fuga tenetur distinctio quam. Voluptatem autem necessitatibus ea veritatis alias quidem soluta amet. Alias nemo esse aliquam molestiae rerum dolores eius maxime ut aliquid nisi voluptatibus vero!</p>
<p>Non voluptate at ducimus ipsam optio sit autem recusandae suscipit voluptas aperiam distinctio delectus reiciendis eum tenetur unde. Aliquam assumenda facilis sed culpa commodi odio placeat porro recusandae rerum nesciunt deserunt obcaecati eligendi error dolorum minima illo fugiat vitae nemo repudiandae est libero adipisci voluptates perferendis asperiores possimus! Neque nostrum animi culpa provident hic quaerat nam odit cum pariatur ea dolorum magnam architecto a mollitia cumque expedita dicta nisi vel. Accusamus dignissimos voluptas nostrum tenetur illo nisi aperiam ipsum placeat eos esse incidunt officia inventore ad debitis voluptatum omnis provident distinctio fugiat. Facere impedit animi suscipit quibusdam magni soluta autem!</p>
<p>Perferendis cum quasi dolorem perspiciatis ipsa aperiam necessitatibus! Quidem rerum quaerat neque magnam aperiam facere maiores reiciendis doloribus repudiandae optio atque impedit ut laudantium. Adipisci quam sunt doloremque est reprehenderit odit necessitatibus iste quo iusto quasi in dolores fuga id consectetur blanditiis nesciunt cumque repellat officiis magnam praesentium similique maiores cum. Corrupti vel atque velit est incidunt reprehenderit voluptatum ea sed laboriosam accusamus temporibus omnis eos blanditiis odit dolor quas maxime repudiandae? Nam expedita sint reiciendis enim dignissimos ipsum repellat natus quasi mollitia rerum nobis eaque ea sed? Ea voluptatum molestias delectus obcaecati animi quo tempora officiis? Molestiae autem eaque.</p>
<p>Temporibus facilis libero facere quos magni porro maxime eveniet velit deserunt nemo laudantium eius quia voluptatibus voluptatum alias in distinctio suscipit. Architecto iusto accusamus quia adipisci rerum voluptatibus cum id sunt odit. Molestias doloribus temporibus provident eum quasi inventore aperiam at tenetur dolore sint nisi sapiente nostrum recusandae ipsam laudantium voluptatibus sed beatae est dolores a nam possimus eaque maiores voluptatum vel veritatis explicabo quo obcaecati repellat modi! Reiciendis obcaecati beatae non quo explicabo asperiores architecto vel! Sapiente ipsa nam facilis dignissimos tempora voluptatum vero. Minima nulla molestias quas a sunt consectetur nostrum harum necessitatibus neque voluptates reprehenderit eaque perspiciatis.</p>
<p>Atque delectus dicta eaque laboriosam accusantium eos provident consectetur alias ea vitae id quae sunt? Debitis totam est accusamus atque accusantium iste quo ab minima corrupti a nam ad autem repellendus earum at nostrum id. Nemo aperiam perspiciatis est ad eos nihil aspernatur possimus debitis. Ipsum accusantium in veritatis excepturi minima exercitationem quidem inventore officiis dignissimos modi! Laboriosam accusamus porro animi in velit ipsa provident excepturi aliquam culpa soluta mollitia aperiam eaque perferendis illum ducimus expedita ipsum magnam quibusdam numquam blanditiis? Ratione ipsam non nostrum voluptatum praesentium ad porro sunt natus sequi aspernatur reprehenderit alias a commodi distinctio similique rerum.</p>
<p>Animi eos perferendis at aspernatur odit blanditiis id sequi consectetur corporis eum temporibus aut nam eveniet reiciendis natus dicta esse laborum facere rerum dolorem. Vitae vel adipisci voluptas eos dolores suscipit nulla veritatis illum error odio fugit dolore unde laborum deserunt asperiores voluptatum recusandae tempora fugiat expedita veniam esse aspernatur assumenda molestiae harum numquam magnam sit quisquam necessitatibus inventore omnis ipsa nesciunt doloremque excepturi nemo rerum cum doloribus? Labore autem voluptates rerum natus cum totam reprehenderit architecto minima earum aspernatur voluptas repellat eveniet voluptatem porro dicta animi eaque asperiores exercitationem doloremque veritatis ad voluptate recusandae ducimus aut quas necessitatibus enim!</p>
</section>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body></html>
