# snippets

title: html landing page
language: html
author: Guilherme Montenegro
created_at: 2026-03-27 22:34:25
code:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unforged...</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Open+Sans:ital,wght@0,400;0,700;1,400&display=swap" 
rel="stylesheet">
<link rel="stylesheet" href="./assets/css/variables.css">
<link rel="stylesheet" href="./assets/css/class.css">
<link rel="stylesheet" href="./assets/css/elements.css">
<link rel="stylesheet" href="./assets/css/menu.css">
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
    <input type="checkbox" aria-label="Close menu" role="button" id="close-menu" class="close-menu">
    <label for="close-menu" title="close menu" class="close-menu-label"></label>
    <aside class="menu white-bg">
        <div class="main-content menu-content">

            <h1>
                <a onclick="getElementById('close-menu').checked = false;" href="#home">Logo</a>
            </h1>

            <nav>
                <ul onclick="getElementById('close-menu').checked = false;">
                    <li><a href="#intro">about me</a></li>
                    <li><a href="#tec-section">technologies</a></li>
                    <li><a href="#templates">hobies</a></li>
                    <li><a href="#contact">contact</a></li>
                </ul>
            </nav>

        </div>
    </aside>
    <div class="menu-spacing"></div>

    <section id="home" class="intro main-bg section">
        <div class="main-content intro-content">
            <div class="intro-text-content">
                <h2>An Front-end Begginer begin...</h2>
                <p>That´s the main <em>landing page</em> created in my HTML5 & CSS course. I try to modified enought to looks personal but without the chance to lose myself on the process. Hope it´s not that bad.</p>
            </div>
            <div class="intro-img">
                <img src="./assets/img/javascript.svg" alt="Javascript, Css and HTML logo with person charanters">
            </div>
        </div>
    </section>
    
    <section id="intro" class="white-bg section">
        <div class="main-content subject-content">
            <h2>About me</h2>
            <p>I've been passionate about technology for as long as I can remember. I worked for 26 years with remote service (Logmein, VNC, Anydesk, Teamviewer, RDP), computer maintenance, sales, customer service and managing technical service teams. I always wanted to dedicate myself completely to programming, which I used to do as a hobby. Now I'm addicted to programming and studying..</p>
            <h6>What i´ve been studying so far</h6>

            <ul class="ordered-menu">
                <li>Basic HTML5 and CSS</li>
                <li>Introduction to ECMA6(JavaScript)</li>
                <li>OO Program</li>
                <li>JS Assyncronous - Promise, Fectch, Async/Await</li>
                <li>TypeScript Basics, Generics, Jest</li>
                <li>React.JS.</li>
            </ul>

            <br>
            <p>Still a lot to learn and im very excited about it.</p>
        </div>


    </section>
    <section id="tec-section" class="tec-section main-bg section">
        <div class="main-content tec-section-content">
            <h2 class="tec-main-heading">The Technologies</h2>
            <p class="tec-description">A brief description</p>

            <div class="technology">
                <article>
                    <h3>HTML5 & CSS</h3>
                    <p>Markup language and his "make-up" tool (not nice, I known). CSS is a very powerfool adition and should not be take lightly!</p>
                </article>
                <article>
                    <h3>JS + TS + React</h3>
                    <p>The core languages I must learn and marter to become a better Dev!</p>
                </article>
                <article>
                    <h3>Pipe ad Live</h3>
                    <p>Well, thats a text for another ocasion!</p>
                </article>
            </div>
        </div>
    </section>

<!-- https://source.unsplash.com/random/360x360li -->
    <section id="templates" class="white-bg section">
        <div class="main-content tec">
            <h2 class="tec-main-heading">My Hobbies</h2>
            <p class="tec-description">What I'm passionate about</p>
            
            <div class="technology">
                <div class="hobbies-img">My Family
                    <img src="./assets/img/family.png" alt="Picture of a family in the front garden" />
                </div>
                <div class="hobbies-img">To Code
                    <img src="./assets/img/to_code.png" alt="Random Image from Unsplash.comfortable" />
                </div>
                <div class="hobbies-img">Take Nightsky Photos
                    <img src="./assets/img/nightsky.jpg" alt="Picture of night sky flooded with starts." />
                </div>
                <div class="hobbies-img">Learn to play Guitar
                    <img src="./assets/img/guitar.jpg" alt="Eletric guitar" />
                </div>
                <div class="hobbies-img">Try and learn Bonsai Art
                    <img src="./assets/img/bonsai_art.png" alt="Random Image from Unsplash.comfortable" />
                </div>
                <div class="hobbies-img"> Lear how to Draw
                    <img src="./assets/img/learn_draw.png" alt="Random Image from Unsplash.comfortable" />
                </div>
            </div>
        </div>
    </section>
    <section id="contact" class="intro main-bg section">
        <div class="main-content intro-content">
            <div class="intro-text-content">
                <h2>Contact me</h2>
                <p>By any chance or who know's you want to contact me, do it!</p>
            </div>
            <div class="intro-img">
                <img src="./assets/img/contact.svg" alt="Contact image with simbols and person charanters">
            </div>
            <div class="contact-form">
                <fieldset class="form-grid">
                    <legend>Contact  me</legend>

                    <div class="form-group">
                        <label for="first-name"></label>
                        <input type="text" name="first-name" id="first-name" placeholder="First Name">
                    </div>
                    <div class="form-group">
                        <label for="last-name"></label>
                        <input type="text" name="last-name" id="last-name" placeholder="Last Name">
                    </div>
                    <div class="form-group">
                        <label for="mail"></label>
                        <input type="text" name="mail" id="mail" placeholder="e-Mail">
                    </div>
                    <div class="form-group full-width">
                        <label for="message"></label>
                        <textarea name="message" id="message" cols="30" rows="10" placeholder="Send your smoke signals"></textarea>
                    </div>
                    <div class="form-group full-width">
                        <button type="submit">Send me!</button>
                        <button type="reset">Trash it!</button>
                    </div>
                </fieldset>
            </div>
        </div>
    </section>

    <footer id="footer" class="white-bg footer">
        <p><a rel="nofollow" target="_blank" href="https://beacons.ai/ricardroberg">Feito com <span class="heart">❤</span> por Ricard Roberg</a></p>
    </footer>
    <a class="back-to-top" href="#home">➤</a>
</body>
</html>


