<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1">
        <link rel="shortcut icon" href="/assets/img/IsotipoMatriz.png" type="icon">
        <title>Service Catalog | iago</title>
        <meta name="description" content="Portfolio | iago">
        <meta name="author" content="Eduardo Iago">
        <meta name="copyright" content="All rights reserved,2024. Iago">
        <meta name="keywords" content="Iago, designer, developer, programmer">
        <meta property="og:type" content="website">
        <meta property="og:url" content="https://eiportfolio.vercel.app">
        <meta property="og:title" content="Portfolio | iago">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.5.0/remixicon.min.css" integrity="sha512-/VYneElp5u4puMaIp/4ibGxlTd2MV3kuUIroR3NSQjS2h9XKQNebRQiyyoQKeiGE9mRdjSCIZf9pb7AVJ8DhCg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    </head>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@100;300;400;700;900&family=Poppins:wght@100;400;500;600;700;800;900&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: "Ubuntu", sans-serif;
            background-color: #222;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        nav{ /*// HEADER //*/
            position: fixed;
            z-index: 555;
            padding: 20px 30px;
            width: 100%;
            background: rgba(255, 255, 255, 0.1);
            border-bottom: 1px solid rgba(255,255,255,0.19);
            backdrop-filter: blur(15px);
            display: flex;
            align-items: center;
        }
        nav a{
            font-size: 14px;
            color: #e4e4e4;
            font-weight: 100;
            text-decoration: none;
            margin-left: 20px;
            transition: 0.2s ease;
        }
        nav .logo{
            font-size: 20px;
            font-weight: 900;
            color: #e4e4e4;
            margin-right: auto;
        }
        nav h1{
            color: #222;
            font-size: 30px;
        }

        /*// Text Animation //*/
        .interfaceText{
            position: relative;
            width: 100%;
            overflow: hidden;
        }
        .interfaceText .scroll{
            width: 100%;
            display: flex;
        }
        .interfaceText .scroll div{
            color: #fff;
            font-size: 4em;
            background: #222;
            white-space: nowrap;
            font-weight: 900;
            text-transform: uppercase;
            animation: animate 40s linear infinite;
            animation-delay: -40s;
        }
        .interfaceText .scroll div:nth-child(2){
            animation: animate2 40s linear infinite;
            animation-delay: -20s;
        }
        .interfaceText .scroll div span{
            -webkit-text-stroke: 2px #fff;
            color: transparent;
        }

        @keyframes animate{
            0%{
                transform: translateX(100%);
            }
            100%{
                transform: translateX(-100%);
            }
        }
        @keyframes animate2{
            0%{
                transform: translateX(0);
            }
            100%{
                transform: translateX(-200%);
            }
        }

        /*// CATALOG //*/
        .containerCatalog{
            padding: 25px;
        }
        .catalog {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }
        .service {
            position: relative;
            background: rgba(255,255,255,0.1);
            box-shadow: 0 25px 45px rgba(0,0,0,0.1);
            border: 1px solid rgba(255,255,255,0.25);
            border-right: 1px solid rgba(255,255,255,0.25);
            border-bottom: 1px solid rgba(255,255,255,0.25);
            border-radius: 10px;
            overflow: hidden;
            backdrop-filter: blur(15px);
            padding: 20px;
            overflow: hidden;
            transition: transform 0.3s ease, background-color 0.3s ease;
        }
        .service:hover {
            background-color: #e7e5e5;
            transform: scale(1.02);
        }
        .service h2 {
            font-size: 1.5rem;
            margin-bottom: 10px;
            color: #fff;
            transition: color 0.3s ease;
        }
        .service:hover h2 {
            color: #222;
        }
        .price {
            color: #fff;
            font-size: 1.7rem;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .service:hover .price{
            color: #222;
        }
        .description {
            color: #e7e5e5;
            font-size: 1rem;
            margin-bottom: 15px;
            line-height: 1.5;
        }
        .service:hover .description{
            color: black;
        }
        .overlay {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .service:hover .overlay {
            opacity: 1;
        }
        .footer { /*// FOOTER //*/
            color: #fff;
            padding: 40px 0;
            font-family: 'Arial', sans-serif;
            background: rgba(255,255,255,0.1);
            box-shadow: 0 25px 45px rgba(0,0,0,0.1);
            overflow: hidden;
            backdrop-filter: blur(15px);
        }
        .footer-container {
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
        }
        .footerLogo{
            padding: 25px;
        }
        .footer-nav {
            margin-bottom: 20px;
        } 
        .footer-nav a {
            color: #b8b8b8;
            margin: 0 15px;
            text-decoration: none;
            font-size: 16px;
        }
        .footer-nav a:hover {
            color: #fff;
        } 
        .footer-social {
            color: white;
            margin-bottom: 20px;
        } 
        .footer-social a {
            margin: 0 10px;
            color: #fff;
            font-size: 29px;
            text-decoration: none;
        }  
        .footer-copyright {
            font-size: 14px;
            margin-top: 20px;
        }
        .footer-copyright p{
            color: white;
        }

        /*// RESPONSIVE FOR MOBILE //*/
        @media screen and (max-width: 1020px){
            nav{
                display: flex;
                justify-content: space-around;
            }
            .logo{
                display: none;
            }
        }
    </style>
    <body>
        <header> <!-- // HEADER // -->
            <nav class="headernav">
                <div class="logo">
                    <a href="/index.html">
                        <img src="/assets/img//IsotipoWhite.png" alt="isotipo" height="50" width="50"/>
                    </a>
                </div>
                <h1>Services</h1>
                <div class="navigation">
                    <a href="/index.html">PORTFOLIO</a>
                </div>
            </nav>
        </header><br><br><br><br><br>
        <div class="containerCatalog"> <!-- // CATALOG // -->
            <section class="interfaceText">
                <div class="scroll text">
                    <div>
                        Graphic <span> Design </span> Graphic <span> Design </span> Graphic <span> Design </span>
                        Graphic <span> Design </span> Graphic <span> Design </span> Graphic <span> Design </span>
                    </div>
                    <div>
                        Graphic <span> Design </span> Graphic <span> Design </span> Graphic <span> Design </span>
                        Graphic <span> Design </span> Graphic <span> Design </span> Graphic <span> Design </span>
                    </div>
                </div>
            </section><br><br><br>
            <!-- // Graphic Design // -->
            <div class="catalog">
                <div class="service">
                    <h2>Visual Identity</h2>
                    <div class="price">$1.000</div>
                    <div class="description">
                        Creation of logo, isotype and imagotype + business card + fonts + palete e corporate mockups. Complete business structure.
                    </div>
                    <div class="overlay"></div>
                </div>
                <div class="service">
                    <h2>Logo</h2>
                    <div class="price">$300</div>
                    <div class="description">
                        Creation of logo, isotype or imagotype.
                    </div>
                    <div class="overlay"></div>
                </div>
                <div class="service">
                    <h2>Business Card</h2>
                    <div class="price">$65</div>
                    <div class="description">
                        Business card for print or digital.
                    </div>
                    <div class="overlay"></div>
                </div>
                <div class="service">
                    <h2>Promotional</h2>
                    <div class="price">$70</div>
                    <div class="description">
                        Posts, Ads and promotional creatives. Contact to arrange packages.
                    </div>
                    <div class="overlay"></div>
                </div>
                <div class="service">
                    <h2>Flyers</h2>
                    <div class="price">$80</div>
                    <div class="description">
                        flyers and leaflets for print and digital.
                    </div>
                    <div class="overlay"></div>
                </div>
                <div class="service">
                    <h2>Clothing Design</h2>
                    <div class="price">$150</div>
                    <div class="description">
                        Design for shirts, jackets, bags and other accessories.
                    </div>
                    <div class="overlay"></div>
                </div>
                <div class="service">
                    <h2>Menus</h2>
                    <div class="price">$100</div>
                    <div class="description">
                        menus for print and digital.
                    </div>
                    <div class="overlay"></div>
                </div>
                <div class="service">
                    <h2>Artwork</h2>
                    <div class="price">$300</div>
                    <div class="description">
                        Artwork for album covers, EPs, singles or Books + Mockups.
                    </div>
                    <div class="overlay"></div>
                </div>
                <div class="service">
                    <h2>Infographic Design</h2>
                    <div class="price">$200</div>
                    <div class="description">
                        Production of information graphic layouts.
                    </div>
                    <div class="overlay"></div>
                </div>
                <div class="service">
                    <h2>Stationery Design</h2>
                    <div class="price">$280</div>
                    <div class="description">
                        Creation of items such as letterheads, envelopes and other personalized office materials. Complete business structure.
                    </div>
                    <div class="overlay"></div>
                </div>
                <div class="service">
                    <h2>Packaging Design</h2>
                    <div class="price">$350</div>
                    <div class="description">
                        Designing packaging that protects the product and attracts consumers.
                    </div>
                    <div class="overlay"></div>
                </div>
                <div class="service">
                    <h2>Invitation Design</h2>
                    <div class="price">$200</div>
                    <div class="description">
                        Drawing up invitations for events, birthday cards or other special occasions.
                    </div>
                    <div class="overlay"></div>
                </div>
            </div><br><br><br>
            <section class="interfaceText">
                <div class="scroll text">
                    <div>
                        Web <span> Development </span> Web <span> Development </span> Web <span> Development </span>
                        Web <span> Development </span> Web <span> Development </span> Web <span> Development </span>
                    </div>
                    <div>
                        Web <span> Development </span> Web <span> Development </span> Web <span> Development </span>
                        Web <span> Development </span> Web <span> Development </span> Web <span> Development </span>
                    </div>
                </div>
            </section><br><br><br>
            <!-- // Web Development // -->
            <div class="catalog">
                <div class="service">
                    <h2>Landing Page</h2>
                    <div class="price">$1.300</div>
                    <div class="description">
                        Page designed to convert visitors into sales opportunities. One page or Landing page.
                    </div>
                    <div class="overlay"></div>
                </div>
                <div class="service">
                    <h2>Thank You Page</h2>
                    <div class="price">$280</div>
                    <div class="description">
                        Thank you page for completed sales.
                    </div>
                    <div class="overlay"></div>
                </div>
                <div class="service">
                    <h2>Blog</h2>
                    <div class="price">$1.500</div>
                    <div class="description">
                        Complete structure for a Blog.
                    </div>
                    <div class="overlay"></div>
                </div>
                <div class="service">
                    <h2>Portfolio</h2>
                    <div class="price">$1.800</div>
                    <div class="description">
                        Complete portfolio.
                    </div>
                    <div class="overlay"></div>
                </div>
                <div class="service">
                    <h2>Institutional Website</h2>
                    <div class="price">$2.000</div>
                    <div class="description">
                        Complete website for the company to communicate with its target audience.
                    </div>
                    <div class="overlay"></div>
                </div>
                <div class="service">
                    <h2>News Portal</h2>
                    <div class="price">$4.200</div>
                    <div class="description">
                        Complete structure for a news portal.
                    </div>
                    <div class="overlay"></div>
                </div>
                <div class="service">
                    <h2>E-commerce</h2>
                    <div class="price">$5.800</div>
                    <div class="description">
                        Complete structure for a e-commerce. No product limit.
                    </div>
                    <div class="overlay"></div>
                </div>
                <div class="service">
                    <h2>Login Page</h2>
                    <div class="price">$380</div>
                    <div class="description">
                        Custom page login.
                    </div>
                    <div class="overlay"></div>
                </div>
                <div class="service">
                    <h2>Page for HTTP status</h2>
                    <div class="price">$360</div>
                    <div class="description">
                        Custom pages for HTTP status code.
                    </div>
                    <div class="overlay"></div>
                </div>
                <div class="service">
                    <h2>Responsive Design</h2>
                    <div class="price">$400</div>
                    <div class="description">
                        Website responsiveness to adapt to different screen sizes, ensuring a good experience on mobile devices.
                    </div>
                    <div class="overlay"></div>
                </div>
                <div class="service">
                    <h2>App Design</h2>
                    <div class="price">$3.000</div>
                    <div class="description">
                        UI/UX design. Designing interfaces for mobile and desktop applications, focusing on the user experience. complete application.
                    </div>
                    <div class="overlay"></div>
                </div>
                <div class="service">
                    <h2>Web Maintenance and Support</h2>
                    <div class="price">$700</div>
                    <div class="description">
                        Update services, bug fixes and technical support to ensure the continued operation of the site.
                    </div>
                    <div class="overlay"></div>
                </div>
            </div>
        </div><br><br>
        <footer class="footer"> <!-- // FOOTER // -->
            <div class="footer-container">
                <div class="footerLogo">
                    <a href="/index.html">
                        <img src="/assets/img//IsotipoWhite.png" alt="isotipo" height="80" width="80"/>
                    </a>
                </div>
                <div class="footer-social"> 
                    <a href="https://www.linkedin.com/in/eduardo-iago/"><i class="ri-linkedin-fill"></i></a>
                    <a href="https://www.github.com/Eduardoiago"><i class="ri-github-fill"></i></a>
                    <a href="https://www.behance.net/Eduardoiago"><i class="ri-behance-fill"></i></a>
                    <a href="https://www.instagram.com/iag.x/"><i class="ri-instagram-line"></i></a>
                    <a href="https://wa.me/558182029869"><i class="ri-whatsapp-line"></i></a>
                    <a href="https://www.youtube.com/@eideveloper"><i class="ri-youtube-fill"></i></a>
                </div>
                <div class="footer-nav">
                    <a href="/index.html"><strong>Portfolio</strong></a>
                    <a href="/index.html#projects"><strong>Projects</strong></a>
                    <a href="/index.html#contact"><strong>Contact</strong></a>
                </div>
                <br>
                <div class="footer-copyright">
                    <p>&copy; 2024 | Eduardo Iago. All rights reserved.</p>
                </div>
            </div>
        </footer>
        <script src="#"></script>
    </body>
</html>
