"html and css"
Bootstrap 3.0.0 Snippet by ravindra93

<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> <head> <meta charset="utf-8"> <title>HTML</title> <link rel="stylesheet" href="style.css"/> </head> <body> <div class="wrapper"> <nav> <div class="logo"> <h1>LOGO</h1> </div> <div class="menu"> <ul> <li class="active"><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Product</a></li> <li class="submenu"><a href="#" class="arrow">Services</a> <ul class="dropdown"> <li><a href="#">Services1</a></li> <li><a href="#">Services2</a></li> <li><a href="#">Services3</a></li> <li><a href="#">Services4</a></li> </ul> </li> <li><a href="#">Contact Us</a></li> </ul> </div> </nav> <div class="slider"></div> <section class="about"> <h1>About Us</h1> <div class="about_para"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> <a href="#">Read More</a> </div> <div class="about_img"> <img src="http://i.imgur.com/u6NNIP6.jpg" alt="About" title="web design"/> </div> </section> </div> </body> </html>
*{margin:0;padding:0;} body{ font:16px/30px Verdana, Geneva, sans-serif; } ul{margin:0;padding:0;} li{list-style:none;} a{text-decoration:none;color:#000;} .wrapper{width:1170px;margin:10px auto;border:1px solid #dedede;} nav{background:#f5f5f5;height:55px} nav .logo{width:200px;float:left;line-height:55px;} .menu{float:right;} .menu li{width:170px;text-align:center;float:left;line-height:55px;} ul.dropdown li a{display:none;transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transform:scale(1.1,1.1);-webkit-transform:scale(1.1,1.1)} .submenu a{position:relative;} .arrow:after{content: '';position: absolute;display: block;width:0;height:0;border-left: 7px solid transparent;border-right: 7px solid transparent;border-top: 7px solid #000;top: 25px;right:35px;} .submenu:hover .dropdown li a{display:block;transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;)} .dropdown li{line-height:40px;} .menu li a{display:block;} .logo h1 {margin:5px 50px;color: #de5823;font-size: 40px;} .menu li a{background:#D1D1D1;transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;} .menu li a:hover{background:#9c9c9c;color:#fff;border-bottom:3px solid #000;} li.active a{background:#9c9c9c;color:#fff;border-bottom:3px solid #000;} .slider{width:1170px;height:450px;display:block;animation: slide 15s ease-in-out infinite;} .slider img{display:inline-block;} @keyframes slide{ 0%{background:url(http://i.imgur.com/u6NNIP6.jpg) no-repeat;background-size:cover;} 50%{background:url(http://i.imgur.com/6Df0zT4.jpg) no-repeat;background-size:cover;} 100%{background:url(http://i.imgur.com/xNbkboD.jpg) no-repeat;background-size:cover;} } @-webkit-keyframes slide{ 0%{background:url(http://i.imgur.com/u6NNIP6.jpg) no-repeat;background-size:cover;} 50%{background:url(http://i.imgur.com/6Df0zT4.jpg) no-repeat;background-size:cover;} 100%{background:url(http://i.imgur.com/xNbkboD.jpg) no-repeat;background-size:cover;} } .about{padding:20px 0px;overflow:auto;} .about h1{text-align:center;font-size:32px;color:#f00;text-transform:uppercase;position:relative;margin-bottom:1em;} .about h1:after{content:'';position:absolute;display:block;border-bottom:2px solid #000; width: 200px;left: 0;right: 0;margin: 5px auto;} .about_para{width:700px;height:100%;display:block;float:left;padding:10px;} .about_para a{border: 1px solid #b31640;padding: 5px 15px;background: #ef3567;display: inline-block;margin: 20px 0px;color: #fff;transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;box-shadow:0px 3px 5px #dedede;} .about_para a:hover{background:#b31641;color:#fff;box-shadow: 5px 9px 5px #dedede;} .about_img{width:350px;height:100%;display:inline-block;} .about_img img{width:428px;height:250px;}

Related: See More


Questions / Comments: