CodePen Embed - A simple responsive Footer

	<body>
	<!-- --------------------------HTML DU MODULE------------------------- -->
		<footer class="footer2">
			<div itemscope itemptype="http://schema.org/Organization" class="inner ff-1 fc-1">
				<div class="left">
					<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0"  src="https://www.google.fr/maps?sll=47.238222,-1.5600560999999982&amp;sspn=0.179037419072796,0.35161985156791764&amp;t=m&amp;q=New+York,+%C3%89tat+de+New+York,+%C3%89tats-Unis&amp;dg=opt&amp;ie=UTF8&amp;hq=&amp;hnear=New+York,+%C3%89tat+de+New+York,+%C3%89tats-Unis&amp;ll=40.695,-73.988004&amp;s4=0.217825,0.445976&amp;z=12&amp;output=embed&iwloc=near"></iframe>
				</div>
					<div class="right">
						<nav class="menu">
							<ul>
								<li><a href="">HOME</a></li>
								<li><a href="">MY WORK</a></li>
								<li><a href="">MY HOBBIES</a></li>
								<li><a href="">ABOUT ME</a></li>
                <li><a href="">MY BLOG</a></li>
								<li><a href="">CONTACT</a></li>
							</ul>
						</nav>
						<div class="desc">
							<span class="title fc-3" itemprop="name">B WEBLOG</span>
								<div itemprop="Text" class="ff-2 fc-2">
									<p>Bacon ipsum dolor sit amet bresaola fatback pork.</p>
									<p>Strip steak sirloin andouille sausage shank.</p>
									<p><strong>Beef ribs chuck chicken tri-tip bacon.</strong></p>
								</div>
						</div>
							<nav class="sous-menu">
								<ul itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
									<li><span class="underline">ADDRESS</span>
										<ul class="sub ff-2 fc-2">
											<li itemprop="streetAddress">bweblog House</li>
											<li itemprop="postalCode">253W 28th street</li>
											<li itemprop="addressLocality"><strong>New York </strong></li>
										</ul>
									</li>
									<li><span class="underline">CONTACT</span>
										<ul class="sub ff-2 fc-2">
											<li itemprop="telephone"><strong>C/</strong> <a href="tel:+33836656565">202.789.0942</a></li>
											<li itemprop="faxNumber"><strong>F/ </strong>202.789.0942</li>
											<li itemprop="email"><strong>M/</strong> <a href="#">youraddress@bweblog.fr</a></li>
										</ul>
									</li>
									<li><span class="underline">SOCIAL</span>
										<ul class="sub ff-2 fc-2">
											<li itemprop="url"><a href="https://www.facebook.com/bwebblog" target="_blank" title="This link will open in a new tab">Facebook</a></li>
											<li itemprop="url"><a href="https://twitter.com/bweblog" target="_blank" title="This link will open in a new tab">Twitter</a></li>
											<li itemprop="url"><a href="#" target="_blank" title="This link will open in a new tab">Google +</a></li>
										</ul>
									</li>	
								</ul>
							</nav>
					</div>
			</div>
		</footer>
		
	</body>

@import url(https://fonts.googleapis.com/css?family=Just+Another+Hand);


footer, nav, {
	display: block;
}
body {
	line-height: 1;
}
ul {
	list-style: none;
}


a{
	text-decoration:none;
}

.inner:after{
	content:"";
	display:block;
	clear:both;
}
input:focus,select:focus,textarea:focus,a:focus,select:focus,option:focus{
	outline:none;
}

/*------------FONT FAMILY----------------*/

.footer2 .ff-1{
	font-family: 'Just Another Hand', cursive;
}

.footer2 .ff-2{
	font-family: 'Myriad', sans-serif;
}

/*------------FONT COLOR----------------*/

.footer2 .fc-1{
	color:#fffefe;
}

.footer2 .fc-1 a{
	color:#fffefe;
}

.footer2 .fc-1 a:hover{
	color:#F22568;
}

.footer2 .sous-menu li a:hover{
	color:rgba(255,255,255,0.9);
	border-bottom: 1px solid rgba(255,255,255,0.6);
  text-shadow:0 0 rgba(0,0,0,0);
}

.footer2 .fc-2{
	color:#284F59;
	text-shadow: -0.1em 0.1em rgba(255,255,255,0.3);
}

.footer2 .fc-3{
	color:#F22568;
}
/*-----------BACKGROUND-----------*/

.footer2 .inner{
	background: #0ABF82;
}

/*-----------INNER--------------------*/
.footer2 .inner{
	width:950px;
	
}

.footer2 strong{
	font-weight: bold;
}

.footer2 {
width: 100%;
}

.footer2 .inner {
	margin: 0 auto;
}

.footer2 .clb{
	clear: both;
}

.footer2 .right{
	display: block;
	float: right;
	margin:4em 5% 4em 0;

}

.footer2 .menu:after{
background: rgba(0,0,0,1);
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.61) 56%, rgba(255,255,255,0.61) 56%, rgba(255,255,255,0.3) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,1)), color-stop(56%, rgba(0,0,0,0.61)), color-stop(56%, rgba(255,255,255,0.61)), color-stop(100%, rgba(255,255,255,0.3)));
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.61) 56%, rgba(255,255,255,0.61) 56%, rgba(255,255,255,0.3) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.61) 56%, rgba(255,255,255,0.61) 56%, rgba(255,255,255,0.3) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.61) 56%, rgba(255,255,255,0.61) 56%, rgba(255,255,255,0.3) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.61) 56%, rgba(255,255,255,0.61) 56%, rgba(255,255,255,0.3) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff', GradientType=0 );
height: 2px;
content: "";
position: absolute;
width: 100%;
top: 1.5em;

}

.footer2 nav ul li{
	font-size:1.3em;
	display: inline;
    list-style: none;

}

.footer2 .menu ul li a{
	-webkit-transition: all 200ms cubic-bezier(0.895, 0.030, 0.685, 0.220); 
   -moz-transition: all 200ms cubic-bezier(0.895, 0.030, 0.685, 0.220); 
    -ms-transition: all 200ms cubic-bezier(0.895, 0.030, 0.685, 0.220); 
     -o-transition: all 200ms cubic-bezier(0.895, 0.030, 0.685, 0.220); 
        transition: all 200ms cubic-bezier(0.895, 0.030, 0.685, 0.220);
}

.footer2 .menu ul li:first-child:before{
	content:"";
	margin-left: -1.1em;
}

.footer2 .menu ul li:before{
content: "/";
position: relative;
margin-left: 0.85em;
margin-right: 1.1em;
}

.footer2 .menu{
	position: relative;
	text-shadow: 0.1em 0.1em rgba(0,0,0,0.5);
}

.footer2 .desc{
	position: relative;
	margin-top: 2em;
	margin-bottom: 2em;

}

.footer2 .desc .title{
	font-size: 2em;
	text-shadow: 0.07em 0.07em rgba(0,0,0,0.3);
}

.footer2 .desc p{
	line-height: 1.2em;
}

.footer2 .sous-menu a{
	color:inherit;
}

.footer2 .sous-menu li a{
	border-bottom: 1px dotted rgba(0, 0, 0, 0.5);
		-webkit-transition: all 200ms cubic-bezier(0.895, 0.030, 0.685, 0.220); 
   -moz-transition: all 200ms cubic-bezier(0.895, 0.030, 0.685, 0.220); 
    -ms-transition: all 200ms cubic-bezier(0.895, 0.030, 0.685, 0.220); 
     -o-transition: all 200ms cubic-bezier(0.895, 0.030, 0.685, 0.220); 
        transition: all 200ms cubic-bezier(0.895, 0.030, 0.685, 0.220); 
}

.footer2 .sous-menu ul{
	position: relative;
}

.footer2 .sous-menu ul li{
	margin-top: 0.5em;
	display: block;
	float:left;
	position: relative;
  margin-right: 2.8em;
	text-align: left;
}


.footer2 .sous-menu ul li:last-child{
	margin-right: 0;
}

.footer2 ul.sub{
	font-size: 0.5em;
	margin-top: 1em;
}
.footer2 ul.sub li{
	display: block;
	float: none;
	border:none !important;
	width: 100%;

}

.underline:after{
background: rgba(0,0,0,1);
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.61) 56%, rgba(255,255,255,0.61) 56%, rgba(255,255,255,0.3) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,1)), color-stop(56%, rgba(0,0,0,0.61)), color-stop(56%, rgba(255,255,255,0.61)), color-stop(100%, rgba(255,255,255,0.3)));
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.61) 56%, rgba(255,255,255,0.61) 56%, rgba(255,255,255,0.3) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.61) 56%, rgba(255,255,255,0.61) 56%, rgba(255,255,255,0.3) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.61) 56%, rgba(255,255,255,0.61) 56%, rgba(255,255,255,0.3) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.61) 56%, rgba(255,255,255,0.61) 56%, rgba(255,255,255,0.3) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff', GradientType=0 );
height: 2px;
content: "";
position: absolute;
width: 6em;
top: 1.1em;
left: 0;
}

.footer2 .left{
float: left;
position: relative;
top: 5.5em;
left: 4em;
width: 13em;
height: 13em;
border-radius: 50%;
border: 0.6em solid rgba(255,255,255,1);
-webkit-box-shadow: 0.06em 0.06em 0 0.2em rgba(0,0,0,0.5);
-moz-box-shadow: 0.06em 0.06em 0 0.2em rgba(0,0,0,0.5);
box-shadow: 0.06em 0.06em 0 0.2em rgba(0,0,0,0.5);
overflow: hidden;
}

.footer2 .left iframe{
	position: relative;
	height: 400px;

}

/*MEDIA QUERIES*/
@media screen and (max-width:950px) {
	.footer2 .inner{
	width: 100%;
	}
}

@media screen and (max-width:890px) {

 .footer2 .left{
float: none;
position: relative;
width: 100%;
height: 13em;
border-radius: 0;
top: 0;
left: 0;
border: none;
-webkit-box-shadow:0 0 0 rgba(0,0,0,0);
-moz-box-shadow: 0 0 0 rgba(0,0,0,0);
box-shadow: 0 0 0 rgba(0,0,0,0);

	}

.footer2 .left iframe{
	width: 900px;

}

.footer2 .right{
	float: none;
	margin: 3em 0 0 0;

}

.footer2 .menu ul{
	margin: 0;
	text-align: center;
}
.footer2 .desc{
	text-align: center;
}

.footer2 .sous-menu{
	position: relative;
	margin-left:auto;
margin-right:auto;
width: 34em;
}

.footer2 .sous-menu ul {
	padding-bottom: 1em;
	margin-bottom: 2em;
	overflow: hidden;
}

}

@media screen and (max-width:550px) {
	.footer2 nav ul li {
display: block;
	margin-top: 0.5em;
}

.footer2 .menu ul li:before{
	content:"";
	margin:0;

}

.footer2 .menu ul li:first-child:before {
content: "";
margin-left: 0;
}

.footer2 .menu:after{
display: none;
}

.footer2 .left {
margin-left: 0;
}
  
.footer2 .sous-menu{
width: 20em;
left: 50%;
margin-left: -10em;
}

.footer2 .sous-menu ul {
margin-bottom:0;
}
.footer2 .sous-menu ul li {
margin-right: 0;
margin-bottom: 0.2em;
float: none;
text-align: center;
}

.underline:after {
left: 50%;
margin-left: -3em;
}

This Pen is owned by Ravi Chauhan on CodePen. It is a fork of this Pen.

See more by @rvchn06 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.