Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <html lang="en">
<head>
	<meta charset="UTF-8">
	<title>My profile</title>
	<link rel="icon" href="lib/warkmeLogo.ico">
	<link rel="stylesheet" href="lib/css/style.css">
  	<!-- Font icon Awesome -->
  	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  	<!--  Font Google  -->
  	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

	<!--  JQuery  -->
	<script src="lib/framework/JQuery/jquery.js"></script>
	<!-- Smoooth-scroll JS-->
	<script  src="lib/framework/Smooth-scroll/js/smooth-scroll.min.js"></script>
	<script>
      smoothScroll.init({
      selector: '[data-scroll]', // Selector for links (must be a class, ID, data attribute, or element tag)
      selectorHeader: null, // Selector for fixed headers (must be a valid CSS selector) [optional]
      speed: 2000, // Integer. How fast to complete the scroll in milliseconds
      easing: 'easeInOutCubic', // Easing pattern to use
      offset: 0, // Integer. How far to offset the scrolling anchor location in pixels
      callback: function ( anchor, toggle ) {

      } // Function to run after scrolling
      });
    </script>
</head>
<body>
	<!-- <div  class="container-imagen">
		<div class="close">&times;</div>
		<div class="ligthbox">
			<img src="lib/myPhotos/photo3.jpg">
		</div> 
	</div> -->

	<!--  header  -->
	<header>
		<div class="wrapper">
			<!--  Logo  -->
			<div class="logo flex-center">
				<i class="fa fa-home flex-center"></i>
				<h3>logo</h3>
			</div>
			<!-- navbar -->
			<nav class="navbar">
				<ul>
					<li><a href="#!"><i class="fa fa-globe"></i></a></li>
					<li><a href="#!"><i class="fa fa-user"></i></a></li>
					<li><a href="#!"><i class="fa fa-envelope"></i></a></li>
					<li><a href="#!" class="notification"><i class="fa fa-bell"></i><span class="noti">3</span></a>
						<ul>
							<li><a href="#!">One new friend request</a></li>
							<li><a href="#!">Jhon doe posted on your wall</a></li>
							<li><a href="#!">Jane likes your post now</a></li>
						</ul>
					</li>
				</ul>
			</nav>
			<!--  Profile  -->
			<div class="profile">
				<img src="https://www.w3schools.com/w3images/avatar2.png">
			</div>
		</div>
	</header>

	<!--  Container for all  -->
	<section class="container-all">
		<article class="meProfile">
			<!--  My profile  -->
			<div class="me wrap shadow">
				<div class="heading">
					<p>Kevin Parra</p>
					  <img src="https://www.w3schools.com/w3images/avatar2.png">
				</div>
				<div class="information">
					<div class="info">
						<i class="fa fa-pencil"></i>
						<p>Designer and developer web</p>
					</div>
					<div class="info">
						<i class="fa fa-home"></i>
						<p>Medellín, Colombia</p>
					</div>
					<div class="info">
						<i class="fa fa-birthday-cake"></i>
						<p>May 11, 2000</p>
					</div>
				</div>
			</div>

			
			<div class="wrap padding-0 shadow" id="acordion">
				<!--  My group  -->
				<div class="w-1">
					<div class="header link" id="w1">
						<i class="fa fa-circle-o-notch"></i>
						<p>My group</p>
					</div>
					<div class="content submenu" id="content1">
						<p>Some other text...</p>
					</div>
				</div>
				<!--  My events  -->
				<div class="w-1">
					<div class="header link" id="w2">
						<i class="fa fa-calendar-check-o"></i>
						<p>My events</p>
					</div>
					<div class="content submenu" id="content2">
						<p>Some text...</p>
					</div>
				</div>
				<!--  My photos  -->
				<div class="w-1">
					<div class="header link" id="w3">
						<i class="fa fa-picture-o"></i>
						<p>My photos</p>
					</div>
					<div class="content padding-0 submenu" id="content3">
						<div class="images">
							<img src="https://www.w3schools.com/w3images/lights.jpg" class="imagen">
							<img src="https://www.w3schools.com/w3images/nature.jpg" class="imagen">
						</div>
						<div class="images">
							<img src="https://www.w3schools.com/w3images/mountains.jpg" class="imagen">
							<img src="https://www.w3schools.com/w3images/forest.jpg" class="imagen">
						</div>
						<div class="images">
							<img src="https://www.w3schools.com/w3images/fjords.jpg" class="imagen">
							<img src="https://www.w3schools.com/w3images/mountains.jpg" class="imagen">
						</div>
					</div>
				</div>
			</div>

			<div class="tags wrap shadow">
				<p>Interests</p>
				<div class="labels">
					<span>news</span>
					<span>Warkme</span>
					<span>Labels</span>
					<span>games</span>
					<span>friends</span>
					<span>food</span>
					<span>design</span>
					<span>art</span>
					<span>photos</span>
					<span>skate</span>
					<span>JavaScript</span>
				</div>
			</div>

			<div class="alert">
				<span class="close">&times;</span>
				<h2>Hey!</h2>
				<p>People are looking at your profile. Find out who.</p>
			</div>

		</article>

		<!--  Publication the friends  -->
		<article class="publication">
			<!--  Send post  -->
			<div class="post-send wrap shadow">
				<p>Social media template by kevin parra</p>
				<form>
					<input type="text" name="text" value="Status: Feeling Blue" required>
					<button type="submit"><i class="fa fa-pencil"></i>Post</button>
				</form>
			</div>
			<!--  Publications  -->
			<div class="content-publication wrap shadow">
				<div class="heading flex-center">
					<div class="name flex-center">
						<img src="lib/user/user2.png">
						<h3>Jhon doe</h3>
					</div>
					<p class="date">1 min</p>
				</div>
				<div class="public">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
					<div class="column-img flex-center">
						<img src="lib/myPhotos/photo3.jpg" class="imagen">
						<img src="lib/myPhotos/photo4.jpg" class="imagen">
					</div>
				</div>
				<div class="fav">
					<button class="like">Like</button>
					<button class="comment">Comments</button>
				</div>
			</div>
			
			<!--  Publications  -->
			<div class="content-publication wrap shadow">
				<div class="heading flex-center">
					<div class="name flex-center">
						<img src="lib/user/user3.png">
						<h3>Jane doe</h3>
					</div>
					<p class="date">1 min</p>
				</div>
				<div class="public">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
				</div>
				<div class="fav">
					<button class="like">Like</button>
					<button class="comment">Comments</button>
				</div>
			</div>

			<!--  Publications  -->
			<div class="content-publication wrap shadow">
				<div class="heading flex-center">
					<div class="name flex-center">
						<img src="lib/user/user4.png">
						<h3>Angie jane</h3>
					</div>
					<p class="date">22 min</p>
				</div>
				<div class="public">
					<p>Have you seen this ?</p>
					<div class="img flex-center">
						<img src="lib/myPhotos/photo2.jpg" class="imagen">
					</div>
				</div>
				<div class="fav">
					<button class="like">Like</button>
					<button class="comment">Comments</button>
				</div>
			</div>

		</article>

		<!--  Post right  -->
		<article class="post">
			<div class="info-right wrap shadow" id="acordion">
				<p class="title">Upcoming eventes</p>
				<img src="lib/myPhotos/photo3.jpg" class="imagen">
				<h3>Holiday</h3>
				<p class="hora">Friday 15:00</p>
				<button class="btn-info link">Info</button>
				<br>
			</div>
			<div class="info-right wrap shadow">
				<p class="title">Friends request</p>
				<img src="lib/user/user4.png" class="profile">
				<p class="name hora">Jane Doe</p>
				<div class="group-btn">
					<button class="acept"></button>
					<button class="cancel"></button>
				</div>
				<br>
			</div>
			<div class="info-right ult wrap shadow">
				<p class="title">ADS</p>
			</div>
			<div class="info-right ult wrap shadow">
				<p class="title"><i class="fa fa-vk"></i></p>
			</div>
		</article>
	</section>
<script src="lib/js/main.js"></script>
</body>
</html>
            
          
!
            
              * {
	margin: 0;
	padding: 0;
}

ul,
ol {
	list-style-type: none;
}

input:focus,
button:focus {
	outline: none;
}

body {
	font-family: 'Roboto', sans-serif;
	background: #F5F7F8;
}

.flex-center {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

header {
	background: #4D636F;
	width: 100%;
	color: #fff;
	padding-right: 20px;
	box-sizing: border-box;
	position: fixed;
	z-index: 1;
}

header .wrapper {
	display: flex;
}

header .logo {
	width: 120px;
	padding: 13px 22px;
	background: #3A4B53;
	box-sizing: border-box;
	font-size: 18px;
	cursor: default;
}


header .logo h3 {
	font-weight: 100;
}


header .navbar {
	width: 50%;
}

header .navbar ul > li {
	float: left;
}

header .navbar ul li a {
	display: block;
	padding: 15px 26px;
	font-size: 19px;
	color: #fff;
	text-decoration: none;
	position: relative;
}

header .logo:hover,
header .navbar ul li a:hover,
header .navbar ul li .notification:hover{
	color: #000;
}

header .navbar ul li a:hover,
header .profile:hover {
	background: #fff;
}

header .logo:hover,
header .navbar ul li .notification:hover,
header .navbar ul li ul li a:hover {
	background: #cccccc;
}

header .navbar ul li a:hover > .noti {
	color: #fff !important;
}

header .navbar ul li .noti {
	position: absolute;
	width:  18px;
	height: 18px;
	border-radius: 50%;
	top: 8px;
	right: 7px;
	text-align: center;
	background-color: #4CAF50;
	font-size: 14px;
}

header .navbar ul li ul {
	position: absolute;
	display: none;
	min-width: 140px;
	background: #fff;
	overflow: hidden;
	box-shadow: 1px 1px 15px 1px rgba(0, 0, 0, .11);
}

header .navbar ul li:hover > ul {
	display: block;
}

header .navbar ul li ul > li {
	clear: both;
}

header .navbar ul li ul li a{
	color: #000 !important;
	display: block;
	font-size: 16px;
	width: 100%;
}

header .profile {
	padding: 10px 26px; 
	text-align: center;
	box-sizing: border-box;
	position: absolute;
	right: 0;
	top: 0;
	cursor: pointer; 
}

header .profile img {
	width: 35px;
	height: 35px;	
	margin-top: -2px;
	border-radius: 50%;
}


.container-all {
	width: 100%;
	overflow: hidden;
	padding: 20px 9px;
	padding-top: 5em;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
}

.shadow {
	box-shadow: 0 2px 10px rgba(0, 0, 0, .20);
	border-radius: 6px;
}

.wrap {
	width: 94%;
	margin: auto;
	margin-bottom: 28px;
	padding: 0 15px;
	box-sizing: border-box;
}

.meProfile {
	width: 29%;
	background:  white;
	box-sizing: border-box;
}

.me .heading {
	width: 100%;
	text-align: center;
	border-bottom: 1px solid #eee;
	margin-bottom: 20px;
}

.me .heading p {
	font-weight: 100;
	font-size: 21px;
	padding: 20px 0;
}

.me .heading img {
	width: 115px;
	height: 115px;
	border-radius: 50%;
	margin-bottom: 26px;
}

.information {
	width: 100%;
}

.information .info {
	padding: 10px 0;
}

.information .info i {
	float: left;
	color: #607D8B;
	font-size: 18px;
	margin-right: 20px;
}

.information .info p {
	color: #333;
	font-weight: 200;
}

.padding-0 {
	padding: 0px 0px !important;
}

.w-1,
.w-1 .header {
	width: 100%;
	box-sizing: border-box;
}

.w-1 .header {
	background: #57707D;
	color: #fff;
	padding: 13px 15px;
	cursor: pointer;
	transition: all .1s;
}

.w-1 .header:hover {
	/*background: grey; */
	filter: grayscale(40%);
}

.w-1 .header.open {	
	background: #9EB1BB !important;
}

.w-1 .header i {
	float: left;
	margin-right: 10px;
}

.w-1 .content {
	width: 100% !important;
	padding: 15px 15px;
	background: #fff;
	display: none;
}

.w-1 .content .images {
	width: 97%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
}

.w-1 .content .images img {
	width: 50%;
	margin-right: 8px;
	margin-top: 8px;
}

.w-1 .content p {
	font-size: 16px;
}

.tags p {
	padding: 13px 0;
	font-size: 18px;
	font-weight: 100;
}

.tags .labels {
	padding-bottom: 10px;
}

.tags .labels span {
	padding: 5px 10px;
	font-size: 14px;
	margin-bottom: 5px;
	display: inline-block;
	cursor: pointer;
	text-transform: capitalize;
	transition: all .1s;
}

.tags .labels span:hover {
	transform: scale(1.1);
}

.tags .labels span:nth-child(1){
	background: #303E45;
	color: #fff;
}

.tags .labels span:nth-child(2){
	background: #3A4B53;
	color: #fff;
}

.tags .labels span:nth-child(3){
	background: #435761;
	color: #fff;
}

.tags .labels span:nth-child(4){
	background: #4D636F;
	color: #fff;
}

.tags .labels span:nth-child(5){
	background: #57707D;
	color: #fff;
}

.tags .labels span:nth-child(6){
	background: #607D8B;
	color: #fff;
}

.tags .labels span:nth-child(7){
	background: #7D97A5;
	color: #fff;
}

.tags .labels span:nth-child(8){
	background: #9EB1BB;
}

.tags .labels span:nth-child(9){
	background: #BECBD2;
}

.tags .labels span:nth-child(10){
	background: #CFE5E8;
	color: #000 !important;
}

.tags .labels span:nth-child(11){
	background: #F5F7F8;
	color: #000 !important;
}

.alert {
	width: 92%;
	margin: auto;
	background: #DFE5E8;	
	border: 1px solid #cccccc;
	border-radius: 3px;
	padding: 10px 14px;
	box-sizing: border-box;
}

.alert .close {
	float: right;
	font-size: 20px;
	cursor: pointer;
}

.alert .close:hover {
	color: grey;
}

.alert h2 {
	font-size: 21px;
	padding: 10px 0;
}

.alert  p {
	font-size: 15px;
}

.publication {
	width: 65%;
	background:  white;
}

.post-send {
	padding: 20px 15px; 
}

.post-send p {
	padding: 2px 0;
	padding-bottom: 20px;
	font-size: 15px;
	font-weight: 100 !important;
	color: #818181;
}

.post-send input {
	width: 100%;
	border: 1px solid #ccc;
	background: none;
	box-sizing: border-box;
	font-size: 16px;
	padding: 8px 15px;
}

.post-send button {
	background: #607D8B;
	color: #fff;
	border: none;
	font-size: 16px;
	padding: 9px 18px;
	cursor: pointer;
	margin-top: 20px;
	transition: all .2s;
}

.post-send button i {
	margin-right: 10px;
}

.post-send button:hover {
	background: #ccc;
	color: #000;
}

.post-send button:active {
	transform: scale(.95);
}

.content-publication .heading {
	padding-top: 15px;
	padding-bottom: 30px;
	border-bottom: 1px solid #ddd;
}

.content-publication .heading .name img {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	margin-right: 10px;
}

.content-publication .heading .name h3 {
	font-size: 20px;
	color: #000;
	font-weight: 100;
}

.content-publication .heading  p {
	color: #818181;
	font-size: 15px;
}

.content-publication .public {
	padding: 20px 0;
}

.content-publication .public p {
	font-size: 17px;
	line-height: 1.5;
	padding: 10px 0;
	color: #333;
}

.content-publication .public .column-img img {
	width: 49%;
}

.content-publication .public .img img {
	width: 100%;
}

.content-publication .fav .like,
.content-publication  .fav .comment {
	padding: 7px 16px;
	font-size: 16px;
	background: #57707D;
	border: none;
	color: #fff;
	cursor: pointer;
	margin-bottom: 20px;
	transition: all .1s;
}

.content-publication .fav .like {
	margin-right: 10px;
}

.content-publication .fav .like:active,
.content-publication  .fav .comment:active {
	transform: scale(.95);
}

.content-publication  .fav .like:before {
	content: '\f164  ';
	font-family: fontAwesome;
	margin-right: 10px;
}

.content-publication  .fav .comment:before {
	content: '\f075';
	font-family: fontAwesome;
	margin-right: 7px;
}



/*  Right  */
.post {
	background-color: white;
	width: 21%;
}


.info-right img {
	width: 100%;
}

.info-right {
	text-align: center;
}

.info-right p.title { 
	padding: 18px 0;
	font-size: 16px;
	font-weight: 100;
}

.info-right h3 {
	font-weight: 100;
	padding: 13px 0;
}

.info-right p.hora{
	font-size: 15px !important;
	padding-bottom: 16px;
}

.info-right .btn-info { 
	width: 100%;
	display: block;
	border: none;
	background: #BECBD2;
	cursor: pointer;
	padding: 7px 0;
	font-size: 17px;
}

.info-right .btn-info:hover {
	background: #9EB1BB;
}

.info-right .profile {
	width: 100px;
	height: 100px;
	margin: auto;
	margin-bottom: 5px;
}


.info-right .group-btn {
	width: 95%;
	margin: auto;
	display: flex;
}

.info-right .group-btn button{
	width: 50%;
	cursor: pointer;
	border: none;
	padding: 10px;
	text-align: center;
	color: #fff;
	font-size: 20px;
}

.info-right .group-btn button:hover {
	background: #ccc;
}

.info-right .group-btn .acept{
	background: #93CF96;
}

.info-right .group-btn .cancel{
	background: #F88E86;
}

.info-right .group-btn .acept:before {
	content: '\f00c';
	font-family: fontAwesome;
}

.info-right .group-btn .cancel:before {
	content: '\f00d';
	font-family: fontAwesome;
}

.ult {
	padding: 20px 0;
	font-size: 20px;
}

.ult p i {
	font-size: 40px;
}

/**/

.container-imagen {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 13;
	background: rgba(0, 0, 0, .60);
	display: flex;
	justify-content: center;
	align-items: center;
}

.container-imagen .close {
	float: right;
	font-size: 50px;
	font-weight: bold;
	color: #fff;
	cursor: pointer;
	position: absolute;
	right: 50px;
	top: 20px;
	z-index: 100;
}

.ligthbox img {
	width: 100%;
}


@media screen and (max-width: 1000px) {
	header .logo {
		display: none;
	}

	.container-all {
		display: block;
	}

	.meProfile,
	.publication,
	.post {
		width: 100% !important;
	}

	.content-publication .fav .like,
	.content-publication  .fav .comment {
		padding: 7px 14px;
		font-size: 14px;
	}

	.content-publication  .fav .like:before {
		margin-right: 5px;
	}
}
            
          
!
            
              
(function (){
	
	$(".close").click(function () {
		$(".alert").css({
			'display' : 'none'
		})
	});

	var Accordion = function (el, multiple) {
		this.el = el || {};
		this.multiple = multiple || false;

		var links = this.el.find(".link");
		links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown);

	}

	Accordion.prototype.dropdown = function(e) {
		var $el = e.data.el,
			$this  = $(this),
			$next = $this.next();

			$next.slideToggle();
			$this.parent().toggleClass('open');

			if (!$this.multiple) {
				$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
			}
	};

	var acordion = new Accordion($("#acordion"));

	$(".imagen").click(function (x) {
		var enlaceImagen = x.target.src;

		var ligthbox = '<div  class="container-imagen" id="container-imagen">' +
		  			       '<div class="close" id="closeImagen">&times;</div>' +
						   '<div class="ligthbox">' + 
								'<img src="'+enlaceImagen+'">' +
						   '</div> '+
						'</div>';
		$("body").append(ligthbox);
	});

	

}());
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console