1

estoy haciendo una pagina web como practica, ya una parte pero quiero continuar con las siguientes partes pero no comprendo porque la proxima sección se me posiciona sobre la foto en vez seguir abajo para poder continuar maquetando, adjunto una foto como tendría que seguir.

*{
  margin: 0px;
  padding: 0px;
  
}

body{
  width: 1150px;
  margin: auto;
  font-family: "Montserrat", sans-serif;
}
/*Encabezado*/
header{
  display: flex;
  justify-content: space-between;
  padding: 20px;
  border: 1px solid #000;
}

/*Logo Principal*/
.logo{
 padding: 0 75px;
}

nav{
  padding: 0 75px;
}

nav a{
  text-decoration: none;
  padding: 0 15px;
  font-size: 15px;
  font-weight: bold;
}


.black{
  color: #2A3037;
  
}

.opacity{
  color: #CBD0D3;
}

/*Imagen de portada principal*/
.principal-cover img{
  position: absolute;
  width: 1150px;
  height: 600px;
  z-index: 1;
}


/*Icono texto america del sur*/

.logo-map img{
  position: absolute;
  width: 20px;
  height: 30px;
  z-index: 2;
  margin-top: 200px;
  margin-left: 120px;

}



/*Texto America del Sur*/
.text-image{
  position: absolute;
  z-index: 2;
  color: white;
  text-align: center;
  margin-top: 200px;
  margin-left: 160px;
  font-size: 40px;
}

/*Texto debajo del h1 america del sur*/
.subtitle{
  position: absolute;
  z-index: 2;
  color: white;
  margin-top: 270px;
  margin-left: 120px;
  border-top: 2px solid #fff;
  padding-top: 20px;
  font-weight: bold;
  width:420px;
}

/*Descripción america del sur*/
.subtitle-description{
  position: absolute;
  z-index: 2;
  color: white;
  margin-top: 330px;
  margin-left: 120px;
  font-size: 12px;
  font-weight: bold;
}


/*Recuadro con información del destino*/
.rectangle-info{
  position: absolute;
  z-index: 2;
  margin-top: 400px;
  margin-left: 800px;
  background-color: #2A3037;
  height: 140px;
  width: 220px;
  opacity: 0.6;
  border: 2px dashed #fff;
}
/*Logo recuadro con información del destino*/
.logo-text .arrow-icon{
  position: absolute;
  width: 10px;
  height: 10px;
  z-index: 2;
  padding-left: 200px;
  padding-top: 23px;
}
/*icono flecha*/
.arrow-icon{
  position: absolute;
  width: 10px;
  height: 10px;
  z-index: 3;
}

.text-red{
  color:#FA6980;
  padding-top: 20px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  padding-top: 20px;
}


.text-white{
  color:#fff;
  font-weight: bold;
  padding-right: 30px;
  font-size: 13px;
  text-align: center;
  padding-top: 5px;
}

.text-description{
  color: white;
  font-size: 12px;
  text-align: center;
  padding-top: 5px;
  font-weight: bold;
}

.p-section{
  position: relative;
  z-index: 3;
}
<!DOCTYPE html>
<html>
<head>
	<title>Ejercicio Aenima</title>
	<link rel="stylesheet" href="css/styles.css">
	<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"> 
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	<header>
		<img class="logo" src="logo/logo_01.svg" alt="Logo">
		<nav class="nav-bar">
			<a class="nav-link black" href="#">HOME</a>
			<a class="nav-link opacity" href="#">TENDENCIAS</a>
			<a class="nav-link opacity" href="#">BLOG</a>	
		</nav>
	</header>
	
	<div class="principal-cover">
		<img src="img/Viajes_Hero.jpg" alt="cover">
		<div class="logo-map">
			<img src="iconos/ic_pin.svg" alt="mapa">
		</div>
		<h1 class="text-image">AMERICA DEL SUR</h1>
		<h3 class="subtitle">Lugares maravillosos por America del Sur</h3>
		<p class="subtitle-description">Estos son algunos lugares que elijen la mayoría de los turistas que<br>visitan America del Sur</p>
			<div class="rectangle-info">
				<div class="logo-text">
					<img class="arrow-icon" src="iconos/arrow.svg" alt="logo">
				</div>
				<p class="text-red">PRÓXIMA AVENTURA</p>
				<p class="text-white">Europa Meridional</p>
				<p class="text-description">Forman parte veinte países <br>ej.España,Francia,etc.</p>
			</div>
	</div>
	<div class="p-section">
		<h2>TENDENCIAS</h2>
		<div>
			<div class="tendencies">
				<img src="" alt="">
				<h5></h5>
				<p></p>
			</div>
			<div class="tendencies">
				<img src="" alt="">
				<h5></h5>
				<p></p>
			</div>
			<div class="tendencies">
				<img src="" alt="">
				<h5></h5>
				<p></p>
			</div>
		</div>
	</div>
</body>
</html>

1

1 respuesta 1

1

estuve revisando tu código y noté que no es responsivo.

En fin, una forma que se me ocurrió de solucionar tu problema fue aplicando lo siguiente:

/*Imagen de portada principal*/
.principal-cover {
  background-image: url(https://cdn.pixabay.com/photo/2016/08/04/15/46/machu-picchu-1569324_1280.jpg);
  background-repeat: no-repeat;
  height: 100vh;
  z-index: 1;
  /* height: 0; */
  background-size: cover;
  padding-top: 0%;
}

Cambié el estilo del contenedor de fondo de esa imagen con background-image, en vez de llamar el tag img. Checa la parte responsiva para que no se descuadre tanto.

Te anexo mi código para que le des una revisada.

body {
  font-family: "Montserrat", sans-serif;
}
header {
  padding-left: 60px;
  padding-right: 60px;
  padding-top: 20px;
  padding-bottom: 20px;
  border: 1px solid gray;
  display: flex;
  justify-content: space-between;
}



.container {
  padding-left: 60px;
  padding-right: 60px;
  border: 1px solid gray;
}

/*Imagen de portada principal*/
.principal-cover {
  background-image: url(https://cdn.pixabay.com/photo/2016/08/04/15/46/machu-picchu-1569324_1280.jpg);
  background-repeat: no-repeat;
  height: 100vh;
  z-index: 1;
  /* height: 0; */
  background-size: cover;
  padding-top: 0%;
}


@media (max-width: 600px) {
  .resp_img {
    display: none;
  }


}



/*Logo Principal*/

/*nav{
  padding: 0 75px;
}*/

nav a {
  text-decoration: none;
  /*padding: 0 15px;*/
  font-size: 15px;
  font-weight: bold;
}

.black {
  color: #2a3037;
}

.opacity {
  color: #cbd0d3;
}


/*Icono texto america del sur*/

.logo-map img {
  position: absolute;
  width: 4%;
  z-index: 2;
  margin-top: 200px;
}

/*Texto America del Sur*/
.text-image {
  position: absolute;
  z-index: 2;
  color: white;
  text-align: center;
  margin-top: 200px;
  margin-left: 4%;
  font-size: 40px;
  font-weight: bold;
}

/*Texto debajo del h1 america del sur*/
.subtitle {
  position: absolute;
  z-index: 2;
  color: white;
  margin-top: 270px;
  margin-left: 4%;
  border-top: 2px solid #fff;
  padding-top: 20px;
  font-weight: bold;
  width: 420px;
}

/*Descripción america del sur*/
.subtitle-description {
  position: absolute;
  z-index: 2;
  color: white;
  margin-top: 330px;
  margin-left: 4%;
  font-size: 12px;
  font-weight: bold;
}

/*Recuadro con información del destino*/
.rectangle-info {
  position: absolute;
  z-index: 2;
  top: 500px;
  /* margin-left: 800px; */
  background-color: #2a3037;
  height: 140px;
  width: 220px;
  opacity: 0.6;
  border: 2px dashed #fff;
  right: 60px;
}
/*Logo recuadro con información del destino*/
.logo-text .arrow-icon {
  position: absolute;
  width: 30px;
  height: 20px;
  z-index: 2;
  padding-left: 190px;
  padding-top: 34px;
}
/*icono flecha*/
.arrow-icon {
  position: absolute;
  width: 10px;
  height: 10px;
  z-index: 3;
}

.text-red {
  color: #fa6980;
  padding-top: 20px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  padding-top: 20px;
}

.text-white {
  color: #fff;
  font-weight: bold;
  padding-right: 30px;
  font-size: 13px;
  text-align: center;
  padding-top: 5px;
}

.text-description {
  color: white;
  font-size: 12px;
  text-align: center;
  padding-top: 5px;
  font-weight: bold;
}

.p-section {
  position: relative;
  z-index: 3;
}


@media (max-height: 600px) {
  .principal-cover{
    height: 210vh !important;
  }

}
<!DOCTYPE html>
<html>

<head>
  <title>Ejercicio Aenima</title>
  <link rel="stylesheet" href="css/styles.css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <header>
    <img width="50px" class="logo" src="https://lyra.com//static/storage/uploads/2018/10/04/5bb628c911dcdlogo_lyra_256px_rvb_blue.png" alt="Logo">
    <nav class="nav-bar">
      <a class="nav-link black" href="#">HOME</a>
      <a class="nav-link opacity" href="#">TENDENCIAS</a>
      <a class="nav-link opacity" href="#">BLOG</a>
    </nav>
  </header>
  <div class="container principal-cover">
    <div>
      <div class="logo-map">
        <img class="resp_img" width="30px" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-512.png" alt="mapa">
      </div>
      <h1 class="text-image">AMÉRICA DEL SUR</h1>
      <h3 class="subtitle">Lugares maravillosos por America del Sur</h3>
      <p class="subtitle-description">Estos son algunos lugares que elijen la mayoría de los turistas que<br>visitan America del Sur</p>
      <div class="rectangle-info">
        <div class="logo-text">
          <img class="arrow-icon" src="https://icons-for-free.com/iconfiles/png/512/arrow+right+chevron+chevronright+right+right+icon+icon-1320185732203239715.png" alt="logo">
        </div>
        <p class="text-red">PRÓXIMA AVENTURA</p>
        <p class="text-white">Europa Meridional</p>
        <p class="text-description">Forman parte veinte países <br>ej.España,Francia,etc.</p>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="p-section">
      <h2>TENDENCIAS</h2>
      <div>
        <div class="tendencies">
          <img src="" alt="">
          <h5>lol</h5>
          <p></p>
        </div>
        <div class="tendencies">
          <img src="" alt="">
          <h5></h5>
          <p></p>
        </div>
        <div class="tendencies">
          <img src="" alt="">
          <h5></h5>
          <p></p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Te recomiendo mucho que cheques la parte responsiva. Saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.