Hi everyone!
I am starting with the career of front-end developer.
To begin to have experience I am helping a friend with a photography project. I had a problem, I want to place the logo next to the title and subtitle, I search by all means and I cannot solve it, I leave the html and css code.
I hope you can contribute in a better way. I thank everyone for the help.
Gonzalo Sicca
<!DOCTYPE html>
<html>
<head>
<link href="resources/css/style.css" type="text/css" rel="stylesheet">
<title>Herschel Lab</title>
</head>
<body>
<header>
<p class="horario">Martes y Viernes de 16 a 19 hs. en Mitre 387, Luján, Bs.As.</p>
<nav class="navigation">
<ul>
<li><a href="#home">Inicio</a></li>
<li><a href="#products">Productos</a></li>
<li><a href="#contact">Contacto</a></li>
</ul>
</nav>
<section class="grid">
<img img src="resources/images/logo/logo2.jpeg" alt="logo">
<h1 class="title">LABORATORIO FOTOGRAFÍA ANALÓGICA</h1>
<h2 class="subtitle">Revelado y digitalizado 35MM y 120 / Rollos / Cámaras / Accesorios / Talleres</h2>
</div>
</header>
</body>
</html>
* {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.horario {
background-color: rgb(230, 255, 8);
width: 100%;
height: 50px;
font-size: 16px;
color: rgb(0, 0, 0);
display: flex;
align-items: center;
justify-content: center;
}
.navigation {
text-align: right;
padding: 20px 20px;
background-color: beige;
}
.grid {
width: 100%;
max-width: 1000px;
margin: auto;
padding: 60px;
background-color: aqua;
}
.grid img {
height: 200px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
.title {
font-size: 28px;
}
.subtitle {
font-size: 18px;
}