API tools faq
paste
Advertisement
Guest User

Organigramm

a guest
Jul 17th, 2016
761
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.14 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.     <title>Organigramm</title>
  4.     <style type="text/css">
  5.  
  6.  
  7.     *{
  8.         -webkit-box-sizing: border-box;
  9.         -moz-box-sizing: border-box;
  10.         box-sizing: border-box;
  11.         position: relative;
  12.     }
  13.  
  14.     .cf:before,
  15.     .cf:after {
  16.         content: " "; /* 1 */
  17.         display: table; /* 2 */
  18.     }
  19.  
  20.     .cf:after {
  21.         clear: both;
  22.     }
  23.  
  24.     /**
  25.      * For IE 6/7 only
  26.      * Include this rule to trigger hasLayout and contain floats.
  27.      */
  28.     .cf {
  29.         *zoom: 1;
  30.     }
  31.  
  32.     /* Generic styling */
  33.  
  34.     body{
  35.         background: #F5EEC9;   
  36.     }
  37.  
  38.     .content{
  39.         width: 100%;
  40.         max-width: 1142px;
  41.         margin: 0 auto;
  42.         padding: 0 20px;
  43.     }
  44.  
  45.     a:focus{
  46.         outline: 2px dashed #f7f7f7;
  47.     }
  48.  
  49.     @media all and (max-width: 767px){
  50.         .content{
  51.             padding: 0 20px;
  52.         }  
  53.     }
  54.  
  55.     ul{
  56.         padding: 0;
  57.         margin: 0;
  58.         list-style: none;      
  59.     }
  60.  
  61.     ul a{
  62.         display: block;
  63.         background: #ccc;
  64.         border: 4px solid midnightblue;
  65.         text-align: center;
  66.         overflow: hidden;
  67.         font-size: .8em;
  68.         text-decoration: none;
  69.         font-weight: 600;
  70.         color: #333;
  71.         height: 70px;
  72.         margin-bottom: -26px;
  73.         box-shadow: 4px 4px 9px -4px rgba(0,0,0,0.4);
  74.         -webkit-transition: all linear .1s;
  75.         -moz-transition: all linear .1s;
  76.         transition: all linear .1s;
  77.     }
  78.  
  79.  
  80.     @media all and (max-width: 767px){
  81.         ul a{
  82.             font-size: 1em;
  83.         }
  84.     }
  85.  
  86.  
  87.     ul a span{
  88.         top: 50%;
  89.         margin-top: -0.7em;
  90.         display: block;
  91.     }
  92.    
  93.     ul a b{
  94.         top: 19%;
  95.         margin-top: -0.7em;
  96.         display: block;
  97.         font-size: 1.2em;
  98.         text-decoration: underline;
  99.     }
  100.  
  101.     /*
  102.  
  103.      */
  104.  
  105.     .administration > li > a{
  106.         margin-bottom: 25px;
  107.     }
  108.  
  109.     .director > li > a{
  110.         width: 50%;
  111.         margin: 0 auto 0px auto;
  112.     }
  113.  
  114.     .subdirector:after{
  115.         content: "";
  116.         display: block;
  117.         width: 0;
  118.         height: 130px;
  119.         background: red;
  120.         border-left: 4px solid #fff;
  121.         left: 45.45%;
  122.         position: relative;
  123.     }
  124.  
  125.     .subdirector,
  126.     .departments{
  127.         position: absolute;
  128.         width: 100%;
  129.     }
  130.  
  131.     .subdirector > li:first-child,
  132.     .departments > li:first-child{ 
  133.         width: 18.59894921190893%;
  134.         height: 64px;
  135.         margin: 0 auto 92px auto;      
  136.         padding-top: 25px;
  137.         border-bottom: 4px solid white;
  138.         z-index: 1;
  139.     }
  140.  
  141.     .subdirector > li:first-child{
  142.         float: right;
  143.         right: 27.2%;
  144.         border-left: 4px solid white;
  145.     }
  146.    
  147.    
  148.     .departments > li:first-child{ 
  149.         float: left;
  150.         left: 27.2%;
  151.         border-right: 4px solid white; 
  152.     }
  153.  
  154.     .subdirector > li:first-child a,
  155.     .departments > li:first-child a{
  156.         width: 100%;
  157.     }
  158.  
  159.     .subdirector > li:first-child a{   
  160.         left: 25px;
  161.     }
  162.    
  163.     .subdirector > li:nth-child(2) a{  
  164.         left: 25px;
  165.     }
  166.  
  167.     @media all and (max-width: 767px){
  168.         .subdirector > li:first-child,
  169.         .departments > li:first-child{
  170.             width: 40%;
  171.         }
  172.  
  173.         .subdirector > li:first-child{
  174.             right: 10%;
  175.             margin-right: 2px;
  176.         }
  177.  
  178.         .subdirector:after{
  179.             left: 49.8%;
  180.         }
  181.  
  182.         .departments > li:first-child{
  183.             left: 10%;
  184.             margin-left: 2px;
  185.         }
  186.     }
  187.  
  188.  
  189.     .departments > li:first-child a{
  190.         right: 25px;
  191.     }
  192.  
  193.     .department:first-child,
  194.     .departments li:nth-child(2){
  195.         margin-left: 0;
  196.         clear: left;   
  197.     }
  198.  
  199.     .departments:after{
  200.         content: "";
  201.         display: block;
  202.         position: absolute;
  203.         width: 81.1%;
  204.         height: 22px;  
  205.         border-top: 4px solid #fff;
  206.         border-right: 4px solid #fff;
  207.         border-left: 4px solid #fff;
  208.         margin: 0 auto;
  209.         top: 130px;
  210.         left: 9.1%
  211.     }
  212.  
  213.     @media all and (max-width: 767px){
  214.         .departments:after{
  215.             border-right: none;
  216.             left: 0;
  217.             width: 49.8%;
  218.         }  
  219.     }
  220.  
  221.     @media all and (min-width: 768px){
  222.         .department:first-child:before,
  223.        .department:last-child:before{
  224.         border:none;
  225.       }
  226.     }
  227.  
  228.     .department:before{
  229.         content: "";
  230.         display: block;
  231.         position: absolute;
  232.         width: 0;
  233.         height: 22px;
  234.         border-left: 4px solid white;
  235.         z-index: 1;
  236.         top: -22px;
  237.         left: 50%;
  238.         margin-left: -4px;
  239.     }
  240.  
  241.     .department{
  242.         border-left: 4px solid #fff;
  243.         width: 18.59894921190893%;
  244.         float: left;
  245.         margin-left: 1.751313485113835%;
  246.         margin-bottom: 60px;
  247.     }
  248.  
  249.     .lt-ie8 .department{
  250.         width: 18.25%;
  251.     }
  252.  
  253.     @media all and (max-width: 767px){
  254.         .department{
  255.             float: none;
  256.             width: 100%;
  257.             margin-left: 0;
  258.         }
  259.  
  260.         .department:before{
  261.             content: "";
  262.             display: block;
  263.             position: absolute;
  264.             width: 0;
  265.             height: 60px;
  266.             border-left: 4px solid white;
  267.             z-index: 1;
  268.             top: -60px;
  269.             left: 0%;
  270.             margin-left: -4px;
  271.         }
  272.  
  273.         .department:nth-child(2):before{
  274.             display: none;
  275.         }
  276.     }
  277.  
  278.     .department > a{
  279.         margin: 0 0 -26px -4px;
  280.         z-index: 1;
  281.     }
  282.  
  283.     .department > a:hover{ 
  284.         height: 80px;
  285.     }
  286.  
  287.     .department > ul{
  288.         margin-top: 0px;
  289.         margin-bottom: 0px;
  290.     }
  291.  
  292.     .department li{
  293.         padding-left: 25px;
  294.         border-bottom: 4px solid #fff;
  295.         height: 80px;  
  296.     }
  297.  
  298.     .department li a{
  299.         background: #fff;
  300.         top: 48px; 
  301.         position: absolute;
  302.         z-index: 1;
  303.         width: 90%;
  304.         height: 60px;
  305.         vertical-align: middle;
  306.         right: -1px;
  307.         background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMjUiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
  308.         background-image: -moz-linear-gradient(-45deg,  rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 100%) !important;
  309.         background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0.25)), color-stop(100%,rgba(0,0,0,0)))!important;
  310.         background-image: -webkit-linear-gradient(-45deg,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%)!important;
  311.         background-image: -o-linear-gradient(-45deg,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%)!important;
  312.         background-image: -ms-linear-gradient(-45deg,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%)!important;
  313.         background-image: linear-gradient(135deg,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%)!important;
  314.         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40000000', endColorstr='#00000000',GradientType=1 );
  315.     }
  316.  
  317.     .department li a:hover{
  318.         box-shadow: 8px 8px 9px -4px rgba(0,0,0,0.1);
  319.         height: 80px;
  320.         width: 95%;
  321.         top: 39px;
  322.         background-image: none!important;
  323.     }
  324.  
  325.     /* Department/ section colors */
  326.     .department.dep-a a{ background: #FFD600; height: 200px; }
  327.     .department.dep-a a b { top: 8%; padding-bottom: 1em;}
  328.     .department.dep-b a{ background: #AAD4E7; height: 200px;}
  329.     .department.dep-b a b { top: 8%; padding-bottom: 1em;}
  330.     .department.dep-c a{ background: #FDB0FD; height: 200px;}
  331.     .department.dep-c a b { top: 8%; padding-bottom: 1em;}
  332.     .department.dep-d a{ background: #A3A2A2; height: 200px;}
  333.     .department.dep-d a b { top: 8%; padding-bottom: 1em;}
  334.     .department.dep-e a{ background: #f0f0f0;  height: 200px;}
  335.     .department.dep-e a b { top: 8%; padding-bottom: 1em;}
  336.     </style>
  337. </head>
  338. <body>
  339. <div class="content">
  340.   <figure class="org-chart cf">
  341.     <ul class="administration">
  342.       <li>                 
  343.         <ul class="director">
  344.           <li>
  345.             <a href="#"><b>Geschäftsführung</b></a>
  346.             <ul class="subdirector">
  347.             <li><a href="#"><b>Qualitätsmanagement</b></a></li>
  348.            
  349.             </ul>              
  350.             <ul class="departments cf">                            
  351.               <li><a href="#"><b>Sekretariat</b></a></li>      
  352.               <li class="department dep-a">
  353.               <a href="#"><b>HW Engineering</b></a>    
  354.                
  355.               </li>
  356.               <li class="department dep-b">
  357.                <a href="#"><b>SW Engineering</b></a>   
  358.               </li>
  359.               <li class="department dep-c">
  360.                <a href="#"><b>Fertigung</b></a>
  361.               </li>
  362.               <li class="department dep-d">
  363.                <a href="#"><b>Montage</b></a>
  364.               </li>
  365.             <li class="department dep-e">
  366.              <a href="#"><b>Mechanik</b></a>
  367.             </li>
  368.              
  369.             </ul>
  370.           </li>
  371.         </ul>  
  372.       </li>
  373.     </ul>          
  374.   </figure>
  375. </div>
  376. </body>
  377. </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!