API tools faq
paste
Advertisement
LucianoCharles2017

projeto flexbox

LucianoCharles2017
May 31st, 2018
151
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.98 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="pt-BR">
  3.     <head>
  4.         <meta charset="UTF-8"/>
  5.         <meta name="viewport" content="width=device-width,user-scalable=0"/>
  6.         <title>MediCenter</title>
  7.         <link rel="stylesheet" href="assets/css/template.css"/>
  8.     </head>
  9.     <body>
  10.         <!--CABEÇALHO-->
  11.         <header>
  12.             <div class="container">
  13.                 <div class="logo">
  14.                     <a href="#">
  15.                         <img src="assets/images/logo.png"/>
  16.                     </a>
  17.                 </div>
  18.                 <div class="menu">
  19.                     <nav class="">
  20.                         <ul>
  21.                             <li class="active"><a href="#">Home</a></li>
  22.                             <li><a href="#">Home</a></li>
  23.                             <li><a href="#">Home</a></li>
  24.                             <li><a href="#">Home</a></li>
  25.                             <li><a href="#">Home</a></li>
  26.                             <li><a href="#">Home</a></li>
  27.                         </ul>
  28.                     </nav>
  29.                 </div>
  30.             </div>
  31.         </header>
  32.  
  33.         <!-- FIM DO CABEÇALHO -->
  34.  
  35.         <!--BANNER-->
  36.         <section id="banner">
  37.             <div class="container column">
  38.                 <div class="banner_headline">
  39.                     <h1>Top notch experince</h1>
  40.                     <h2>Medicenter is a responsive template perfect for all screen sizes</h2>
  41.                 </div>
  42.                 <div class="banner_options">
  43.                     <div class="banner1">
  44.                         <div class="banner_title">Emergency Case</div>
  45.                         <div class="banner_desc">
  46.                             <p>É um fato conhecido de todos que um leitor se distrairá com o conteúdo de texto legível...</p>
  47.                         </div>
  48.                         <a href="#">Read more...</a>
  49.                     </div>
  50.                     <div class="banner2">
  51.                         <div class="banner_title">Doctors Timetable</div>
  52.                         <div class="banner_desc">
  53.                             <p>É um fato conhecido de todos que um leitor se distrairá com o conteúdo de texto legível...</p>
  54.                         </div>
  55.                         <a href="#">Read more...</a>
  56.                     </div>
  57.                     <div class="banner3">
  58.                         <div class="banner_title">Opening Hours</div>
  59.                         <div class="banner_desc">
  60.                             <ul>
  61.                                 <li>Monday - Friday</li>
  62.                                 <li>8:00 - 17:00</li>
  63.                             </ul>
  64.                             <ul>
  65.                                 <li>Saturday</li>
  66.                                 <li>9:30 - 17:30</li>
  67.                             </ul>
  68.                             <ul>
  69.                                 <li>Sunday</li>
  70.                                 <li>9:30 - 15:00</li>
  71.                             </ul>
  72.                         </div>
  73.                     </div>
  74.  
  75.                 </div>
  76.             </div>
  77.         </section>
  78.  
  79.         <!--CONTEÚDO-->
  80.         <section id="geral">
  81.             <div class="container">
  82.  
  83.                 <main>
  84.                     <div class="widget">
  85.                         <div class="widget_title"></div>
  86.                         <div class="widget_title_text"><h3>Latest News</h3></div>
  87.                         <div class="widget_title_bar"></div>
  88.                         <div class="widget_body flex">
  89.                             <?php for ($i = 0; $i < 4; $i++) { ?>
  90.                                 <article>
  91.                                     <a href="#">
  92.                                         <div class="news_data">
  93.                                             <div class="news_posted_at">01 JAN 17</div>
  94.                                             <div class="news_comments">2</div>
  95.                                         </div>
  96.                                         <div class="news_thumbnail">
  97.                                             <img src="assets/images/dr.jpg" alt="Imagem" title="Imagem"/>
  98.                                         </div>
  99.                                         <div class="news_tilte">
  100.                                             <h4>Lorem Ipsun dolor sit amat velum</h4>
  101.                                         </div>
  102.                                         <div class="news_resume">
  103.                                             <p>
  104.                                                 Lorem Ipsum é simplesmente uma simulação de texto da
  105.                                                 indústria tipográfica e de impressos,
  106.                                                 e vem sendo utilizado desde o século XVI,
  107.                                                 quando um impressor desconhecido pegou uma bandeja de tipos
  108.                                                 e os embaralhou para fazer um livro de modelos de tipos.
  109.                                                 Lorem Ipsum sobreviveu não só a cinco séculos,
  110.                                                 como também ao salto para a editoração eletrônica,
  111.                                                 permanecendo essencialmente inalterado.
  112.                                             </p>
  113.                                         </div>
  114.                                     </a>
  115.                                 </article>
  116.                             <?php }
  117.                            ?>
  118.                         </div>
  119.                     </div>
  120.                 </main>
  121.  
  122.                 <!--ASIDE-->
  123.                 <aside>
  124.                     <div class = "widget">
  125.                         <div class = "widget_title"></div>
  126.                         <div class = "widget_title_text"><h3>Departments</h3></div>
  127.                         <div class = "widget_title_bar"></div>
  128.                         <div class = "widget_body">
  129.                             <div class = "departments"></div>
  130.                             <div class = "departments"></div>
  131.                             <div class = "departments"></div>
  132.                             <div class = "departments"></div>
  133.                             <div class = "departments"></div>
  134.                             <div class = "departments"></div>
  135.                         </div>
  136.                     </div>
  137.  
  138.                     <div class = "widget">
  139.                         <div class = "widget_title appointment"></div>
  140.                         <div class = "widget_title_text"><h3>Make An Appointment</h3></div>
  141.                         <div class = "widget_title_bar"></div>
  142.                         <div class = "widget_body">
  143.                             <div class = "appointment_msg">
  144.                                 <p>É um fato conhecido de todos que um leitor se distrairá com o conteúdo de texto legível...</p>
  145.  
  146.                                 <div class = "address">
  147.  
  148.                                 </div>
  149.                                 <div class = "address">
  150.                                     <div class = "box_img"></div>
  151.                                     <div class = "address_text"><p>by phone <span>1-846-646-4308</span></p></div>
  152.                                 </div>
  153.                                 <div class = "address">
  154.                                     <div class = "box_img"></div>
  155.                                     <div class = "address_text"><p>by phone <span>1-846-646-4308</span></p></div>
  156.                                 </div>
  157.                                 <div class = "address">
  158.                                     <div class = "box_img"></div>
  159.                                     <div class = "address_text"><p>by phone <span>1-846-646-4308</span></p></div>
  160.                                 </div>
  161.                             </div>
  162.                         </div>
  163.                     </div>
  164.                 </aside>
  165.             </div>
  166.         </section>
  167.  
  168.         <!-- RODAPÉ-->
  169.         <footer>
  170.             <div class="container flexColumn">
  171.                 <div class="footer_menu">
  172.                     <div class="fm_1">
  173.  
  174.                     </div>
  175.                     <div class="fm_2">
  176.  
  177.                     </div>
  178.                     <div class="fm_3">
  179.  
  180.                     </div>
  181.                 </div>
  182.                 <div class="footer_area">
  183.                     <div class="footer_areaitem">
  184.                         <div class = "widget">
  185.                             <div class = "widget_title"></div>
  186.                             <div class = "widget_title_text"><h3>Medicenter Clinic</h3></div>
  187.                             <div class = "widget_title_bar"></div>
  188.                             <div class = "widget_body">
  189.  
  190.                             </div>
  191.                         </div>
  192.                     </div>
  193.                     <div class="footer_areaitem">
  194.                         <div class = "widget">
  195.                             <div class = "widget_title"></div>
  196.                             <div class = "widget_title_text"><h3>Latest Posts</h3></div>
  197.                             <div class = "widget_title_bar"></div>
  198.                             <div class = "widget_body">
  199.  
  200.                             </div>
  201.                         </div>
  202.                     </div>
  203.                     <div class="footer_areaitem">
  204.                         <div class = "widget">
  205.                             <div class = "widget_title"></div>
  206.                             <div class = "widget_title_text"><h3>Latest Tweets</h3></div>
  207.                             <div class = "widget_title_bar"></div>
  208.                             <div class = "widget_body">
  209.  
  210.                             </div>
  211.                         </div>
  212.                     </div>
  213.                 </div>
  214.                 <div class="footer_copy">
  215.                     <p>Copyright - Todos os direitos reservados</p>
  216.                 </div>
  217.             </div>
  218.         </footer>
  219.     </body>
  220. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!