[Projeto] Lojinha | HTML e CSS: cabeçalho, footer e variáveis CSS

Solucionado (ver solução)

Solucionado
(ver solução)

5
respostas

por Tairone Rocha Barros Da Silva

| 25.1k xp | 16 posts

CSS:

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Modak&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Quicksand:wght@300..700&display=swap');

*,
*::before,
*::after { box-sizing: border-box; }

* {
    margin: 0;
    padding: 0;
}

a {
    color: var(--corTextoCabecalhoRodape);
}

body {
    background-color: var(--corPrincipal);
    color:var(--corTextoCabecalhoRodape);
}

/* --> V A R I A V E I S <-- */ /* --> V A R I A V E I S <-- */

:root {
        /* cores */
    --corCabecalhoRodape: #FFDDAE;
    --corTextoCabecalhoRodape: #000;
    --corPrincipal: #D4F6FF;
    --corTextoPrincipal: rgb(121,137,169); 
    --corSecundaria: rgb(121,137,169);  
    --corTextoSecundaria: #000;

    /* fontes */

    --fonteCabecalhoRodape: "Krona One", system-ui;
    --fonteTitulo: "Modak", system-ui;
    --fonteSubTitulo: "Montserrat", system-ui;
    --fonteConteudo: "Quicksand", system-ui;
}

/* -->  G L O B A L  <-- */ /* -->  G L O B A L  <-- */

.header {
    font-family: var(--fonteCabecalhoRodape);
    padding: 2% 30% 2% 30%;
    background-color: var(--corCabecalhoRodape);
    width: 100vw;
}

.header-nav {
    display: flex;
    gap: 39px;
}

.header-link {
    text-decoration: none;
}

.main {
    display: flex;
    align-items: center;
}

.footer {
    font-family: var(--fonteCabecalhoRodape);
    background-color: var(--corCabecalhoRodape);
    width: 100vw;
    padding: 5px 20px;
}

.main-section-principal{
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-color: var(--corPrincipal);
    align-items: center;
    padding: 3%;        
}

.title {
    font-family: var(--fonteTitulo);
    font-weight: 400;
    font-size: 60px;
    color: var(--corTextoPrincipal); 
    text-shadow: -1px -1px 0 black,
                  1px -1px 0 black,
                 -1px 1px 0 black,
                  1px 1px 0 black;            
}

.description {   
    font-family: var(--fonteSubTitulo);
    font-size: 25px; 
    font-weight: 600;
    color: var(--corTextoPrincipal);
    
}

.main-section-secondary {
    display: flex;
    justify-content: center;
    align-items: baseline;
    width: 100vw;
    background-color: var(--corSecundaria);
    color:var(--corTextoSecundaria);
    padding: 50px;
    gap: 300px;   
}

/* --> P A G I N A 1, H O M E <-- */ /* --> P A G I N A 1, H O M E <-- */


#height {
    height: 350px;
    align-items: center;
}  

.description-secondary-title {
    display: flex;
    justify-content: left;
    align-items: center;
    padding-bottom: 10px;
    width: 400px;
    font-size: 25px;    
    font-family: var(--fonteSubTitulo);
    font-weight: bold;
}

.description-secondary {
    display: flex;
    justify-content: left;
    align-items: center;    
    font-family: var(--fonteConteudo);
    font-weight: 500;
    width: 400px;
    font-size: 20px;    
}

.main-section-secondary-img {
    width: 200px;  
    border: 3px;
    border-style: solid;
    border-color: #000;
}

/* --> P A G I N A 2, P R O D U T O S <-- */ /* --> P A G I N A 2, P R O D U T O S <-- */

.products {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.description-products {
    font-family: var(--fonteConteudo);
    font-weight: 600;
    color: var(--corTextoSecundaria);
}


/* --> P A G I N A 3, C O N T A T O <-- */ /* --> P A G I N A 3, C O N T A T O <-- */

.form-container {
    padding: 20px;
    border-radius: 8px;
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
}

form {
    display: flex; 
    flex-direction: column; 
}

label {
    margin-bottom: 5px; 
    font-weight: bold; 
} 

input, textarea { 
    margin-bottom: 15px; 
    padding: 10px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    font-size: 16px; 
    width: 100%; 
    box-sizing: border-box; 
} 

button { 
    padding: 10px 20px;
    background-color: #007BFF; 
    color: #fff; 
    border: none; 
    border-radius: 4px;
    cursor: pointer; 
    font-size: 16px;
}

button:hover {
    background-color: #0056b3;
}

5 respostas

por Tairone Rocha Barros Da Silva

| 25.1k xp | 16 posts

2 meses atrás

HTML - HOME

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Oficina de amigurumi</title>
    <link rel="stylesheet" href="style/style.css">
</head>
<body>

    <header>
        
        <div class="header">

            <nav class="header-nav">

                <a class="header-link" href="index.html">Home </a>|
                <a class="header-link" href="produtos.html"> Nossos Produtos </a>|
                <a class="header-link" href="Contatos.html"> Fale conosco</a>
    
            </nav> 

        </div>               

    </header>

    <main class="main">

        <section class="main-section">

            <div class="main-section-principal">

                <h1 class="title">SilvaRume</h1>

                <p class="description">Amigurumis para enfeitar e presentear.</p>

            </div>

            <div id="height" class="main-section-secondary">

                <div class="main-section-description">

                    <p class="description-secondary-title">Escolha o tipo de amigurumi que te agrada.</p>
    
                    <p class="description-secondary">Encontre o amigurumi que mais combina com você e traga um toque especial para sua coleção ou presenteie alguém com um item feito com carinho e dedicação. Cada peça é única e feita à mão, garantindo qualidade e atenção aos detalhes.</p>
    
                </div>
                
                <img class="main-section-secondary-img" src="assets/coletania.jpg"  alt="uma montagem com tres amigurumis, monkey d luffy, uma tartaruginha fofa e MegaMan X">

            </div>

        </section>

    </main>

    <footer class="footer">

        <p>Feito por Tairone Rocha</p>
        <P> Tel: (33) 9 8865 8497</P>

    </footer>
</body>
</html>

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

por Tairone Rocha Barros Da Silva

| 25.1k xp | 16 posts

2 meses atrás

html - Nossos Produtos

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Oficina de amigurumi - Produtos</title>
    <link rel="stylesheet" href="style/style.css">
</head>
<body>

    <header>
        
        <div class="header">

            <nav class="header-nav">

                <a class="header-link" href="index.html">Home </a>|
                <a class="header-link" href="produtos.html"> Nossos Produtos </a>|
                <a class="header-link" href="Contatos.html"> Fale conosco</a>
    
            </nav> 

        </div>               

    </header>

    <main class="main">

        <section class="main-section">

            <div class="main-section-principal">

                <h1 class="title">SilvaRume</h1>

                <p class="description">Amigurumis para enfeitar e presentear.</p>

            </div>

            <div class="main-section-secondary">

                <div>

                    <div class="main-section-secondary">

                       <div class="products">
                        <img class="main-section-secondary-img" src="assets/Rockmanx.jpg"  alt="MegaMan X esta soltando ">
                        <p class="description-products">MegaMan X</p>
                       </div> 

                       <div class="products">
                        <img class="main-section-secondary-img" src="assets/Baby_Yoda-fundo-cor.png"  alt="uma montagem com tres amigurumis, monkey d luffy, uma tartaruginha fofa e MegaMan X">
                        <p class="description-products">Baby Yoda</p>
                       </div>

                       <div class="products">
                        <img class="main-section-secondary-img" src="assets/stitch-fundo-cor.png"  alt="uma montagem com tres amigurumis, monkey d luffy, uma tartaruginha fofa e MegaMan X">
                        <p class="description-products">Stitch</p>
                       </div>

                    </div>
    
                    <div class="main-section-secondary">

                       <div class="products">
                        <img class="main-section-secondary-img" src="assets/Monkey_D_Luff.PNG"  alt="uma montagem com tres amigurumis, monkey d luffy, uma tartaruginha fofa e MegaMan X">
                        <p class="description-products">Monkey D. Luff</p>
                       </div> 

                       <div class="products">
                        <img class="main-section-secondary-img" src="assets/iron_man.png"  alt="uma montagem com tres amigurumis, monkey d luffy, uma tartaruginha fofa e MegaMan X">
                        <p class="description-products">Iron Man</p>
                       </div>

                       <div class="products">
                        <img class="main-section-secondary-img" src="assets/Roberta_rebeldes-removebg-preview.png"  alt="uma montagem com tres amigurumis, monkey d luffy, uma tartaruginha fofa e MegaMan X">
                        <p class="description-products">Roberta Rebeldes</p>
                       </div>
                       
                    </div>

                    <div class="main-section-secondary">

                        <div class="products">
                         <img class="main-section-secondary-img" src="assets/elefante.png"  alt="uma montagem com tres amigurumis, monkey d luffy, uma tartaruginha fofa e MegaMan X">
                         <p class="description-products">Elefante</p>
                        </div> 
 
                        <div class="products">
                         <img class="main-section-secondary-img" src="assets/Leao.png"  alt="uma montagem com tres amigurumis, monkey d luffy, uma tartaruginha fofa e MegaMan X">
                         <p class="description-products">Leão</p>
                        </div>
 
                        <div class="products">
                         <img class="main-section-secondary-img" src="assets/pinguim_rosa.png"  alt="uma montagem com tres amigurumis, monkey d luffy, uma tartaruginha fofa e MegaMan X">
                         <p class="description-products">Pinguim</p>
                        </div>
                        
                     </div>

                </div>

            </div>

        </section>

    </main>

    <footer class="footer">

        <p>Feito por Tairone Rocha</p>
        <P> Tel: (33) 9 8865 8497</P>

    </footer>
</body>
</html>

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

por Tairone Rocha Barros Da Silva

| 25.1k xp | 16 posts

2 meses atrás

HTML - CONTATOS

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Oficina de amigurumi</title>
    <link rel="stylesheet" href="style/style.css">
</head>
<body>

    <header>
        
        <div class="header">

            <nav class="header-nav">

                <a class="header-link" href="index.html">Home </a>|
                <a class="header-link" href="produtos.html"> Nossos Produtos </a>|
                <a class="header-link" href="Contatos.html"> Fale conosco</a>
    
            </nav> 

        </div>               

    </header>

    <main class="main">

        <section class="main-section">

            <div class="main-section-principal">

                <h1 class="title">SilvaRume</h1>

                <p class="description">Amigurumis para enfeitar e presentear.</p>

            </div>

            <div class="main-section-secondary">

                <div class="form-container">

                    <form action="/enviarelatorio" method="post" enctype="multipart/form-data">

                        <label for="nome">Nome:</label>
                        <input type="text" id="nome" name="nome" required>

                        <label for="email">E-mail:</label>
                        <input type="email" id="email" name="email" required>

                        <label for="relatorio">Relatório:</label>
                        <textarea id="relatorio" name="relatorio" rows="10" required></textarea>

                        <label for="arquivo">Anexar Arquivo:</label>
                        <input type="file" id="arquivo" name="arquivo"> <button type="submit">Enviar Relatório</button> 
                    
                    </form>
                </div>

            </div>

        </section>

    </main>

    <footer class="footer">

        <p>Feito por Tairone Rocha</p>
        <P> Tel: (33) 9 8865 8497</P>

    </footer>
</body>
</html>

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

solução!

por Mike de Sousa

| 770k xp | 1237 posts

Alura Scuba Team Suporte Educacional

2 meses atrás

Olá, Tairone, como vai?

Seu código está muito bem organizado! Gostei do uso das variáveis CSS e da estruturação dos elementos HTML, está claro que você está aplicando os conceitos de maneira sólida. Obrigado por compartilhar seu progresso conosco!

Continue compartilhando suas conquistas e explorando novas ideias aqui no fórum. Estamos à disposição para apoiar sua jornada.

Siga firme nos seus estudos!

Abraços :)

por Tairone Rocha Barros Da Silva

| 25.1k xp | 16 posts

2 meses atrás

Obrigado xD

Mergulhe em programação