cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

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.

            
              <header>

	<div class="container">

		<div class="profile">

			<div class="profile-image">

				<img src="https://images.unsplash.com/photo-1513721032312-6a18a42c8763?w=152&h=152&fit=crop&crop=faces">

			</div>

			<div class="profile-user-settings">

				<h1 class="profile-user-name">janedoe_</h1>

				<div class="profile-edit-btn">Edit Profile</div>

				<div class="profile-settings-btn"><i class="fas fa-cog"></i></div>

			</div>

			<div class="profile-stats">

				<ul>
					<li><span class="profile-stat-count">164</span> posts</li>
					<li><span class="profile-stat-count">188</span> followers</li>
					<li><span class="profile-stat-count">206</span> following</li>
				</ul>

			</div>

			<div class="profile-bio">

				<p><span class="profile-real-name">Jane Doe</span> Lorem ipsum dolor sit, amet consectetur adipisicing elit 📷✈️🏕️</p>

			</div>

		</div>
		<!-- End of profile section -->

	</div>
	<!-- End of container -->

</header>

<main>

	<div class="container">

		<div class="gallery">

			<div class="gallery-item">

				<img src="https://images.unsplash.com/photo-1511765224389-37f0e77cf0eb?w=500&h=500&fit=crop" class="gallery-image">

				<div class="gallery-item-info">

					<ul>
						<li class="gallery-item-likes"><i class="fas fa-heart"></i> 56</li>
						<li class="gallery-item-comments"><i class="fas fa-comment"></i> 2</li>
					</ul>

				</div>

			</div>

			<div class="gallery-item">

				<img src="https://images.unsplash.com/photo-1497445462247-4330a224fdb1?w=500&h=500&fit=crop" class="gallery-image">

				<div class="gallery-item-info">

					<ul>
						<li class="gallery-item-likes"><i class="fas fa-heart"></i> 89</li>
						<li class="gallery-item-comments"><i class="fas fa-comment"></i> 5</li>
					</ul>

				</div>

			</div>

			<div class="gallery-item">

				<img src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?w=500&h=500&fit=crop" class="gallery-image">

				<div class="gallery-item-type">

					<i class="fas fa-clone"></i>

				</div>

				<div class="gallery-item-info">

					<ul>
						<li class="gallery-item-likes"><i class="fas fa-heart"></i> 42</li>
						<li class="gallery-item-comments"><i class="fas fa-comment"></i> 1</li>
					</ul>

				</div>

			</div>

			<div class="gallery-item">

				<img src="https://images.unsplash.com/photo-1502630859934-b3b41d18206c?w=500&h=500&fit=crop" class="gallery-image">

				<div class="gallery-item-type">

					<i class="fas fa-video"></i>

				</div>

				<div class="gallery-item-info">

					<ul>
						<li class="gallery-item-likes"><i class="fas fa-heart"></i> 38</li>
						<li class="gallery-item-comments"><i class="fas fa-comment"></i> 0</li>
					</ul>

				</div>

			</div>

			<div class="gallery-item">

				<img src="https://images.unsplash.com/photo-1498471731312-b6d2b8280c61?w=500&h=500&fit=crop" class="gallery-image">

				<div class="gallery-item-type">

					<i class="fas fa-clone"></i>

				</div>

				<div class="gallery-item-info">

					<ul>
						<li class="gallery-item-likes"><i class="fas fa-heart"></i> 47</li>
						<li class="gallery-item-comments"><i class="fas fa-comment"></i> 1</li>
					</ul>

				</div>

			</div>

			<div class="gallery-item">

				<img src="https://images.unsplash.com/photo-1515023115689-589c33041d3c?w=500&h=500&fit=crop" class="gallery-image">

				<div class="gallery-item-info">

					<ul>
						<li class="gallery-item-likes"><i class="fas fa-heart"></i> 94</li>
						<li class="gallery-item-comments"><i class="fas fa-comment"></i> 3</li>
					</ul>

				</div>

			</div>

			<div class="gallery-item">

				<img src="https://images.unsplash.com/photo-1504214208698-ea1916a2195a?w=500&h=500&fit=crop" class="gallery-image">

				<div class="gallery-item-type">

					<i class="fas fa-clone"></i>

				</div>

				<div class="gallery-item-info">

					<ul>
						<li class="gallery-item-likes"><i class="fas fa-heart"></i> 52</li>
						<li class="gallery-item-comments"><i class="fas fa-comment"></i> 4</li>
					</ul>

				</div>

			</div>

			<div class="gallery-item">

				<img src="https://images.unsplash.com/photo-1515814472071-4d632dbc5d4a?w=500&h=500&fit=crop" class="gallery-image">

				<div class="gallery-item-info">

					<ul>
						<li class="gallery-item-likes"><i class="fas fa-heart"></i> 66</li>
						<li class="gallery-item-comments"><i class="fas fa-comment"></i> 2</li>
					</ul>

				</div>

			</div>

			<div class="gallery-item">

				<img src="https://images.unsplash.com/photo-1511407397940-d57f68e81203?w=500&h=500&fit=crop" class="gallery-image">

				<div class="gallery-item-type">

					<i class="fas fa-clone"></i>

				</div>

				<div class="gallery-item-info">

					<ul>
						<li class="gallery-item-likes"><i class="fas fa-heart"></i> 45</li>
						<li class="gallery-item-comments"><i class="fas fa-comment"></i> 0</li>
					</ul>

				</div>

			</div>

			<div class="gallery-item">

				<img src="https://images.unsplash.com/photo-1518481612222-68bbe828ecd1?w=500&h=500&fit=crop" class="gallery-image">

				<div class="gallery-item-info">

					<ul>
						<li class="gallery-item-likes"><i class="fas fa-heart"></i> 34</li>
						<li class="gallery-item-comments"><i class="fas fa-comment"></i> 1</li>
					</ul>

				</div>

			</div>

			<div class="gallery-item">

				<img src="https://images.unsplash.com/photo-1505058707965-09a4469a87e4?w=500&h=500&fit=crop" class="gallery-image">

				<div class="gallery-item-info">

					<ul>
						<li class="gallery-item-likes"><i class="fas fa-heart"></i> 41</li>
						<li class="gallery-item-comments"><i class="fas fa-comment"></i> 0</li>
					</ul>

				</div>

			</div>

			<div class="gallery-item">

				<img src="https://images.unsplash.com/photo-1423012373122-fff0a5d28cc9?w=500&h=500&fit=crop" class="gallery-image">

				<div class="gallery-item-type">

					<i class="fas fa-video"></i>

				</div>

				<div class="gallery-item-info">

					<ul>
						<li class="gallery-item-likes"><i class="fas fa-heart"></i> 30</li>
						<li class="gallery-item-comments"><i class="fas fa-comment"></i> 2</li>
					</ul>

				</div>

			</div>

		</div>
		<!-- End of gallery -->

		<div class="spinner"></div>

	</div>
	<!-- End of container -->

</main>
            
          
!
            
              /*

All grid code is placed in a 'supports' rule (feature query) at the bottom of the CSS (Line 306). 
        
The 'supports' rule will only run if your browser supports CSS grid.

Flexbox and floats are used as a fallback so that browsers which don't support grid will still recieve an identical layout.

*/

/* Fonts */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600);

@import url(https://use.fontawesome.com/releases/v5.0.8/css/all.css);

/* Base Styles */

:root {
	/* Base font size */
	font-size: 10px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: "Open Sans", Arial, sans-serif;
	min-height: 100vh;
	background-color: #fafafa;
	color: #262626;
	padding-bottom: 3rem;
}

img {
	display: block;
}

.container {
	max-width: 93.5rem;
	margin: 0 auto;
	padding: 0 2rem;
}

/* Profile Section */

.profile {
	padding: 5rem 0;
}

.profile::after {
	content: "";
	display: block;
	clear: both;
}

.profile-image {
	float: left;
	width: calc(33.333% - 1rem);
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 3rem;
}

.profile-image img {
	border-radius: 50%;
}

.profile-user-settings,
.profile-stats,
.profile-bio {
	float: left;
	width: calc(66.666% - 2rem);
}

.profile-user-settings {
	margin-top: 1.1rem;
}

.profile-user-name {
	display: inline-block;
	font-size: 3.2rem;
	font-weight: 300;
}

.profile-edit-btn {
	display: inline-block;
	font-size: 1.4rem;
	line-height: 1.8;
	border: 0.1rem solid #dbdbdb;
	border-radius: 0.3rem;
	padding: 0 2.4rem;
	margin-left: 2rem;
	cursor: pointer;
}

.profile-settings-btn {
	display: inline-block;
	font-size: 2rem;
	cursor: pointer;
	margin-left: 1rem;
}

.profile-stats {
	margin-top: 2.3rem;
}

.profile-stats li {
	display: inline-block;
	font-size: 1.6rem;
	line-height: 1.5;
	margin-right: 4rem;
	cursor: pointer;
}

.profile-stats li:last-of-type {
	margin-right: 0;
}

.profile-bio {
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.5;
	margin-top: 2.3rem;
}

.profile-real-name,
.profile-stat-count,
.profile-edit-btn {
	font-weight: 600;
}

/* Gallery Section */

.gallery {
	display: flex;
	flex-wrap: wrap;
	margin: -1rem -1rem;
	padding-bottom: 3rem;
}

.gallery-item {
	position: relative;
	flex: 1 0 22rem;
	margin: 1rem;
	color: #fff;
	cursor: pointer;
}

.gallery-item:hover .gallery-item-info {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
}

.gallery-item-info {
	display: none;
}

.gallery-item-info li {
	display: inline-block;
	font-size: 1.7rem;
	font-weight: 600;
}

.gallery-item-likes {
	margin-right: 2.2rem;
}

.gallery-item-type {
	position: absolute;
	top: 1rem;
	right: 1rem;
	font-size: 2.5rem;
	text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1);
}

.fa-clone,
.fa-comment {
	transform: rotateY(180deg);
}

.gallery-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Spinner */

.spinner {
	width: 5rem;
	height: 5rem;
	border: 0.6rem solid #999;
	border-bottom-color: transparent;
	border-radius: 50%;
	margin: 0 auto;
	animation: spinner 1s linear infinite;
}

/* Media Query */

@media screen and (max-width: 40rem) {
	.profile {
		display: flex;
		flex-wrap: wrap;
		padding: 4rem 0;
	}

	.profile::after {
		display: none;
	}

	.profile-image,
	.profile-user-settings,
	.profile-bio,
	.profile-stats {
		float: none;
		width: auto;
	}

	.profile-image img {
		width: 7.7rem;
	}

	.profile-user-settings {
		flex-basis: calc(100% - 10.7rem);
		display: flex;
		flex-wrap: wrap;
		margin-top: 1rem;
	}

	.profile-user-name {
		font-size: 2.2rem;
	}

	.profile-edit-btn {
		order: 1;
		padding: 0;
		text-align: center;
		margin-top: 1rem;
	}

	.profile-edit-btn {
		margin-left: 0;
	}

	.profile-bio {
		font-size: 1.4rem;
		margin-top: 1.5rem;
	}

	.profile-edit-btn,
	.profile-bio,
	.profile-stats {
		flex-basis: 100%;
	}

	.profile-stats {
		order: 1;
		margin-top: 1.5rem;
	}

	.profile-stats ul {
		display: flex;
		text-align: center;
		padding: 1.2rem 0;
		border-top: 0.1rem solid #dadada;
		border-bottom: 0.1rem solid #dadada;
	}

	.profile-stats li {
		font-size: 1.4rem;
		flex: 1;
		margin: 0;
	}

	.profile-stat-count {
		display: block;
	}
}

/* Spinner Animation */

@keyframes spinner {
	to {
		transform: rotate(360deg);
	}
}

/*

The following code will only run if your browser supports CSS grid.

Remove or comment-out the code block below to see how the browser will fall-back to flexbox & floated styling. 

*/

@supports (display: grid) {
	.profile {
		display: grid;
		grid-template-columns: 1fr 2fr;
		grid-template-rows: repeat(3, auto);
		grid-column-gap: 3rem;
		align-items: center;
	}

	.profile-image {
		grid-row: 1 / -1;
	}

	.gallery {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
		grid-gap: 2rem;
	}

	.profile-image,
	.profile-user-settings,
	.profile-stats,
	.profile-bio,
	.gallery-item,
	.gallery {
		width: auto;
		margin: 0;
	}

	@media (max-width: 40rem) {
		.profile {
			grid-template-columns: auto 1fr;
			grid-row-gap: 1.5rem;
		}

		.profile-image {
			grid-row: 1 / 2;
		}

		.profile-user-settings {
			display: grid;
			grid-template-columns: auto 1fr;
			grid-gap: 1rem;
		}

		.profile-edit-btn,
		.profile-stats,
		.profile-bio {
			grid-column: 1 / -1;
		}

		.profile-user-settings,
		.profile-edit-btn,
		.profile-settings-btn,
		.profile-bio,
		.profile-stats {
			margin: 0;
		}
	}
}

            
          
!
            
              /*

Full-page view:

https://codepen.io/GeorgePark/full/VXrwOP/

*/

// const posts = document.querySelectorAll('.gallery-item');

// posts.forEach(post => {
// 	post.addEventListener('click', () => {
// 		//Get original image URL
// 		const imgUrl = post.firstElementChild.src.split("?")[0];
// 		//Open image in new tab
// 		window.open(imgUrl, '_blank');
// 	});
// });


            
          
!
999px
Loading ..................

Console