Interfaz Principal de la Página
Tamaño de Escritorio:
Tamaño de Tablet:
Tamaño de Celular Movil:
Armado de la Página:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" href="../../PracticasWEB/pagWeb/img/logo-farmacia.png" type="image/x-icon">
<!-- iconos-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Estilos -->
<link rel="stylesheet" href="css/style.css">
<!-- Slider-->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script
src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js">
</script>
<title>Farmacia MiFarma</title>
</head>
<body>
<div id="wrapper">
<div class="banner-wrapper">
<header>
<div class="header-inner">
<a href="index.html" id="logo">
<img src="img/logo-farmacia.png" alt="Farmacia.com">
<h2>Farmacia <span>"MiFarma"</span></h2>
</a>
<nav>
<a href="#" id="menu-icon">
<i class="fa fa-bars"></i>
</a>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="#producto">Productos</a></li>
<li><a href="#quien">Quienes Somos</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</div>
</header>
<section class="slide-wrap">
<ul class="fa1">
<li><img src="img/slider/fa1.png" alt="Mostrador"></li>
<li><img src="img/slider/fa2.png" alt="Mostrador"></li>
<li><img src="img/slider/fa3.png" alt="Mostrador"></li>
</ul>
</section>
</div>
</div>
<section class="one-third" id="skills">
<div class="icon-wrap">
<i class="fa fa-desktop"></i>
</div>
<h3>Farmacia</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Corporis et nemo, commodi quaerat reiciendis deleniti laboriosam sequi
possimus perspiciatis similique distinctio odit maiores fugiat voluptatem
porro sapiente doloribus quos labore.</p>
</section>
<section class="one-third" id="skills">
<div class="icon-wrap">
<i class="fa fa-pencil-square-o"></i>
</div>
<h3>MiFarma</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Corporis et nemo, commodi quaerat reiciendis deleniti laboriosam sequi
possimus perspiciatis similique distinctio odit maiores fugiat voluptatem
porro sapiente doloribus quos labore.</p>
</section>
<section class="one-third" id="skills">
<div class="icon-wrap">
<i class="fa fa-file-code-o"></i>
</div>
<h3>Desarrollo</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Corporis et nemo, commodi quaerat reiciendis deleniti laboriosam sequi
possimus perspiciatis similique distinctio odit maiores fugiat voluptatem
porro sapiente doloribus quos labore.</p>
</section>
<!--Services-->
<div class="one-third-padding" id="services">
<h3>Productos</h3>
<img src="img/pics/que.png" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Corporis et nemo, commodi quaerat reiciendis deleniti laboriosam sequi
possimus perspiciatis similique distinctio odit maiores fugiat voluptatem
porro sapiente doloribus quos labore.</p>
</div>
<div class="one-third-padding" id="services">
<h3>Productos</h3>
<img src="img/pics/somos.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Corporis et nemo, commodi quaerat reiciendis deleniti laboriosam sequi
possimus perspiciatis similique distinctio odit maiores fugiat voluptatem
porro sapiente doloribus quos labore.</p>
</div>
<div class="one-third-padding" id="services">
<h3>Productos</h3>
<img src="img/pics/hacemos.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Corporis et nemo, commodi quaerat reiciendis deleniti laboriosam sequi
possimus perspiciatis similique distinctio odit maiores fugiat voluptatem
porro sapiente doloribus quos labore.</p>
</div>
<footer>
<div class="banner-wrapper">
<div class="icon-text">
<div class="icon-text-icon">
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="#skills">Habilidades</a></li>
<li><a href="#skills">Portafolio</a></li>
<li><a href="#">Nuestro Equipo</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
<div class="icon-text-text">
<ul>
<li><a href="mailto:bendanp95@gmail.com" target="_blank">
<i class="fa fa-envelope-o"></i></a></li>
<li><a href="http://www.facebook.com" target="_blank">
<i class="fa fa-facebook"></i></a></li>
<li><a href="http://www.twitter.com" target="_blank">
<i class="fa fa-twitter"></i></a></li>
<li><a href="http://www.youtube.com" target="_blank">
<i class="fa fa-youtube"></i></a></li>
</ul>
</div>
</div>
</div>
</footer>
<!--Script-->
<script>
$(document).ready(function(){
$('.fa1').bxSlider({
mode: 'fade'
})
$('.fa2').bxSlider({
mode: 'fade'
})
$('.fa3').bxSlider({
mode: 'fade'
})
})
</script>
</body>
</html>
Dandole Estilos:
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background: #87f195;
font-family: sans-serif;
margin: 0 auto;
}
p {
color: #000000;
font-size: 160%;
line-height: 155%;
padding: 3%;
text-indent: 2%;
text-align: justify;
}
h2 {
font-size: 175%;
display: block;
margin: 0 auto;
padding: 25px;
color: #ff009d;
float: left;
}
h2:hover {
color: #ff006a;
}
span {
font-family: 'Comic Sans MS';
}
h3 {
font-size: 175%;
line-height: 155%;
font-weight: 500;
color: #524c56;
text-align: center;
text-transform: uppercase;
padding: 0;
}
a {
color: #9dff00;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #c3d7df;
}
img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
width: auto;
margin-bottom: -4px;
}
#wrapper {
max-width: 1200px;
margin: 0 auto;
}
#banner-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 0 3% 0;
}
header {
width: 100%;
height: 100px;
background: #000000;
top: 0;
left: 0;
margin-bottom: 40px;
}
header #logo img{
margin: 20px;
float: left;
width: 50px;
}
/* NAVIGATION*/
nav {
float: right;
padding: 25px 20px 0px 0px;
}
#menu-icon {
display: none;
font-size: 50px;
}
ul {
list-style: none;
}
nav ul li {
font-size: 150%;
display: inline-block;
padding: 10px;
}
nav ul li a {
color: #6991AC;
}
.current {
color: #3F5767;
}
a:hover {
color: #a5bdcd;
}
.one-third {
width: 31.5%;
float: left;
padding: 10px;
text-align: center;
}
.icon-wrap {
margin: 0 auto;
width: 120px;
height: 120px;
background-color: #6991ac;
border-radius: 125px;
text-align: center;
margin-top: 3%;
}
.icon-wrap i {
text-align: center;
color: #ffffff;
font-size: 450%;
padding: 20%;
}
/* Seccion 2*/
.left-col {
float: left;
margin: 0 auto;
width: 60%;
height: auto;
padding: 1%;
}
.sidebar {
float: right;
margin: 0 auto;
width: 32%;
height: auto;
padding: 1%;
}
/* para la class ONE THIRD PADDING*/
.one-third-padding {
width: 29%;
float: left;
margin: 2% 2%;
}
.clearfix-padding {
clear: both;
padding: 2%;
}
footer {
background: #2c3e50;
width: 100%;
overflow: auto;
}
.icon-text {
width: 100%;
margin: 0 auto;
}
.icon-text-icon {
float: left;
width: 20%;
padding: 4%;
}
.icon-text-text {
float: left;
width: 60%;
padding: 4% 4% 2% 0;
}
.footer-nav {
text-align: right;
}
.footer-nav a {
font-size: 160%;
color: #c3d7df;
font-weight: 300;
}
.footer-nav a:hover {
color: #f5f5f5;
}
.social {
list-style-type: none;
text-align: center;
}
.social li {
display: inline;
}
.social i {
font-size: 420%;
margin: 1%;
padding: 5%;
color: #c3d7df;
}
.social i:hover {
color: #f5f5f5;
}
footer.second {
border-top: 1px solid #aadcd2;
text-align: center;
margin: 0;
}
footer.second p, .second a {
text-align: center;
color: #fff;
font-size: 160%;
line-height: 155%;
}
@media screen and (max-width: 1000px) {
p {
font-size: 130%;
}
h3 {
font-size: 150%;
}
h2 {
padding: 30px;
float: left;
}
header {
height: 100px;
position: relative;
}
header #logo {
margin: 15px 0 20px -25px;
}
#menu-icon {
display: inline-block;
}
nav:hover ul {
display: block;
}
nav ul, nav:active ul {
display: none;
z-index: 1000;
position: absolute;
padding: 20px;
background: #f5f5f5;
border: 1px solid #a5bdcd;
right: 20px;
width: 30%;
opacity: .95;
}
nav li {
text-align: center;
width: 100%;
}
.one-third {
float: left;
width: 100%;
}
.icon-wrap {
height: 80px;
width: 80px;
margin-top: 3%;
}
.icon-wrap i {
font-size: 250%;
padding-top: 27%;
}
.left-col {
width: 100%;
padding: 0;
}
.sidebar {
width: 100%;
}
.one-third-padding {
width: 98%;
margin: 0;
padding: 1%;
}
.icon-text-icon {
width: 100%;
padding: 0 0 2% 0;
}
.icon-text-text {
width: 100%;
padding: 2% 0 0 0;
font-size: 80%;
}
.footer-nav {
margin: 0 auto;
text-align: center;
padding: 5%;
}
.footer-nav li {
padding: 1%;
}
}
