7º Desafio: Estilização de HTML utilizando CSS - Peso 1

[iurygdeoliveira]

Contact Details

iury.oliveira@ifto.edu.br

Challenge Description

Estilizar o HTML fornecido usando CSS de tal forma que o resultado seja igual ao que está na imagem.

<h1>Exemplos de Estilos em CSS</h1>

<p>Neste exemplo, deve-se aplicar estilos a seção com a classe <code>container</code> e id <code>box</code></p>

<div class="container">
    <div id="box">
        <p>Estilizar este único parágrafo.</p>
    </div>
</div>

Additional tips

Para aplicar estilos em um elemento HTML, você pode usar o seletor CSS que corresponde ao elemento (por exemplo, "p" para parágrafos), uma classe CSS (por exemplo, ".container" para a seção com a classe "container") ou um ID CSS (por exemplo, "#box" para a seção com o ID "box"). Em seguida, você pode definir as propriedades CSS para o elemento, como cor de fundo, borda, margem e preenchimento, usando a sintaxe "propriedade: valor;".

[rafaelnamel0]

Equipe ThreeCoders

body{
  margin: 50px;
  background-color: rgb(94, 66, 166);
  font-family: Arial, Helvetica, sans-serif;
  color: white;
}

.container{
  border-radius: 10px;
  border: 2px solid #AA88FF;
  background-color: #AA88FF;
  padding: 60px;
  text-align: center;
}

#box{
  border-radius: 10px;
  border: 2px solid rgb(52, 37, 90);
  color:rgb(52, 37, 90)
}

[gff001]

DUO: ORCACA

RESULTADO OBTIDO:

CSS UTILIZADO:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
*{
    margin: 0px;
    padding: 0px;
    /* font-family: 'Open Sans', sans-serif; */
    font-family: 'Roboto', sans-serif;

}

body{
    background-color:#5E42A5;
    color: #F2F2F2;
    margin: 30px ;
}

h1{
    margin: 20px 0px;
}
p{
    font-size: 14px;
    margin: 10px 0px;
    font-size: 300;
}
.container{
    width: 100%;
    height: 35vh;
    background-color: #AA88FF;
    border-radius: 15px;

    display: flex;
    justify-content: center;
    align-items: center;

}

#box {
    width: 90%;
    margin: auto;
    border:2px solid #32254F;
    text-align: center;
    border-radius: 15px;

}
#box p{
    color: #32254F;
    font-size: 18px;
    font-weight: 400;
}

[GiorgeLucas]

Equipe Vikings

Resultado

CSS

:root{
    --corPrim: rgb(94, 66, 165);
    --corSec: rgb(170, 136, 255);
}

body {
    padding: 20px 10px 10px 50px;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    background-color: var(--corPrim);
}

.container {
    background-color: var(--corSec);
    padding: 100px 0px;
    border-radius: 20px;
}   

#box p{
    font-size: 20px;
    color: #32254F;
    font-size: 18px;
    font-weight: 400;
    border: 2px solid var(--corPrim);
    border-radius: 15px;
    text-align: center;
    margin: 0px auto;
    padding: 10px 0px;
    width: 90%;
}

[iurygdeoliveira]

Equipe ThreeCoders

body{
  margin: 50px;
  background-color: rgb(94, 66, 166);
  font-family: Arial, Helvetica, sans-serif;
  color: white;
}

.container{
  border-radius: 10px;
  border: 2px solid #AA88FF;
  background-color: #AA88FF;
  padding: 60px;
  text-align: center;
}

#box{
  border-radius: 10px;
  border: 2px solid rgb(52, 37, 90);
  color:rgb(52, 37, 90)
}

Sua estilização está correta. Parabéns, ponto pra equipe !