API tools faq
paste
Advertisement
SmaJli

Lab02 KI 2019

SmaJli
Apr 9th, 2019
709
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.31 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>Document</title>
  8.  
  9.     <link
  10.      rel="stylesheet"
  11.      href="https://unpkg.com/bootstrap@4.1.0/dist/css/bootstrap.css"
  12.      type="text/css"
  13.    />
  14.     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  15.     <script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script>
  16.     <link rel="stylesheet" href="my.css" type="text/css" />
  17.   </head>
  18.   <body>
  19.     <header>
  20.             <div class="container-fluid mx-0 px-0 h-100">
  21.                         <div class="col-12 h-100 mx-0 px-0">
  22.                             <div class=" welcome-img card  rounded-0 text-center justify-content-center" style="height:860px !important">
  23.                                 <div>
  24.                                     <div class="card-body">
  25.                                         <h1 class="card-title font-weight-bold">Awesome title</h1>
  26.                                         <button type="button" class="btn btn-secondary rounded-0">Find Out More</button>
  27.                                     </div>
  28.                                 </div>
  29.                             </div>
  30.                         </div>
  31.                     </div>
  32.                 </div>
  33.     </header>
  34.  
  35.     <!-- Our services -->
  36.    <div class="container-fluid h-100 w-100" style="background-color:  rgb(63, 91, 177)">
  37.     <div class="row pt-5 pb-2 text-white">
  38.             <div class="col-12 text-center">
  39.                     <h2 class="font-weght-normal">Our Work</h2>
  40.                     <hr width="100px" class="star-primary" style="border: 0.02em solid white">
  41.                 </div>
  42.     </div>
  43.         <div class="row text-center pt-4 mb-5 text-white" >
  44.                 <div class="col-2 offset-2 align-items-center">
  45.                         <div class="ml-5 pt-4 rounded-circle rounded-item ">
  46.                                 <i style="color:  rgb(63, 91, 177)" class="fas fa-cloud"></i>
  47.                         </div>
  48.                          <h2>Service Name</h2>
  49.                     <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
  50.                     <p><a class="btn btn-light rounded-0" href="#" role="button">Learn More</a></p>
  51.                 </div><!-- /.col-lg-4 -->
  52.                 <div class="col-2 justify-content-center">
  53.                         <div class="ml-5 pt-4 rounded-circle rounded-item ">
  54.  
  55.                                 <i style="color:  rgb(63, 91, 177)" class="fas fa-bolt"></i>
  56.                         </div> <h2>Service Name</h2>
  57.                   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
  58.                     <p><a class="btn btn-light rounded-0" href="#" role="button">Learn More</a></p>
  59.                 </div><!-- /.col-lg-4 -->
  60.                 <div class="col-2 justify-content-center">
  61.                         <div class="ml-5 pt-4 rounded-circle rounded-item ">
  62.                                 <i style="color:  rgb(63, 91, 177)" class="fas fa-cat"></i>
  63.                         </div> <h2>Service Name</h2>
  64.                   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
  65.                      <p><a class="btn btn-light rounded-0" href="#" role="button">Learn More</a></p>
  66.                 </div><!-- /.col-lg-4 -->
  67.                 <div class="col-2 justify-content-center">
  68.                         <div class="ml-5 pt-4 rounded-circle rounded-item ">
  69.                                 <i style="color:  rgb(63, 91, 177)" class="fas fa-calculator"></i>
  70.                         </div>  <h2>Service Name</h2>
  71.                     <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
  72.                     <p><a class="btn btn-light rounded-0" href="#" role="button">Learn More</a></p>
  73.                     </div><!-- /.col-lg-4 -->
  74.          </div><!-- /.row -->
  75.             </div>
  76.               <!-- /Our services -->
  77.               <!-- Vertically Centered Text -->
  78.  
  79.               <div class="container-fluid mx-0 px-0 h-100">
  80.                 <div class="col-12 h-100 mx-0 px-0">
  81.                     <div class=" vct-img card  rounded-0 text-center justify-content-center" style="height:380px !important">
  82.                         <div>
  83.                                 <div class="card-body">
  84.                                     <h1 class="card-title text-white font-weight-normal">Vertically Centered Text</h1>
  85.                                 </div>
  86.                             </div>
  87.                         </div>
  88.                     </div>
  89.                 </div>
  90.               <!-- /Vertically Centered Text -->
  91.               <!-- Portfolio -->
  92.               <section>
  93.                   <div class="container-fluid">
  94.                       <div class="row">
  95.                           <div class="col-12 text-center">
  96.                               <h2>Our Work</h2>
  97.                               <hr width="100px" class="star-primary">
  98.                           </div>
  99.                       </div>
  100.                       <div class="row">
  101.                             <div class="col-4 offset-2 card border-0 p-item" >
  102.                                  
  103.                                     <img src="img/portfolio-1.jpg" alt="Portfolio 1 Img">
  104.                             </div>
  105.                             <div class="col-4 card border-0 p-item">
  106.                                     <img src="img/portfolio-2.jpg" alt="Portfolio 2 Img">
  107.                             </div>
  108.  
  109.                       </div>
  110.                       <div class="row mt-4">
  111.                             <div class="col-4 offset-2 card border-0 p-item ">
  112.                                     <img src="img/portfolio-3.jpg" alt="Portfolio 3 Img">
  113.                             </div>
  114.                             <div class="col-4 card border-0 p-item">
  115.                                     <img src="img/portfolio-4.jpg" alt="Portfolio 4 Img">
  116.                             </div>
  117.  
  118.                       </div>
  119.                       <div class="row mt-4  mb-5">
  120.                             <div class="col-12 text-center">
  121.                                     <button type="button" class="btn btn-secondary rounded-0">View More Items</button>
  122.                             </div>
  123.                            
  124.                       </div>
  125.                   </div>
  126.               </section>
  127.  
  128.               <section >
  129.                     <div class="container-fluid mx-0 px-0 h-100"  >
  130.                             <div class="col-12 h-100 mx-0 px-0" >
  131.                                 <div  class="card  rounded-0 text-center justify-content-center" style="background-color: rgb(63, 91, 177); height: 200px;">
  132.                                     <div>
  133.                                             <div class="card-body">
  134.                                                 <h4 class="text-white">Some call to action buttons here</h4>
  135.                                                 <button type="button" class="btn rounded-0">Click Me!</button>
  136.                                                 <button type="button" class="btn btn-info rounded-0">Look at Me!</button>
  137.                                             </div>
  138.                                         </div>
  139.                                 </div>
  140.                             </div>
  141.               </section>
  142.  
  143.               <section>
  144.                   <!--Google map-->
  145. <div id="map-container-google-1" class="z-depth-1-half map-container" style="height: 500px">
  146.         <iframe src="https://maps.google.com/maps?q=skopje+karposh&t=&z=15&ie=UTF8&iwloc=&output=embed" frameborder="0"
  147.          style="border:0; height: 100%; width: 100%;" allowfullscreen></iframe>
  148.       </div>
  149.      
  150.       <!--Google Maps-->
  151.               </section>
  152.  
  153.               <footer >
  154.                     <div class="container-fluid mx-0 px-0 h-100"  >
  155.                             <div class="col-12 h-100 mx-0 px-0" >
  156.                                 <div  class="card rounded-0 text-center justify-content-center bg-white" style="height: 550px;">
  157.                                     <div>
  158.                                             <div class="card-body">
  159.                                                     <b><p>Faculty of Computer Science and Engineering</p> </b>
  160.                                                     <br>
  161.                                                     <p>"Rugjer Boshkoikj" 16</p>
  162.                                                     <p>1000 Skopje, Republic of Macedonia</p>
  163.                                                     <p>(389) 123-4567</p>
  164.                                                     <p><a href="#">sample@finki.ukim.mk</a></p>
  165.                                                     <span class="social-icons"><i class="fab fa-facebook-f"></i>  <i class="fab fa-twitter"></i>  <i class="fas fa-basketball-ball"></i></span>
  166.                                                     <hr width="100px" class="star-primary" style="border: 0.02em solid lightgrey">
  167.  
  168.                                                     <p>Copyright &copy; FINKI 2019</p>
  169.  
  170.                                             </div>
  171.                                     </div>
  172.                                 </div>
  173.                             </div>
  174.                         </footer>
  175.              
  176.    
  177.  
  178.     <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
  179.     <script src="https://unpkg.com/popper.js@1.12.8/dist/popper.js"></script>
  180.     <script src="https://unpkg.com/bootstrap@4.1.0/dist/js/bootstrap.js"></script>
  181.   </body>
  182. </html>
  183.  
  184. CSS(my.css):
  185.  
  186. .welcome-img {
  187.   background: url("img/bg.jpg") center;
  188.   background-size: cover;
  189. }
  190. .vct-img {
  191.   background: url("img/callout.jpg") center;
  192.   background-size: cover;
  193. }
  194. .p-item img {
  195.   background-position: center;
  196.   background-size: contain;
  197. }
  198.  
  199. .rounded-item {
  200.   height: 150px;
  201.   width: 150px;
  202.   font-size: 55px;
  203.   background-color: whitesmoke;
  204. }
  205. .social-icons {
  206.   font-size: 33px;
  207.   color: rgb(63, 91, 177);
  208. }
  209.  
  210. footer p {
  211.   padding: 0;
  212.   margin: 0;
  213. }
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!