Scribd
Upload
11 views5 pages

!DOCTYPE HTML

The document is an HTML template for a website titled 'Gamics', featuring a header with navigation links, a personal registration form, and a footer with contact information and social media links. It includes sections for a countdown to a Black Friday offer, a search box, and various product categories. The footer also contains a newsletter sign-up form and copyright information.

Uploaded by

gabriel martins
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
11 views5 pages

!DOCTYPE HTML

The document is an HTML template for a website titled 'Gamics', featuring a header with navigation links, a personal registration form, and a footer with contact information and social media links. It includes sections for a countdown to a Black Friday offer, a search box, and various product categories. The footer also contains a newsletter sign-up form and copyright information.

Uploaded by

gabriel martins
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>prova A.2</title>

<!--favicon-->
<link rel="shortcut icon" href="assets/images/favicon.png" type="image/svg+xml">

<!--custom css link-->


<link rel="stylesheet" href="./assets/css/style.css">

<!--google font link-->


<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=Oxanium:wght@600;700;800&family=Poppins:wght@400;500;600;700;800;900&display
=swap"
rel="stylesheet">

<!--preload images-->
</head>
<body id="top">

<!--#HEADER-->
<header class="header">
<div class="header-top">
<div class="container">
<div class="countdown-text">
Exclusive Black Friday ! Offer <span class="span skewBg">10</span> Days
</div>
<div class="social-wrapper">
<p class="social-title">Follow us on :</p>
<ul class="social-list">
<li>
<a href="https://www.facebook.com/seu-perfil" class="social-link"
target="_blank">
<ion-icon name="logo-facebook"></ion-icon>
</a>
</li>
<li>
<a href="https://twitter.com/seu-perfil" class="social-link"
target="_blank">
<ion-icon name="logo-twitter"></ion-icon>
</a>
</li>
<li>
<a href="https://www.pinterest.com/seu-perfil" class="social-link"
target="_blank">
<ion-icon name="logo-pinterest"></ion-icon>
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/seu-perfil" class="social-link"
target="_blank">
<ion-icon name="logo-linkedin"></ion-icon>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="header-bottom skewBg" data-header>
<div class="container">
<a href="#" class="logo">Gamics</a>
<nav class="navbar" data-navbar>
<ul class="navbar-list">
<li class="navbar-item">
<a href="#home" class="navbar-link skewBg" data-nav-link>Home</a>
</li>
<li class="navbar-item">
<a href="#live" class="navbar-link skewBg" data-nav-link>Live</a>
</li>
<li class="navbar-item">
<a href="#features" class="navbar-link skewBg" data-nav-
link>Features</a>
</li>
<li class="navbar-item">
<a href="#shop" class="navbar-link skewBg" data-nav-link>Shop</a>
</li>
<li class="navbar-item">
<a href="#blog" class="navbar-link skewBg" data-nav-link>Blog</a>
</li>
<li class="navbar-item">
<a href="contact.html" class="navbar-link skewBg" data-nav-link
target="_blank">Contact</a>
</li>
</ul>
</nav>
<div class="header-actions">
<button class="cart-btn" aria-label="cart">
<ion-icon name="cart"></ion-icon>
<span class="cart-badge">0</span>
</button>
<button class="search-btn" aria-label="open search" data-search-toggler>
<ion-icon name="search-outline"></ion-icon>
</button>
<button class="nav-toggle-btn" aria-label="toggle menu" data-nav-toggler>
<ion-icon name="menu-outline" class="menu"></ion-icon>
<ion-icon name="close-outline" class="close"></ion-icon>
</button>
</div>
</div>
</div>
</header>

<!--#SEARCH BOX-->
<div class="search-container" data-search-box>
<div class="input-wrapper">
<input type="search" name="search" aria-label="search" placeholder="Search
here..." class="search-field">
<button class="search-submit" aria-label="submit search" data-search-toggler>
<ion-icon name="search-outline"></ion-icon>
</button>
<button class="search-close" aria-label="close search" data-search-
toggler></button>
</div>
</div>

<div class="form-wrapper">
<h1>Registro Pessoal</h1>
<form action="#" method="POST" class="form-container">
<label for="input-nome">Qual é o seu nome?</label>
<input type="text" id="input-nome" name="nome" required>

<label for="select-sexualidade">Como você se identifica


sexualmente?</label>
<select id="select-sexualidade" name="sexualidade" required>
<option value="" disabled selected>Escolha uma opção</option>
<option value="heterossexual">Heterossexual</option>
<option value="homossexual">Homossexual</option>
<option value="bissexual">Bissexual</option>
<option value="outro">Outro</option>
</select>

<label for="select-pronome">Qual é o seu pronome preferido?</label>


<select id="select-pronome" name="pronome" required>
<option value="" disabled selected>Escolha seu pronome</option>
<option value="ele">Ele</option>
<option value="ela">Ela</option>
<option value="elu">Elu</option>
<option value="outro">Outro</option>
</select>

<label for="input-email">Qual é o seu e-mail?</label>


<input type="email" id="input-email" name="email" required>

<label for="select-genero">Como você se identifica em termos de


gênero?</label>
<select id="select-genero" name="genero" required>
<option value="" disabled selected>Escolha seu gênero</option>
<option value="masculino">Masculino</option>
<option value="feminino">Feminino</option>
<option value="não-binario">Não-binário</option>
<option value="outro">Outro</option>
</select>

<label for="input-idade">Quantos anos você tem?</label>


<input type="number" id="input-idade" name="idade" required>

<button type="submit">Enviar Registro</button>


</form>
</div>

<!--#FOOTER-->
<footer class="footer">
<div class="footer-top">
<div class="container">
<div class="footer-brand">
<a href="#" class="logo">Gamics</a>
<p class="footer-text">
Gamics marketplace the relase etras thats sheets continig passag.
</p>
<ul class="contact-list">
<li class="contact-item">
<div class="contact-icon">
<ion-icon name="location"></ion-icon>
</div>
<address class="item-text">
Address : PO Box W75 Street lan West new queens
</address>
</li>
<li class="contact-item">
<div class="contact-icon">
<ion-icon name="headset"></ion-icon>
</div>
<a href="tel:+55 24 98862-3227" class="item-text">Phone : +55 24
98862-3227</a>
</li>
<li class="contact-item">
<div class="contact-icon">
<ion-icon name="mail-open"></ion-icon>
</div>
<a href="mailto:[email protected]" class="item-text">Email :
[email protected]</a>
</li>
</ul>
</div>
<ul class="footer-list">
<li><p class="footer-list-title">Products</p></li>
<li><a href="#" class="footer-link">Graphics (26)</a></li>
<li><a href="#" class="footer-link">Backgrounds (11)</a></li>
<li><a href="#" class="footer-link">Fonts (9)</a></li>
<li><a href="#" class="footer-link">Music (3)</a></li>
<li><a href="#" class="footer-link">Photography (3)</a></li>
</ul>
<ul class="footer-list">
<li><p class="footer-list-title">Need Help?</p></li>
<li><a href="#" class="footer-link">Terms & Conditions</a></li>
<li><a href="#" class="footer-link">Privacy Policy</a></li>
<li><a href="#" class="footer-link">Refund Policy</a></li>
<li><a href="#" class="footer-link">Affiliate</a></li>
<li><a href="#" class="footer-link">Use Cases</a></li>
</ul>
<div class="footer-wrapper">
<div class="social-wrapper">
<p class="footer-list-title">Follow Us</p>
<ul class="social-list">
<li>
<a href="https://www.facebook.com/seu-perfil" class="social-link"
style="background-color: #3b5998" target="_blank">
<ion-icon name="logo-facebook"></ion-icon>
</a>
</li>
<li>
<a href="https://twitter.com/seu-perfil" class="social-link"
style="background-color: #55acee" target="_blank">
<ion-icon name="logo-twitter"></ion-icon>
</a>
</li>
<li>
<a href="https://www.pinterest.com/seu-perfil" class="social-link"
style="background-color: #d71e18" target="_blank">
<ion-icon name="logo-pinterest"></ion-icon>
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/seu-perfil" class="social-
link" style="background-color: #1565c0" target="_blank">
<ion-icon name="logo-linkedin"></ion-icon>
</a>
</li>
</ul>
</div>
<div class="footer-newsletter">
<p class="footer-list-title">Newsletter Sign Up</p>
<form action="" class="footer-newsletter">
<input type="email" name="email_address" aria-label="email"
placeholder="Enter your email" required
class="email-field">
<button type="submit" class="footer-btn" aria-label="submit">
<ion-icon name="rocket"></ion-icon>
</button>
</form>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<p class="copyright">
&copy; 2022 Gamics. All Right Reserved by <a href="#" class="copyright-
link">codewithsadee</a>
</p>
<img src="./assets/images/footer-bottom-img.png" width="340" height="21"
loading="lazy" alt=""
class="footer-bottom-img">
</div>
</div>
</footer>

<!--#BACK TO TOP-->
<a href="#top" class="back-top-btn" aria-label="back to top" data-back-top-btn>
<ion-icon name="caret-up"></ion-icon>
</a>

<!--custom js link-->
<script src="./assets/js/script.js" defer></script>

<!--ionicon link-->
<script type="module"
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>

You might also like