Question

pls solve this Question​

Answer 1

Answer:

< !DOCTYPE html > < /p > < p > < html > < /p > < p > < head > < /p > < p > < title > border animation | svg < /title > < /p > < p > < style > body { < /p > < p > margin:0; < /p > < p > padding:0px; < /p > < p > background:#02101b; < /p > < p > text-align:center ; < /p > < p > min-height:100vh; < /p > < p > font-weight:bold; < /p > < p > font-size:20px; < /p > < p > font-family:arial; < /p > < p > color:white; < /p > < p > } < /p > < p > a:before{ < /p > < p > content:""; < /p > < p > position:absolute ; < /p > < p > top:0; < /p > < p > height:100%; < /p > < p > width:40%; < /p > < p > background:rgb(255,255,255,.05); < /p > < p > transform:skewX(5deg); < /p > < p > animation:all 1s linear infinite ; < /p > < p > } < /p > < p > @keyframes all{ < /p > < p > 0%{ < /p > < p > position:absolute ; < /p > < p > left:0; < /p > < p > background:rgb(255,255,255,.05); < /p > < p > } < /p > < p > 50%{ < /p > < p > left:85px; < /p > < p > position:absolute ; < /p > < p > background:rgb(255,255,255,.05); < /p > < p > } < /p > < p > 100%{ < /p > < p > right:85px; < /p > < p > position:absolute ; < /p > < p > background:rgb(255,255,255,.02); < /p > < p > } < /p > < p > } < /p > < p > a{ < /p > < p > padding:15px 30px; < /p > < p > position:relative ; < /p > < p > top:200px; < /p > < p > color:#f35621; < /p > < p > letter-spacing:2px; < /p > < p > text-transform:uppercase ; < /p > < p > text-decoration:none; < /p > < p > transition:0.5s; < /p > < p > height:20px; < /p > < p > } < /p > < p > a svg , < /p > < p > a svg rect { < /p > < p > position:absolute ; < /p > < p > top:0; < /p > < p > left:0; < /p > < p > fill:transparent ; < /p > < p > width:100%; < /p > < p > height:100%; < /p > < p > } < /p > < p > a svg rect{ < /p > < p > stroke-width:2; < /p > < p > stroke:#f35612; < /p > < p > stroke-dasharray:100; < /p > < p > animation:ani 2s linear infinite ; < /p > < p > } < /p > < p > @keyframes ani{ < /p > < p > 0%{ < /p > < p > stroke-dashoffset:400; < /p > < p > } < /p > < p > 100%{ < /p > < p > stroke-dashoffset:0; < /p > < p > } < /p > < p > } < /p > < p > footer{ < /p > < p > position:absolute ; < /p > < p > bottom:0px; < /p > < p > width:100%; < /p > < p > box-sizing:border-box; < /p > < p > background:rgb(255,255,255,.2); < /p > < p > padding:5px; < /p > < p > height:50px; < /p > < p > } < /p > < p > .i{ < /p > < p > height:40px; < /p > < p > width:40px; < /p > < p > border-radius:50%; < /p > < p > border:2px solid white; < /p > < p > float:left; < /p > < p > position:relative ; < /p > < p > left:3px; < /p > < p > } < /p > < p > .name{ < /p > < p > font-size:20px; < /p > < p > font-weight:300; < /p > < p > position:relative ; < /p > < p > top:10.5px; < /p > < p > left:-10px; < /p > < p > } < /p > < p > .h{ < /p > < p > float:right ; < /p > < p > margin:10px; < /p > < p > color:#f35621; < /p > < p > position:relative ; < /p > < p > top:3px; < /p > < p > animation:hi 1s infinite ; < /p > < p > } < /p > < p > @keyframes hi{ < /p > < p > 0%{ < /p > < p > transform:scale(0.8); < /p > < p > } < /p > < p > 50%{ < /p > < p > transform:scale(1); < /p > < p > } < /p > < p > 100%{ < /p > < p > transform:scale(0.8); < /p > < p > } < /p > < p > } < /style > < /p > < p > < /p > < p > < /head > < /p > < p > < body > < /p > < p > < a href="#" > < /p > < p > < svg > < rect > < /rect > < /svg > < /p > < p > brar < /p > < p > < /a > < /p > < p > < footer > < /p > < p > < /p > < p > < /footer > < /p > < p > < /body > < /p > < p > < /html >