<!DOCTYPE html>
<html id="htmlI" 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">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="icon" type="image/png" href="./img/comp.png"/>

    <title> Comp </title>

</head>
<body id="body">

    <header id="header1">
        <a class="btn" href="/lista-campeoes"> Lista de campeões </a></button> 
        <h1> <img src="./img/comp2.png" width="190" height="190" class="imgr"></h1>
        <a class="btn" href="/cadastro"> Cadastrar campeão </a></button> 
    </header>
    
    <article id="article">
        <p id="p">
            Bem vindo a Comp!
        </p>
    
        <p id="p1">
            Aqui se encontram os campeões de League of Legends. Todos aqui foram convocados e cada um deles tem seu próprio motivo para querer participar e ganhar o jogo. E você, invocador, poderá convocar alguém também. Cadastre seu campeão e veja ele na lista junto aos demais competidores. Boa sorte!
    
        </p>
    </article>

    <article id="article1">

        <div id="div" class="div1">
            <a href="#" class="image">
                <img src="/img/lux.png" class="img" id="lux">
                <span class="lk" class="linha "> Luxanna </span>
            </a>

            <a href="#" class="image">
                <img id="zed" src="/img/zed.jpg" class="img">
                <span class="za" class="linha "> Zed </span>
            </a> 
        </div> 


        <div class="div1" id="div1">
            <a class="image" href="#">
                <img id="kat" src="/img/katarina.jpg" class="img"/>
                <span class="lk" class="linha "> Katarina </span>    
            </a>    

            <a href="#" class="image">
                <img id="ashe" src="/img/ashe.jpg" class="img">
                <span class="za" class="linha "> Ashe </span>
            </a>
        </div>
    </article>

    <div id="div2">
        <a href="#" class="image">
            <img src="/img/karma.jpg" id="karmai">
            <span class="za" id="k" class="linha "> Karma </span>
        </a>
    </div>

    <footer href="/QuemSomos" >
        <h1 id="h1"> Quem Somos </h1>
        
        <div class="fig">
            <figure>
                <img id="f" class="img1" width="150" height="150" src="/img/a.png"> </img>
                <p class="figc" id="t"> Fernanda Cipriano </p> 
                <a class="gh" href="https://github.com/FernandaCSilva49">
                    <img id="h" src="/img/github.png" width="50" height="50"> 
                </a> 
            </figure>

            <figure>
                <img id="e" class="img1" width="150" height="150" src="/img/a.png"></img>
                <p class="figc" id="t1"> Eduardo Cordeiro</p>
                <a class="gh" href="https://github.com/agez0s">
                    <img id="g" src="/img/github.png" width="50" height="50"/> 
                </a>
            </figure>
        </div>

    </footer>


    <script src="./js/script.js"></script>

</body>
</html>