API tools faq
paste
Advertisement
Jvsierra

vastas emoções e pensamentos imperfeitos

Jvsierra
Nov 20th, 2018
127
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.39 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, initial-scale=1">
  6. <meta http-equiv="x-ua-compatible" content="ie=edge">
  7.  
  8. <!-- Bootstrap CSS -->
  9. <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
  10. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  11. <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
  12.  
  13. <title>Aula de Tableless - Exemplo 3</title>
  14. <style type="text/css">
  15.  
  16. *{text-align: justify;
  17. font-family: calibri, sans-serif;
  18. font-size: 30px;}
  19.  
  20. #principal{width: 95%;
  21. height: 700px;
  22. margin: 0 auto;
  23. position: relative;
  24. background-color: beige;}
  25.  
  26. #topo{width: 100%;
  27. height: 20%;
  28. background-color: white ;}
  29.  
  30. #conteudo{width: 100%;
  31. height: 62%;
  32. float: left;
  33. background-color: white;
  34. z-index: 0;}
  35.  
  36. #conteudo p
  37. {
  38. font-size:15px;
  39. }
  40.  
  41. .centraliza
  42. {
  43. margin:0 auto;
  44. width: 30%;
  45. }
  46.  
  47. #titulo
  48. {
  49. position: relative;
  50. height:5%;
  51. width: 100%;
  52. border-top: 2px solid black;
  53. border-bottom: 2px solid black;
  54. background-color:gray;
  55. color:black;
  56. }
  57.  
  58. #titulo h1
  59. {
  60. margin-top:0.09%;
  61. font-size:30px;
  62. text-align:center;
  63. }
  64.  
  65.  
  66. #rodape{
  67. border-top:2px solid black;
  68. width: 100%;
  69. height: 8%;
  70. float: left;
  71. background-color: green;}
  72. /*-------------------- Classes do Menu -----------------*/
  73.  
  74. #barramenu{
  75. width: 100%;
  76. height: 35%;
  77. position: relative;}
  78.  
  79. #barramenu nav{
  80. padding-top: 1.75%;
  81. padding-right:4%;
  82. width: 10%;
  83. height: 100%;
  84. color: black;
  85. float: right;
  86. position: relative;
  87. z-index:10;
  88. }
  89.  
  90. #barramenu nav:hover{
  91. position: relative;
  92. transition: height 0.2s;
  93. z-index: 10;}
  94.  
  95. .direita
  96. {
  97. float:right;
  98. }
  99.  
  100. .direita a
  101. {
  102. text-decoration: none;
  103. color:black;
  104. }
  105.  
  106. .direita a:hover{
  107. color:orange;
  108. }
  109. </style>
  110. </head>
  111.  
  112. <body>
  113. <section id="principal">
  114. <header id="topo">
  115. <nav id="barramenu">
  116. <a name="topo"></a>
  117. <img src="logo-fipp-440x172.png" alt="LOGO FIPP" />
  118. <nav>Contato</nav>
  119. <nav>Galeria</nav>
  120. <nav>O Curso</nav>
  121. <nav>A Faculdade</nav>
  122. <nav>Início</nav>
  123. </nav>
  124.  
  125. </header>
  126. <section id="titulo">
  127. <h1>Galeria</h1>
  128. </section>
  129. <article id="conteudo">
  130. <div class="container">
  131. <div class="row">
  132. <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
  133. <br />
  134.  
  135. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  136. <ol class="carousel-indicators">
  137. <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  138. <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  139. <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  140. <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  141. <li data-target="#carousel-example-generic" data-slide-to="4"></li>
  142. <li data-target="#carousel-example-generic" data-slide-to="5"></li>
  143. <li data-target="#carousel-example-generic" data-slide-to="6"></li>
  144. </ol>
  145.  
  146. <div class="carousel-inner" role="listbox">
  147. <div class="carousel-item active">
  148. <img src="http://www.unoeste.br/site/imagedb/_17demaio-Infoeste2017/_17demaio-Infoeste20171.jpg?_=13" alt="First Slide" width="800" height="380"/>
  149. </div>
  150.  
  151. <div class="carousel-item">
  152. <img src="http://azoom-sites.rockthemes.net/abboxed/wp-content/uploads/sites/14/2015/05/abboxed-beach-portfolio.jpg" alt="Second Slide" width="800" height="380"/>
  153. </div>
  154.  
  155. <div class="carousel-item">
  156. <img src="http://azoom-sites.rockthemes.net/abboxed/wp-content/uploads/sites/14/2015/05/abboxed-beach-portfolio2.jpg" alt="Third Slide" width="800" height="380"/>
  157.  
  158.  
  159. </div>
  160. </div>
  161. </div>
  162.  
  163. <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
  164. <span class="icon-prev" aria-hidden="true"></span>
  165. <span class="sr-only">Previous</span>
  166. </a>
  167.  
  168. <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
  169. <span class="icon-next" aria-hidden="true"></span>
  170. <span class="sr-only">Next</span>
  171. </a>
  172. </div>
  173. </div>
  174. </div>
  175. </div>
  176. </article>
  177. <footer id="rodape">
  178. <span>2018 - UNOESTE</span>
  179. <span class="direita"><a href="#topo">Voltar ao topo</a></span>
  180. </footer>
  181.  
  182. </section>
  183.  
  184. </body>
  185.  
  186. </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!