iurygdeoliveira commented 1 year ago

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

Captura de tela de 2023-03-03 08-06-08

<h1>Exemplos de Altura e Largura</h1>

<p>Demonstrar a utilização de alturas e larguras</p>

<div class="container">
    <div class="box box-1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue vulputate nisl a interdum. Nam condimentum a ipsum ac iaculis. Mauris vel rutrum magna. Fusce neque tellus, imperdiet quis sollicitudin et, aliquam et eros. Duis vitae sollicitudin felis. In volutpat bibendum dolor ut pellentesque. Nulla malesuada tincidunt velit vulputate ultricies. Curabitur lacinia egestas leo eget sodales. Phasellus rutrum et urna sit amet pharetra. Mauris tincidunt sollicitudin dui, ut accumsan urna pulvinar vitae. Etiam tortor libero, sollicitudin venenatis elementum suscipit, dignissim eu nunc. Maecenas et tempor dolor. Maecenas pretium tortor non erat iaculis, at porttitor diam auctor. Nunc tincidunt, felis ac pulvinar pharetra.</p>
    </div>
    <div class="box box-2">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue vulputate nisl a interdum. Nam condimentum a ipsum ac iaculis. Mauris vel rutrum magna. Fusce neque tellus, imperdiet quis sollicitudin et, aliquam et eros. Duis vitae sollicitudin felis. In volutpat bibendum dolor ut pellentesque. Nulla malesuada tincidunt velit vulputate ultricies. Curabitur lacinia egestas leo eget sodales. Phasellus rutrum et urna sit amet pharetra. Mauris tincidunt sollicitudin dui, ut accumsan urna pulvinar vitae. Etiam tortor libero, sollicitudin venenatis elementum suscipit, dignissim eu nunc. Maecenas et tempor dolor. Maecenas pretium tortor non erat iaculis, at porttitor diam auctor. Nunc tincidunt, felis ac pulvinar pharetra.</p>
    </div>
    <div class="box box-3">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue vulputate nisl a interdum. Nam condimentum a ipsum ac iaculis. Mauris vel rutrum magna. Fusce neque tellus, imperdiet quis sollicitudin et, aliquam et eros. Duis vitae sollicitudin felis. In volutpat bibendum dolor ut pellentesque. Nulla malesuada tincidunt velit vulputate ultricies. Curabitur lacinia egestas leo eget sodales. Phasellus rutrum et urna sit amet pharetra. Mauris tincidunt sollicitudin dui, ut accumsan urna pulvinar vitae. Etiam tortor libero, sollicitudin venenatis elementum suscipit, dignissim eu nunc. Maecenas et tempor dolor. Maecenas pretium tortor non erat iaculis, at porttitor diam auctor. Nunc tincidunt, felis ac pulvinar pharetra.</p>
    </div>
    <div class="box box-4">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue vulputate nisl a interdum. Nam condimentum a ipsum ac iaculis. Mauris vel rutrum magna. Fusce neque tellus, imperdiet quis sollicitudin et, aliquam et eros. Duis vitae sollicitudin felis. In volutpat bibendum dolor ut pellentesque. Nulla malesuada tincidunt velit vulputate ultricies. Curabitur lacinia egestas leo eget sodales. Phasellus rutrum et urna sit amet pharetra. Mauris tincidunt sollicitudin dui, ut accumsan urna pulvinar vitae. Etiam tortor libero, sollicitudin venenatis elementum suscipit, dignissim eu nunc. Maecenas et tempor dolor. Maecenas pretium tortor non erat iaculis, at porttitor diam auctor. Nunc tincidunt, felis ac pulvinar pharetra.</p>
    </div>
    <div class="box box-5">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue vulputate nisl a interdum. Nam condimentum a ipsum ac iaculis. Mauris vel rutrum magna. Fusce neque tellus, imperdiet quis sollicitudin et, aliquam et eros. Duis vitae sollicitudin felis. In volutpat bibendum dolor ut pellentesque. Nulla malesuada tincidunt velit vulputate ultricies. Curabitur lacinia egestas leo eget sodales. Phasellus rutrum et urna sit amet pharetra. Mauris tincidunt sollicitudin dui, ut accumsan urna pulvinar vitae. Etiam tortor libero, sollicitudin venenatis elementum suscipit, dignissim eu nunc. Maecenas et tempor dolor. Maecenas pretium tortor non erat iaculis, at porttitor diam auctor. Nunc tincidunt, felis ac pulvinar pharetra.</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;".

gff001 commented 1 year ago

DUO ORCACA

RESULTADO OBTIDO: Alturas e Larguras.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: 16px;
    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: flex-start;

}

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

}
.box-1{
    margin-top: 80px;

}
.box-5{
    margin-bottom: 80px;
}
.box p{
    font-size: 10px;
    color: #f9f9f9;
    font-size: 16px;
    font-weight: 300;
    padding: 10px;
    text-align: left;
    padding: 20px 20px;
}

.box-1{
    width: 25%;
}
.box-1 p{
    height: 50vh;
}

.box-2 p{
    height: 50vh;
}

.box-3{
    width: 35%;
}

.box-4{
    width: 60%;
}
.box-5{
    width: 55%;
}

rafaelnamel0 commented 1 year ago

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: 15px;
  border: 2px solid rgb(52, 37, 90);
  width: 25%;
  padding-top: 20px;
  padding-bottom: 80px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 15px;
  margin-bottom: 20px;
}

.box-2{
  border-radius: 15px;
  border: 2px solid rgb(52, 37, 90);
  padding-top: 20px;
  padding-bottom: 200px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 12.5px;
  margin-bottom: 20px;
}

.box-3{
  border-radius: 15px;
  border: 2px solid rgb(52, 37, 90);
  width: 35%;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 14.5px;
  margin-bottom: 20px;
}

.box-4{
  border-radius: 15px;
  border: 2px solid rgb(52, 37, 90);
  width: 60%;
  font-size: 15px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 20px;
}

.box-5{
  border-radius: 15px;
  border: 2px solid rgb(52, 37, 90);
  width: 55%;
  font-size: 14.5px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 20px;
}

GiorgeLucas commented 1 year ago

Equipe Vikings

Resultado

_C__Users_XNull_Desktop_Programa%C3%A7%C3%A3o_Desafios%20de%20Desenvolvimento%20Web_Desafio%2010_index html (2)

CSS

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

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

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

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

.box p{
    color: white;
}

.box-1{
    width: 350px;
    height: 350px;
    margin-bottom: 20px;
}

.box-2 {
    height: 400px;
    margin-bottom: 20px;
}

.box-3{
    width: 500px;
    margin-bottom: 20px;
}

.box-4{
    width: 920px;
    margin-bottom: 20px;
}

.box-5{
    width: 840px;
}