Instagram API Footer
How do I make an instagram api footer?
Messing with a personalized footer using instafeed.js and the instagram API. What is a instagram api footer? How do you make a instagram api footer? This script and codes were developed by Hans Engebretsen on 09 August 2022, Tuesday.
Instagram API Footer - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Instagram API Footer</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://fonts.googleapis.com/css?family=Lekton:400,700);
body { background-color: #222; font-family: "lekton", sans-serif;
}
li { list-style: none; text-align: center; margin-bottom: 10px; color: rgba(255, 255, 255, 0.6);
}
li.social-link { font-size: 1em; border: 1px solid white; margin: 0; float: left;
}
li.social-link a { padding: .5em;
}
li.social-link:hover { background-color: rgba(255, 255, 255, 0.9);
}
li.social-link:hover a { color: #222;
}
a { color: white; display: block; text-decoration: none;
}
#instafeed a { line-height: 0; margin: 0; padding: 0; float: left;
}
#instafeed { width: 240%; max-width: 2000px; margin: 0 auto; text-align: center;
}
.footer-links { z-index: 3; position: absolute; width: 100%;
}
.footer-links ul { width: 245px; margin: 0 auto; text-align: center; padding: 0px; margin: 0 px; margin-top: 120px;
}
.footer-background { width: 100%; overflow: hidden; position: absolute; bottom: 0; height: 320px;
}
.footer-background:before, .footer-background:after { content: ""; width: 100%; height: 100%; opacity: 1; z-index: 1; /* FF3.6+ */ /* Chrome,Safari4+ */ background: -moz-linear-gradient(top, #222222 8%, rgba(34, 34, 34, 0.99) 9%, rgba(34, 34, 34, 0.7) 53%, rgba(34, 34, 34, 0.11) 97%, rgba(34, 34, 34, 0.11) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(8%, #222222), color-stop(9%, rgba(34, 34, 34, 0.99)), color-stop(53%, rgba(34, 34, 34, 0.7)), color-stop(97%, rgba(34, 34, 34, 0.11)), color-stop(100%, rgba(34, 34, 34, 0.11))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #222222 8%, rgba(34, 34, 34, 0.99) 9%, rgba(34, 34, 34, 0.7) 53%, rgba(34, 34, 34, 0.11) 97%, rgba(34, 34, 34, 0.11) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #222222 8%, rgba(34, 34, 34, 0.99) 9%, rgba(34, 34, 34, 0.7) 53%, rgba(34, 34, 34, 0.11) 97%, rgba(34, 34, 34, 0.11) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #222222 8%, rgba(34, 34, 34, 0.99) 9%, rgba(34, 34, 34, 0.7) 53%, rgba(34, 34, 34, 0.11) 97%, rgba(34, 34, 34, 0.11) 100%); /* IE10+ */ background: linear-gradient(to bottom, #222222 8%, rgba(34, 34, 34, 0.99) 9%, rgba(34, 34, 34, 0.7) 53%, rgba(34, 34, 34, 0.11) 97%, rgba(34, 34, 34, 0.11) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#1c222222',GradientType=0 ); /* IE6-9 */ display: block; position: absolute; top: 0; left: 0;
}
.footer-background:after { bottom: 0; transform: rotate(180deg);
}
#instafeed { position: absolute; left: 0; top: 0; animation-name: back; animation-duration: 100s; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes back { 0% { left: 0px; } 50% { left: -100%; } 100% { left: 0%; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section class="footer-background"> <div id="instafeed"></div> <section class="footer-links"> <ul class="social-links"> <li>Find hans on: </li> <li class="social-link"><a href="https://twitter.com/haahns">Twitter</a></li> <li class="social-link"><a href="https://dribbble.com/Haaans">Dribbble</a></li> <li class="social-link"><a href="http://codepen.io/hans/">Codepen</a></li> </ul> </section>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://instafeedjs.com/js/instafeed.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Instagram API Footer - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Lekton:400,700);
body { background-color: #222; font-family: "lekton", sans-serif;
}
li { list-style: none; text-align: center; margin-bottom: 10px; color: rgba(255, 255, 255, 0.6);
}
li.social-link { font-size: 1em; border: 1px solid white; margin: 0; float: left;
}
li.social-link a { padding: .5em;
}
li.social-link:hover { background-color: rgba(255, 255, 255, 0.9);
}
li.social-link:hover a { color: #222;
}
a { color: white; display: block; text-decoration: none;
}
#instafeed a { line-height: 0; margin: 0; padding: 0; float: left;
}
#instafeed { width: 240%; max-width: 2000px; margin: 0 auto; text-align: center;
}
.footer-links { z-index: 3; position: absolute; width: 100%;
}
.footer-links ul { width: 245px; margin: 0 auto; text-align: center; padding: 0px; margin: 0 px; margin-top: 120px;
}
.footer-background { width: 100%; overflow: hidden; position: absolute; bottom: 0; height: 320px;
}
.footer-background:before, .footer-background:after { content: ""; width: 100%; height: 100%; opacity: 1; z-index: 1; /* FF3.6+ */ /* Chrome,Safari4+ */ background: -moz-linear-gradient(top, #222222 8%, rgba(34, 34, 34, 0.99) 9%, rgba(34, 34, 34, 0.7) 53%, rgba(34, 34, 34, 0.11) 97%, rgba(34, 34, 34, 0.11) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(8%, #222222), color-stop(9%, rgba(34, 34, 34, 0.99)), color-stop(53%, rgba(34, 34, 34, 0.7)), color-stop(97%, rgba(34, 34, 34, 0.11)), color-stop(100%, rgba(34, 34, 34, 0.11))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #222222 8%, rgba(34, 34, 34, 0.99) 9%, rgba(34, 34, 34, 0.7) 53%, rgba(34, 34, 34, 0.11) 97%, rgba(34, 34, 34, 0.11) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #222222 8%, rgba(34, 34, 34, 0.99) 9%, rgba(34, 34, 34, 0.7) 53%, rgba(34, 34, 34, 0.11) 97%, rgba(34, 34, 34, 0.11) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #222222 8%, rgba(34, 34, 34, 0.99) 9%, rgba(34, 34, 34, 0.7) 53%, rgba(34, 34, 34, 0.11) 97%, rgba(34, 34, 34, 0.11) 100%); /* IE10+ */ background: linear-gradient(to bottom, #222222 8%, rgba(34, 34, 34, 0.99) 9%, rgba(34, 34, 34, 0.7) 53%, rgba(34, 34, 34, 0.11) 97%, rgba(34, 34, 34, 0.11) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#1c222222',GradientType=0 ); /* IE6-9 */ display: block; position: absolute; top: 0; left: 0;
}
.footer-background:after { bottom: 0; transform: rotate(180deg);
}
#instafeed { position: absolute; left: 0; top: 0; animation-name: back; animation-duration: 100s; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes back { 0% { left: 0px; } 50% { left: -100%; } 100% { left: 0%; }
}
Instagram API Footer - Script Codes JS Codes
var instaFeed = new Instafeed({ get: 'user', userId: 34139106, accessToken: '34139106.467ede5.2e8f6b6a9cf846f6bd23169b624aca22', target: 'instafeed', sortBy: 'most-liked', limit: 200, resolution: 'thumbnail'
}); instaFeed.run();
Developer | Hans Engebretsen |
Username | hans |
Uploaded | August 09, 2022 |
Rating | 4.5 |
Size | 4,868 Kb |
Views | 38,456 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Pure CSS FitText | 3,357 Kb |
Candy Text Typographic Fun | 4,103 Kb |
Whisky Friday | 5,677 Kb |
Launch Sign up form | 5,586 Kb |
Timeline Sign Load Transition | 3,926 Kb |
Visual effects Demo | 4,184 Kb |
Email Form Animation | 25,104 Kb |
IMac - Scrolling effect | 5,429 Kb |
HTML 5 Audio Player | 36,697 Kb |
Nice Grainy background | 22,550 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
JS Beispiel getElementsByClassName 3 | HSZG-Frontend-Kurs | 1,988 Kb |
Tab Menus | Zephyr | 3,180 Kb |
Flat design iframe | Damienpm | 1,819 Kb |
Filtre ile Arama Kutusu - Search Box with Filter | AyhanALTINOK | 3,448 Kb |
Weather App | OmranAbazid | 2,596 Kb |
LAMP PURE CSS with Animation | Dam62500 | 2,911 Kb |
ECharts Version 3.0 - Bar Marker Chart | WebCodePro | 2,726 Kb |
Image Hover | Johnheiner | 3,409 Kb |
Board Site | IndianaLuft | 10,542 Kb |
Css Rotating 3d cubes different speed | Dghez | 2,364 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!