HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!

180x181

10.4 KB

Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:

Script

Open in browser

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Muhamad Tsaqif Yasykur | Portfolio</title>

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">

<style>
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
  scroll-behavior:smooth;
}

body{
  background:#0f0f1b;
  color:white;
  overflow-x:hidden;
}

/* Glow background */
body::before{
  content:"";
  position:fixed;
  width:600px;
  height:600px;
  background:linear-gradient(45deg,#00f5ff,#ff00c8);
  filter:blur(200px);
  top:-200px;
  left:-200px;
  z-index:-1;
}

/* Navbar */
nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 8%;
  position:fixed;
  width:100%;
  backdrop-filter:blur(15px);
  background:rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.1);
}

nav h1{
  font-weight:700;
  background:linear-gradient(90deg,#00f5ff,#ff00c8);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

nav ul{
  display:flex;
  gap:25px;
  list-style:none;
}

nav ul li a{
  text-decoration:none;
  color:white;
  transition:0.3s;
}

nav ul li a:hover{
  color:#00f5ff;
}

/* Hero */
.hero{
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 10%;
}

.profile-pic{
  width:180px;
  height:180px;
  border-radius:50%;
  object-fit:cover;
  border:4px solid transparent;
  background:linear-gradient(#0f0f1b,#0f0f1b) padding-box,
             linear-gradient(45deg,#00f5ff,#ff00c8) border-box;
  margin-bottom:25px;
}

.hero h2{
  font-size:2.5rem;
  background:linear-gradient(90deg,#00f5ff,#ff00c8);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero p{
  color:#aaa;
  margin-top:15px;
}

.btn{
  display:inline-block;
  margin-top:25px;
  padding:12px 30px;
  border-radius:30px;
  background:#E1306C;
  color:white;
  text-decoration:none;
  font-weight:600;
  transition:0.3s;
}

.btn:hover{
  transform:scale(1.05);
  box-shadow:0 0 20px #E1306C;
}

/* Section */
section{
  padding:100px 8%;
}

/* Instagram Grid */
.insta-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:30px;
}

/* Scroll animation */
.reveal{
  opacity:0;
  transform:translateY(50px);
  transition:all 0.8s ease;
}

.reveal.active{
  opacity:1;
  transform:translateY(0);
}

footer{
  text-align:center;
  padding:40px;
  color:#777;
}
</style>
</head>

<body>

<nav>
  <h1>MTY</h1>
  <ul>
    <li><a href="#about">About</a></li>
    <li><a href="#instagram">Instagram</a></li>
    <li><a href="https://www.instagram.com/mhmdtsqiff" target="_blank">Contact</a></li>
  </ul>
</nav>

<section class="hero">
  <img src="profile.jpg" alt="Muhamad Tsaqif Yasykur" class="profile-pic">
  <h2>Muhamad Tsaqif Yasykur</h2>
  <p>Creative Student • Future Leader • Digital Enthusiast</p>
  <a href="https://www.instagram.com/mhmdtsqiff" target="_blank" class="btn">
    Follow @mhmdtsqiff
  </a>
</section>

<section id="about" class="reveal">
  <h2>Tentang Saya</h2>
  <p style="margin-top:20px;color:#aaa;">
    Saya memiliki ketertarikan pada kepemimpinan, organisasi, dan pengembangan diri.
    Berkomitmen untuk terus berkembang dan memberikan dampak positif.
  </p>
</section>

<section id="instagram" class="reveal">
  <h2 style="text-align:center;margin-bottom:40px;">Instagram Posts</h2>

  <div class="insta-grid">

    <blockquote class="instagram-media"
      data-instgrm-permalink="https://www.instagram.com/p/DPLK2oiklQU/"
      data-instgrm-version="14">
    </blockquote>

    <blockquote class="instagram-media"
      data-instgrm-permalink="https://www.instagram.com/p/DKPAc0ASArx/"
      data-instgrm-version="14">
    </blockquote>

    <blockquote class="instagram-media"
      data-instgrm-permalink="https://www.instagram.com/p/DO7Xe27kiJv/"
      data-instgrm-version="14">
    </blockquote>

  </div>
</section>

<footer>
  © 2026 Muhamad Tsaqif Yasykur | Designed with 💜
</footer>

<script async src="//www.instagram.com/embed.js"></script>

<script>
window.addEventListener("scroll", reveal);

function reveal(){
  var reveals = document.querySelectorAll(".reveal");
  for(var i=0;i<reveals.length;i++){
    var windowHeight = window.innerHeight;
    var elementTop = reveals[i].getBoundingClientRect().top;
    var elementVisible = 100;

    if(elementTop < windowHeight - elementVisible){
      reveals[i].classList.add("active");
    }
  }
}
</script>

</body>
</html>

Landing Page

This ad does not have a landing page available

Network Timeline

Performance Summary

104

Requests

Domains

976KB

Transfer Size

9517KB

Content Size

209.0ms

Dom Content Loaded

488.0ms

First Paint

2,686.0ms

Load Time

Domain Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests

Timings (ms)

Total Time

Content Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests