Real Estate Template

index.html

<!-- SITE HEADER -->
<header class="site-header">
	<nav class="site-nav navbar navbar-default navbar-fixed-top">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#site-nav" aria-expanded="false">
					<span class="sr-only">Menu</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="logo navbar-brand" href="#">Real Estate Agency</a>
			</div>

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse" id="site-nav">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
					<li><a href="#">About Us</a></li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Sales <span class="caret"></span></a>
						<ul class="dropdown-menu">
							<li><a href="#">Business</a></li>
							<li><a href="#">Private</a></li>
						</ul>
					</li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Rents <span class="caret"></span></a>
						<ul class="dropdown-menu">
							<li><a href="#">Business</a></li>
							<li><a href="#">Private</a></li>
						</ul>
					</li>
					<li><a href="#">Contact Us</a></li>
				</ul>
				
				<ul class="nav navbar-nav navbar-right">
					<li class="navbar-cta"><a href="#">We look for your rent</a></li>
					<p class="navbar-info navbar-text">
						<span class="info-phone">035 <strong>57.57.57</strong></span>
						<span class="info-email">[email protected]</span>
					</p>
				</ul>
			</div><!-- /.navbar-collapse -->
		</div><!-- /.container-fluid -->
	</nav>
</header><!-- .site-header -->

<!-- PAGE CONTENT -->
<main class="page-content">
	CONTENT
</main><!-- .page-content -->

<!-- SITE FOOTER -->
<footer class="site-footer">
	FOOTER
</footer><!-- .site-footer -->

real-estate-template.markdown

Real Estate Template

A Pen by Damiano Todeschini on CodePen.

License.

script.js

$( document ).ready(function() {
	setInterval(function(){
		$('.info-phone').toggleClass('hide');
	}, 5000);
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

style.sass

html
	font-size: 100%

body
	font-family: 'Muli', sans-serif
	font-size: 1rem

h1, h2, h3, h4, h5, h6
	font-family: 'Glegoo', serif

.logo
	background:  url('https://www.immobiliarelocatelli.com/wp-content/uploads/2017/07/logo.png') no-repeat center center
	background-size: 90%
	height: 84px
	font-size: 0
	width: 250px

.site-nav
	background: white
	border: none
	box-shadow: 0 1px 3px rgba(black, .2)
	font-family: 'Glegoo', serif
	font-size: .875rem
	text-transform: uppercase

	.navbar-nav
		> li > a
			padding: 2rem 1rem
	
		> li.active a
			background: #F2910C
			color: white
			transition: .3s
	
			&:hover
				background: #00A19A
				color: white
	
	.dropdown-menu
		box-shadow: 0 1px 3px rgba(black, .2)
		border-color: #e5e5e5
		border-radius: 0

	li.navbar-cta
		transform: translateX(.7rem)
		a
			background: #F2910C
			clip-path: polygon(1rem 0%, 100% 0%, calc(100% - 1rem) 100%, 0% 100%)
			color: white
			padding: 2rem 1.5rem 2rem 2rem
			position: relative
			transition: .3s
		
			&::after
				content: ''
				background: white
				display: block
				height: 10rem
				left: .6rem
				position: absolute
				top: -1rem
				transform: rotate(11deg)
				width: .3rem
	
			&:hover
				background: #00A19A
				color: white
		
	.navbar-info
		background: #00A19A
		color: white
		clip-path: polygon(1rem 0%, 100% 0%, 100% 100%, 0% 100%)
		height: 84px
		margin: 0
		overflow: hidden
		position: relative
		text-align: center
	
		&::after
			content: ''
			background: white
			display: block
			height: 10rem
			left: .6rem
			position: absolute
			top: -1rem
			transform: rotate(11deg)
			width: .3rem
	
	.info-phone,
	.info-email
		display: block
		padding: 2rem 1.5rem 2rem 2rem
		transition: opacity .2s
		opacity: 1

		strong
			font-size: 2rem
			line-height: 1

		&.hide
			opacity: 0

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Glegoo:400,700|Muli:400,400i,700,700i" rel="stylesheet" />