8º Desafio: Trabalhando com Margens no 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 Margens</h1>

<p>Demonstrar a utilização de margins</p>

<div class="container">
    <div class="box box-1">
        <p>Estilizar este único parágrafo.</p>
    </div>
    <div class="box box-2">
        <p>Estilizar este único parágrafo.</p>
    </div>
    <div class="box box-3">
        <p>Estilizar este único parágrafo.</p>
    </div>
    <div class="box box-4">
        <p>Estilizar este único parágrafo.</p>
    </div>
    <div class="box box-5">
        <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-1{
  border-radius: 10px;
  border: 2px solid rgb(52, 37, 90);
  color:white;
  margin: 20px;
  margin-bottom: 50px;
  margin-right: 30px;
  margin-left: 30px;
  padding: 10px;
}

.box-2{
  border-radius: 10px;
  border: 2px solid rgb(52, 37, 90);
  color:white;
  margin-bottom: 50px;
  padding: 10px;
}

.box-3{
  border-radius: 10px;
  border: 2px solid rgb(52, 37, 90);
  color:white;
  margin-bottom: 50px;
  padding: 10px;
}

.box-4{
  border-radius: 10px;
  border: 2px solid rgb(52, 37, 90);
  color:white;
  margin-bottom: 20px;
  margin-left: 20px;
  padding: 10px;
}

.box-5{
  border-radius: 10px;
  border: 2px solid rgb(52, 37, 90);
  color:white;
  margin-right: 20px;
  padding: 10px;
}

[gff001]

DUO ORCACA

RESULTADO OBTIDO:

CSS APLICADO:

@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%;

    background-color: #AA88FF;
    border-radius: 15px;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

}

.box {
    width: 80%;

    border:2px solid #32254F;
    text-align: center;
    border-radius: 15px;

}
.box p{
    color: #f9f9f9;
    font-size: 18px;
    font-weight: 300;
    padding: 10px;
}

.box-1{
    margin: 80px auto 20px auto;
}

.box-2{
    width: 90%;
    margin: 20px auto 20px auto;
}

.box-3{
    width: 85%;
    margin: 20px auto 20px auto;
}

.box-4{
    width: 83%;
    margin: 20px 7% 20px 9%;
}
.box-5{
    width: 83%;
    margin: 0px 9% 80px 7% ;
}

[GiorgeLucas]

Equipe Vikings

Resultado

CSS

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

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

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

.box {
    border: 2px solid var(--border);
    border-radius: 15px;
    font-weight: 400;
    font-size: 14px;
}

.box p{
    color: white;
    text-align: center;
}

.box-1{
    margin: 120px 100px 50px 100px;
    padding: 15px;
}

.box-2 {
    margin: 0px 50px 50px 50px;
    padding: 15px;

}

.box-3{
    margin: 0px 75px 50px 75px;
    padding: 15px;
}

.box-4{
    margin: 0px 75px 20px 100px;
    padding: 15px;
}

.box-5{
    margin: 0px 100px 80px 75px;
    padding: 15px;

}

[muri02]

Lucas Araujo e Muriel de Faria EQUIPE AS NEGRINHAS

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

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

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

.box { border: 2px solid var(--border); border-radius: 15px; font-weight: 400; font-size: 14px; }

.box p{ color: white; text-align: center; }

.box-1{ margin: 120px 100px 50px 100px; padding: 15px; }

.box-2 { margin: 0px 50px 50px 50px; padding: 15px;

}

.box-3{ margin: 0px 75px 50px 75px; padding: 15px; }

.box-4{ margin: 0px 75px 20px 100px; padding: 15px; }

.box-5{ margin: 0px 100px 80px 75px; padding: 15px;

}

[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-1{
  border-radius: 10px;
  border: 2px solid rgb(52, 37, 90);
  color:white;
  margin: 20px;
  margin-bottom: 50px;
  margin-right: 30px;
  margin-left: 30px;
  padding: 10px;
}

.box-2{
  border-radius: 10px;
  border: 2px solid rgb(52, 37, 90);
  color:white;
  margin-bottom: 50px;
  padding: 10px;
}

.box-3{
  border-radius: 10px;
  border: 2px solid rgb(52, 37, 90);
  color:white;
  margin-bottom: 50px;
  padding: 10px;
}

.box-4{
  border-radius: 10px;
  border: 2px solid rgb(52, 37, 90);
  color:white;
  margin-bottom: 20px;
  margin-left: 20px;
  padding: 10px;
}

.box-5{
  border-radius: 10px;
  border: 2px solid rgb(52, 37, 90);
  color:white;
  margin-right: 20px;
  padding: 10px;
}

Certa resposta. A equipe ganhou a pontuação.