Instafetch.js Example

Developer
Thomas Vaeth
Size
3,245 Kb
Views
24,288
  1. Instafetch.js Example Previews
  2. Instafetch.js Example HTML Codes
  3. Instafetch.js Example CSS Codes
  4. Instafetch.js Example JS Codes

How do I make an instafetch.js example?

Instafetch.js is a 6KB JavaScript plugin for the Instagram API using fetch instead of jQuery.. What is a instafetch.js example? How do you make a instafetch.js example? This script and codes were developed by Thomas Vaeth on 24 September 2022, Saturday.

Instafetch.js Example Previews
IQ Test

Instafetch.js Example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Instafetch.js Example</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Playfair+Display'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="instafetch"></div> <script src='https://rawgit.com/thomasvaeth/instafetch.js/master/dist/instafetch.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Instafetch.js Example - Script Codes CSS Codes

body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
* { box-sizing: border-box;
}
body { width: 100%; height: 100%; min-height: 100vh; padding: 2em; font-family: "Playfair Display", serif; font-size: 100%; line-height: 1.8; color: #000; background-color: #e6e6e6;
}
@media (min-width: 20em) { body { font-size: 102.5%; }
}
@media (min-width: 30em) { body { font-size: 105%; }
}
@media (min-width: 54em) { body { font-size: 107.5%; }
}
@media (min-width: 64em) { body { font-size: 110%; }
}
@media (min-width: 76.5em) { body { font-size: 115%; }
}
@media (min-width: 114em) { body { font-size: 125%; }
}
#instafetch a { position: relative; display: block; padding: 0.5em 0.5em 0; border: 1px solid transparent; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); background-color: #fff; background-clip: padding-box; text-decoration: none; cursor: pointer; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: all 1s ease; transition: all 1s ease;
}
@media (min-width: 30em) { #instafetch a { padding: 1em 1em 0; }
}
#instafetch a:after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-clip: padding-box; box-shadow: 0 2px 50px rgba(0, 0, 0, 0.25); opacity: 0; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out;
}
#instafetch a:hover { border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 47px rgba(0, 0, 0, 0.1); -webkit-transform: translate3d(0, -0.5em, 0); transform: translate3d(0, -0.5em, 0); -webkit-transition: all 1s ease; transition: all 1s ease;
}
#instafetch a:hover:after { opacity: 1;
}
#instafetch figure { margin: 0;
}
#instafetch img { display: block; height: 640px; width: 640px; max-width: 100%;
}
#instafetch div { padding: 1em 0; color: #000; background: #fff;
}
#instafetch p { padding: 0; font-size: 1.25em; text-align: center;
}

Instafetch.js Example - Script Codes JS Codes

instafetch.init({ accessToken: '3980752.1677ed0.62bb6a2ad3ef4dc0a6aad768ab8939ab', numOfPics: 1, caption: true
});
Instafetch.js Example - Script Codes
Instafetch.js Example - Script Codes
Home Page Home
Developer Thomas Vaeth
Username thomasvaeth
Uploaded September 24, 2022
Rating 3.5
Size 3,245 Kb
Views 24,288
Do you need developer help for Instafetch.js Example?

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!

Thomas Vaeth (thomasvaeth) Script Codes
Name
Full Viewport Z-Index Scroll
Button Border Slide Mixin
Grey with Gum Sole
Recipe Book
Button Offset Mixin
Pokemon React
Button Draw on Hover Mixin
Calculator
Flexbox Grid Animation
SVG Mouse Animation
Create amazing SEO content with AI!

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!