Instagram

Developer
Katy DeCorah
Size
2,837 Kb
Views
6,072
  1. Instagram Previews
  2. Instagram HTML Codes
  3. Instagram CSS Codes

How do I make an instagram?

Playing with gradients to recreate the new Instagram logo. What is a instagram? How do you make a instagram? This script and codes were developed by Katy DeCorah on 06 January 2023, Friday.

Instagram Previews
IQ Test

Instagram - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Instagram</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='instagram'></div>
</body>
</html>

Instagram - Script Codes CSS Codes

*,
*:before,
*:after { box-sizing: border-box;
}
html,
body { width: 100%; height: 100%;
}
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; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}
.instagram { background: -webkit-radial-gradient(circle farthest-corner at 35% 90%, #fec564, rgba(0, 0, 0, 0) 50%), -webkit-radial-gradient(circle farthest-corner at 0 140%, #fec564, rgba(0, 0, 0, 0) 50%), -webkit-radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, rgba(0, 0, 0, 0) 50%), -webkit-radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, rgba(0, 0, 0, 0) 50%), -webkit-radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, rgba(0, 0, 0, 0) 50%), -webkit-radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, rgba(0, 0, 0, 0) 50%), -webkit-radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, rgba(0, 0, 0, 0)), -webkit-linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%); background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, rgba(0, 0, 0, 0) 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, rgba(0, 0, 0, 0)), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%); border-radius: .2em; font-size: 50vmin; height: 1em; position: relative; width: 1em;
}
.instagram:before, .instagram:after { color: #fff; content: ''; display: block; position: absolute; border: .075em solid;
}
.instagram:before { border-radius: inherit; height: .75em; -webkit-transform: translate(0.125em, 0.125em); transform: translate(0.125em, 0.125em); width: .75em;
}
.instagram:after { border-radius: 1em; box-shadow: .2em -.2em 0 -.16em; height: .4em; -webkit-transform: translate(0.3em, 0.3em); transform: translate(0.3em, 0.3em); width: .4em;
}
Instagram - Script Codes
Instagram - Script Codes
Home Page Home
Developer Katy DeCorah
Username katydecorah
Uploaded January 06, 2023
Rating 4.5
Size 2,837 Kb
Views 6,072
Do you need developer help for Instagram?

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!

Katy DeCorah (katydecorah) Script Codes
Name
Accordion Nav
CSS Haiku - Constellations
THREES App Store Button
Google Static Map Maker
Map gallery
Combination Lock
Food by nos
Ice Cream Pattern by Dorottya Porkolab
Haml Clock
Build a store locator with Mapbox.js
Create amazing marketing copy 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!