SHARE
TWEET

Untitled

grozdana Sep 13th, 2018 111 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. html
  2.  
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6.     <title>div</title>
  7.     <link rel="stylesheet" TYPE="text/css" href="style.css">
  8. </head>
  9. <body>
  10. <div class="container">
  11. <div class="rowOne">
  12.     <div class="one"></div>
  13.     <div class="two"></div>
  14.     <div class="three">
  15.        
  16.     </div>
  17.     <div  class="four">
  18.        
  19.  
  20.         <div class="partone"></div>
  21.         <div class="parttwo"></div>
  22.         <div class="partthree">
  23.            
  24.             <div class="partoneOne"></div>
  25.             <div class="partoneTwo"></div>
  26.             <div class="partoneThree"></div>
  27.         </div>
  28.  
  29.     </div>
  30.     <div class="five"></div>
  31. </div>
  32. <div class="rowTwo">
  33.     <div class="oneBig"></div>
  34.     <div class="twoBig">
  35.         <div class="oneBigone"></div>
  36.         <div class="oneBigtwo"></div>
  37.     </div>
  38.     <div class="threeBig">
  39.        
  40.               <div class="bigOne">
  41.                
  42.                 <div class="bigOneone"></div>
  43.                 <div class="bigTwotwo"></div>
  44.               </div>
  45.               <div class="bigTwo">
  46.                
  47.               </div>
  48.  
  49.     </div>
  50.     <div class="fourBig">
  51.         <div class="fourOne"></div>
  52.         <div class="fourTwo"></div>
  53.     </div>
  54.    
  55.    
  56. </div>
  57.  
  58.     <div class="divthree">
  59.    
  60.     <div class="prv"></div>
  61.    
  62.   <div class="vtor"></div>
  63.    <div class="tret"></div>
  64.     <div class="cetvrt"></div>
  65.  
  66.  
  67.  
  68.  
  69.     <div class="pet">
  70.     <div class="kocka">
  71.        <div class="pet1"></div>
  72.          <div class="pet2"></div>
  73.            <div class="pet3"></div>
  74.               <div class="pet4"></div>
  75.                  </div>
  76.          
  77.     <div class="sest"></div>
  78.                 </div>
  79.          
  80.  
  81.   <div class="sedum">
  82.     <div class="sedum1"></div>
  83.     <div class="sedum2"></div>
  84.   </div>
  85. <div class="osum"></div>  
  86. </div>
  87.  
  88.    
  89.  
  90.  
  91.  
  92.  
  93.  
  94.  
  95. </div>
  96. </div>
  97.  
  98.  
  99. </div>
  100. </body>
  101. </html>
  102.  
  103.  
  104.  
  105. css
  106.  
  107. .container{
  108. width: 900px;
  109. height:630px ;
  110. float: left;
  111. border:5px solid black;
  112. box-sizing: border-box;
  113. background-color: gray;
  114.  
  115. }
  116. .rowOne{
  117.     width: 20%;
  118.     height: 100%;
  119.     float: left;
  120.     border: 5px solid black;
  121.     background: white;
  122.     box-sizing: border-box;
  123.  
  124. }
  125. .rowTwo{
  126.     width: 50%;
  127.     height: 100%;
  128.     float: left;
  129.     border: 5px solid black;
  130.     background: yellow;
  131.     box-sizing: border-box;
  132. }
  133.  
  134. .one{
  135.    width: 100%;
  136.     height: 10%;
  137.     float: left;
  138.     border: 5px solid black;
  139.     background: green;
  140.     box-sizing: border-box;
  141.  
  142. }
  143. .two{
  144.     width: 100%;
  145.     height: 20%;
  146.     float: left;
  147.     border: 5px solid black;
  148.     background: red;
  149.     box-sizing: border-box;
  150. }
  151. .three{
  152.     width: 100%;
  153.     height: 20%;
  154.     float: left;
  155.     border: 5px solid black;
  156.     background: blue;
  157.     box-sizing: border-box;
  158. }
  159. .four{
  160.     width: 100%;
  161.     height: 20%;
  162.     float: left;
  163.     border: 5px solid black;
  164.     background: green;
  165.     box-sizing: border-box;
  166. }
  167. .five{
  168.     width: 100%;
  169.     height: 30%;
  170.     float: left;
  171.     border: 5px solid black;
  172.     background: orange;
  173.     box-sizing: border-box;
  174. }
  175. .partone{
  176. width: 100%;
  177.     height: 30%;
  178.     float: left;
  179.     border: 5px solid black;
  180.     background: orange;
  181.     box-sizing: border-box;
  182.  
  183. }
  184. .parttwo{
  185.     width: 100%;
  186.     height: 30%;
  187.     float: left;
  188.     border: 5px solid black;
  189.     background: gray;
  190.     box-sizing: border-box;
  191.  
  192. }
  193. .partthree{
  194.  
  195.     width: 100%;
  196.     height: 40%;
  197.     float: left;
  198.     border: 5px solid black;
  199.     background: gray;
  200.     box-sizing: border-box;
  201. }
  202. .partoneOne{
  203.  
  204.     width: 15%;
  205.     height: 100%;
  206.     float: left;
  207.     border: 5px solid black;
  208.     background: white;
  209.     box-sizing: border-box;
  210. }
  211. .partoneTwo{
  212.  
  213.      width: 25%;
  214.     height: 100%;
  215.     float: left;
  216.     border: 5px solid black;
  217.     background: white;
  218.     box-sizing: border-box;
  219.  
  220. }
  221. .partoneThree{
  222. width: 60%;
  223.     height: 100%;
  224.     float: left;
  225.     border: 5px solid black;
  226.     background: gray;
  227.     box-sizing: border-box;
  228.  
  229. }
  230. .oneBig{
  231.     width: 100%;
  232.     height: 10%;
  233.     float: left;
  234.     border: 5px solid black;
  235.     background: green;
  236.     box-sizing: border-box;
  237.  
  238. }
  239. .twoBig{
  240.    width: 100%;
  241.     height: 20%;
  242.     float: left;
  243.     border: 5px solid black;
  244.     background: green;
  245.     box-sizing: border-box;
  246.  
  247. }
  248. .oneBigone{
  249.     width: 30%;
  250.     height: 100%;
  251.     float: left;
  252.     border: 5px solid black;
  253.     background: chocolate;
  254.     box-sizing: border-box;
  255. }
  256. .oneBigtwo{
  257. width: 70%;
  258.     height: 100%;
  259.     float: left;
  260.     border: 5px solid black;
  261.     background: purple;
  262.     box-sizing: border-box;
  263.  
  264. }
  265. .threeBig{
  266.  
  267.     width: 100%;
  268.     height: 55%;
  269.     float: left;
  270.     border: 5px solid black;
  271.     background: orange;
  272.     box-sizing: border-box;
  273. }
  274. .bigOne{
  275.     width: 70%;
  276.     height: 100%;
  277.     float: left;
  278.     border: 5px solid black;
  279.     background: blue;
  280.     box-sizing: border-box;
  281. }
  282. .bigTwo{
  283.     width: 30%;
  284.     height: 100%;
  285.     float: left;
  286.     border: 5px solid black;
  287.     background: blue;
  288.     box-sizing: border-box;
  289.  
  290.  
  291. }
  292.  
  293. .bigOneone{
  294.     width: 100%;
  295.     height: 40%;
  296.     float: left;
  297.     border: 5px solid black;
  298.     background: blue;
  299.     box-sizing: border-box;
  300. }
  301.  
  302.  
  303. .bigTwotwo{
  304.      width: 100%;
  305.     height: 60%;
  306.     float: left;
  307.     border: 5px solid black;
  308.     background: orange;
  309.     box-sizing: border-box;
  310.  
  311.  
  312. }
  313. .fourBig{
  314.      width: 100%;
  315.     height: 15%;
  316.     float: left;
  317.     border: 5px solid black;
  318.     background: blue;
  319.     box-sizing: border-box;
  320.  
  321. }
  322. .fourOne{
  323.     width: 70%;
  324.     height: 100%;
  325.     float: left;
  326.     border: 5px solid black;
  327.     background: red;
  328.     box-sizing: border-box;
  329. }
  330. .fourTwo{
  331.  
  332. width: 30%;
  333.     height: 100%;
  334.     float: left;
  335.     border: 5px solid black;
  336.     background: orange;
  337.     box-sizing: border-box;
  338.  
  339. }
  340. .divthree{
  341.     width: 30%;
  342.     height: 100%;
  343.     float: left;
  344.     border: 5px solid black;
  345.     background: red;
  346.     box-sizing: border-box;
  347.  
  348. }
  349. .prv{
  350.  
  351.    width: 70%;
  352.     height: 10%;
  353.     float: left;
  354.     border: 5px solid black;
  355.     background: green;
  356.     box-sizing: border-box
  357.  
  358. }
  359. .vtor{
  360.     width: 30%;
  361.     height: 10%;
  362.     float: left;
  363.     border: 5px solid black;
  364.     background: green;
  365.     box-sizing: border-box
  366. }
  367. .tret{
  368.     width: 70%;
  369.     height: 20%;
  370.     float: left;
  371.     border: 5px solid black;
  372.     background: red;
  373.     box-sizing: border-box
  374.  
  375. }
  376. .cetvrt{
  377.       width: 30%;
  378.     height: 20%;
  379.     float: left;
  380.     border: 5px solid black;
  381.     background: orange;
  382.     box-sizing: border-box
  383.  
  384. }
  385. .pet{
  386.  
  387.      width: 100%;
  388.     height: 22.5%;
  389.     float: left;
  390.     border: 5px solid black;
  391.     background: white;
  392.     box-sizing: border-box;
  393.  
  394. }
  395. .kocka{
  396.      width: 70%;
  397.     height: 100%;
  398.     float: left;
  399.     border: 5px solid black;
  400.     background: white;
  401.     box-sizing: border-box;
  402.  
  403.  
  404. }
  405. .pet1{
  406.      width: 30%;
  407.     height: 50%;
  408.     float: left;
  409.     border: 5px solid black;
  410.     background: brown;
  411.     box-sizing: border-box;
  412.  
  413.  
  414. }
  415. .pet2{
  416.  
  417. width: 70%;
  418.     height: 50%;
  419.     float: left;
  420.     border: 5px solid black;
  421.     background: gray;
  422.     box-sizing: border-box;
  423.  
  424.  
  425. }
  426. .pet3{
  427. width: 30%;
  428.     height: 50%;
  429.     float: left;
  430.     border: 5px solid black;
  431.     background: gray;
  432.     box-sizing: border-box;
  433.  
  434.  
  435. }
  436. .pet4{
  437.       width: 70%;
  438.     height: 50%;
  439.     float: left;
  440.     border: 5px solid black;
  441.     background: brown;
  442.     box-sizing: border-box;
  443.  
  444.  
  445. }
  446. .sest{
  447.  
  448.      width: 30%;
  449.     height: 100%;
  450.     float: left;
  451.     border: 5px solid black;
  452.     background: yellow;
  453.     box-sizing: border-box;
  454.  
  455. }
  456. /*.osum{
  457.  
  458.  
  459.  
  460.     width: 100%;
  461.     height: 15%;
  462.     float: left;
  463.     border: 5px solid black;
  464.     background: blue;
  465.     box-sizing: border-box;
  466. }*/
  467. .sedum{
  468.  
  469.  width: 100%;
  470.     height: 32.5%;
  471.     float: left;
  472.     border: 5px solid black;
  473.     background: yellow;
  474.     box-sizing: border-box;
  475.  
  476. }
  477. .sedum1{
  478.  
  479.  width: 70%;
  480.     height: 100%;
  481.     float: left;
  482.     border: 5px solid black;
  483.     background: blue;
  484.     box-sizing: border-box;
  485.  
  486.  
  487. }
  488. .sedum2{
  489.  
  490.       width: 30%;
  491.     height: 100%;
  492.     float: left;
  493.     border: 5px solid black;
  494.     background: chocolate;
  495.     box-sizing: border-box;
  496.  
  497.  
  498. }
  499. .osum{
  500.        width: 100%;
  501.     height: 15%;
  502.     float: left;
  503.     border: 5px solid black;
  504.     background: yellow;
  505.     box-sizing: border-box;
  506.  
  507.  
  508. }
RAW Paste Data
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
 
Top