Test: Difference between revisions

1,046 bytes added ,  12 September
no edit summary
No edit summary
No edit summary
Line 117: Line 117:
         min-height: 50px;
         min-height: 50px;
         /*https://bennettfeely.com/clippy/*/
         /*https://bennettfeely.com/clippy/*/
         clip-path: polygon(0 49%, 51% 49%, 51% 90%, 55% 90%, 50% 100%, 45% 90%, 49% 90%, 49% 51%, 0 51%);
         clip-path: polygon(
            0 calc(50% - 2px),  
            calc(50% + 2px) calc(50% - 2px),  
            calc(50% + 2px) calc(100% - 15px),  
            calc(50% + 7px) calc(100% - 15px),  
            50% 100%,  
            calc(50% - 7px) calc(100% - 15px),  
            calc(50% - 2px) calc(100% - 15px),  
            calc(50% - 2px) calc(50% + 2px),  
            0 calc(50% + 2px));
     }
     }


Line 137: Line 146:


     .down-arrow {
     .down-arrow {
        background-color: black;
        border: 1px solid;
        width: 100%;
        height: 100%;
        display: flex;
        min-height: 30px;
        /*https://bennettfeely.com/clippy/*/
        clip-path: polygon(
            calc(50% + 2px) 0,
            calc(50% + 2px) calc(100% - 15px),
            calc(50% + 7px) calc(100% - 15px),
            50% 100%,
            calc(50% - 7px) calc(100% - 15px),
            calc(50% - 2px) calc(100% - 15px),
            calc(50% - 2px) 0);
    }
    .left-arrow {
         background-color: black;
         background-color: black;
         border: 1px solid;
         border: 1px solid;
Line 144: Line 171:
         min-height: 50px;
         min-height: 50px;
         /*https://bennettfeely.com/clippy/*/
         /*https://bennettfeely.com/clippy/*/
         clip-path: polygon(51% 0, 51% 90%, 55% 90%, 50% 100%, 45% 90%, 49% 90%, 49% 0);
         clip-path: polygon(
            0% 50%,  
            15px calc(50% - 7px),  
            15px calc(50% - 2px),
            100% calc(50% - 2px),  
            100% calc(50% + 2px),  
            15px calc(50% + 2px),  
            15px calc(50% + 7px));
     }
     }


Line 163: Line 197:
   <div class="container">
   <div class="container">
     <div class="node col-2" style="background-color:#021FE2; color:white;">Do you need a custom driver?</div>
     <div class="node col-2" style="background-color:#021FE2; color:white;">Do you need a custom driver?</div>
     <div class="connector col-2"></div>
     <div class="down-arrow col-2"></div>
     <div class="node clickable col-2">Check our Linux Driver Services!</div>
     <div class="node clickable col-2">Check our Linux Driver Services!</div>
     <div class="connector col-2"></div>
     <div class="down-arrow col-2"></div>
     <div class="node clickable col-2">Check tested drivers list!</div>
     <div class="node clickable col-2">Check tested drivers list!</div>
     <div class="connector span-3"></div>
     <div class="down-arrow span-3"></div>
     <div class="node span-3">Driver in the list?</div>
     <div class="node span-3">Driver in the list?</div>
     <div class="connector col-1"></div>
     <div class="down-arrow col-1"></div>
     <div class="connector col-3"></div>
     <div class="down-arrow col-3"></div>
     <div class="node col-1" style="background-color:#1ABA3F; color:white;">YES</div>
     <div class="node col-1" style="background-color:#1ABA3F; color:white;">YES</div>
     <div class="node col-3" style="background-color:#EB1E07; color:white;">NO</div>
     <div class="node col-3" style="background-color:#EB1E07; color:white;">NO</div>
     <div class="connector col-1"></div>
     <div class="down-arrow col-1"></div>
     <div class="connector col-3"></div>
     <div class="down-arrow col-3"></div>
     <div class="node clickable col-1">Check our hiring process!</div>
     <div class="node clickable col-1">Check our hiring process!</div>
     <div class="left-connector col-2"></div>
     <div class="left-arrow col-2"></div>
     <div class="node clickable col-3">Check the client requirements!</div>
     <div class="node clickable col-3">Check the client requirements!</div>
     <div class="connector col-1"></div>
     <div class="down-arrow col-1"></div>
     <div class="node clickable col-1">Contact Us!</div>
     <div class="node clickable col-1">Contact Us!</div>
     <div class="connector col-1"></div>
     <div class="down-arrow col-1"></div>
     <div class="node col-1" style="background-color:#021FE2; color:white;">Driver Delivery!</div>
     <div class="node col-1" style="background-color:#021FE2; color:white;">Driver Delivery!</div>
     <div class="connector col-1"></div>
     <div class="down-arrow col-1"></div>
     <div class="desition-container col-1"><div class="node desition">Yes or No?</div></div>
     <div class="desition-container col-1"><div class="node desition">Yes or No?</div></div>
     <div class="horizontal-line col-2"></div>
     <div class="horizontal-line col-2"></div>
Line 190: Line 224:
     <div class="node clickable col-1">Maybe Yes!</div>
     <div class="node clickable col-1">Maybe Yes!</div>
     <div class="node clickable col-3">Maybe No!</div>
     <div class="node clickable col-3">Maybe No!</div>
    <div class="right-down-arrow col-3"></div>
}}
}}