Notes Of Nandar: Widget Profile Instagram

Widget Profile Instagram

Copy Paste Seluruh Bagian Kode HTML ini Menjadi 1 Kode HTML Secara berurutan untuk menghasilkan Widget Feeds Instagram Yang Terlihat Premium.

=================================================
PART 1
=================================================

<div id="ig-widget">





<div class="ig-card">

<div class="ig-cover"></div>

<div class="ig-header">

<div class="ig-avatar">

<img
src="https://via.placeholder.com/220x220.png?text=PHOTO"
alt="Instagram Profile">

</div>

<div class="ig-info">

<h2 class="ig-name">
Nama Anda
</h2>

<div class="ig-username">
@username
</div>

<div class="ig-stats">

<div class="ig-stat">

<strong>125</strong>

<span>Posts</span>

</div>

<div class="ig-stat">

<strong>12.5K</strong>

<span>Followers</span>

</div>

<div class="ig-stat">

<strong>580</strong>

<span>Following</span>

</div>

</div>

<p class="ig-bio">

Tulis bio singkat di sini.

</p>

<div class="ig-buttons">

<a
class="ig-btn ig-follow"
href="https://instagram.com/username"
target="_blank">

Follow

</a>

<a
class="ig-btn ig-view"
href="https://instagram.com/username"
target="_blank">

View Profile

</a>

</div>

</div>

</div>



<div class="ig-gallery">

<a href="https://instagram.com/username" target="_blank">

<img src="https://via.placeholder.com/400" alt="Feed 1">

</a>

<a href="https://instagram.com/username" target="_blank">

<img src="https://via.placeholder.com/400" alt="Feed 2">

</a>

<a href="https://instagram.com/username" target="_blank">

<img src="https://via.placeholder.com/400" alt="Feed 3">

</a>

<a href="https://instagram.com/username" target="_blank">

<img src="https://via.placeholder.com/400" alt="Feed 4">

</a>

<a href="https://instagram.com/username" target="_blank">

<img src="https://via.placeholder.com/400" alt="Feed 5">

</a>

<a href="https://instagram.com/username" target="_blank">

<img src="https://via.placeholder.com/400" alt="Feed 6">

</a>

</div>

</div>

</div>

=================================================
PART 2
=================================================

<style>

/*====================================================
Instagram Profile Widget Premium v1.0
PART 02 - Premium CSS
====================================================*/

#ig-widget{
max-width:980px;
margin:40px auto;
padding:20px;
font-family:Arial,Helvetica,sans-serif;
}

#ig-widget *{
box-sizing:border-box;
}

.ig-card{

overflow:hidden;

border-radius:28px;

background:
rgba(255,255,255,.92);

backdrop-filter:blur(18px);

box-shadow:
0 25px 60px rgba(0,0,0,.12);

border:1px solid rgba(255,255,255,.45);

transition:.35s;

}

.ig-card:hover{

transform:translateY(-6px);

box-shadow:
0 35px 70px rgba(0,0,0,.16);

}

.ig-cover{

height:170px;

background:

linear-gradient(
135deg,
#833AB4,
#C13584,
#E1306C,
#F56040,
#FCAF45
);

position:relative;

overflow:hidden;

}

.ig-cover:before{

content:"";

position:absolute;

width:320px;
height:320px;

border-radius:50%;

background:

rgba(255,255,255,.12);

top:-140px;
right:-90px;

}

.ig-cover:after{

content:"";

position:absolute;

width:240px;
height:240px;

border-radius:50%;

background:

rgba(255,255,255,.08);

bottom:-120px;
left:-70px;

}

.ig-header{

display:flex;

gap:28px;

padding:0 35px 35px;

margin-top:-75px;

position:relative;

z-index:2;

}

.ig-avatar{

width:150px;
height:150px;

border-radius:50%;

padding:6px;

background:

linear-gradient(
135deg,
#833AB4,
#E1306C,
#FCAF45);

box-shadow:

0 15px 35px rgba(0,0,0,.18);

flex-shrink:0;

}

.ig-avatar img{

width:100%;
height:100%;

object-fit:cover;

border-radius:50%;

display:block;

background:#fff;

}

.ig-info{

flex:1;

padding-top:82px;

}

.ig-name{

margin:0;

font-size:34px;

font-weight:700;

color:#222;

}

.ig-username{

margin-top:6px;

font-size:17px;

color:#777;

}

.ig-stats{

display:flex;

gap:30px;

margin:22px 0;

flex-wrap:wrap;

}

.ig-stat{

text-align:center;

}

.ig-stat strong{

display:block;

font-size:24px;

color:#111;

}

.ig-stat span{

font-size:14px;

color:#777;

}

.ig-bio{

font-size:15px;

line-height:1.8;

color:#444;

margin:18px 0 24px;

}

.ig-buttons{

display:flex;

gap:14px;

flex-wrap:wrap;

}

.ig-btn{

padding:14px 26px;

border-radius:999px;

font-weight:bold;

text-decoration:none;

transition:.3s;

font-size:15px;

}

.ig-follow{

background:

linear-gradient(
135deg,
#833AB4,
#E1306C,
#F56040);

color:#fff;

box-shadow:

0 12px 25px rgba(225,48,108,.35);

}

.ig-follow:hover{

transform:translateY(-3px);

}

.ig-view{

background:#fff;

color:#444;

border:1px solid #ddd;

}

.ig-view:hover{

background:#f5f5f5;

}

.ig-gallery{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:10px;

padding:0 20px 20px;

}

.ig-gallery a{

overflow:hidden;

border-radius:18px;

display:block;

}

.ig-gallery img{

width:100%;

aspect-ratio:1/1;

object-fit:cover;

display:block;

transition:.4s;

}

.ig-gallery img:hover{

transform:scale(1.08);

}

@media(max-width:768px){

.ig-header{

flex-direction:column;

align-items:center;

text-align:center;

margin-top:-60px;

padding:0 22px 28px;

}

.ig-avatar{

width:125px;

height:125px;

}

.ig-info{

padding-top:0;

}

.ig-name{

font-size:28px;

}

.ig-buttons{

justify-content:center;

}

.ig-gallery{

grid-template-columns:

repeat(2,1fr);

padding:0 15px 15px;

}

}

@media(max-width:480px){

#ig-widget{

padding:10px;

}

.ig-cover{

height:135px;

}

.ig-gallery{

grid-template-columns:

repeat(2,1fr);

gap:8px;

}

.ig-btn{

width:100%;

text-align:center;

}

}

</style>

=================================================
PART 3
=================================================

<style>

/*==========================================
PART 03
Premium Animation & Effects
==========================================*/

/* ---------- VERIFIED BADGE ---------- */

.ig-name::after{

content:"✓";

display:inline-flex;

justify-content:center;

align-items:center;

margin-left:10px;

width:22px;

height:22px;

border-radius:50%;

background:#0095F6;

color:#fff;

font-size:13px;

font-weight:bold;

vertical-align:middle;

box-shadow:

0 0 12px rgba(0,149,246,.35);

}

/* ---------- FOLLOW BUTTON SHINE ---------- */

.ig-follow{

position:relative;

overflow:hidden;

}

.ig-follow::before{

content:"";

position:absolute;

top:-40%;

left:-120%;

width:60%;

height:220%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.55),

transparent

);

transform:rotate(25deg);

transition:1s;

}

.ig-follow:hover::before{

left:180%;

}

/* ---------- AVATAR GLOW ---------- */

.ig-avatar{

animation:

avatarGlow 4s ease-in-out infinite;

}

@keyframes avatarGlow{

0%,100%{

box-shadow:

0 15px 35px rgba(0,0,0,.18),

0 0 0 rgba(225,48,108,.15);

}

50%{

box-shadow:

0 18px 45px rgba(0,0,0,.18),

0 0 35px rgba(225,48,108,.35);

}

}

/* ---------- FEED ---------- */

.ig-gallery a{

position:relative;

}

.ig-gallery a::after{

content:"📷 Instagram";

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

display:flex;

justify-content:center;

align-items:center;

background:

rgba(0,0,0,.42);

color:#fff;

font-size:15px;

font-weight:bold;

opacity:0;

transition:.35s;

letter-spacing:.5px;

}

.ig-gallery a:hover::after{

opacity:1;

}

/* ---------- IMAGE ---------- */

.ig-gallery img{

transition:

transform .45s,

filter .45s;

}

.ig-gallery a:hover img{

transform:scale(1.08);

filter:brightness(.88);

}

/* ---------- CARD ---------- */

.ig-card{

position:relative;

overflow:hidden;

}

.ig-card::before{

content:"";

position:absolute;

top:-200px;

right:-120px;

width:320px;

height:320px;

border-radius:50%;

background:

rgba(255,255,255,.08);

pointer-events:none;

}

/* ---------- BUTTON ---------- */

.ig-btn{

letter-spacing:.3px;

}

.ig-btn:hover{

transform:

translateY(-3px);

}

/* ---------- MOBILE ---------- */

@media(max-width:768px){

.ig-name::after{

width:18px;

height:18px;

font-size:11px;

margin-left:8px;

}

}

</style>

=================================================
PART 4
=================================================

<style>

/*==================================================
Instagram Profile Widget Premium v1.0
PART 04 - Final Premium Effects
==================================================*/

/* Aurora Background */

.ig-cover{
background-size:300% 300%;
animation:igAurora 10s ease infinite;
}

@keyframes igAurora{

0%{background-position:0% 50%;}

50%{background-position:100% 50%;}

100%{background-position:0% 50%;}

}

/* Floating Avatar */

.ig-avatar{

animation:
avatarFloat 5s ease-in-out infinite,
avatarGlow 4s ease-in-out infinite;

}

@keyframes avatarFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

}

/* Badge */

.ig-card::after{

content:"FOLLOW ME";

position:absolute;

top:18px;

right:18px;

padding:8px 14px;

border-radius:999px;

background:rgba(255,255,255,.18);

backdrop-filter:blur(10px);

border:1px solid rgba(255,255,255,.35);

font-size:11px;

font-weight:bold;

letter-spacing:1px;

color:#fff;

box-shadow:

0 10px 25px rgba(0,0,0,.12);

}

/* Feed Border */

.ig-gallery a{

border:2px solid rgba(255,255,255,.45);

transition:.35s;

}

.ig-gallery a:hover{

border-color:#E1306C;

}

/* Button Animation */

.ig-btn{

transition:

transform .35s,

box-shadow .35s,

background .35s;

}

.ig-follow:hover{

box-shadow:

0 18px 35px rgba(225,48,108,.45);

}

.ig-view:hover{

box-shadow:

0 12px 28px rgba(0,0,0,.12);

}

/* Smooth Card */

.ig-card{

transition:

transform .35s,

box-shadow .35s;

}

.ig-card:hover{

transform:

translateY(-8px);

}

/* Better Text */

.ig-bio{

max-width:620px;

}

/* Responsive */

@media(max-width:768px){

.ig-card::after{

top:12px;

right:12px;

font-size:10px;

padding:6px 10px;

}

}

</style>

=================================================

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)