<!-- HTML GOES HERE  -->
<h1>Weekly Coding Challenge #7 - Portfolio</h1>
<p>These are my submission for the <a href="https://www.florin-pop.com/blog/2019/03/weekly-coding-challenge">Weekly Coding Challenge</a>. <br />Hover over the items to find out more about each challenge.</p>

<div class="portfolio-container">
	<div class="portfolio-item">
		<img src="https://www.florin-pop.com/static/b631a2f043273a179ec3b0473cdd7eb3/ff993/double-slider-sign-in-up-form.png" alt="wcc1">
		<div class="portfolio-content">
			<p>Create a Sign in or Sign up form (or both)</p>
			<a href="https://www.florin-pop.com/blog/2019/03/double-slider-sign-in-up-form/" target="_blank">Read More</a>
		</div>
	</div>
	<div class="portfolio-item">
		<img src="https://www.florin-pop.com/static/343f9f04e63c640a7dc42776e45a4b1e/ff993/full-page-slider.png" alt="wcc2">
		<div class="portfolio-content">
			<p>Full Page Slider</p>
			<a href="https://www.florin-pop.com/blog/2019/03/full-page-slider/" target="_blank">Read More</a>
		</div>
	</div>
	<div class="portfolio-item">
		<img src="https://www.florin-pop.com/static/98f31bcaaa1f125ba4038f0477bba10b/ff993/tab-bar-navigation.png" alt="wcc3">
		<div class="portfolio-content">
			<p>Tab bar navigation</p>
			<a href="https://www.florin-pop.com/blog/2019/03/tab-bar-navigation/" target="_blank">Read More</a>
		</div>
	</div>
	<div class="portfolio-item">
		<img src="https://www.florin-pop.com/static/d494f226e6dedca77ea26c18e6782a5c/ff993/interwind-loading-animation.png" alt="wcc4">
		<div class="portfolio-content">
			<p>Interwind Loading Animation</p>
			<a href="https://www.florin-pop.com/blog/2019/03/interwind-loading-animation/" target="_blank">Read More</a>
		</div>
	</div>
	<div class="portfolio-item">
		<img src="https://www.florin-pop.com/static/2bad6b32e0bb10fef1e237829676bc4d/ff993/drawing-app.png" alt="wcc5">
		<div class="portfolio-content">
			<p>Drawing App with p5js</p>
			<a href="https://www.florin-pop.com/blog/2019/04/drawing-app-built-with-p5js/" target="_blank">Read More</a>
		</div>
	</div>
	<div class="portfolio-item">
		<img src="https://www.florin-pop.com/static/4e9ea629923a7a8c3ffb0dce618c1e21/ff993/buttons-ui-kit.png" alt="wcc6">
		<div class="portfolio-content">
			<p>Buttons UI Kit</p>
			<a href="https://www.florin-pop.com/blog/2019/04/buttons-ui-kit/" target="_blank">Read More</a>
		</div>
	</div>
	<div class="portfolio-item">
		<img src="https://www.florin-pop.com/static/85aebf1860eb854f43d4ffe0e0cf0349/ff993/how-to-create-a-portfolio.png" alt="wcc7">
		<div class="portfolio-content">
			<p>Portfolio</p>
			<a href="https://www.florin-pop.com/blog/2019/04/how-to-create-a-portfolio/" target="_blank">Read More</a>
		</div>
	</div>
</div>
<footer>
	<p>
		Created with <i class="fa fa-heart"></i> by
		<a target="_blank" href="https://florin-pop.com">Florin Pop</a>
		- Read how I created this and how you can join the challenge
		<a target="_blank" href="https://florin-pop.com/blog/2019/04/how-to-create-a-portfolio">here</a>
	</p>
</footer>

@import url('https://fonts.googleapis.com/css?family=Roboto');

* {
	box-sizing: border-box;
}

body {
	background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	min-height: 100vh;
	font-family: 'Roboto', sans-serif;
	margin: 0 0 50px;
	text-align: center;
}

p {
	line-height: 24px;
	margin: 0;
}

.portfolio-container {
	display: flex;
	flex-wrap: wrap;
	max-width: 1120px;
	margin: 20px;
}

.portfolio-item {
	border-radius: 10px;
	margin: 20px 1.6%;
	overflow: hidden;
	position: relative;
	width: 30%;
}

.portfolio-item img {
	object-fit: cover;
	transition: transform 200ms ease-in;
	height: 100%;  	
	width: 100%;
}

.portfolio-item:hover img {
	transform: scale(1.1);
}

.portfolio-content {
	background-color: #293347;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 200ms ease-in-out;
	width: 100%;
	height: 100%;
}

.portfolio-item:hover .portfolio-content {
	opacity: 1;
}

.portfolio-content p {
	color: #fff;
	font-size: 20px;
	padding: 0 40px;
}

.portfolio-content a {
	background-color: #fff;
	border-radius: 3px;
	color: #000;
	margin-top: 20px;
	padding: 7px 15px;
	text-decoration: none;
}

@media (max-width: 960px) {
	.portfolio-item {
		width: 48%;
		margin: 15px 1%;
	}
}

@media (max-width: 768px) {
	.portfolio-item {
		width: 100%;
		margin: 15px 0;
	}
}

footer {
    background-color: #222;
    color: #fff;
    font-size: 14px;
    bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 999;
}

footer p {
    margin: 10px 0;
}

footer i {
    color: red;
}

footer a {
    color: #3c97bf;
    text-decoration: none;
}