API tools faq
paste
Advertisement
SmaJli

Business Webdizajn Ispitna

SmaJli
Sep 11th, 2021
848
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.46 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Business Solutions</title>
  6.     <link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
  7.     <style>
  8.         /* Name, surname and index */
  9.  
  10. /* Good Luck :) */
  11.  
  12. .border {
  13.   border: 1px solid black;
  14.   /* background-color: red; */
  15. }
  16.  
  17. #header {
  18.   width: 1300px;
  19.   display: flex;
  20.   align-items: center;
  21.   justify-content: space-between;
  22.   margin: 0 auto;
  23. }
  24.  
  25. #header #logo {
  26.   width: 355px;
  27.   height: 144px;
  28.   background: url("../images/logo.jpg");
  29. }
  30.  
  31. #header ul {
  32.   display: flex;
  33.   list-style-type: none;
  34.   justify-content: space-around;
  35.   width: 900px;
  36.   margin: 0;
  37.   padding: 0ch;
  38. }
  39.  
  40. #header ul li {
  41.   height: 30px;
  42.   margin-right: 10px;
  43.  
  44.   width: 178px;
  45.   background-image: url("../images/menu.gif");
  46.   background-position: 2px -2px;
  47.  
  48.   display: flex;
  49.   justify-content: center;
  50.   align-items: center;
  51.  
  52.   margin: 0;
  53. }
  54.  
  55. #header ul li a {
  56.   text-decoration: none;
  57.   color: black;
  58.   text-transform: uppercase;
  59.   font-family: Arial, Helvetica, sans-serif;
  60. }
  61.  
  62. #header ul li:hover {
  63.   background-position: 2px -40px;
  64. }
  65. #header ul li:hover a {
  66.   background-position: 2px -40px;
  67.   color: black !important;
  68. }
  69. #header ul li.selected {
  70.   background-position: 2px -76px;
  71. }
  72. #header ul li.selected a {
  73.   color: white;
  74. }
  75. #header ul li:hover {
  76.   background-position: 2px -40px;
  77. }
  78.  
  79. #body {
  80.   width: 1300px;
  81.   margin: 0 auto;
  82. }
  83.  
  84. #body .header {
  85.   /* background-image: url("../images/smiling-man.jpg");
  86.   background-repeat: no-repeat;
  87.   background-position: right center; */
  88.  
  89.   background: url("../images/bg-body.gif");
  90.   width: 100vw;
  91.   margin-left: -320px;
  92.   height: 480px;
  93.   display: flex;
  94.   /* align-items: center; */
  95.   padding-top: 31px;
  96.   justify-content: flex-start;
  97. }
  98.  
  99. #body .header > div {
  100.   width: 1300px;
  101.   margin: 0 auto;
  102.   display: flex;
  103.   flex-direction: column;
  104. }
  105.  
  106. #body .header > div ul {
  107.   display: flex;
  108.   justify-content: flex-start;
  109.   margin: 0;
  110.   padding: 0;
  111.   list-style-type: none;
  112. }
  113.  
  114. #body .header > div ul li:first-child {
  115.   display: inline-block;
  116.   width: 190px;
  117.   /* margin-right: 20px; */
  118.   height: 190px;
  119.   background-image: url("../images/discuss.jpg");
  120. }
  121. #body .header > div ul li:nth-child(2) {
  122.   background-image: url("../images/flags.jpg");
  123. }
  124.  
  125. #body .header > div ul li:nth-child(3) {
  126.   background-image: url("../images/graph.jpg");
  127. }
  128.  
  129. #body .header > div div {
  130.   background: url("../images/smiling-man.jpg") no-repeat;
  131.   display: flex;
  132.   padding-left: 12px;
  133.   flex-direction: column-reverse;
  134. }
  135. #body .header > div * {
  136.   width: 500px;
  137. }
  138. #body .header > div h3 {
  139.   font-weight: 600;
  140.   font-size: 22px;
  141.   font-family: Arial, Helvetica, sans-serif;
  142. }
  143. #body .header > div h3 {
  144.   color: gray;
  145. }
  146. #body .header > div h3 a {
  147.   text-decoration: none;
  148.  
  149.   color: gray;
  150. }
  151. #body .header > div p {
  152.   color: darkblue;
  153.   font-weight: 500;
  154. }
  155.  
  156. #body .body {
  157.   width: 1300px;
  158.   margin: 0 auto;
  159.   display: grid;
  160.   grid-row: auto;
  161.   grid-template-columns: 200px 1fr 200px;
  162. }
  163. #body .body .section:first-child {
  164.   background: url("../images/bg-article.gif");
  165.   height: 200px;
  166.   display: flex;
  167.   justify-content: center;
  168.   align-items: center;
  169. }
  170. #body .body .section:first-child a {
  171.   background: url("../images/gears.jpg");
  172.   display: flex;
  173.   justify-content: center;
  174.   align-items: flex-end;
  175.   width: 145px;
  176.   height: 145px;
  177. }
  178.  
  179. #body .body .section:last-child {
  180.   background: url("../images/bg-article.gif");
  181.   height: 200px;
  182.  
  183.   display: flex;
  184.   justify-content: center;
  185.   align-items: center;
  186. }
  187. #body .body .article {
  188.   border: 2px solid white;
  189.   background: url("../images/graph2.jpg") no-repeat,
  190.     url("../images/bg-article.gif");
  191.   height: 200px;
  192.   padding-left: 180px;
  193. }
  194. #body .body .section:last-child a {
  195.   display: flex;
  196.   flex-direction: column;
  197.   justify-content: center;
  198.   align-items: center;
  199.   width: 145px;
  200.   height: 145px;
  201. }
  202.  
  203. #body .footer {
  204.   display: grid;
  205.   grid-template-columns: 200px 1fr 200px;
  206. }
  207.  
  208. #body .footer ul {
  209.   margin: 0;
  210.   padding: 0;
  211.   list-style-type: none;
  212. }
  213.  
  214. #body .footer .featured {
  215.   padding: 20px;
  216. }
  217.  
  218. #body .footer {
  219.   color: rgb(43, 43, 43);
  220.   font-family: Arial, Helvetica, sans-serif;
  221. }
  222.  
  223. #body .footer span {
  224.   color: rgb(172, 172, 172);
  225.   font-size: 12px;
  226.   font-family: Arial, Helvetica, sans-serif;
  227. }
  228.  
  229. #body .footer li:not(:last-child) {
  230.   padding-bottom: 10px;
  231.   border-bottom: 1px dashed gray;
  232. }
  233.  
  234. #body .footer h3,
  235. #body .footer h3 a {
  236.   color: darkblue;
  237.   font-size: 20px;
  238.   line-height: 40px;
  239.   font-family: Arial, Helvetica, sans-serif;
  240.   text-transform: uppercase;
  241.   text-decoration: none;
  242. }
  243. #body .footer p {
  244.   display: inline-block;
  245. }
  246.  
  247. #body .footer .section:last-child ul {
  248.   margin: unset;
  249.   padding: unset;
  250.   list-style-type: unset;
  251. }
  252.  
  253. #footer {
  254.   width: 1300px;
  255.   margin: 0 auto;
  256. }
  257.  
  258. #footer > div:first-child {
  259.   display: flex;
  260.   align-items: center;
  261.   justify-content: space-around;
  262. }
  263.  
  264. #footer > div:first-child > div {
  265.   text-align: center;
  266. }
  267. #footer > div:first-child h3 {
  268.   text-transform: uppercase;
  269.   font-weight: bold;
  270. }
  271.  
  272. #footer > div:first-child ul {
  273.   margin: 0;
  274.   padding: 0;
  275.   list-style-type: none;
  276. }
  277.  
  278. .facebook {
  279.   background: url("../images/icons.gif");
  280.   display: inline-block;
  281.   width: 40px;
  282.   color: transparent;
  283.   height: 32px;
  284. }
  285. .twitter {
  286.   background: url("../images/icons.gif");
  287.   background-position: 2px 32px;
  288.   display: inline-block;
  289.   color: transparent;
  290.  
  291.   width: 40px;
  292.   height: 32px;
  293. }
  294. #footer > div:last-child {
  295.     display: flex;
  296.     color: gray;
  297.     padding: 20px 0;
  298.     justify-content: center;
  299.   }
  300.     </style>
  301. </head>
  302.   <body>
  303.     <div id="header" class=" ">
  304.       <div id="logo">
  305.         <a href="index.html"></a>
  306.       </div>
  307.       <ul class="">
  308.         <li class="selected">
  309.           <a href="index.html"><span>home</span></a>
  310.         </li>
  311.         <li>
  312.           <a href="#"><span>about us</span></a>
  313.         </li>
  314.         <li>
  315.           <a href="#"><span>services</span></a>
  316.         </li>
  317.         <li>
  318.           <a href="#"><span>products</span></a>
  319.         </li>
  320.         <li>
  321.           <a href="#"><span>contact us</span></a>
  322.         </li>
  323.       </ul>
  324.     </div>
  325.     <div id="body" class="">
  326.       <div class="header">
  327.         <div class="">
  328.           <ul>
  329.             <li></li>
  330.             <li></li>
  331.             <li></li>
  332.           </ul>
  333.           <div>
  334.             <h3>
  335.               This website webpage has been designed by
  336.               <span
  337.                ><a href="www.finki.ukim.mk/">FINKI UKIM SKOPJE</a> for you, for
  338.                 free.</span
  339.              >
  340.             </h3>
  341.             <p>
  342.               You can remove any link to our website from this website webpage,
  343.               you're free to use this website webpage without linking back to
  344.               us.If you're having problems editing this website webpage, then
  345.               don't hesitate to ask for help on the
  346.               <a href="www.finki.ukim.mk/forum">Forum</a>.
  347.             </p>
  348.           </div>
  349.         </div>
  350.       </div>
  351.       <div class="body">
  352.         <div class="section">
  353.           <a href="#"> services </a>
  354.         </div>
  355.         <div class="article">
  356.           <h4>
  357.             This website webpage has been designed by
  358.             <a href="www.finki.ukim.mk/">FINKI UKIM SKOPJE</a>
  359.           </h4>
  360.           <p>
  361.             for you, for free. You can replace all this text with your own text.
  362.             You can remove any link to our website from this website webpage,
  363.             you're free to use this website webpage without linking back to us.
  364.           </p>
  365.         </div>
  366.         <div class="section">
  367.           <a href="#"><img src="images/globe.jpg" alt="" /> about</a>
  368.         </div>
  369.       </div>
  370.       <div class="footer">
  371.         <div class="section">
  372.           <h3><a href="#">blog</a></h3>
  373.           <ul>
  374.             <li>
  375.               <p>This website webpage has been designed</p>
  376.               <span>Sept 21, by Nullam | 99 Views | 69 Comments</span>
  377.             </li>
  378.             <li>
  379.               <p>
  380.                 by <a href="www.finki.ukim.mk/">FINKI UKIM SKOPJE</a> for you,
  381.                 for free. You can replace all this text with your own text.
  382.               </p>
  383.               <span>Sept 21, by Nullam | 99 Views | 69 Comments</span>
  384.             </li>
  385.             <li>
  386.               <p>
  387.                 Class aptent taciti sociosqu ad litora torquent per conubia
  388.                 nostra, per inceptos himenaeos.
  389.               </p>
  390.               <span>Sept 21, by Nullam | 99 Views | 69 Comments</span>
  391.             </li>
  392.           </ul>
  393.         </div>
  394.         <div class="featured">
  395.           <ul>
  396.             <li>
  397.               <h3>
  398.                 If you're having problems editing this website webpage, then
  399.                 don't hesitate to ask for help on the
  400.                 <a href="www.finki.ukim.mk/forum">Forum</a>.
  401.               </h3>
  402.               <p>
  403.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu
  404.                 augue vel dui cursus porta. Nulla sit amet tellus urna
  405.               </p>
  406.               <span>Sept 21, by Nullam | 99 Views | 69 Comments</span>
  407.             </li>
  408.             <li>
  409.               <h3>
  410.                 Vestibulum tristique, dui a vestibulum blandit, mi elit laoreet
  411.                 nulla consequat nec quam
  412.               </h3>
  413.               <img src="images/discussing.jpg" alt="" />
  414.               <p>
  415.                 Morbi non leo augue, et hendrerit lectus. Pellentesque ultricies
  416.                 sapien ornare ipsum tempor lobortis ullamcorper urna
  417.               </p>
  418.               <span>Sept 21, by Nullam | 99 Views | 69 Comments</span>
  419.             </li>
  420.           </ul>
  421.         </div>
  422.         <div class="section">
  423.           <h3>suspendisse aliquam</h3>
  424.           <ul class="news">
  425.             <li>
  426.               <p>You can remove any link to our</p>
  427.             </li>
  428.             <li>
  429.               <p>website from this website webpage, you're free to use</p>
  430.             </li>
  431.             <li>
  432.               <p>this website webpage without linking back to us.</p>
  433.             </li>
  434.             <li>
  435.               <p>lorem ipsum dolor sit amet</p>
  436.             </li>
  437.             <li>
  438.               <p>consectetur adipiscing nunc eu augue vel dui cursus</p>
  439.             </li>
  440.           </ul>
  441.         </div>
  442.       </div>
  443.     </div>
  444.     <div id="footer">
  445.       <div>
  446.         <div>
  447.           <h3>america</h3>
  448.           <ul>
  449.             <li>457-380-1654 main</li>
  450.             <li>257-301-9417 toll free</li>
  451.           </ul>
  452.         </div>
  453.         <div>
  454.           <h3>europe</h3>
  455.           <ul>
  456.             <li>457-380-1654 main</li>
  457.             <li>257-301-9417 toll free</li>
  458.           </ul>
  459.         </div>
  460.         <div>
  461.           <h3>canada</h3>
  462.           <ul>
  463.             <li>457-380-1654 main</li>
  464.             <li>257-301-9417 toll free</li>
  465.           </ul>
  466.         </div>
  467.         <div>
  468.           <h3>middle east</h3>
  469.           <ul>
  470.             <li>457-380-1654 main</li>
  471.             <li>257-301-9417 toll free</li>
  472.           </ul>
  473.         </div>
  474.         <div>
  475.           <h3>follow us:</h3>
  476.           <a class="facebook" href="#" target="_blank">facebook</a>
  477.           <a class="twitter" href="#" target="_blank">twitter</a>
  478.         </div>
  479.       </div>
  480.       <div>
  481.         <p>&copy; Copyright 2012. All rights reserved</p>
  482.       </div>
  483.     </div>
  484.   </body>
  485. </html>
  486. Ï
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!