Instagram Plugin

Follow Us On Instagram

HTML

<section class="instagram_section">
	<div class="wrapper">
		<div class="instagram_desc">
			<h4>Follow Us On Instagram</h4>
			<a href="#" target="_blank" class="instagram_link">
				<img src="/img/instagram-c.svg" alt="instagram logo">
				<span>@fieldmasters_turf</span>
			</a>
		</div>
		<div class="instagram_img">
			<img src="/img/instagram_plugin.jpg" alt="images from instagram">
		</div>
	</div>
</section>

CSS

.instagram_section .instagram_desc{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;margin:0 0 6.5rem}
.instagram_section .instagram_desc h4{font-size:2.2rem;margin:0 0 2.7rem}
.instagram_section .instagram_desc .instagram_link{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center}
.instagram_section .instagram_desc .instagram_link img{width:3.8rem;height:3.8rem;margin:.5rem 1rem 0 0}
.instagram_section .instagram_desc .instagram_link span{font-size:4rem;font-weight:700;line-height:1;-webkit-transition:.3s linear;-o-transition:.3s linear;-moz-transition:.3s linear;transition:.3s linear}
.instagram_section .instagram_img img{width:100%}

@media (-ms-high-contrast: none),(-ms-high-contrast: active),(-moz-touch-enabled: 0),(hover: hover) {
	.instagram_section .instagram_desc .instagram_link:hover span{color:#09a5be}
}

@media only screen and (max-width: 1300px) {
	.instagram_section .instagram_desc{margin:0 0 4.5rem}
}

@media only screen and (max-width: 992px) {
	.instagram_section .instagram_desc{margin:0 0 3rem}
	.instagram_section .instagram_desc h4{margin:0 0 1.5rem}
	.instagram_section .instagram_desc .instagram_link img{width:3.2rem;height:3.2rem;margin:.4rem 1rem 0 0}
	.instagram_section .instagram_desc .instagram_link span{font-size:3.2rem}
}

@media only screen and (max-width: 640px) {
	.instagram_section .instagram_desc{margin:0 0 2.5rem}
	.instagram_section .instagram_desc .instagram_link img{width:3rem;height:3rem;margin:.4rem .5rem 0 0}
	.instagram_section .instagram_desc .instagram_link span{font-size:2.8rem}
}

SCSS

/* Vars */
$main:     #09a5be;

.instagram_section {
	.instagram_desc {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 0 6.5rem;
		
		h4 {
			font-size: 2.2rem;
			margin: 0 0 2.7rem;
		}
		
		.instagram_link {
			display: flex;
			align-items: center;
			
			img {
				width: 3.8rem;
				height: 3.8rem;
				margin: .5rem 1rem 0 0;
			}
			
			span {
				font-size: 4rem;
				font-weight: 700;
				line-height: 1;
				transition: .3s linear;
			}
		}
	}
	
	.instagram_img {
		img {
			width: 100%;
		}
	}
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.instagram_section .instagram_desc .instagram_link:hover span {color: $main;}
}

@media only screen and (max-width: 1300px) {
	.instagram_section .instagram_desc {margin: 0 0 4.5rem;}
}

@media only screen and (max-width: 992px) {
	.instagram_section .instagram_desc {margin: 0 0 3rem;}
	.instagram_section .instagram_desc h4 {margin: 0 0 1.5rem;}
	.instagram_section .instagram_desc .instagram_link img {width: 3.2rem;height: 3.2rem;margin: 0.4rem 1rem 0 0;}
	.instagram_section .instagram_desc .instagram_link span {font-size: 3.2rem;}
}

@media only screen and (max-width: 640px) {
	.instagram_section .instagram_desc {margin: 0 0 2.5rem;}
	.instagram_section .instagram_desc .instagram_link img {width: 3rem;height: 3rem;margin: 0.4rem .5rem 0 0;}
	.instagram_section .instagram_desc .instagram_link span {font-size: 2.8rem;}
}