Facebook
From ja, 5 Years ago, written in Plain Text.
Embed
Download Paste or View Raw
Hits: 253
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3.  
  4. <head>
  5.         <meta charset="utf-8"/>
  6.         <title>Tytuł</title>
  7.         <meta name="description" content="Opis strony" />
  8.         <meta name="keywords" content="słowa, kluczowe" />
  9.         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  10.         <link rel="stylesheet" type="text/css" href="style.css" />
  11. </head>
  12.  
  13. <body>
  14.        
  15.         <div id="container" >
  16.        
  17.                 <header>
  18.                          Kacper Róg
  19.                        
  20.        
  21.                 </header>
  22.        
  23.                 <nav>
  24.                        
  25.                         <div class="opcja">
  26.                                 <a href="C:\Users\Kacper\Desktop\zadanie2\main.html" >Strona Głowna</a>
  27.                         </div>
  28.                        
  29.                         <div class="opcja">
  30.                                 <a href="#miejsce">Moje zainteresowania</a>
  31.                         </div>
  32.                        
  33.                        
  34.                        
  35.                         <div class="opcja">
  36.                                 <a href="#miejsce1">Galeria</a>
  37.                         </div>
  38.                
  39.                         <div class="opcja">
  40.                                 <a href="#miejsce2">Kontakt</a>
  41.                         </div>
  42.                        
  43.                         <div style="clear:both"></div>
  44.                        
  45.                         </nav>
  46.        
  47.         <main>
  48.        
  49.                
  50.                 <div id="blok1">
  51.                                 Piłka Nożna
  52.                 </div>
  53.                
  54.                 <div id="blok2">
  55.                         <a name="miejsce">Informatyka</a>
  56.                 </div>
  57.                
  58.                 <div style="clear:both"></div>
  59.                
  60.                 <div id="blok3">
  61.                         Akrobatyka
  62.                 </div>
  63.                
  64.                 <div id="blok4">
  65.                         Jazda na Quadzie
  66.                 </div>
  67.                
  68.                 <div style="clear:both"></div>
  69.        
  70.         </main>
  71.        
  72.         <div id="galeria">
  73.                 <a name="miejsce1">Galeria</a>
  74.         </div>
  75.        
  76.         <section>
  77.                 <div class="pilka">
  78.                 <img src="pilka1.jpg" />
  79.                 </div>
  80.                
  81.                 <div class="pilka">
  82.                 <img src="pilka2.jpg" />
  83.                 </div>
  84.                
  85.                 <div class="pilka">
  86.                 <img src="pilka3.jpg" />
  87.                 </div>
  88.                
  89.                 <div style="clear:both"></div>
  90.                
  91.                 <div class="informatyka">
  92.                 <img src="informatyka1.png" />
  93.                 </div>
  94.                
  95.                 <div class="informatyka">
  96.                 <img src="informatyka2.jpg" />
  97.                 </div>
  98.                
  99.                 <div class="informatyka">
  100.                 <img src="informatyka3.jpg" />
  101.                 </div>
  102.                
  103.                 <div style="clear:both"></div>
  104.                
  105.                 <div class="akrobatyka">
  106.                 <img src="akrobatyka1.jpg" />
  107.                 </div>
  108.                
  109.                 <div class="akrobatyka">
  110.                 <img src="akrobatyka2.jpg" />
  111.                 </div>
  112.                
  113.                 <div class="akrobatyka">
  114.                 <img src="akrobatyka3.png" />
  115.                 </div>
  116.                
  117.                 <div style="clear:both"></div>
  118.                
  119.                 <div class="quad">
  120.                 <img src="quad1.jpg" />
  121.                 </div>
  122.                
  123.                 <div class="quad">
  124.                 <img src="quad2.jpg" />
  125.                 </div>
  126.                
  127.                 <div class="quad">
  128.                 <img src="quad3.jpg" />
  129.                 </div>
  130.                
  131.                 <div style="clear:both"></div>
  132.                
  133.                
  134.                 <div id="kontakt">
  135.                 <a name="miejsce2">Kontakt</a>
  136.         </div>
  137.                
  138.                 <div class="kontaktt">
  139.                 <a href="https://twitter.com/?lang=pl"><img src="kontakt1.png" /></a>
  140.                 </div>
  141.                
  142.                 <div class="kontaktt">
  143.                 <a href="https://www.instagram.com/"><img src="kontakt2.jpg" /></a>
  144.                 </div>
  145.                
  146.                 <div class="kontaktt">
  147.                 <a href="https://facebook.com"><img src="kontakt3.png" /></a>
  148.                 </div>
  149.                
  150.         </section>
  151.        
  152.        
  153.        
  154.         </div>
  155. </body>
  156.  
  157. </html>
  158.  
  159.  
  160.  
  161.  
  162. ##########################################
  163.  
  164. I CSS
  165.  
  166.  
  167.  
  168.  
  169.  
  170. body
  171. {
  172.         box-sizing:border-box;
  173.         margin: 0 6vw auto 6vw;
  174.         background:#FCF3CF;
  175. }
  176.  
  177. header
  178. {
  179.         text-align:center;
  180.         background:#F1C40F;
  181.         font-size:65px;
  182.         padding-top:15px;
  183.         padding-bottom:15px;
  184.         font-family:Verdana;
  185.         letter-spacing:4px;
  186.         font-style:oblique;
  187. }
  188.  
  189. nav
  190. {
  191.         background:#F0B27A;
  192.         width:1673px;
  193.         height:80px;
  194. }
  195.  
  196. .opcja
  197. {
  198.         box-sizing:border-box;
  199.         width:418px;
  200.         height:80px;
  201.         float:left;
  202.         padding-left:110px;
  203.         padding-top:25px;
  204.         border:solid;
  205.         font-size:25px;
  206.         font-family:Time New Roman;
  207.         letter-spacing:2px;
  208. }
  209.  
  210. .opcja:hover
  211. {
  212.         background-color:#AF601A ;
  213. }
  214.  
  215. main
  216. {
  217.        
  218.         border-bottom:solid;
  219. }
  220.  
  221. #blok1
  222. {
  223.         height:500px;
  224.         width:500px;
  225.         border-radius:10%;
  226.         background-color:lightblue;
  227.         float:left;
  228.         margin-left:230px;
  229.         margin-right:160px;
  230.         margin-top:20px;
  231.         margin-bottom:40px;
  232.         box-sizing:border-box;
  233.         text-align:center;
  234.         font-size:50px;
  235.         padding-top:220px;
  236.         background-image:url("pilkanozna.jpg");
  237.         color:#F8F9F9;
  238.        
  239. }
  240.  
  241. #blok2
  242. {
  243.         box-sizing:border-box;
  244.         height:500px;
  245.         width:500px;
  246.         border-radius:10%;
  247.         background-color:lightblue;
  248.         float:left;
  249.         margin-top:20px;
  250.         text-align:center;
  251.         font-size:50px;
  252.         padding-top:220px;
  253.         background-image:url("informatyka.jpg");
  254.         color:#F8F9F9;
  255.        
  256. }
  257.  
  258. #blok3
  259. {
  260.         height:500px;
  261.         width:500px;
  262.         border-radius:10%;
  263.         background-color:lightblue;
  264.         float:left;
  265.         margin-left:230px;
  266.         margin-right:160px;
  267.         margin-bottom:40px;
  268.         box-sizing:border-box;
  269.         text-align:center;
  270.         font-size:50px;
  271.         padding-top:220px;
  272.         background-image:url("akrobatyka.jpg");
  273.         color:#F8F9F9;
  274.        
  275. }
  276.  
  277. #blok4
  278. {
  279.         height:500px;
  280.         width:500px;
  281.         border-radius:10%;
  282.         background-color:lightblue;
  283.         float:left;
  284.         box-sizing:border-box;
  285.         text-align:center;
  286.         font-size:50px;
  287.         padding-top:220px;
  288.         background-image:url("quad.jpg");
  289.         color:#F8F9F9;
  290. }
  291.  
  292. #galeria
  293. {
  294.         text-align:center;
  295.         font-size:70px;
  296.         font-style:oblique;
  297.         margin-top:120px;
  298.         margin-bottom:20px;
  299. }
  300.  
  301. .pilka
  302. {
  303.         margin-left:105px;
  304.         margin-top:30px;
  305.         margin-bottom:20px;
  306.         height:400px;
  307.         width:400px;
  308.         float:left;
  309. }
  310.  
  311. .informatyka
  312. {
  313.         margin-left:105px;
  314.         margin-top:30px;
  315.         margin-bottom:20px;
  316.         height:400px;
  317.         width:400px;
  318.         float:left;
  319. }
  320.  
  321. .akrobatyka
  322. {
  323.         margin-left:105px;
  324.         margin-top:30px;
  325.         margin-bottom:20px;
  326.         height:400px;
  327.         width:400px;
  328.         float:left;
  329. }
  330. .quad
  331. {
  332.         margin-left:105px;
  333.         margin-top:30px;
  334.         margin-bottom:20px;
  335.         height:400px;
  336.         width:400px;
  337.         float:left;
  338. }
  339. #kontakt
  340. {
  341.         text-align:center;
  342.         font-size:70px;
  343.         font-style:oblique;
  344.         margin-bottom:20px;
  345.         margin-top:130px;
  346. }
  347.  
  348. .kontaktt
  349. {
  350.         margin-left:190px;
  351.         margin-top:30px;
  352.         margin-bottom:20px;
  353.         height:300px;
  354.         width:300px;
  355.         float:left;
  356. }
  357. footer
  358. {
  359.         text-align:right;
  360.        
  361. }
  362.  
  363.  
  364.  
  365.  
  366.  
  367.  
  368.