Closed iurygdeoliveira closed 1 year ago
body{
margin: 50px;
background-color: rgb(94, 66, 166);
font-family: Arial, Helvetica, sans-serif;
color: white;
}
.container{
border-radius: 20px;
border: 2px solid #AA88FF;
background-color: #AA88FF;
padding: 60px;
}
.box-1{
border-radius: 20px;
border: 3px solid rgb(52, 37, 90);
color:white;
margin: 10px;
padding: 60px;
padding-left: 60px;
margin-bottom: 20px;
}
.box-2{
border-radius: 20px;
border: 3px solid rgb(52, 37, 90);
color:white;
margin: 10px;
padding: 60px;
padding-left: 0px;
padding-right: 0px;
margin-bottom: 20px;
}
.box-3{
border-radius: 20px;
border: 3px solid rgb(52, 37, 90);
color:white;
margin: 10px;
padding: 60px;
padding-top: 10px;
padding-left: 15px;
padding-bottom: 60px;
padding-right: 10px;
margin-bottom: 20px;
}
.box-4{
border-radius: 20px;
border: 3px solid rgb(52, 37, 90);
color:white;
margin: 10px;
padding: 20px;
padding-left: 50px;
padding-right: 10px;
margin-bottom: 20px;
}
.box-5{
border-radius: 20px;
border: 3px solid rgb(52, 37, 90);
color: white;
margin: 10px;
padding: 10px;
padding-left: 20px;
padding-right: 50px;
padding-top: 20px;
padding-bottom: 20px;
}
RESULTADO OBTIDO: Document.pdf
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: 90%;
margin: 10px;
border:2px solid #32254F;
text-align: center;
border-radius: 15px;
}
.box-1{
margin-top: 80px;
}
.box-5{
margin-bottom: 80px;
}
.box p{
color: #f9f9f9;
font-size: 18px;
font-weight: 300;
padding: 10px;
text-align: left;
}
.box-1 p{
padding: 40px;
}
.box-2 p{
padding: 40px 0px;
}
.box-3 p{
padding: 30px 20px 60px 30px;
}
.box-4 p{
padding: 30px 20px 30px 70px;
}
.box-5 p{
padding: 30px 70px 30px 20px;
}
: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: 70px;
}
.box {
border: 2px solid var(--border);
border-radius: 15px;
font-weight: 400;
font-size: 14px;
}
.box p{
color: white;
}
.box-1{
padding: 60px 60px;
margin-bottom: 20px;
}
.box-2 {
padding: 60px 0px;
margin-bottom: 20px;
}
.box-3{
padding: 20px 20px 80px 20px;
margin-bottom: 20px;
}
.box-4{
padding: 20px 60px;
margin-bottom: 20px;
}
.box-5{
padding: 20px 20px;
}
Lucas e Muriel EQUIPE: AS NEGRINHAS lucasemuriel.pdf
: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: 70px; }
.box { border: 2px solid var(--border); border-radius: 15px; font-weight: 400; font-size: 14px; }
.box p{ color: white; }
.box-1{ padding: 60px 60px; margin-bottom: 20px; }
.box-2 { padding: 60px 0px; margin-bottom: 20px; }
.box-3{ padding: 20px 20px 80px 20px; margin-bottom: 20px; }
.box-4{ padding: 20px 60px; margin-bottom: 20px; }
.box-5{ padding: 20px 20px; }
Equipe ThreeCoders
body{ margin: 50px; background-color: rgb(94, 66, 166); font-family: Arial, Helvetica, sans-serif; color: white; } .container{ border-radius: 20px; border: 2px solid #AA88FF; background-color: #AA88FF; padding: 60px; } .box-1{ border-radius: 20px; border: 3px solid rgb(52, 37, 90); color:white; margin: 10px; padding: 60px; padding-left: 60px; margin-bottom: 20px; } .box-2{ border-radius: 20px; border: 3px solid rgb(52, 37, 90); color:white; margin: 10px; padding: 60px; padding-left: 0px; padding-right: 0px; margin-bottom: 20px; } .box-3{ border-radius: 20px; border: 3px solid rgb(52, 37, 90); color:white; margin: 10px; padding: 60px; padding-top: 10px; padding-left: 15px; padding-bottom: 60px; padding-right: 10px; margin-bottom: 20px; } .box-4{ border-radius: 20px; border: 3px solid rgb(52, 37, 90); color:white; margin: 10px; padding: 20px; padding-left: 50px; padding-right: 10px; margin-bottom: 20px; } .box-5{ border-radius: 20px; border: 3px solid rgb(52, 37, 90); color: white; margin: 10px; padding: 10px; padding-left: 20px; padding-right: 50px; padding-top: 20px; padding-bottom: 20px; }
A resposta está correta, a equipe ganhou a pontuação
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.
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;".