como fazer esse main :
ficar assim : https://drive.google.com/file/d/1lODyucfLqKX8AiPPROxlbq_Dwm7WaF4O/view?usp=sharing !
Main desalinhado!
G
5 Respostas
F
Olá amigo, veja se o exemplo abaixo ajuda no seu layout:
<!-- HTML -->
<main class="main">
<section class="description">
<h2 class="title-about">about</h2>
<p class="content-about">Meu nome é Geovane, tenho 24 anos e moro na Saúde - SP.<br>Sou Desenvolvedor Web formado pela escola Alura e busco estágiio na área de desenvolvimento web.<br>Possuo conhecimento em <strong>HTML</strong>, <strong>CSS</strong>, <strong>PHP</strong> e <strong>JavaScript</strong>.</p>
</section>
</main>
/*CSS*/
.main {
display: block;
width: 90%;
margin: 0 auto;
}
.description {
font-family: Arial;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: rgba(0, 0, 0, 0.9)
}
.description .title-about::after {
content: "";
display: block;
width: 1.2em;
height: 0.1em;
margin: 0 auto;
background-color: #a20000;
}
.title-about {
font-size: 1.7em;
color: rgba(0, 0, 0, 0.8)
}
.content-about {
text-align: center;
line-height: 2em;
}
@media (min-width: 550px) {
.main {
display: block;
width: 70%;
margin: 0 auto;
}
}
@media (min-width: 750px) {
.main {
display: block;
width: 50%;
margin: 0 auto;
}
}
Para visualizar os arquivos em execução neste link.
G
não ficou legal!
C
Envia o código HTML e CSS, por favor!
G
biografia-Geovane
</head>
<body>
<header>
<div class="informacao">
Geovane Santana<br>
<div id="desenvolvedor"> desenvolvedor </div>
</div>
<h1>olá<img src="Geovane (1).png"></h1>
</header>
<main>
<section class="description">
<h2 class="title-about">about</h2>
<p class="content-about">Meu nome é Geovane, tenho 24 anos e moro na Saúde - SP.<br>Sou Desenvolvedor Web formado pela escola Alura e busco estágiio na área de desenvolvimento web.<br>Possuo conhecimento em <strong>HTML</strong>, <strong>CSS</strong>, <strong>PHP</strong> e<strong>JavaScript</strong>.</p>
</section>
</main>
<footer>
<form>
<input type=224r5 name="4r5f">
</form>
</footer>
</body>
G
body {
background-image: url(“fundo.jpeg”);
background-repeat: no-repeat;
background-size: cover;
}
.informacao {
margin: 40px 100px;
}
#desenvolvedor {
margin: 0 20px;
}
h1 {
padding: 40px 200px 80px;
font-size: 70px;
text-decoration: underline;
}
img {
position: absolute;
top: 0px;
left: 200px;
margin: 100px 0px 0px;
width: 1000px;
background-size: 100px;
}
input {
border: none;
border-bottom: solid blue;
}
.main {
display: block;
width: 90%;
margin: 0 auto;
}
.description {
font-family: Arial;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: rgba(0, 0, 0, 0.9)
}
.description .title-about::after {
content: “”;
display: block;
width: 1.2em;
height: 0.1em;
margin: 0 auto;
background-color: #a20000;
}
.title-about {
font-size: 1.7em;
color: rgba(0, 0, 0, 0.8)
}
.content-about {
text-align: center;
line-height: 2em;
}
Criado 12 de maio de 2020
Ultima resposta 23 de mai. de 2020
Respostas 5
Participantes 3