LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


  
    
    
    
    
    Material Design 2

    
    
    
    
    


    
    
    
  
  
    
    

    

    

    

Axit

Modern Axure Template For Beautiful Prototypes

Modern Axure Template For Beautiful Prototypes Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

Try Your Free Trial Today

  • Tab 1
  • Tab 2
  • Tab 3

Tab Number One

Lorem ipsum dolor sit amet, te sit choro quando honestatis. Ea ius iuvaret iudicabit, sed et detraxit adversarium intellegebat. Vim ut soleat sensibus, est mutat omnium in, ad splendide rationibus cum. Vis id virtute nominavi honestatis. Duis pericula erroribus cu mel. Id mei facer verterem, vim ex cibo aliquam.

Tab Number Two

Lorem ipsum dolor sit amet, te sit choro quando honestatis. Ea ius iuvaret iudicabit, sed et detraxit adversarium intellegebat. Vim ut soleat sensibus, est mutat omnium in, ad splendide rationibus cum. Vis id virtute nominavi honestatis. Duis pericula erroribus cu mel. Id mei facer verterem, vim ex cibo aliquam. Doctus appetere postulant eu vel.

Tab Number Three

Lorem ipsum dolor sit amet, te sit choro quando honestatis. Ea ius iuvaret iudicabit, sed et detraxit adversarium intellegebat. Vim ut soleat sensibus, est mutat omnium in, ad splendide rationibus cum. Vis id virtute nominavi honestatis. Duis pericula erroribus cu mel. Id mei facer verterem, vim ex cibo aliquam. Doctus appetere postulant eu vel. Alia sint vim an, dolores offendit delectus est eu. quem definitiones at nam, blandit elaboraret eum et.

Sublist Section

Lorem ipsum dolor sit amet, te sit choro quando honestatis. Ea ius iuvaret iudicabit, sed et detraxit adversarium intellegebat. Vim ut soleat sensibus, est mutat omnium in, ad splendide rationibus cum. Vis id virtute nominavi honestatis.

Download

Lorem ipsum dolor sit amet, te sit choro quando honestatis. Ea ius iuvaret iudicabit, sed et detraxit adversarium intellegebat.

Upload

Lorem ipsum dolor sit amet, te sit choro quando honestatis. Ea ius iuvaret iudicabit, sed et detraxit adversarium intellegebat.

Standard Section

Lorem ipsum dolor sit amet, te sit choro quando honestatis. Ea ius iuvaret iudicabit, sed et detraxit adversarium intellegebat. Vim ut soleat sensibus, est mutat omnium in, ad splendide rationibus cum. Vis id virtute nominavi honestatis, est mutat omnium in, ad splendide rationibus cum. Vis id virtute nominavi honestatis.

orem ipsum dolor sit amet, te sit choro quando honestatis. Ea ius iuvaret iudicabit, sed et detraxit adversarium intellegebat. Vim ut soleat sensibus, est mutat omnium in,, est mutat omnium in.

Why This is Awesome

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Thoughtful Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra.

Well Crafted

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra.

Easy to Customize

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra.

Pricing Options

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Basic

$0 Free For live
  • 1 GB of space
  • 10 GB of bandwidth
  • 3 websites
  • Basic Customization
  • Wordpress Intergration
  • Email Support

Professional

$19 Monthly Payment

Our Most popular

  • 5 GB of space
  • 50 GB of Bandwidth
  • 12 websites
  • Advanced Customization
  • Wordpress Intergration
  • Email Support

Enterprise

$70 Monthly Payment
  • unlimited space
  • unlimited bandwidth
  • 100 websites
  • Advanced Customization
  • Wordpress Intergration
  • 24/7 Customer Support

What Our Customers Are Saying

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra.

Jeremy H.

Manager

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra.

Jeremy H.

Manager

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra.

Jeremy H.

Manager

Stylish Axure Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Contact Us

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

CSS
/* ==========================================================================
  	custom styles
   ========================================================================== */

body {
	font-family: 'Open Sans', sans-serif;
}

/* ### Start Nav ### */

.scrolled {
	background-color: rgba(0,0,0,.8);
}

.navbar-brand span {
  color: #ff8b38
}

/* ### End Nav ### */

/* ### Start Header ### */

header {
	background: url("https://github.com/Oaik/Axit/blob/master/img/header.png?raw=true") no-repeat top center;
	background-size: cover;
	color: #FFF;
}

header .overlay {
	min-height: 100vh;
	background-color: rgba(0,0,0,.5);
  padding: 50px 0
}

header .center-vh {
	padding-top: 25vh
}

@media(max-width: 991px) {
	header .center-vh {
		padding-top: 60px
	}
}

header h1 {
	font-weight: bold;
	font-size: 65px
}

header h1 span {
	font-weight: normal;
	color: #ff8b38
}

header h1 ~ .lead {
	font-size: 30px;
}

header h1 ~ .lead:after {
	content: "";
	display: block;
	width: 70px;
	height: 2px;
	margin: 25px 0;
	background-color: #FFF;
}

@media(max-width: 991px) {
	header h1 ~ .lead:after {
		margin: 25px auto;
	}
}

header button {
	background: transparent;
	padding: 5px 15px;
	border: 2px solid #FFF;
	margin-top: 20px
}

@media(max-width: 991px) {
	header button {
		display: block;
		margin: 30px auto;
	}
}

header form {
	width: 360px;
	background-color: #FFF;
	border-radius: 5px;
	overflow: hidden;
}

@media( max-width: 400px) {
  
  header form {
    width: 100%;
  }
  
}

header form h2 {
	background-color: #F5f5f5;
	color: #333;
	font-size: 18px;
	padding: 15px 0;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 30px;
}

header form h2 span {
	font-weight: normal;
	color: #ff8b38;
}

header form .form-control {
	border-radius: 0;
	border: none;
	box-shadow: none;
	border-bottom: 1px solid #CCC;
	width: 80%;
	margin: 0 auto 40px
}

header form input[type="submit"] {
	background-color: #ff8b38;
	padding: 15px;
	border-radius: 0;
}

@media(max-width: 991px) {
	.header .text-center-xs {
		text-align: center
	}
}

/* ### End Header ### */

/* ### start Social ### */

.social {
	padding: 10px;
	-o-box-shadow: -2px -5px 13px #000;
	box-shadow: -2px -5px 13px #000;
}



.social h4 {
	font-weight: bold;
	margin-bottom: 5px;
}

.social p {
	color: #a1a1a1;
	line-height: 1.4
}

.social i {
	color: #CCC;
	margin: 20px 15px;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	cursor: pointer;

}

@media (max-width: 991px) {
	.social {
		text-align: center
	}
	.social h4 {
		margin-bottom: 10px;
	}
	.social i {
		margin: 10px 15px;
	}

}

.social .fa-facebook:hover {
	color: #3b5998
}
.social .fa-twitter:hover {
	color: #1da1f2
}
.social .fa-google-plus:hover {
	color: #dd4b39
}
.social .fa-pinterest:hover {
	color: #bd081c
}
.social .fa-instagram:hover {
	color: #405de6
}
.social .fa-stumbleupon:hover {
	color: #eb4924
}
.social .fa-rss:hover {
	color: #f26522
}

/* ### End Social ### */

/* ### Start Tabs ### */

.tabs {
	padding: 80px 0;
	background-color: #F5f5f5;
}
@media(max-width: 991px) {
	.tabs {
		text-align: center
	}
}
.tabs .tab-switch li {
	background-color: #333;
	color: #FFF;
	border-bottom: 1px solid #FFF;
	height: 110px;
	line-height: 110px;
	font-size: 20px;
	cursor: pointer;
}

.tabs .tab-switch li.active,
.tabs .tab-switch li:hover {
	background-color: #FF8b38;
}

.tabs .tabs-content div:not(.tab-one) {
	display: none
}

.tabs .tabs-content h3 {
	margin-top: 0;
	font-weight: bold;
	letter-spacing: -1px;
	margin-bottom: 20px;
}

@media(max-width: 991px) {
	.tabs .tabs-content h3 {
		margin: 20px 0 30px
	}
}

.tabs .tabs-content .lead {
	line-height: 1.6;
	font-size: 18px;
	color: #7e7e7e;
}

.tabs .tabs-content button {
	background-color: #ff8b38;
	color: #FFF;
}

/* ### End Tabs ### */

/* ### Start Sublist ### */

.sublist {
	padding: 80px 0
}

@media(max-width: 991px) {
	.sublist {
		padding: 40px 0;
		text-align: center;
	}
}

.sublist .sub-img {
	margin-top: 50px
}

.sublist .sublist-head {
	font-weight: bold
}

.sublist .sublist-desc {
	color: #777;
	line-height: 1.6;
	margin-bottom: 30px;
}

.sublist .list-icon {
	margin-bottom: 30px
}

.sublist .list-icon i {
	width: 40px;
	height: 40px;
	border: 2px solid #ff8b38;
	line-height: 36px;
	color: #ff8b38;
	text-align: center;
	border-radius: 50%;
	margin-right: 30px;
	margin-top: 20px;
}

@media(max-width: 991px) {
	.sublist .list-icon i {
		float: none !important;
		margin: 10px 0;
	}
}

.sublist .list-icon .info-text {
	width: calc(100% - 70px);
}

@media(max-width: 991px) {
	.sublist .list-icon .info-text {
		float: none;
		width: 100%;
	}
}

.sublist .list-icon .info-text h4 {
	font-weight: bold
}
/* ### End Sublist ### */

/* ### Start Standard ### */


.standard {
	padding: 80px 0;
	background-color: #F5f5f5;
}

@media(max-width: 991px) {
	.standard {
		padding: 40px 0;
		text-align: center;
	}
}

.standard .standard-head {
	font-weight: bold;
	margin-top: 50px
}

.standard .standard-desc {
	color: #777;
	line-height: 1.6;
	margin-bottom: 30px;
}

/* ### Start Awesome ### */

.awesome {
	padding: 80px 0
}

@media(max-width: 991px) {
	.awesome .col-md-4 {
		margin-bottom: 30px;
	}
}

.awesome .awesome-head {
	font-weight: bold;
	font-size: 50px;
}

.awesome .awesome-desc {
	margin-bottom: 50px;
	color: #8e8f93
}

.awesome i {
	color: #ff8b38;
	width: 70px;
	height: 70px;
	line-height: 68px;
	border: 2px solid #ff8b38;
	border-radius: 50%
}

.awesome .fa-keyboard-o {
	font-size: 34px
}

.awesome .feat-head {
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 20px;
}

.awesome .feat-info {
	color: #a9aaac
}

/* ### End Awesome ### */

/* Start Pricing Options */

.price {
	padding: 80px 0;
	background-color: #F5f5f5
}

@media(max-width: 991px) {
	.price {
		padding: 40px;
	}
}

.price .price-head {
	font-weight: bold;
	font-size: 40px;
}

.price .price-desc {
	margin-bottom: 50px;
	color: #8e8f93
}

@media(max-width: 991px) {
	.price .price-desc {
		margin-bottom: 10px;
	}
}

.price .price-box {
	background-color: #FFF;
}

@media(max-width: 991px) {
	.price .price-box {
		margin-bottom: 30px;
	}
}

.price .price-box .plan-head {
	background-color: #333;
	color: #FFF;
	padding: 15px 0;
	margin: 0;
	font-weight: bold;
	border-bottom: 2px solid #FFF
}

.price .option-price {
	background-color: #333;
	padding: 10px 0 20px;
	color: #FFF;
	border-bottom: 5px solid #ff8b38
}

.price .option-price .pricing {
	font-size: 70px;
	color: #FFF;
	display: block;
	font-weight: bold
}

.price .option-price .usd  {
	font-size: 30px;
}

.price .option-price .period {
	color: #adadad;
	font-weight: bold;
	font-style: italic;
}

.price .most-pop {
	background-color: #ff8b38;
	color: #FFF;
	padding: 5px 10px 10px;
	margin-bottom: 0;
	font-weight: bold;
}

.price .config li {
	padding: 10px;
	border-bottom: 1px solid #F5f5f5;
	color: #8c8c8c
}
.price .basic,
.price .enterprise {
	margin-top: 35px;
}
/* End Pricing Options */

/* End Testimonials Options */

.testimonials {
	padding: 80px 0;
}

@media(max-width: 991px) {
	.price {
		padding: 40px 0;
	}
}

.testimonials .tes-desc {
	margin-bottom: 40px;
}

.testimonials .client-say {
	background-color: #F5f5f5;
	color: #8e8f93;
	padding: 20px;
	position: relative;
	margin-bottom: 20px
}

.testimonials .client-say:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px;
	border-color: #F5f5f5 transparent transparent;
	position: absolute;
	bottom: -28px;
	left: 26px
}

.testimonials .media-heading {
	font-weight: bold;
	margin-top: 20px;
}

@media(max-width: 991px) {
	.testimonials .media {
		margin-bottom: 20px;
	}
}

.testimonials .media-body p {
	color: #a9aaac
}
/* End Testimonials Options */

/* Start Stylish */

.stylish {
	background: url("https://github.com/Oaik/Axit/blob/master/img/stylish.jpg?raw=true") no-repeat top center;
	background-size: cover;
	color: #FFF
}

.stylish .overlay {
	background-color: rgba(0,0,0,.6);
	min-height: 320px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center
}

@media(max-width: 991px) {
	.stylish .overlay {
		padding: 30px 0;
	}
}

.stylish .stylish-desc {
	color: #CCC
}

.stylish .stylish-btn {
	margin: 30px auto;
	display: block;
	padding: 8px 20px;
	border: 2px solid #FFF;
	background-color: transparent;
	-webkit-transition: .5s all ease-in-out;
	transition: .5s all ease-in-out;
}

.stylish .stylish-btn:hover {
	background-color: #ff8b38;
	border-color: transparent;
}

.stylish .head-border-center:after {
	background-color: #fff;
}

/* End Stylish */

/* Start Contact */

.contact-us {
	padding: 80px 0;
}

@media(max-width: 991px) {
	.contact-us {
		padding: 30px 0;
	}
}

.contact-us .contact-desc {
	color: #8e8f93;
	margin-bottom: 40px
}

.contact-us form input[type="text"],
.contact-us form input[type="email"] {
	margin-bottom: 20px;
	border: none;
	box-shadow: none;
	border-bottom: 1px solid #e0e0e0;
	border-radius: 0
}

.contact-us form textarea {
	height: 178px;
	border: none;
	box-shadow: none;
	border-bottom: 1px solid #e0e0e0;
	border-radius: 0;
  resize: none;
}

.contact-us .contact-btn {
	margin: 30px auto;
	display: block;
	padding: 8px 20px;
	border: 2px solid #FFF;
	color: #FFF;
	background-color: #ff8b38;
	-webkit-transition: .5s all ease-in-out;
	transition: .5s all ease-in-out;
	border-radius: 8px;
	font-size: 16px;
	font-weight: bold;
}

.stylish .stylish-btn:hover {
	background-color: #ff8b38;
	border-color: transparent;
}

/* End Contact */

/* Start Footer */
footer {
	background-color: #000;
	color: #EEE;
	padding: 20px;
	font-size: 18px;
}
/* End Footer */

/* start framework */

.head-border:after {
	content: "";
	display: block;
	width: 65px;
	height: 3px;
	margin: 25px 0;
	background-color: #ff8b38;
}

@media(max-width: 991px) {
	.head-border:after {
		margin: 25px auto;
	}
}

.head-border-center:after {
	content: "";
	display: block;
	width: 65px;
	height: 3px;
	margin: 25px auto;
	background-color: #ff8b38;
}

@media (max-width: 767px) {
	.text-center-xs {
		text-align: center
	}
}

/* end framework */
JS
$(function() {
	"use strict";
	$(window).scroll(function() {
		var navbar = $(".navbar");
		if ( $(window).scrollTop() >= navbar.height() ? navbar.addClass("scrolled") : navbar.removeClass("scrolled"));
	});	
	// Tabs
	$(".tabs li").click(function() {
		// Add active class to active link
		$(this).addClass("active").siblings().removeClass("active");
		// Hide all divs on click
		$(".tabs .tabs-content > div").hide();
		//show div
		$('.' + $(this).data("class")).show();
	});

});
Host Instantly Drag and Drop Website Builder

 

Wed, 11/29/2017 - 11:18

Related Codes

Pen ID
Pen ID
Pen ID