HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
200x200
2.04 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="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <style>
        /* CSS Variables for easy theming */
        :root {
            --primary-color: #007bff;
            --secondary-color: #f8f9fa;
            --text-color: #333;
            --bg-color: #fff;
            --shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        /* Global Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--bg-color);
        }

        a {
            text-decoration: none;
            color: var(--primary-color);
        }

        /* Navigation Bar */
        nav {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: var(--bg-color);
            box-shadow: var(--shadow);
            z-index: 100;
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        nav .logo {
            font-size: 1.5rem;
            font-weight: bold;
        }

        nav ul {
            list-style: none;
            display: flex;
            gap: 2rem;
        }

        nav ul li a {
            transition: color 0.3s;
        }

        nav ul li a:hover {
            color: var(--primary-color);
        }

        /* Hamburger Menu for Mobile */
        .hamburger {
            display: none;
            flex-direction: column;
            cursor: pointer;
        }

        .hamburger div {
            width: 25px;
            height: 3px;
            background-color: var(--text-color);
            margin: 3px 0;
            transition: 0.3s;
        }

        /* Hero Section */
        #hero {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            background: linear-gradient(135deg, var(--primary-color), #0056b3);
            color: white;
            padding: 2rem;
        }

        #hero h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        #hero p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
        }

        #hero .btn {
            background-color: white;
            color: var(--primary-color);
            padding: 0.75rem 1.5rem;
            border-radius: 5px;
            transition: transform 0.3s;
        }

        #hero .btn:hover {
            transform: scale(1.05);
        }

        /* Sections */
        section {
            padding: 4rem 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        section h2 {
            font-size: 2.5rem;
            margin-bottom: 2rem;
            text-align: center;
        }

        /* About Me Section */
        #about {
            display: flex;
            align-items: center;
            gap: 2rem;
            background-color: var(--secondary-color);
        }

        #about img {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            object-fit: cover;
        }

        #about .content {
            flex: 1;
        }

        /* Project Section */
        #projects {
            background-color: var(--bg-color);
        }

        .project-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .project-card {
            background-color: var(--secondary-color);
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: var(--shadow);
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .project-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }

        .project-card h3 {
            margin-bottom: 1rem;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            nav ul {
                display: none;
                flex-direction: column;
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                background-color: var(--bg-color);
                padding: 1rem;
                box-shadow: var(--shadow);
            }

            nav ul.active {
                display: flex;
            }

            .hamburger {
                display: flex;
            }

            #hero h1 {
                font-size: 2rem;
            }

            #about {
                flex-direction: column;
                text-align: center;
            }

            section {
                padding: 2rem 1rem;
            }
        }
    </style>
</head>
<body>
    <!-- Navigation Bar -->
    <nav>
        <div class="logo">My Portfolio</div>
        <ul id="nav-menu">
            <li><a href="#hero">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#projects">Projects</a></li>
        </ul>
        <div class="hamburger" id="hamburger">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section id="hero">
        <h1>Welcome to My Portfolio</h1>
        <p>I'm a [Your Profession, e.g., Web Developer] passionate about creating amazing digital experiences.</p>
        <a href="#about" class="btn">Learn More</a>
    </section>

    <!-- About Me Section -->
    <section id="about">
        <img src="https://via.placeholder.com/200" alt="Profile Picture">
        <div class="content">
            <h2>About Me</h2>
            <p>Hello! I'm [Your Name], a [brief description, e.g., creative web developer] with [X years] of experience in [your field]. I love building clean, modern websites that solve real problems. When I'm not coding, you can find me [hobby, e.g., hiking or reading].</p>
        </div>
    </section>

    <!-- Project Section -->
    <section id="projects">
        <h2>My Projects</h2>
        <div class="project-grid">
            <div class="project-card">
                <h3>Project 1</h3>
                <p>A responsive e-commerce site built with HTML, CSS, and JavaScript. Features include product listings and a shopping cart.</p>
                <a href="#">View Project</a>
            </div>
            <div class="project-card">
                <h3>Project 2</h3>
                <p>A mobile app for task management, developed using React Native. Includes user authentication and real-time updates.</p>
                <a href="#">View Project</a>
            </div>
            <div class="project-card">
                <h3>Project 3</h3>
                <p>A data visualization dashboard using D3.js, pulling data from APIs to display interactive charts.</p>
                <a href="#">View Project</a>
            </div>
        </div>
    </section>

    <script>
        // JavaScript for Hamburger Menu Toggle
        const hamburger = document.getElementById('hamburger');
        const navMenu = document.getElementById('nav-menu');

        hamburger.addEventListener('click', () => {
            navMenu.classList.toggle('active');
        });

        // Smooth Scrolling for Navigation Links
        document.querySelectorAll('nav a').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                target.scrollIntoView({ behavior: 'smooth' });
                navMenu.classList.remove('active'); // Close menu on mobile after click
            });
        });
    </script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
8KB
Transfer Size
8KB
Content Size
73.0ms
Dom Content Loaded
176.0ms
First Paint
260.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