969470142 javizame1@gmail.com

sitio web responsive parte 6 index-primera section

En esta primera sección empezaremos a realizar el código, enlazando los iconos al index.html desde la página http://fontastic.me/ luego generaremos texto lorem de prueba para rellenar lo que deseemos.

Tenemos que adaptar desde tamaño móvil para así luego ir a tamaños como Tablet y pc de escritorio o laptop.

Les dejo el código de la primera sección:

 

Index.html

 

<main>

                <section class="principal flex modificador">

                               <h2 class="titulo_principal">Bienvenidos</h2>

                               <div class="promo">

                                               <span class="icon-res"></span>

                                               <h3 class="titulo_promo">Comida Saludable</h3>

                                               <p class="texto_promo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque at id, ea, possimus aliquam voluptates beatae, animi reiciendis tempore alias delectus nam praesentium inventore deserunt molestias nihil repellat molestiae voluptatibus.</p>

                               </div>

                               <div class="promo">

                                               <span class="icon-res2"></span>

                                               <h3 class="titulo_promo">Comida Saludable</h3>

                                               <p class="texto_promo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam commodi labore itaque unde soluta est iure incidunt dolorum doloremque voluptatibus velit, atque earum quam magnam. Laborum repudiandae dolore modi esse.</p>

                               </div>

                               <div class="promo">

                                               <span class="icon-res3"></span>

                                               <h3 class="titulo_promo">Comida Saludable</h3>

                                               <p class="texto_promo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque deleniti magnam architecto, vero cumque quae. Architecto libero placeat nesciunt necessitatibus aut id distinctio, beatae modi, tenetur neque incidunt, dicta aliquid!</p>

                               </div>

                               <div class="promo">

                                               <span class="icon-res4"></span>

                                               <h3 class="titulo_promo">Comida Saludable</h3>

                                               <p class="texto_promo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate non aspernatur natus velit placeat libero beatae illum esse officiis at autem provident nemo necessitatibus eligendi molestias, molestiae sunt cumque distinctio!</p>

                               </div>

                </section>

                <section class="telefono flex modificdor">

                               <h2 class="titulo_telefono">Como comprar</h2>

                               <img src="images/cel.jpg" alt="" class="img_telefono">

                               <div class="descripcion">

                                               <h3 class="numero">1</h3>

                                               <p class="texto_tel">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita cupiditate harum, fugit minima atque delectus? Nihil consequatur, consequuntur vel. Repellendus vitae nostrum, enim possimus aliquam, aspernatur pariatur quo error atque.</p>

                               </div>

                               <div class="descripcion">

                                               <h3 class="numero">2</h3>

                                               <p class="texto_tel">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus perspiciatis repellat asperiores dolorum rerum quo minus quas, amet voluptatem voluptatum sapiente vero illum quod vel maxime, architecto tenetur, saepe. Recusandae!</p>

                               </div>

                               <div class="descripcion">

                                               <h3 class="numero">3</h3>

                                               <p class="texto_tel">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit qui vel iure, quam aspernatur sed dolorum tenetur ratione magnam fuga quasi ut maxime placeat consectetur architecto, dolores nemo debitis illum.</p>

                               </div>

                </section>

               

</main>

 

estilo.css

 

/*========PRINCIPAL===============*/

.titulo_principal{

                width: 100%;

                text-align: center;

                color: #d30203;

                margin-top: 30px;

                margin-bottom: 30px;

                font-size: 40px;

}

 

.titulo_principal:after{

                width: 200px;

                height: 2px;

                background: #d30203;

                display: block;

                content: ';

                margin: 0 auto;

                margin-top: 20px;

}

 

.promo{

                width: 100%;

                margin: 5px;

}

 

.promo [class*="icon-"]:before{

                text-align: center;

                display: block;

                font-size: 80px;

                color: #d30203;

}

.titulo_promo{

                text-align: center;

                margin-top: 20px;

                margin-bottom: 20px;

}

.texto_promo{

                line-height: 30px;

}

/*========TERMINA PRINCIPAL===============*/

 

Sitio web responsive desde cero

Este curso tiene 2:50 horas de puro codigpo bien explicado

Mas informacion

Accede