Designer/Developer Portfolio

HTML
<div class="layout row1 col1"></div> <div class="layout row1 col2"></div> <div class="layout row1 col3"></div> <div class="layout row1 col4"></div> <div class="layout row1 col5"></div> <div class="layout row1 col6"></div> <div class="layout row1 col7"></div> <div class="layout row1 col8"></div> <div class="layout row1 col9"></div> <div class="layout row2 col1"></div> <div class="layout row2 col2"></div> <div class="layout row2 col3"></div> <div class="layout row2 col4"></div> <div class="layout row2 col5"></div> <div class="layout row2 col6"></div> <div class="layout row2 col7"></div> <div class="layout row2 col8"></div> <div class="layout row2 col9"></div> <div class="layout row3 col1"></div> <div class="layout row3 col2"></div> <div class="layout row3 col3"></div> <div class="layout row3 col4"></div> <div class="layout row3 col5"></div> <div class="layout row3 col6"></div> <div class="layout row3 col7"></div> <div class="layout row3 col8"></div> <div class="layout row3 col9"></div> <div class="layout row4 col1"></div> <div class="layout row4 col2"></div> <div class="layout row4 col3"></div> <div class="layout row4 col4"></div> <div class="layout row4 col5"></div> <div class="layout row4 col6"></div> <div class="layout row4 col7"></div> <div class="layout row4 col8"></div> <div class="layout row4 col9"></div> <div class="layout row5 col1"></div> <div class="layout row5 col2"></div> <div class="layout row5 col3"></div> <div class="layout row5 col4"></div> <div class="layout row5 col5"></div> <div class="layout row5 col6"></div> <div class="layout row5 col7"></div> <div class="layout row5 col8"></div> <div class="layout row5 col9"></div> <div class="layout row6 col1"></div> <div class="layout row6 col2"></div> <div class="layout row6 col3"></div> <div class="layout row6 col4"></div> <div class="layout row6 col5"></div> <div class="layout row6 col6"></div> <div class="layout row6 col7"></div> <div class="layout row6 col8"></div> <div class="layout row6 col9"></div> <div class="layout row7 col1"></div> <div class="layout row7 col2"></div> <div class="layout row7 col3"></div> <div class="layout row7 col4"></div> <div class="layout row7 col5"></div> <div class="layout row7 col6"></div> <div class="layout row7 col7"></div> <div class="layout row7 col8"></div> <div class="layout row7 col9"></div> <div class="layout row8 col1"></div> <div class="layout row8 col2"></div> <div class="layout row8 col3"></div> <div class="layout row8 col4"></div> <div class="layout row8 col5"></div> <div class="layout row8 col6"></div> <div class="layout row8 col7"></div> <div class="layout row8 col8"></div> <div class="layout row8 col9"></div> <div class="layout row9 col1"></div> <div class="layout row9 col2"></div> <div class="layout row9 col3"></div> <div class="layout row9 col4"></div> <div class="layout row9 col5"></div> <div class="layout row9 col6"></div> <div class="layout row9 col7"></div> <div class="layout row9 col8"></div> <div class="layout row9 col9"></div> <div class="layout left"></div> <div class="layout right"></div> <div class="back"> <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1000px" height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve"> <g> <polyline fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" 200.7,251 201.7,328.3 279,329.3 279.9,406.6 357.2,407.5 358.2,484.8 435.5,485.8 "/> </g> <g> <polyline fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" 596,131.5 651.3,185.5 706.7,131.5 762,185.5 817.3,131.5 872.7,185.5 928,131.5 "/> </g> <rect x="727.5" y="567.5" fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="100" height="100"/> <g> <line fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="890.5" y1="328" x2="790.5" y2="428"/> <line fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="790.5" y1="328" x2="890.5" y2="428"/> </g> <g> <line fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="148.5" y1="485" x2="148.5" y2="627"/> <line fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="78" y1="556.5" x2="219" y2="556.5"/> </g> <polygon fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" 332.5,200 332.5,99.5 232,99.5 "/> <polygon fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" 558.5,632.8 487.4,561.8 416,633.2 "/> <circle fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="311" cy="807" r="50"/> <circle fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="562" cy="294" r="50"/> <g> <path fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d=" M512,816.5c36.6,0,36.6,52,73.2,52c36.6,0,36.6-52,73.2-52c36.6,0,36.6,52,73.3,52c36.6,0,36.6-52,73.3-52"/> </g> </svg> <h1>Designer</h1> </div> <div class="front"> <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1000px" height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve"> <circle fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="161.3" cy="209.8" r="20.6"/> <circle fill="#FF4E4E" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="362.3" cy="667.8" r="20.6"/> <circle fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="670.3" cy="736.8" r="20.6"/> <circle fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="737.3" cy="463.8" r="20.6"/> <circle fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="341.3" cy="381.8" r="20.6"/> <circle fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="847.3" cy="242.8" r="20.6"/> <circle fill="#FF4E4E" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="943.3" cy="471.8" r="20.6"/> <circle fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="680.3" cy="93.8" r="20.6"/> <circle fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="217.3" cy="848.8" r="20.6"/> <circle fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="528.3" cy="945.8" r="20.6"/> <circle fill="#FF4E4E" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="820.3" cy="810.8" r="20.6"/> <circle fill="#FF4E4E" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="94.3" cy="520.8" r="20.6"/> <circle fill="#FF4E4E" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="528.3" cy="267.8" r="20.6"/> <circle fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="395.3" cy="93.8" r="20.6"/> <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="155.2" y1="229.5" x2="100.2" y2="501.1"/> <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="181.9" y1="209.8" x2="507.7" y2="267.8"/> <line fill="none" stroke="#FF4E4E" stroke-width="22" stroke-miterlimit="10" x1="416" y1="95" x2="660" y2="95"/> <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="405.6" y1="114.4" x2="512.7" y2="247.2"/> <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="700.9" y1="106.3" x2="831.6" y2="229.5"/> <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="857.4" y1="263.4" x2="931.5" y2="451.2"/> <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="917.4" y1="471.8" x2="757.9" y2="463.8"/> <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="512.7" y1="281.3" x2="359" y2="371.3"/> <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="329" y1="365.3" x2="174.4" y2="225.7"/> <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="112.5" y1="530.3" x2="344.8" y2="657"/> <line fill="none" stroke="#FF4E4E" stroke-width="22" stroke-miterlimit="10" x1="382.9" y1="657" x2="718.3" y2="471.8"/> <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="361" y1="387.8" x2="716.7" y2="463.8"/> <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="742.1" y1="484.4" x2="820.3" y2="790.2"/> <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="228.7" y1="831.7" x2="348.1" y2="682.7"/> <line fill="none" stroke="#FF4E4E" stroke-width="22" stroke-miterlimit="10" x1="374.7" y1="684.2" x2="512.7" y2="932.4"/> <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="538.8" y1="928.1" x2="659.7" y2="754.5"/> <line fill="none" stroke="#FF4E4E" stroke-width="22" stroke-miterlimit="10" x1="731.5" y1="443.2" x2="680.3" y2="114.4"/> <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="341.3" y1="402.4" x2="362.3" y2="647.2"/> <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="233.3" y1="861.8" x2="507.7" y2="945.8"/> <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="670.3" y1="716.2" x2="351.8" y2="399.5"/> <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="548.9" y1="267.8" x2="831.6" y2="256.2"/> <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="684.9" y1="722.3" x2="931.5" y2="488.7"/> <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="548.9" y1="945.8" x2="804.3" y2="823.8"/> </svg> <h1>Developer</h1> </div>
CSS
body { margin: 0; height: 100vh; } * { box-sizing: border-box; } .back { position: relative; background: #2980b9; color: #fff; } .front { position: absolute; top: 0; left: 0; width: 100%; background: #fff; justify-content: flex-end; } .back, .front { height: 100%; overflow: hidden; display: flex; align-items: center; padding: 0 50px; } h1 { font-family: 'Work Sans', sans-serif; font-size: 72px; font-weight: 800; text-transform: uppercase; } .front h1 { position: relative; color: #ff4e4e; text-align: right; } svg { position: absolute; opacity: 0; -webkit-transform: translateX(50px); transform: translateX(50px); -webkit-transition: opacity .5s ease-in-out, transform 1s ease-out; transition: opacity .5s ease-in-out, transform 1s ease-out; max-height: 100%; } .back svg { right: 0; } .front svg { left: 0; -webkit-transform: translateX(-50px); transform: translateX(-50px); } svg * { stroke-dasharray: 500; stroke-dashoffset: 500; } svg * { animation: stroke 5s ease-in-out infinite; } .front circle { animation: none; stroke-dashoffset: 0; } polyline { animation-delay: 1s; } polygon { animation-delay: 2s; } circle { animation-delay: 3s; } rect { animation-delay: 4s; } line:nth-child(2n) { animation-delay: 1s; } line:nth-child(3n) { animation-delay: 2s; } @-webkit-keyframes stroke { 20% { stroke-dashoffset: 0; } 40% { stroke-dashoffset: -500; } } @keyframes stroke { 20% { stroke-dashoffset: 0; } 40% { stroke-dashoffset: -500; } } @media(max-width:800px) { .back { height: 60vh; } .front { top: 40vh; height: 60vh; } .front { clip-path: polygon(0% 25%, 100% 0%, 100% 100%, 0% 100%) !important; z-index: 1; } h1 { font-size: 36px; } } .layout { position: absolute; width: 5.55555%; height: 11.11111%; z-index: 1; } .row1 { top: 0; } .row2 { top: 11.11111%; } .row3 { top: 22.22222%; } .row4 { top: 33.33333%; } .row5 { top: 44.44444%; } .row6 { top: 55.55555%; } .row7 { top: 66.66666%; } .row8 { top: 77.77777%; } .row9 { top: 88.88888%; } .col1 { left: 25%; } .col2 { left: 30.55555%; } .col3 { left: 36.11111%; } .col4 { left: 41.66666%; } .col5 { left: 47.22222%; } .col6 { left: 52.77777%; } .col7 { left: 58.33333%; } .col8 { left: 63.88888%; } .col9 { left: 69.55555%; } .left, .right{ width: 25%; height: 100%; top: 0; left: 0; } .right { left: 75%; } .front { transition: clip-path .3s ease-in-out; clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%); } .left:hover ~ .front { clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%); } .right:hover ~ .front { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } .row1.col1:hover ~ .front { clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 75% 100%); } .row1.col2:hover ~ .front { clip-path: polygon(87.5% 0%, 100% 0%, 100% 100%, 68.75% 100%); } .row1.col3:hover ~ .front { clip-path: polygon(75% 0%, 100% 0%, 100% 100%, 62.5% 100%); } .row1.col4:hover ~ .front { clip-path: polygon(62.5% 0%, 100% 0%, 100% 100%, 56.25% 100%); } .row1.col6:hover ~ .front { clip-path: polygon(37.5% 0%, 100% 0%, 100% 100%, 43.75% 100%); } .row1.col7:hover ~ .front { clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 37.5% 100%); } .row1.col8:hover ~ .front { clip-path: polygon(12.5% 0%, 100% 0%, 100% 100%, 31.25% 100%); } .row1.col9:hover ~ .front { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 25% 100%); } .row2.col1:hover ~ .front { clip-path: polygon(87.5% 0%, 100% 0%, 100% 100%, 68.75% 100%); } .row2.col2:hover ~ .front { clip-path: polygon(78.375% 0%, 100% 0%, 100% 100%, 64.0625% 100%); } .row2.col3:hover ~ .front { clip-path: polygon(68.75% 0%, 100% 0%, 100% 100%, 59.375% 100%); } .row2.col4:hover ~ .front { clip-path: polygon(59.375% 0%, 100% 0%, 100% 100%, 54.6875% 100%); } .row2.col6:hover ~ .front { clip-path: polygon(40.625% 0%, 100% 0%, 100% 100%, 45.3125% 100%); } .row2.col7:hover ~ .front { clip-path: polygon(31.25% 0%, 100% 0%, 100% 100%, 40.625% 100%); } .row2.col8:hover ~ .front { clip-path: polygon(21.875% 0%, 100% 0%, 100% 100%, 35.9375% 100%); } .row2.col9:hover ~ .front { clip-path: polygon(12.5% 0%, 100% 0%, 100% 100%, 31.25% 100%); } .row3.col1:hover ~ .front { clip-path: polygon(75% 0%, 100% 0%, 100% 100%, 62.5% 100%); } .row3.col2:hover ~ .front { clip-path: polygon(68.75% 0%, 100% 0%, 100% 100%, 59.375% 100%); } .row3.col3:hover ~ .front { clip-path: polygon(62.5% 0%, 100% 0%, 100% 100%, 56.25% 100%); } .row3.col4:hover ~ .front { clip-path: polygon(56.25% 0%, 100% 0%, 100% 100%, 53.125% 100%); } .row3.col6:hover ~ .front { clip-path: polygon(43.75% 0%, 100% 0%, 100% 100%, 46.875% 100%); } .row3.col7:hover ~ .front { clip-path: polygon(37.5% 0%, 100% 0%, 100% 100%, 43.75% 100%); } .row3.col8:hover ~ .front { clip-path: polygon(31.25% 0%, 100% 0%, 100% 100%, 40.625% 100%); } .row3.col9:hover ~ .front { clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 37.5% 100%); } .row4.col1:hover ~ .front { clip-path: polygon(62.5% 0%, 100% 0%, 100% 100%, 56.25% 100%); } .row4.col2:hover ~ .front { clip-path: polygon(59.375% 0%, 100% 0%, 100% 100%, 54.6875% 100%); } .row4.col3:hover ~ .front { clip-path: polygon(56.25% 0%, 100% 0%, 100% 100%, 53.125% 100%); } .row4.col4:hover ~ .front { clip-path: polygon(53.125% 0%, 100% 0%, 100% 100%, 51.5625% 100%); } .row4.col6:hover ~ .front { clip-path: polygon(46.875% 0%, 100% 0%, 100% 100%, 48.4375% 100%); } .row4.col7:hover ~ .front { clip-path: polygon(43.75% 0%, 100% 0%, 100% 100%, 46.875% 100%); } .row4.col8:hover ~ .front { clip-path: polygon(40.625% 0%, 100% 0%, 100% 100%, 45.3125% 100%); } .row4.col9:hover ~ .front { clip-path: polygon(37.5% 0%, 100% 0%, 100% 100%, 43.75% 100%); } .col5:hover ~ .front, .row5:hover ~ .front { clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%); } .row6.col1:hover ~ .front { clip-path: polygon(56.25% 0%, 100% 0%, 100% 100%, 62.5% 100%); } .row6.col2:hover ~ .front { clip-path: polygon(54.6875% 0%, 100% 0%, 100% 100%, 59.375% 100%); } .row6.col3:hover ~ .front { clip-path: polygon(53.125% 0%, 100% 0%, 100% 100%, 56.25% 100%); } .row6.col4:hover ~ .front { clip-path: polygon(51.5625% 0%, 100% 0%, 100% 100%, 53.125% 100%); } .row6.col6:hover ~ .front { clip-path: polygon(48.4375% 0%, 100% 0%, 100% 100%, 46.875% 100%); } .row6.col7:hover ~ .front { clip-path: polygon(46.875% 0%, 100% 0%, 100% 100%, 43.75% 100%); } .row6.col8:hover ~ .front { clip-path: polygon(45.3125% 0%, 100% 0%, 100% 100%, 40.625% 100%); } .row6.col9:hover ~ .front { clip-path: polygon(43.75% 0%, 100% 0%, 100% 100%, 37.5% 100%); } .row7.col1:hover ~ .front { clip-path: polygon(62.5% 0%, 100% 0%, 100% 100%, 75% 100%); } .row7.col2:hover ~ .front { clip-path: polygon(59.375% 0%, 100% 0%, 100% 100%, 68.75% 100%); } .row7.col3:hover ~ .front { clip-path: polygon(56.25% 0%, 100% 0%, 100% 100%, 62.5% 100%); } .row7.col4:hover ~ .front { clip-path: polygon(53.125% 0%, 100% 0%, 100% 100%, 56.25% 100%); } .row7.col6:hover ~ .front { clip-path: polygon(46.875% 0%, 100% 0%, 100% 100%, 43.75% 100%); } .row7.col7:hover ~ .front { clip-path: polygon(43.75% 0%, 100% 0%, 100% 100%, 37.5% 100%); } .row7.col8:hover ~ .front { clip-path: polygon(40.625% 0%, 100% 0%, 100% 100%, 31.25% 100%); } .row7.col9:hover ~ .front { clip-path: polygon(37.5% 0%, 100% 0%, 100% 100%, 25% 100%); } .row8.col1:hover ~ .front { clip-path: polygon(68.75% 0%, 100% 0%, 100% 100%, 87.5% 100%); } .row8.col2:hover ~ .front { clip-path: polygon(64.0625% 0%, 100% 0%, 100% 100%, 78.375% 100%); } .row8.col3:hover ~ .front { clip-path: polygon(59.375% 0%, 100% 0%, 100% 100%, 68.75% 100%); } .row8.col4:hover ~ .front { clip-path: polygon(54.6875% 0%, 100% 0%, 100% 100%, 59.375% 100%); } .row8.col6:hover ~ .front { clip-path: polygon(45.3125% 0%, 100% 0%, 100% 100%, 40.625% 100%); } .row8.col7:hover ~ .front { clip-path: polygon(40.625% 0%, 100% 0%, 100% 100%, 31.25% 100%); } .row8.col8:hover ~ .front { clip-path: polygon(35.9375% 0%, 100% 0%, 100% 100%, 21.875% 100%); } .row8.col9:hover ~ .front { clip-path: polygon(31.25% 0%, 100% 0%, 100% 100%, 12.5% 100%); } .row9.col1:hover ~ .front { clip-path: polygon(75% 0%, 100% 0%, 100% 100%, 100% 100%); } .row9.col2:hover ~ .front { clip-path: polygon(68.75% 0%, 100% 0%, 100% 100%, 87.5% 100%); } .row9.col3:hover ~ .front { clip-path: polygon(62.5% 0%, 100% 0%, 100% 100%, 75% 100%); } .row9.col4:hover ~ .front { clip-path: polygon(56.25% 0%, 100% 0%, 100% 100%, 62.5% 100%); } .row9.col6:hover ~ .front { clip-path: polygon(43.75% 0%, 100% 0%, 100% 100%, 37.5% 100%); } .row9.col7:hover ~ .front { clip-path: polygon(37.5% 0%, 100% 0%, 100% 100%, 25% 100%); } .row9.col8:hover ~ .front { clip-path: polygon(31.25% 0%, 100% 0%, 100% 100%, 12.5% 100%); } .row9.col9:hover ~ .front { clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%); } .col1:hover ~ .back svg, .col2:hover ~ .back svg, .col3:hover ~ .back svg, .col4:hover ~ .back svg, .left:hover ~ .back svg, .col6:hover ~ .front svg, .col7:hover ~ .front svg, .col8:hover ~ .front svg, .col9:hover ~ .front svg, .right:hover ~ .front svg { opacity: .3; -webkit-transform: translateX(0); transform: translateX(0); }
JAVASCRIPT
Expand for more options Login