Help with an HTML and CSS project

Asked

Viewed 37 times

-2

I wanted to know how to put my items centered on the header they just stay down and wanted to put google maps next to my form.
I’m a beginner and I’m trying to do this project, but I’ve tried to put these elements (HOME, ABOUT ME, PORTFOLIO and TALK TO ME.) centered on the header but I can’t. the other question is that wanted to know how I put the map next to the form I have tried anyway more n da.

*{
    margin: 0;
    padding: 0 0%;
    font-family: 'Open Sans', sans-serif;
}
body{
    background-color: black;
    color: white;
}
body a{
    color: gray;
    text-decoration: none;
    transition: 4s;
}
header{
    text-transform: uppercase;
    background-color: #191970;  
}
h1{
    padding: 10px;
    margin: 0px;
}
footer{
    padding: 10px 10%;
    background-color: #191970;
    color: black;
    font-size: 18px;
    height: 80px;
}
footer .footer-left{
    float: left;
}
footer .footer-right{
    float: right;
    color: black;
}
/* Tentativa de colocar o mapa do lado do formulario */
main div .left{
    float: left;
    display: flex;
}
main div .right{
    float: right;
    display: flex;
}
main div .left .right{
    display: flex;
}
iframe{
    float: right;
    margin-bottom: 400px;
    display: flex;
}
/* Tentativa de colocar o mapa do lado do formulario */
footer .footer-right a:hover{
    color: goldenrod;
}
p{
    color: white;
}
}
body a{
    color: gray;
    text-decoration: none;
    transition: 0.4s;
}
body ul{
    list-style: none;
}
.header-navbar ul li a{
    margin: 25px;
    text-decoration: none;
    color: white;
    align-items: center;
}
nav.header-navbar{
    align-items: center;
}
}
.header{
    display: flex;
    justify-content: space-between;
    background-color: black;
    align-items: center;
}
.header-navbar ul li{
 margin: 0 1rem;

}
.header-navbar ul li a:hover{
    color: gold;
}
.header-navbar ul{
    height: 100%;
}
.flex-center{
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
}
.flex-center li a{
  
}
.prev{
   padding-left: 50%;
   cursor: pointer;
   color: white;
}
.next{
   cursor: pointer;
   color: white;
}
.model{
    width: 370px;
    padding: 10%;
    border-radius: 150px;
}
.Sobre{
   display: flex;
   justify-content: space-between;
}
.Sobre p{
    margin-top: 150px;
    margin-right: 50px;
}
.gallery-card{
    width: 30%;
    height: 400px;
    border: 1px solid white;
    margin-bottom: 20px;
}
.gallery-card-title{
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 20px;
    margin-left: 10px;
}
.gallery-card-btn{
    margin-left: 15px;
}
input[type="text"], textarea {
    width: 30%;
    padding: 15px;
    border-radius: 5px;
    border: solid 1px #666;
    font-family: 'Source Sans Pro', sans-serif;
    margin-bottom: 15px;
    margin-left: 60px;
}
.Button{
    background-color: #191970;
    padding: 15px;
    color: #fff;
    border-radius: 5px;
    border: 0;
    cursor: pointer;
    width: 150px;
    margin-bottom: 10px;
    margin-left: 60px;
}
.Button:hover{
    background-color: goldenrod;
}
main h1{
    margin-left: 60px;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>Átila Goes ::: Curriculo</title>
    <!--Icon da guia-->
    <link rel="shortcut icon" href="img/icon.png">
    <!--Link CSS-->
    <link rel="stylesheet" href="css/style.css" class="css">
    <!--Link Font Google-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700;800&display=swap" rel="stylesheet">
    <!--Link icons-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <header>
        <h1>
            ÁTILA GOES
        </h1>
        <nav class="header-navbar">
            <ul class="flex-center">
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">Sobre mim</a>
                </li>
                <li>
                    <a href="#">Portfólio</a>
                </li>
                <li>
                    <a href="#">Fale Comigo</a>
                </li>
            </ul>
        </nav>
    </header>
<!--Aqui começa o slideshow-->
<div class="slideshow-container">

<div class="mySlides fade">
  <img src="img/slide1.jpg" style="width:100%">
</div>

<div class="mySlides fade">
  <img src="img/slide2.jpg" style="width:100%">
</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
<br>

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>
    <main>
        <div class="Sobre">
            <img class="model" src="img/model.jpg" alt="Model Foto">
            <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur reiciendis repellendus ab cumque ipsum, voluptas exercitationem dolorum animi consequuntur nemo placeat, incidunt illum, molestias beatae laboriosam deleniti accusantium facilis a.
                Delectus alias aut incidunt iste exercitationem deserunt non accusamus illum sunt obcaecati corporis dolore ratione facere assumenda totam dicta esse officia magni ex in quae, inventore tempora rerum! Possimus, voluptate!
                Repudiandae placeat doloremque delectus illo odio, quos blanditiis, laborum, quibusdam veniam ipsa earum aperiam similique optio dolores vero, deleniti ratione. Illum eligendi earum, velit eius saepe a animi debitis quibusdam?
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur reiciendis repellendus ab cumque ipsum, voluptas exercitationem dolorum animi consequuntur nemo placeat, incidunt illum, molestias beatae laboriosam deleniti accusantium facilis a.
                Delectus alias aut incidunt iste exercitationem deserunt non accusamus illum sunt obcaecati corporis dolore ratione facere assumenda totam dicta esse officia magni ex in quae, inventore tempora rerum! Possimus, voluptate!
                Repudiandae placeat doloremque delectus illo odio, quos blanditiis, laborum, quibusdam veniam ipsa earum aperiam similique optio dolores vero, deleniti ratione. Illum eligendi earum, velit eius saepe a animi debitis quibusdam?
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur reiciendis repellendus ab cumque ipsum, voluptas exercitationem dolorum animi consequuntur nemo placeat, incidunt illum, molestias beatae laboriosam deleniti accusantium facilis a.
                Delectus alias aut incidunt iste exercitationem deserunt non accusamus illum sunt obcaecati corporis dolore ratione facere assumenda totam dicta esse officia magni ex in 
            </p>

        </div>
        <div class="gallery flex-center container">
        <div class="gallery-card">
            <h2 class="gallery-card-title">Projeto 1</h2>
            <a href="#" class="gallery-card-btn">Veja o Projeto</a>
        </div>
        <div class="gallery-card">
            <h2 class="gallery-card-title">Projeto 2</h2>
            <a href="#" class="gallery-card-btn">Veja o Projeto</a>
        </div>
        <div class="gallery-card">
            <h2 class="gallery-card-title">Projeto 3</h2>
            <a href="#" class="gallery-card-btn">Veja o Projeto</a>
        </div>
    </div>
    <div class="Left">
     <h1>Fale Comigo</h1>
     <p><input type="text" placeholder="Digite seu Nome:"></p>
     <p><input type="text" placeholder="Digite seu E-mail:"></p>
     <p><input type="text" placeholder="Digite seu Telefone:"></p>
     <p><input type="text" placeholder="Digite o Assunto:"></p>
     <p>
        <textarea name="" id="" cols="30" rows="10" placeholder="Digite a mensagem:"></textarea>
     </p>
     <p><input type="submit" value="ENVIAR" class="Button"></p> 
    </div>
    <!--Tentativa de colocar o mapa-->
    <div class="right">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31113.348371491746!2d-38.31123473276308!3d-12.896881431818104!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x7163e7b1029849d%3A0x540c0a0b7bc4bc39!2sPraia%20de%20Buraquinho!5e0!3m2!1spt-BR!2sbr!4v1630637451401!5m2!1spt-BR!2sbr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
    </div>
    <!--Tentativa de colocar o mapa-->
    </main>
<footer>
    <div class="footer-left">
        <p>Feito por Átila Goes &copy 2021</p>
    </div>
    <div class="footer-right">
            <a href="https://api.whatsapp.com/send?phone=5571986093628&text=Ol%C3%A1!%20J%C3%A1%20j%C3%A1%20responderemos%20a%20sua%20mensagem.">
                <i class="fab fa-whatsapp fa-2x"></i>
            </a>
            <a href="https://www.instagram.com/atila_goes/" target="_blank" >
                <i class="fab fa-instagram fa-2x"></i>
            </a>
        </div>
</footer>
<!--Inicio do script do slideshow-->
<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}
</script>
<!--Fim do script-->

</body>
</html>

html css

1 answer

-4

See the style I added to your html tags.

I recommend you read this article on element positioning, especially the absolute positioning part: https://www.w3schools.com/css/css_positioning.asp

As for your header, I recommend you add your name to the list, as I did below. Also, change your form and your map to display: inline-block can help you.

<!DOCTYPE html>
<html lang="pt-br">

<head>
<meta charset="utf-8">
<title>Átila Goes ::: Curriculo</title>
<!--Icon da guia-->
<link rel="shortcut icon" href="img/icon.png">
<!--Link CSS-->
<link rel="stylesheet" href="style.css" class="css">
<!--Link Font Google-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700;800&display=swap" rel="stylesheet">
<!--Link icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
</head>
<body>
<header>
    <nav class="header-navbar" style="height: 60px; position: relative;"> <!-- alteração -->
        <li style="float: left; list-style: none; font-size: 20px; margin: auto; position: absolute; top: 50%; transform: translate(0, -50%);"> <!-- alteração -->
            ÁTILA GOES
        </li>
        <ul class="flex-center">
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Sobre mim</a>
            </li>
            <li>
                <a href="#">Portfólio</a>
            </li>
            <li>
                <a href="#">Fale Comigo</a>
            </li>
        </ul>
    </nav>
</header>
<!--Aqui começa o slideshow-->
<div class="slideshow-container">

    <div class="mySlides fade">
        <img src="img/slide1.jpg" style="width:100%">
    </div>

    <div class="mySlides fade">
        <img src="img/slide2.jpg" style="width:100%">
    </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
<br>

<div style="text-align:center">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
</div>
<main>
    <div class="Sobre">
        <img class="model" src="img/model.jpg" alt="Model Foto">
        <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur reiciendis repellendus ab cumque ipsum, voluptas exercitationem dolorum animi consequuntur nemo placeat, incidunt illum, molestias beatae laboriosam deleniti accusantium facilis a. Delectus
            alias aut incidunt iste exercitationem deserunt non accusamus illum sunt obcaecati corporis dolore ratione facere assumenda totam dicta esse officia magni ex in quae, inventore tempora rerum! Possimus, voluptate! Repudiandae placeat doloremque
            delectus illo odio, quos blanditiis, laborum, quibusdam veniam ipsa earum aperiam similique optio dolores vero, deleniti ratione. Illum eligendi earum, velit eius saepe a animi debitis quibusdam? Lorem ipsum dolor, sit amet consectetur
            adipisicing elit. Aspernatur reiciendis repellendus ab cumque ipsum, voluptas exercitationem dolorum animi consequuntur nemo placeat, incidunt illum, molestias beatae laboriosam deleniti accusantium facilis a. Delectus alias aut incidunt
            iste exercitationem deserunt non accusamus illum sunt obcaecati corporis dolore ratione facere assumenda totam dicta esse officia magni ex in quae, inventore tempora rerum! Possimus, voluptate! Repudiandae placeat doloremque delectus illo
            odio, quos blanditiis, laborum, quibusdam veniam ipsa earum aperiam similique optio dolores vero, deleniti ratione. Illum eligendi earum, velit eius saepe a animi debitis quibusdam? Lorem ipsum dolor, sit amet consectetur adipisicing elit.
            Aspernatur reiciendis repellendus ab cumque ipsum, voluptas exercitationem dolorum animi consequuntur nemo placeat, incidunt illum, molestias beatae laboriosam deleniti accusantium facilis a. Delectus alias aut incidunt iste exercitationem
            deserunt non accusamus illum sunt obcaecati corporis dolore ratione facere assumenda totam dicta esse officia magni ex in
        </p>

    </div>
    <div class="gallery flex-center container">
        <div class="gallery-card">
            <h2 class="gallery-card-title">Projeto 1</h2>
            <a href="#" class="gallery-card-btn">Veja o Projeto</a>
        </div>
        <div class="gallery-card">
            <h2 class="gallery-card-title">Projeto 2</h2>
            <a href="#" class="gallery-card-btn">Veja o Projeto</a>
        </div>
        <div class="gallery-card">
            <h2 class="gallery-card-title">Projeto 3</h2>
            <a href="#" class="gallery-card-btn">Veja o Projeto</a>
        </div>
    </div>
    <div class="Left" style="display: inline-block;"> <!-- alteração -->
        <h1>Fale Comigo</h1>
        <p><input type="text" placeholder="Digite seu Nome:"></p>
        <p><input type="text" placeholder="Digite seu E-mail:"></p>
        <p><input type="text" placeholder="Digite seu Telefone:"></p>
        <p><input type="text" placeholder="Digite o Assunto:"></p>
        <p>
            <textarea name="" id="" cols="30" rows="10" placeholder="Digite a mensagem:"></textarea>
        </p>
        <p><input type="submit" value="ENVIAR" class="Button"></p>
    </div>
    <!--Tentativa de colocar o mapa-->
    <div class="right" style="display: inline-block;"> <!-- alteração -->
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31113.348371491746!2d-38.31123473276308!3d-12.896881431818104!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x7163e7b1029849d%3A0x540c0a0b7bc4bc39!2sPraia%20de%20Buraquinho!5e0!3m2!1spt-BR!2sbr!4v1630637451401!5m2!1spt-BR!2sbr"
            width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
    </div>
    <!--Tentativa de colocar o mapa-->
</main>
<footer>
    <div class="footer-left">
        <p>Feito por Átila Goes &copy 2021</p>
    </div>
    <div class="footer-right">
        <a href="https://api.whatsapp.com/send?phone=5571986093628&text=Ol%C3%A1!%20J%C3%A1%20j%C3%A1%20responderemos%20a%20sua%20mensagem.">
            <i class="fab fa-whatsapp fa-2x"></i>
        </a>
        <a href="https://www.instagram.com/atila_goes/" target="_blank">
            <i class="fab fa-instagram fa-2x"></i>
        </a>
    </div>
</footer>
<!--Inicio do script do slideshow-->
<script>
    var slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");
        if (n > slides.length) {
            slideIndex = 1
        }
        if (n < 1) {
            slideIndex = slides.length
        }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " active";
    }
</script>
<!--Fim do script-->

* {
margin: 0;
padding: 0 0%;
font-family: 'Open Sans', sans-serif;
}

body {
background-color: black;
color: white;
}

body a {
color: gray;
text-decoration: none;
transition: 4s;
}

header {
text-transform: uppercase;
background-color: #191970;
}

h1 {
padding: 10px;
margin: 0px;
}

footer {
padding: 10px 10%;
background-color: #191970;
color: black;
font-size: 18px;
height: 80px;
}

footer .footer-left {
float: left;
}

footer .footer-right {
float: right;
color: black;
}


/* Tentativa de colocar o mapa do lado do formulario */

main div .left {
float: left;
display: flex;
}

main div .right {
float: right;
display: flex;
}

main div .left .right {
display: flex;
}

iframe {
float: right;
/* margin-bottom: 400px;  alterado*/
display: flex;
}


/* Tentativa de colocar o mapa do lado do formulario */

footer .footer-right a:hover {
color: goldenrod;
}

p {
color: white;
}

body a {
color: gray;
text-decoration: none;
transition: 0.4s;
}

body ul {
list-style: none;
}

.header-navbar ul li a {
margin: 25px;
text-decoration: none;
color: white;
align-items: center;
}

nav.header-navbar {
align-items: center;
}

.header {
display: flex;
justify-content: space-between;
background-color: black;
align-items: center;
}

.header-navbar ul li {
margin: 0 1rem;
}

.header-navbar ul li a:hover {
color: gold;
}

.header-navbar ul {
height: 100%;
}

.flex-center {
display: flex;
align-items: center;
justify-content: center;
list-style: none;
}

.prev {
padding-left: 50%;
cursor: pointer;
color: white;
}

.next {
cursor: pointer;
color: white;
}

.model {
width: 370px;
padding: 10%;
border-radius: 150px;
}

.Sobre {
display: flex;
justify-content: space-between;
}

.Sobre p {
margin-top: 150px;
margin-right: 50px;
}

.gallery-card {
width: 30%;
height: 400px;
border: 1px solid white;
margin-bottom: 20px;
}

.gallery-card-title {
font-size: 32px;
font-weight: 600;
margin-bottom: 20px;
margin-left: 10px;
}

.gallery-card-btn {
margin-left: 15px;
}

textarea {
width: 30%;
padding: 15px;
border-radius: 5px;
border: solid 1px #666;
font-family: 'Source Sans Pro', sans-serif;
margin-bottom: 15px;
margin-left: 60px;
}

.Button {
background-color: #191970;
padding: 15px;
color: #fff;
border-radius: 5px;
border: 0;
cursor: pointer;
width: 150px;
margin-bottom: 10px;
margin-left: 60px;
}

.Button:hover {
background-color: goldenrod;
}

main h1 {
margin-left: 60px;
}

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.