I'm looking for a cool "boxy" effect on my website. I managed to get two boxes on the same line, but, unfortunately, my display: inline-table, I believe, prevents me to give that effect.
EFFECT DESIRED: I want the text blocks to be in two columns but I don't want them to be line by line like they are right now.
PROBLEM: They're aligning instead of just stacking to the bottom.
EXTREMELY IMPORTANT: I don't recommend you run the snippet because, as it's designed for a wide screen it won't display as shown.
This is how it looks on my computer screen.
Does anyone know the answer to this?
I don't mind changing all of my set - up as long as I have the desired pattern.
* {
font-family: Helvetica;
font-weight: 100;
-webkit-font-smoothing: antialiased;
margin: 0px;
color: white;
}
body {
background-color: #2b2b2a;
}
a {
text-decoration: none;
}
/* NOTE: CLASSES */
.nav-bar {
box-shadow: 0 0 20px 0 rgba(0,0,0,.15);
display: inline-block;
background: linear-gradient(90deg, #f05ce8, #2aeceb);
height: 60px;
width: 100%;
position: fixed;
}
.main-title {
font-family: Futura;
font-size: 32px;
color: white;
margin: 8px;
position: fixed;
}
.nav-link {
font-size: 28px;
color: white;
float: right;
position: relative;
padding: 12px 2% !important;
margin: 0px 1%;
font-weight: 300;
}
.vline {
font-size: 28px;
border-left: 1px solid white;
top: 10%;
float: right;
position: relative;
height: 80%;
}
.nav-link:before {
content: "";
position: absolute;
top: 57px;
height: 3px;
bottom: 0;
left: 50%;
right:50%;
background:white;
transition: all ease-in-out 300ms;
}
.nav-link:hover::before,.nav-link.active:before {
left: 0;
right: 0;
}
.nav-selected::after {
content: "";
position: absolute;
height: 3px;
bottom: 0;
left: 0;
right: 0;
background: white;
top: 57px;
}
.nav-link:hover {
opacity: 0.75;
}
.text-square {
width: 45%;
margin: 0px 2.2%;
border: 2px solid white;
padding: 10px 0px;
display: inline-table;
}
.title-1 {
font-size: 25px;
font-weight: 700;
text-align: center;
}
.insquare {
font-size: 20px;
margin: 0px 4px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="./Database/CSS/styling.css" rel="stylesheet" type="text/css">
<title>Bac 2018</title>
</head>
<body>
<!-- NOTE: NAV BAR -->
<nav class="nav-bar">
<a class="main-title">PLANS DU BAC</a>
<a class="nav-link" href="./Database/Pages/plus.html">Plus</a><a class="vline"></a>
<a class="nav-link" href="./Database/Pages/cours.html">Cours</a><a class="vline"></a>
<a class="nav-link" href="./Database/Pages/plans.html">Plans</a><a class="vline"></a>
<a class="nav-link nav-selected" href="#">Accueil</a><a class="vline"></a>
</nav><br><br><br><br><br>
<!-- NOTE: Explanations -->
<div class="text-square">
<p class="title-1">COURS</p><br>
<p class="insquare">Cette section regroupe les principaux cours de l'année. Tout ce qui est notions, objets d'études ou en relation avec l'oral se retrouve dans cette section.</p>
</div>
<div class="text-square">
<p class="title-1">PLANS</p><br>
<p class="insquare">Cette section regroupe tout les plans des oeuvres ou extraits vu en lecture analytique en français et littérature. Elle comporte quelques documents vu en lecture cursive ainsi que des résumés des oeuvres vu en classe.</p><p class="insquare">Il est possible que certaines fiches contiennent des erreurs, idem pour les résumés d'oeuvres ou de documents en lecture cursive. Donc si vous voyez une erreur ou une information qui manque, envoyez moi un mail : miloertas#gmail.com, ça évitera que tout le monde apprennent un truc faux...</p>
</div>
<div class="text-square">
<p class="title-1">PLANS</p><br>
<p class="insquare">Cette section regroupe tout les plans des oeuvres ou extraits vu en lecture analytique en français et littérature. Elle comporte quelques documents vu en lecture cursive ainsi que des résumés des oeuvres vu en classe.</p><p class="insquare">Il est possible que certaines fiches contiennent des erreurs, idem pour les résumés d'oeuvres ou de documents en lecture cursive. Donc si vous voyez une erreur ou une information qui manque, envoyez moi un mail : miloertas#gmail.com, ça évitera que tout le monde apprennent un truc faux...</p>
</div>
<div class="text-square">
<p class="title-1">PLANS</p><br>
<p class="insquare">Cette section regroupe tout les plans des oeuvres ou extraits vu en lecture analytique en français et littérature. Elle comporte quelques documents vu en lecture cursive ainsi que des résumés des oeuvres vu en classe.</p><p class="insquare">Il est possible que certaines fiches contiennent des erreurs, idem pour les résumés d'oeuvres ou de documents en lecture cursive. Donc si vous voyez une erreur ou une information qui manque, envoyez moi un mail : miloertas#gmail.com, ça évitera que tout le monde apprennent un truc faux...</p>
</div>
</body>
</html>
You can use columns.
Basically, I put the text-squares in a container with two columns.
* {
font-family: Helvetica;
font-weight: 100;
-webkit-font-smoothing: antialiased;
margin: 0px;
color: white;
}
body {
background-color: #2b2b2a;
}
a {
text-decoration: none;
}
/* NOTE: CLASSES */
.nav-bar {
box-shadow: 0 0 20px 0 rgba(0, 0, 0, .15);
display: inline-block;
background: linear-gradient(90deg, #f05ce8, #2aeceb);
height: 60px;
width: 100%;
position: fixed;
}
.main-title {
font-family: Futura;
font-size: 32px;
color: white;
margin: 8px;
position: fixed;
}
.nav-link {
font-size: 28px;
color: white;
float: right;
position: relative;
padding: 12px 2% !important;
margin: 0px 1%;
font-weight: 300;
}
.vline {
font-size: 28px;
border-left: 1px solid white;
top: 10%;
float: right;
position: relative;
height: 80%;
}
.nav-link:before {
content: "";
position: absolute;
top: 57px;
height: 3px;
bottom: 0;
left: 50%;
right: 50%;
background: white;
transition: all ease-in-out 300ms;
}
.nav-link:hover::before,
.nav-link.active:before {
left: 0;
right: 0;
}
.nav-selected::after {
content: "";
position: absolute;
height: 3px;
bottom: 0;
left: 0;
right: 0;
background: white;
top: 57px;
}
.nav-link:hover {
opacity: 0.75;
}
.text-square { /* Note: changed styles */
/*width: 45%;*/
margin: 0px 2.2%;
border: 2px solid white;
padding: 10px 0px;
/*display: inline-table;*/
page-break-inside: avoid;
break-inside: avoid;
}
.title-1 {
font-size: 25px;
font-weight: 700;
text-align: center;
}
.insquare {
font-size: 20px;
margin: 0px 4px;
text-align: center;
}
.main { /* new */
-webkit-column-count: 2;
column-count: 2;
}
<!-- NOTE: NAV BAR -->
<nav class="nav-bar">
<a class="main-title">PLANS DU BAC</a>
<a class="nav-link" href="./Database/Pages/plus.html">Plus</a>
<a class="vline"></a>
<a class="nav-link" href="./Database/Pages/cours.html">Cours</a>
<a class="vline"></a>
<a class="nav-link" href="./Database/Pages/plans.html">Plans</a>
<a class="vline"></a>
<a class="nav-link nav-selected" href="#">Accueil</a>
<a class="vline"></a>
</nav><br><br><br><br><br>
<!-- NOTE: Explanations -->
<div class="main">
<div class="text-square">
<p class="title-1">COURS</p><br>
<p class="insquare">Cette section regroupe les principaux cours de l'année. Tout ce qui est notions, objets d'études ou en relation avec l'oral se retrouve dans cette section.</p>
</div>
<div class="text-square">
<p class="title-1">PLANS</p><br>
<p class="insquare">Cette section regroupe tout les plans des oeuvres ou extraits vu en lecture analytique en français et littérature. Elle comporte quelques documents vu en lecture cursive ainsi que des résumés des oeuvres vu en classe.</p>
<p class="insquare">Il est possible que certaines fiches contiennent des erreurs, idem pour les résumés d'oeuvres ou de documents en lecture cursive. Donc si vous voyez une erreur ou une information qui manque, envoyez moi un mail : <a href="mailto:miloertas#gmail.com?subject=Erreur%20Fiche%20Bac"
style="text-decoration: underline; color: DeepSkyBlue;">miloertas#gmail.com</a>, ça évitera que tout le monde apprennent un truc faux...</p>
</div>
<div class="text-square">
<p class="title-1">PLANS</p><br>
<p class="insquare">Cette section regroupe tout les plans des oeuvres ou extraits vu en lecture analytique en français et littérature. Elle comporte quelques documents vu en lecture cursive ainsi que des résumés des oeuvres vu en classe.</p>
<p class="insquare">Il est possible que certaines fiches contiennent des erreurs, idem pour les résumés d'oeuvres ou de documents en lecture cursive. Donc si vous voyez une erreur ou une information qui manque, envoyez moi un mail : <a href="mailto:miloertas#gmail.com?subject=Erreur%20Fiche%20Bac"
style="text-decoration: underline; color: DeepSkyBlue;">miloertas#gmail.com</a>, ça évitera que tout le monde apprennent un truc faux...</p>
</div>
<div class="text-square">
<p class="title-1">PLANS</p><br>
<p class="insquare">Cette section regroupe tout les plans des oeuvres ou extraits vu en lecture analytique en français et littérature. Elle comporte quelques documents vu en lecture cursive ainsi que des résumés des oeuvres vu en classe.</p>
<p class="insquare">Il est possible que certaines fiches contiennent des erreurs, idem pour les résumés d'oeuvres ou de documents en lecture cursive. Donc si vous voyez une erreur ou une information qui manque, envoyez moi un mail : miloertas#gmail.com,
ça évitera que tout le monde apprennent un truc faux...</p>
</div>
</div>
If I fully understand what you want to achieve, just change your .text-square styles to:
.text-square {
width: 45%;
margin: 0px 2.2% 2.2%;
border: 2px solid white;
padding: 10px 0px;
display: inline-table;
vertical-align: bottom;
}
Related
I am trying to get an icon to be placed to the left of the text as in the image. Right now for some reason it is on top of the text. The icon are inside tabs with text and I want the icons to change for each tab. Even if I change the margins, they do not move.
Senconly, I have an image and text in the header and it looks fine in google chrome but when I change browsers they pile to the left. They are currently placed in the center by adjusting the margins but maybe a flex display or grid will make them look centered in every browser and be cleaner? could I do this?
Thanks
<header>
<div class="container_header">
<img ID="foto_perfil" src="iconos/perfil.png" alt="Foto de perfil">
<h1 class="Nombre">Daniela Sucunza</h1>
<p class="titulo">Licenciada en Administración</p>
<p class="titulo">Programadora Front End</p>
</div>
</main>
</header>
<body>
<script src="function.js"></script>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'Acerca')">Acerca de mi</button>
<button class="tablinks" onclick="openCity(event, 'Experiencia')">Experiencia</button>
<button class="tablinks" onclick="openCity(event, 'Educacion')">Educación</button>
<button class="tablinks" onclick="openCity(event, 'Habilidades')">Habilidades</button>
</div>
<div id="demo">
<div id="Acerca" class="tabcontent" style=display:block>
<i class="fa-regular fa-user"></i>
<p><img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Profesional ambicioso y con formación en recursos humanos, que busca un puesto de principiante en el que pueda utilizar mejor mis habilidades y mi pasión.<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Ambicioso y capaz de trabajar independientemente o en equipo. Comprometido a establecer y mantener un ambiente de trabajo positivo para todos los empleados.<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Como esta área complementa mis estudios, estoy ansioso por adquirir más experiencia en este campo. Por esta razón, estoy buscando una compañía dispuesta a ofrecerme una ubicación entre sus desarrolladores. A cambio, ofrecería mi todo compromiso y sería una adición agradable y amigable para su equipo.<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Por lo tanto, actualmente estoy buscando un trabajo o una pasantía como un front-end desarrollador.</p></p>
</div>
<div id="Experiencia" class="tabcontent" style=display:none>
<p><h3>Asistente de Recursos Humanos</h3>
Noviembre, 2015- Octubre, 2020<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Creación de un registro de cumplimiento para uso de la gerencia cada mes.<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Asistencia en el mantenimiento de todos los archivos en papel para el departamento de RRHH.<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Apoyo en la creación de documentación para todos los nuevos empleados, y siguió creando archivos conforme al protocolo de RRHH.<br>
<h3>Asistente de Recepción<br></h3>
Julio 2013- Junio 2015<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Apoyo en la actualización de toda la información de beneficios, a la vez que ampliaba los conocimientos relacionados con los beneficios para los empleados.<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Conducta profesional, agradable y trabajadora en el día a día.</p>
</div>
<div id="Educacion" class="tabcontent" style=display:none>
<p> <h3>Licenciatura en Recusos Humanos</h3>
Febrero 2009 - Octubre, 2013<br>
Graduado magna cum laude. Escritor principal de la revista universitaria El León.<br>
<h3>Master en Ciencia Datos</h3>
Febrero 2015- Octubre, 2017<br>
Universidad Nacional
</p>
</div>
<div id="Habilidades" class="tabcontent" style=display:none>
<h3>Habilidades</h3>
<p><img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Ingles Avanzado<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Portugues Intermedio<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">SQL <br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Power BI <br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Photoshop<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Python</p>
</div>
</div>
</body>
<footer>
</footer>
</html>
:root{
--primario: #E8F3D6;
--Oscuro: #A0E4CB;
--blanco: #fff;
--Negro: #000;
--FuentePrincipal: 'Jost', sans-serif;
--FuenteTitulo: 'DM Serif Display', serif;
}
/*GENERALES*/
html {
box-sizing: border-box;
}
body{
background-color: white;
color: black;
margin: auto;
}
/* HEADER*/
#foto_perfil{
border-radius: 100px;
float: left;
width:170px;
height:170px;
margin-left: 470px;
margin-right: 70px;
margin-top: 15px;
opacity: 1.0;
}
#foto_perfil:hover {
opacity: 0.7;
}
.container_header {
top: 0%;
justify-content: center;
flex-direction: column;
align-items: center;
text-align: left;
width: 100%;
height: 200px;
background: var(--primario);
}
.Nombre{
font-family: var(--FuenteTitulo);
font-weight:200;
margin-right: 1rem;
color: black;
font-size: 35px;
padding-top: 25px;
}
.titulo{
font-family: var(--FuentePrincipal);
margin-right: 1rem;
font-size: 20px;
font-weight: bold;
font-style: italic;
}
#demo {
font-family: var(--FuentePrincipal);
line-height: 35px;
margin-top: 1rem;
font-size: large;
text-align: justify;
margin-left: 25rem;
margin-right: 10rem;
white-space: wrap;
}
/* button*/
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.tab button {
text-align: center;
background-color: inherit;
float: center;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
float: center;
text-decoration: none;
width: 22%;
margin-top: 1rem;
margin-left: 2rem;
filter: drop-shadow(0px 4px 4p
x rgba(0, 0, 0, 0.15));
border-radius: 8px;;
background-color: white;
color: black;
border: 2px solid var(--primario);
}
.tab button:hover {
background-color: var(--Oscuro);
color: black;
border: 2px solid var(--Oscuro)
}
.tab button.active {
background-color: #A0E4CB;
}
.tabcontent {
display: none;
padding: 6px 12px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
#-webkit-keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
/* ICONOS*/
img {
width: 15px;
height:15px;
}
/*TABS*/
h3{
font-weight: bolder;
font-style: italic;
}
/* FOOTER*/
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
background-color: var(--primario);
/** margin-top: 2rem;**/
}
.fa-brands {
color: var(--Negro);
padding: 20px;
font-size: 30px;
width: 30px;
height: 30px;
text-align: center;
text-decoration: none;
padding: 16px 32px;
margin: 15px 2px;
}
.fa:hover {
opacity: 0.7;
}
.fa-regular{
padding: 20px;
font-size: 30px;
width: 30px;
height: 30px;
text-align: right;
text-decoration: none;
padding: 16px 32px;
margin-right: 0% ;
}
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
current page
model- expected outcome
modifying margins, adding display.grid, display-flex
Yes flex will do. I've added flex to the header and all of the tabs.
function openCity(event, city) {
const tabs = document.querySelectorAll(".tabcontent")
tabs.forEach(tab => tab.style['display'] = 'none')
document.getElementById(city).style['display'] = 'flex';
}
:root {
--primario: #E8F3D6;
--Oscuro: #A0E4CB;
--blanco: #fff;
--Negro: #000;
--FuentePrincipal: 'Jost', sans-serif;
--FuenteTitulo: 'DM Serif Display', serif;
}
/*GENERALES*/
html {
box-sizing: border-box;
}
body {
background-color: white;
color: black;
margin: auto;
}
/* HEADER*/
#foto_perfil {
border-radius: 100px;
width: 170px;
height: 170px;
margin-left: 470px;
margin-right: 70px;
margin-top: 15px;
opacity: 1.0;
}
#foto_perfil:hover {
opacity: 0.7;
}
.container_header {
display: flex;
justify-content: center;
align-items: center;
text-align: left;
width: 100%;
height: 200px;
background: var(--primario);
}
.Nombre {
font-family: var(--FuenteTitulo);
font-weight: 200;
margin-right: 1rem;
color: black;
font-size: 35px;
padding-top: 25px;
}
.titulo {
font-family: var(--FuentePrincipal);
margin-right: 1rem;
font-size: 20px;
font-weight: bold;
font-style: italic;
}
#demo {
font-family: var(--FuentePrincipal);
line-height: 35px;
margin-top: 1rem;
font-size: large;
text-align: justify;
margin-left: 25rem;
margin-right: 10rem;
white-space: wrap;
}
/* button*/
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.tab button {
text-align: center;
background-color: inherit;
float: center;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
text-decoration: none;
width: 22%;
margin-top: 1rem;
margin-left: 2rem;
filter: drop-shadow(0px 4px 4p x rgba(0, 0, 0, 0.15));
border-radius: 8px;
background-color: white;
color: black;
border: 2px solid var(--primario);
}
.tab button:hover {
background-color: var(--Oscuro);
color: black;
border: 2px solid var(--Oscuro)
}
.tab button.active {
background-color: #A0E4CB;
}
.tabcontent {
display: none;
padding: 6px 12px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
#-webkit-keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* ICONOS*/
img {
width: 15px;
height: 15px;
}
/*TABS*/
h3 {
font-weight: bolder;
font-style: italic;
}
#demo>* {
display: flex;
justify-content: center;
align-items: center;
}
/* FOOTER*/
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
background-color: var(--primario);
/** margin-top: 2rem;**/
}
.fa-brands {
color: var(--Negro);
padding: 20px;
font-size: 30px;
width: 30px;
height: 30px;
text-align: center;
text-decoration: none;
padding: 16px 32px;
margin: 15px 2px;
}
.fa:hover {
opacity: 0.7;
}
.fa-regular {
padding: 20px;
font-size: 30px;
width: 30px;
height: 30px;
text-align: right;
text-decoration: none;
padding: 16px 32px;
margin-right: 0%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet" />
<header>
<div class="container_header">
<img ID="foto_perfil" src="iconos/perfil.png" alt="Foto de perfil">
<div class="info">
<h1 class="Nombre">Daniela Sucunza</h1>
<p class="titulo">Licenciada en Administración</p>
<p class="titulo">Programadora Front End</p>
</div>
</div>
</header>
<script src="function.js"></script>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'Acerca')">Acerca de mi</button>
<button class="tablinks" onclick="openCity(event, 'Experiencia')">Experiencia</button>
<button class="tablinks" onclick="openCity(event, 'Educacion')">Educación</button>
<button class="tablinks" onclick="openCity(event, 'Habilidades')">Habilidades</button>
</div>
<div id="demo">
<div id="Acerca" class="tabcontent" style=display:flex>
<i class="fa-regular fa-user"></i>
<p>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Profesional ambicioso y con formación en recursos humanos, que busca un puesto de principiante en el que
pueda utilizar mejor mis habilidades y mi pasión.<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Ambicioso y capaz de trabajar independientemente o en equipo. Comprometido a establecer y mantener un ambiente
de trabajo positivo para todos los empleados.<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Como esta área complementa mis estudios, estoy ansioso por adquirir más experiencia en este campo. Por
esta razón, estoy buscando una compañía dispuesta a ofrecerme una ubicación entre sus desarrolladores. A cambio, ofrecería mi todo compromiso y sería una adición agradable y amigable para su equipo.<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Por lo tanto, actualmente estoy buscando un trabajo o una pasantía como un front-end desarrollador.
</p>
</div>
<div id="Experiencia" class="tabcontent" style=display:none>
<h3>Asistente de Recursos Humanos</h3>
Noviembre, 2015- Octubre, 2020<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Creación de un registro de cumplimiento para uso de la gerencia cada mes.<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Asistencia en el mantenimiento de todos los archivos en papel para el departamento de RRHH.<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Apoyo en la creación de documentación para todos los nuevos empleados, y siguió creando archivos conforme
al protocolo de RRHH.<br>
<h3>Asistente de Recepción<br></h3>
Julio 2013- Junio 2015<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Apoyo en la actualización de toda la información de beneficios, a la vez que ampliaba los conocimientos relacionados
con los beneficios para los empleados.<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Conducta profesional, agradable y trabajadora en el día a día.
</div>
<div id="Educacion" class="tabcontent" style=display:none>
<h3>Licenciatura en Recusos Humanos</h3>
Febrero 2009 - Octubre, 2013<br> Graduado magna cum laude. Escritor principal de la revista universitaria El León.<br>
<h3>Master en Ciencia Datos</h3>
Febrero 2015- Octubre, 2017<br> Universidad Nacional
</div>
<div id="Habilidades" class="tabcontent" style=display:none>
<h3>Habilidades</h3>
<p>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Ingles Avanzado<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Portugues Intermedio<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">SQL <br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Power BI <br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Photoshop<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Python
</p>
</div>
</div>
<footer>
</footer>
I'm having a problem with my website.
When I open https://www.b3lieve.com.mx/precios.html the card-prices section works correctly (if it's in computer).
But if I visualize the same section but in a mobile or using the responsive design tool, it doesn’t work or have design. What should I do?
visualized from responsive design tool
visualized from computer
I tried it from localhost and it works correctly either computer or responsive design. Could be a problem with my hosting service?
Here's the code...
`
<div class="packs" style="padding-top:80px;">
<h2 style="text-align:center;">Booth 360°</h2>
<div class="pricing-table" id="360">
<div class="pricing-card">
<h3 class="pricing-card-header">Básico</h3>
<div class="price"><sup>$</sup>5,300 MXN</div>
<ul>
<li><strong>1</strong> Booth 360°.</li>
<li><strong>2</strong> horas de servicio.</li>
<li><strong>2</strong> personas de Staff.</li>
<li>Videos y fotos<strong> ilimitados</strong> durante todo el servicio.</li>
<li><strong>2</strong> templates diferentes y props.</li>
<li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
</ul>
Seleccionar
</div>
</div>
<div class="pricing-table">
<div class="pricing-card">
<h3 class="pricing-card-header">Clásico</h3>
<div class="price"><sup>$</sup>6,800 MXN</div>
<ul>
<li><strong>1</strong> Booth 360°.</li>
<li><strong>3</strong> horas de servicio.</li>
<li><strong>2</strong> personas de Staff.</li>
<li>Videos y fotos<strong> ilimitados</strong> durante todo el servicio.</li>
<li><strong>4</strong> templates diferentes y props.</li>
<li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
</ul>
Seleccionar
</div>
</div>
<div class="pricing-table">
<div class="pricing-card">
<h3 class="pricing-card-header">Prémium</h3>
<div class="price"><sup>$</sup>8,300 MXN</div>
<ul>
<li><strong>1</strong> Booth 360°.</li>
<li><strong>5</strong> horas de servicio.</li>
<li><strong>2</strong> personas de Staff.</li>
<li>Videos y fotos<strong> ilimitados</strong> durante todo el servicio.</li>
<li><strong>6</strong> templates diferentes y props.</li>
<li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
</ul>
Seleccionar
</div>
</div>
<div class="pricing-table">
<div class="pricing-card">
<h3 class="pricing-card-header">Personalizado</h3>
<div class="price">Contáctanos</div>
<ul>
<li><strong>1</strong> Booth 360°.</li>
<li><strong>?</strong> horas de servicio.</li>
<li><strong>2</strong> personas de Staff.</li>
<li>Videos y fotos<strong> ilimitados</strong> durante todo el servicio.</li>
<li><strong>?</strong> templates diferentes y props.</li>
<li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
</ul>
Seleccionar
</div>
</div> <!-- CABINA 360 -->
<br>
<br>
<br>
<h2 style="text-align:center;">Magic Mirror Booth</h2>
<div class="pricing-table">
<div class="pricing-card" id="mirror">
<h3 class="pricing-card-header">Básico</h3>
<div class="price"><sup>$</sup>5,900 MXN</div>
<ul>
<li><strong>1</strong> Booth Magic Mirror.</li>
<li><strong>2</strong> horas de servicio.</li>
<li><strong>2</strong> personas de Staff.</li>
<li>Fotos<strong> ilimitadas</strong> durante todo el servicio.</li>
<li><strong>2</strong> templates diferentes y props.</li>
<li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
</ul>
Seleccionar
</div>
</div>
<div class="pricing-table">
<div class="pricing-card">
<h3 class="pricing-card-header">Clásico</h3>
<div class="price"><sup>$</sup>7,400 MXN</div>
<ul>
<li><strong>1</strong> Booth Magic Mirror.</li>
<li><strong>3</strong> horas de servicio.</li>
<li><strong>2</strong> personas de Staff.</li>
<li>Fotos<strong> ilimitadas</strong> durante todo el servicio.</li>
<li><strong>4</strong> templates diferentes y props.</li>
<li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
</ul>
Seleccionar
</div>
</div>
<div class="pricing-table">
<div class="pricing-card">
<h3 class="pricing-card-header">Prémium</h3>
<div class="price"><sup>$</sup>9,900 MXN</div>
<ul>
<li><strong>1</strong> Booth Magic Mirror.</li>
<li><strong>5</strong> horas de servicio.</li>
<li><strong>2</strong> personas de Staff.</li>
<li>Fotos<strong> ilimitadas</strong> durante todo el servicio.</li>
<li><strong>6</strong> templates diferentes y props.</li>
<li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
</ul>
Seleccionar
</div>
</div>
<div class="pricing-table">
<div class="pricing-card">
<h3 class="pricing-card-header">Personalizado</h3>
<div class="price">Contáctanos</div>
<ul>
<li><strong>1</strong> Booth Magic Mirror.</li>
<li><strong>?</strong> horas de servicio.</li>
<li><strong>2</strong> personas de Staff.</li>
<li>Fotos<strong> ilimitados</strong> durante todo el servicio.</li>
<li><strong>?</strong> templates diferentes y props.</li>
<li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
</ul>
Seleccionar
</div>
</div>
</div>
`
`
.pricing-table{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: min(1600px, 100%);
}
.pricing-card{
flex: 1;
max-width: 360px;
background-color: #17173d;
margin: 20px 10px;
text-align: center;
cursor: pointer;
overflow: hidden;
color: #f9f9f9;
transition: .3s linear;
border-radius: 20px;
}
.pricing-card-header{
background-color: var(--majorelle-blue);
display: inline-block;
color: #fff;
padding: 12px 30px;
border-radius: 0 0 20px 20px;
font-size: 16px;
text-transform: uppercase;
font-weight: 600;
transition: .4s linear;
}
.pricing-card:hover .pricing-card-header{
box-shadow: 0 0 0 26em var(--majorelle-blue);
}
.price{
font-size: 35px;
color: var(--majorelle-blue);
margin: 40px 0;
transition: .2s linear;
}
.price sup{
font-size: 22px;
font-weight: 700;
}
.pricing-card:hover ,.pricing-card:hover .price{
color: #fff;
}
.pricing-card li{
font-size: 16px;
padding: 10px 0;
text-transform: uppercase;
}
.order-btn{
display: inline-block;
margin-bottom: 40px;
margin-top: 80px;
border: 2px solid var(--majorelle-blue);
color: var(--majorelle-blue);
padding: 18px 40px;
border-radius: 8px;
text-transform: uppercase;
font-weight: 500;
transition: .3s linear;
}
.order-btn:hover{
background-color: var(--majorelle-blue);
color: #fff;
}
#media screen and (max-width:1100px) {
.pricing-card{
flex: 50%;
}
}
`
you just didn't close the first and the second #media query. that's it.
#media (min-width: 450px) {
/**
* HERO
*/
.hero-form { position: relative; }
.email-field {
margin-bottom: 0;
padding-right: 155px;
}
.hero .btn-primary {
position: absolute;
top: 5px;
right: 5px;
padding-block: 12.5px;
}
.hero-ctc .btn-primary {
position: absolute;
top: 5px;
right: 5px;
padding-block: 12.5px;
}
} /* this wasn't closed */
#media (min-width: 450px) {
/**
* HERO
*/
.hero-form { position: relative; }
.email-field {
margin-bottom: 0;
padding-right: 155px;
}
.hero .btn-primary {
position: absolute;
top: 5px;
right: 5px;
padding-block: 12.5px;
}
.hero-ctc .btn-primary {
position: absolute;
top: 5px;
right: 5px;
padding-block: 12.5px;
}
} /* this wasn't closed */
Take a look in your css.
You have...
#media (min-width: 450px) {
/**
* HERO
*/
.hero-form { position: relative; }
.email-field {
margin-bottom: 0;
padding-right: 155px;
}
.hero-ctc .btn-primary {
position: absolute;
top: 5px;
right: 5px;
padding-block: 12.5px;
}
/**
* ABOUT
*/
.about-card .card-text {
max-width: 300px;
margin-inline: auto;
}
}
... as your smallest minimum width where styles are applied for mobile devices. (by the way, you have that exact same #media definition for the minimum width of 450 pixels case in there three times for some reason... perhaps a bad copy and paste?)
Then, if you look at the dimensions in the responsive viewport as shown in the provided screenshot, you can see the width is 414. If you were to drag that viewport screen to the right or set the width to 450 or greater, the style will show.
If you find it necessary, you can define smaller minimum width dimension cases in your css, being mindful that your definitions start with the smallest and work up to the largest.
You have a couple of copy and paste CSS media queries from line 791 to 871.
The majority of css classes ans attributes are the same.
But I think the problem is in you style.css line 819 you open a #media (min-width: 450px) but you don't close in line 844.
You forgot to close braces here
That should work like a charm
Mobile view with close braces modification
I want to show my the section "How it works" of my website like this:
https://codepen.io/carlosmr/pen/NVbbmx
The problem is that if the text is too long at the right the numbers at the left grow with it, like in number 4.
Is there a way to leave the numbers at the left and the text at the right without that problem? Thanks!
.uli {
list-style: none;
float: left;
width: 100%;
padding: 0;
}
.uli li {
padding-bottom: 80px;
float: left;
width: 100%;
position: relative;
}
.uli li span {
border-radius: 50%;
border: 1px solid #eaeaea;
width: 100px;
height: 100px;
line-height: 30px;
margin-right: 10px;
background-color: #eaeaea;
display: inline-block;
position: relative;
text-align: center;
display: table-cell;
vertical-align: middle;
color: #fff;
font-size: 3em;
}
.uli li:before {
content: '';
position: absolute;
top: 0;
width: 2px;
height: 100%;
left: 49px;
background: #eaeaea;
z-index: -1;
}
.uli li:last-child:before {
display: none;
}
.uli .ulcontent{
display: table-cell;
vertical-align: middle;
padding-left: 100px;
}
.entry-content .uli > li{
list-style-type: none;
}
<ul class="uli">
<li>
<span>1</span>
<div class="ulcontent">
<h3>Primer contacto</h3>
<p>Contactas conmigo y me cuentas tu idea. Si quieres puedes hacerlo Aquí</p>
</div>
</li>
<li>
<span>2</span>
<div class="ulcontent">
<h3>Consultoría web</h3>
<p>Organizamos una entrevista para conocernos y aclarar las bases del proyecto.</p>
</div>
</li>
<li>
<span>3</span>
<div class="ulcontent">
<h3>Diseño web</h3>
<p>Empieza la creación de un diseño para tu proyectos basado en las necesidades del mismo</p>
</div>
</li>
<li>
<span>4</span>
<div class="ulcontent">
<h3>Desarrollo</h3>
<p>Una vez se apruebe el diseño definitivo comenzamos la fase de desarrollo, en la cual se programa el tema totalmente desde cero y se le añaden todas las funcionalidades a la web</p>
</div>
</li>
<li>
<span>5</span>
<div class="ulcontent">
<h3>Implementación</h3>
<p>En este momento se añade el contenido, se personaliza y se traslada a tu servidor para que puedas administrarlo tu mismo</p>
</div>
</li>
<li>
<span>6</span>
<div class="ulcontent">
<h3>Consultoría previa</h3>
<p>Nos reuniremos por videoconferencia para conocernos y sentar las bases de lo que será tu nuevo sitio de membresía. ¿Estás listo? ¡Vamos allá!</p>
</div>
</li>
</ul>
You can add the below styles to the <span> tag which is inside the <li> tag.
display: block;
float: left;
line-height: 100px;
Check the edited codepen
Edited version
I have 3 divs placed next to each other, they have same heights and widths. but for some reason the one is placed higher than the other. they're still next to each other, but the margin from the top is different for every single 1 of them.
html:
<div class="diensten">
<div id="dienst1">
<h2>Ontruimingsoefening</h2>
<p>Wij verzorgen diverse ontruimingsoefeningen die afgestemd zijn op zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden en detailhandel. De ontruimingsoefeningen kunnen zowel theoretisch (Table Top) als praktisch toegepast worden waarbij wij gebruik maken van professionele hulpmiddelen om de ontruimingsoefening zo realistisch mogelijk te maken.</p>
<img src="Foto's/IMG_2670.JPG" data-tilt data-tilt-max="30" data-tilt-speed="400" data-tilt-perspective="900">
</div>
<div id="dienst2">
<h2>Beheer brandmeldinstallatie</h2>
<p>Wij verzorgen de verplichte maandelijkse en viermaandelijkse beheerderstaken van de brandmeldinstallatie conform NEN 2654 op professionele wijze voor zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden, kantoorgebouwen en detailhandel. Het onderhoud van de brandmeldinstallatie bestaat uit het testen van de doormelding naar de brandweer van automatische rookmelders en handbrandmelders, het testen van de doormelding van storingen aan de brandmeldinstallatie, een visuele controle van de aangesloten componenten, het bijwerken en onderhouden van het logboek.</p>
<img src="Foto's/IMG_2704.JPG">
</div>
<div id="dienst3">
<h2>Camerabeveiliging</h2>
<p>Wij verzorgen uw camera beveiliging. Registratie wat er in en rond uw pand gebeurt, het kan door middel van camera’s welke worden geprojecteerd in overleg, zodat de verzochte beelden kunnen worden opgeslagen op een harddisk recorder. Camera’s zijn er in diverse types. Voor de nachtelijke situatie kunnen er lampen worden geplaatst, ook zijn er camera’s welke in het donker automatisch overschakelen naar zwart-wit en doormiddel van ingebouwde infrarood verlichting nog uitstekend beeld geven. Tevens is het koppelen van camerabeelden met een Particuliere Alarmcentrale mogelijk.</p>
</div>
css:
.diensten h2 {
padding-top: 40px;
}
.diensten p, h2 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
padding: 20px;
}
.diensten {
position: absolute;
display: inline-block;
height: 500px;
background-color: #FFFFFF;
margin: auto;
}
#dienst1 {
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
}
#dienst2 {
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
}
#dienst3 {
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
}
#dienst2 img{
height: 300px;
width: 450px;
}
#dienst1 img {
position: relative;
display: block;
margin: auto;
width: 450px;
margin-top: 100px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst2 img{
position: relative;
display: block;
margin: auto;
width: 450px;
height: 350px;
margin-top: 30px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst3 img{
margin: auto;
height: 330px;
width: 450px;
margin-top: 50px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
The middle one is taller. If you want them aligned to the top of their parent, add vertical-align: top to the 3 divs.
.diensten h2 {
padding-top: 40px;
}
.diensten p, h2 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
padding: 20px;
}
.diensten {
position: absolute;
display: inline-block;
height: 500px;
background-color: #FFFFFF;
margin: auto;
}
#dienst1 {
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
}
#dienst2 {
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
}
#dienst3 {
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
}
#dienst2 img{
height: 300px;
width: 450px;
}
#dienst1 img {
position: relative;
display: block;
margin: auto;
width: 450px;
margin-top: 100px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst2 img{
position: relative;
display: block;
margin: auto;
width: 450px;
height: 350px;
margin-top: 30px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst3 img{
margin: auto;
height: 330px;
width: 450px;
margin-top: 50px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.diensten > div {
vertical-align: top;
}
<div class="diensten">
<div id="dienst1">
<h2>Ontruimingsoefening</h2>
<p>Wij verzorgen diverse ontruimingsoefeningen die afgestemd zijn op zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden en detailhandel. De ontruimingsoefeningen kunnen zowel theoretisch (Table Top) als praktisch toegepast
worden waarbij wij gebruik maken van professionele hulpmiddelen om de ontruimingsoefening zo realistisch mogelijk te maken.</p>
<img src="Foto's/IMG_2670.JPG" data-tilt data-tilt-max="30" data-tilt-speed="400" data-tilt-perspective="900">
</div>
<div id="dienst2">
<h2>Beheer brandmeldinstallatie</h2>
<p>Wij verzorgen de verplichte maandelijkse en viermaandelijkse beheerderstaken van de brandmeldinstallatie conform NEN 2654 op professionele wijze voor zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden, kantoorgebouwen
en detailhandel. Het onderhoud van de brandmeldinstallatie bestaat uit het testen van de doormelding naar de brandweer van automatische rookmelders en handbrandmelders, het testen van de doormelding van storingen aan de brandmeldinstallatie, een
visuele controle van de aangesloten componenten, het bijwerken en onderhouden van het logboek.</p>
<img src="Foto's/IMG_2704.JPG">
</div>
<div id="dienst3">
<h2>Camerabeveiliging</h2>
<p>Wij verzorgen uw camera beveiliging. Registratie wat er in en rond uw pand gebeurt, het kan door middel van camera’s welke worden geprojecteerd in overleg, zodat de verzochte beelden kunnen worden opgeslagen op een harddisk recorder. Camera’s zijn
er in diverse types. Voor de nachtelijke situatie kunnen er lampen worden geplaatst, ook zijn er camera’s welke in het donker automatisch overschakelen naar zwart-wit en doormiddel van ingebouwde infrarood verlichting nog uitstekend beeld geven.
Tevens is het koppelen van camerabeelden met een Particuliere Alarmcentrale mogelijk.</p>
</div>
So i have this weird weird white bar right under my menu. Ive been deleting some stuff and adding margin: 0 0; to some stuff, i can't find where it come from! Also why is my ul all over the place, it won't stay center.
Html:
<head>
<link rel="stylesheet" type="text/css" href="spa.css">
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<link rel="shortcut icon" type="image/x-icon" href="Year%20of%20Dog-32.png" />
<title>Acceuil</title>
</head>
<body>
<div class="nav">
<div class="container">
<div class="right">
<img src="1445918850_Like.png" height="30" width="30">
<p>Heure d'ouverture</p>
</div>
<div class="logo">
<img src="1445919066_cat_sleep.png" height="45" width="45">
<h1>SPATM</h1>
</div>
</div>
</div>
<div class="navbar">
<ul>
<li><a href="spa.html">
<img src="kennel1.png" height="42" width="42">Acceuil</a></li>
<li><img src="running37.png" height="42" width="42">Services</li>
<li><img src="dog56.png" height="42" width="42">Adoptions</li>
<li><img src="donation3.png" height="40" width="42">Faire un don</li>
<li><img src="pet55.png" height="42" width="42">Perdu et Trouvés</li>
<li><img src="woman93%20(1).png" height="42" width="42">Contactez-nous</li>
</ul>
</div>
<div class="main">
<div class="info">
<h2>Bienvenue sur le site de la SPATM <br>
(Société protectrice des animaux de Thetford Mines).</h2>
<h3>Notre mission</h3>
<p>La SPATM est un organisme à but non-lucratif qui a pour mandat de protéger les animaux, mais aussi d’informer et d’éduquer la population sur les différents besoins des animaux domestiques et des animaux sauvages. Nos efforts sont concentrés surtout sur la prévention et le contrôle de la population animale. Nous conseillons les propriétaires d’animaux en espérant améliorer ou bien démarrer leur relation avec leurs petits compagnons de vie.</p>
<h3>Notre établissement</h3>
<img class="imgmain" src="spabuilding.jpg" width="400" height="280">
<p>La SPATM a ouvert ses portes le 11 juin 2007. Notre établissement est composé de locaux pour l’adoption (chats et chiens), de locaux pour la quarantaine (chats et chiens) et d’un local d’isolation. Les locaux de la quarantaine servent a accueillir tous nos nouveaux pensionnaires afin de donner la chance aux animaux errants de se faire réclamer et de pouvoir évaluer la santé et le comportement de chacun d’eux avant de les transférer à l’adoption si tel est le cas. Le local d’isolation nous permet d’accueillir des animaux pouvant être contagieux sans risquer de contaminer les autres. De plus, nous avons une salle de lavage pour effectuer la désinfection de notre matériel de nettoyage et du matériel utilisé pour nos animaux (bols, laisses, colliers, plaques d’identification, cages de transport, ect.) et celle-ci contient un bain pour laver nos animaux. Une salle d’examen est aussi mise à notre disposition pour faire les examens physiques et pour procurer des soins comme la coupe de griffes, le rasage et autres soins à nos animaux.</p>
<h3>Notre équipe</h3>
<p>Notre équipe est composée de deux techniciennes en santé animale diplômées, d’un patrouilleur animalier, d’une animalière et d’un conseil d’administration. Nous sommes tous qualifiés pour répondre adéquatement aux clients et nous possédons plusieurs années d’expérience dans le domaine animalier.</p>
<h3>Vous êtes les bienvenus!</h3>
<p>La SPATM est ouverte au public, les animaux mis à l’adoption peuvent être visités sur nos heures d’ouverture. Les bénévoles pour distraire nos pensionnaires sont toujours les bienvenus et bien appréciés. Nous avons souvent la présence de chiens de grandes races qui demandent beaucoup d’exercices.</p>
<p>Tous nos pensionnaires sont bien entretenus et toilettés au besoin. Tous les chiens sont sortis trois fois par jour afin qu’ils puissent faire leurs besoins à l’extérieur, sans compter les promenades de nos visiteurs. Les chats peuvent quotidieement se dégourdir les pattes pendant que nous nettoyons leurs cages.</p>
<div class="footer">
<p> © 2015 Société protectrice des animaux de Thetford Mines
</p>
</div>
</div>
</div>
</body>
</html>
css:
body {
font-weight: normal;
line-height: 1.625;
margin:0 0;
width: 100%;
height: 100%;
}
html{
height: 100%;
width: 100%;
font-size:100%;
margin:0 0;
padding:0px;
}
.nav {
font-family:'Merriweather', serif;
font-size: 11px;
font-weight: bold;
padding:0;
line-height: 18px;
overflow: hidden;
margin: 0;
text-align:center;
}
.nav h1 {
color:#4A96AD;
float:left;
letter-spacing: 1px;
}
.nav p {
display: inline-block;
color:#4A96AD;
font-size: 15px;
margin-left: 14px;
float:right;
}
.right img {
display:inline-block;
float:right;
clear:right;
margin-top:5px;
margin-left: 17px;
margin-right: 16px;
padding:2px
}
.right{
margin-right: 10px;
}
.logo{
display:inline-block;
float:left;
margin-left: 10px;
}
.logo img{
margin-left: 10px;
}
.info {
font-family: 'Merriweather', serif;
margin-left: 150px;
margin-right: 150px;
background-color: white;
margin-bottom:0;
}
.info h2, h3 {
text-align:center;
padding-bottom: 5px;
margin-top:30px;
padding-top: 30px;
}
.imgmain {
float:right;
margin-left: 10px;
margin-right: 1px;
}
.info p {
margin-bottom:50px;
}
.navbar a {
text-decoration:none;
color: #F5F3EE;
font-weight:600;
font-size: 20px
}
.navbar li {
margin: auto;
display:inline;
margin-left: 15px;
}
.navbar ul {
margin-top:0px;
text-align:center;
}
.navbar img {
position: relative;
top: 13px;
width: 4%;
margin: auto;
height:100%;
margin-right: 3px;
background-position: center;
}
.navbar {
width: 100%;
display:inline-block;
background-color: rgb(58, 145, 232);
border-radius: 35px;
}
.main {
background-color:rgba(242, 242, 242, 0.42);
}
a:hover {
color: rgb(255, 180, 35);
}
.footer {
font-family: 'Oswald', sans-serif;
margin-left: 100px;
margin-right: 100px;
background-color: white;
margin-top:0;
border-top: 2px solid;
text-align:center;
margin-top: 80px;
}
.footer p {
margin-bottom: 20px;
margin-top:20px;
}
.container {
margin-left:10px;
margin-right:10px;
}
.imgdisplay {
margin-top: 30px;
background-image:url(rsz_3d0bcd96798d63581f56fa86e77dd8b0.jpg);
height: 500px;
width: 1024px;
background-position: center;
margin: auto;
}
http://jsfiddle.net/uc53L1u5/