First a appreciate the help in advance, I´m new in the world of web design, and right now I´m studying to become one.
The issue is the following, I need to do a simple web page with 3 page on it. index.html, paisaje.html and retrato.html
I don´t know if I can post here, the homework, but the code are the following, and maybe that you are experience it you have an Idea.
The page need to be a 900px of container, also the title need to go to the left side, and the menu bar to the right side. Then there is one picture in the middle and has to be center it, then 2 picture side by side one in the left and one in the right has to be flexbox in a column of 2 for desktop and one for mobile devices, and here is where I cant figure out how to do this, because the picture are together and cant separate them. This project is a web responsive for desktop and mobile, and I also I´m not so clear about media queries for the devices, the min and max is confusing me. Can you please help me.
Here is the main code hmtl:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Comenzando con la Fotografia">
<meta name="author" content="Ruben De La Rosa">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://ift.tt/1k4Fk6e" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/style.css">
<title>Comenzando con la Fotografia</title>
</head>
<body>
<div class="container">
<div class="header">
<h1>Comenzando la Fotografia</h1>
<nav>
<ul class="menu">
<li><a class="active" href="index.html">INICIO</a></li>
<li><a href="paisajes.html">PAISAJES</a></li>
<li><a href="retratos.html">RETRATOS</a></li>
</ul>
</nav><br>
</div>
<div class="mother">
<img id="central" alt="centralpicture" title="Imagen Central" src="img/centralpic.jpg">
</div>
<section class="father">
<div id="secondimg" class="son">
<img alt="secondarypicture" title="Imagen 2" src="img/paisaje1.jpg">
<h2>Paisaje</h2>
</div>
<div id="thirdimg" class="son">
<img alt="thirdpicture" title="Imagen 3" src="img/retratos1.jpg">
<h2>Retratos</h2>
</div>
</section>
<footer>
<ul id="contact">
<h3>CONTACTO</h3>
<li><a class="black" href="mailto:rdelarosa042019@gmail.com">rdelarosa@gmail.com</a></li>
<li>Direccion: Calle Tercera Parque Lefvre</li>
<li>Telefono: 221-0000</li>
</ul>
<ul id="terms">
<h3>TERMINO</h3>
<p>Terminos y Condiciones.</p>
</ul>
<ul id="services">
<h3>SOCIAL</h3>
<li><a href="www.facebook.com"><img id="face" alt="facebook" title="Facebook" src="social/facebook.png"></a></li>
<li><a href="www.twitter.com"><img id="twit" alt="twitter" title="Twitter" src="social/twitter.png"></a></li>
<li><a href="www.instagram.com"><img id="insta" alt="instagram" title="Instagram" src="social/instagram.jpg"></a> </li>
</ul>
<ul id="law">
<h3>Derechos Reservados</h3>
<li>Ruben De La Rosa©</li>
<li>Año: 2017</li>
</ul>
</footer>
</div>
</body>
</html>
And this is my CSS code:
/*Cuerpo de la pagina*/
body{
background-color: #02010a;
font-family: Dancing Script;
}
/*Contenedor de la pagina*/
.container{
color: white;
width: 900px;
padding: 0px;
margin: auto;
}
/*Listas ul / li*/
li{
display: inline;
list-style-type: none;
}
li a{
text-decoration: none;
color: white;
text-align: center;
}
.active{
background-color: darkgreen;
}
/*Cabecera*/
.header{
background-color: #5b7989;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
height: 60px;
}
/*Titulo de la Pagina*/
h1{
box-shadow: 2px #02010a;
float: left;
text-align: justify;
margin: 10px 10px;
}
/*Menu de la Pagina*/
.menu{
float: right;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
overflow: hidden;
}
/*Imagen Central*/
.mother{
background-color: #82c3a6;
}
#central{
margin: auto;
padding: 0;
display: block;
}
/*Imagenes Secundarias*/
.father{
display: flex;
flex-flow: column;
background-color: #d5c75f;
overflow: hidden;
clear: both;
}
.left-picture{
float: left;
}
.right-picture{
float: right;
}
h2{
color: black;
text-decoration:underline;
}
/*Pie de pagina*/
footer{
display: flex;
flex-flow: row;
background-color: #C6d5c5;
color: black;
}
.black{
color: black;
text-decoration: none;
}
#contact{
display: flex;
flex-flow: column;
align-content: center;
}
#terms{
display: flex;
flex-flow: column;
align-content: center;
}
#services{
display: flex;
flex-flow: column;
align-content: center;
}
#face{
width: 20px;
}
#twit{
width: 20px;
}
#insta{
width: 20px;
}
#law{
display: flex;
flex-flow: column;
align-content: center;
}
/*Media Queries*/
@media screen and (min-width: 900px){
#container{
width: 100%;
}
.mother{
width: 100%;
}
}
Aucun commentaire:
Enregistrer un commentaire