Untitled
plain_text
a month ago
2.0 kB
0
Indexable
Never
<!DOCTYPE html> <html> <head> <style> .container { position: relative; width: 600px; height: 400px; } .node { width: 100px; height: 40px; background-color: #3498db; color: #ffffff; text-align: center; line-height: 40px; border-radius: 5px; position: absolute; } .arrow { position: absolute; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; } .arrow-right { border-top: 20px solid #3498db; } .arrow-down { border-top: 20px solid transparent; border-bottom: 20px solid #3498db; left: 50px; } .arrow-left { border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #3498db; left: 120px; } </style> </head> <body> <div class="container"> <div class="node" style="top: 50px; left: 50px;">Start</div> <div class="arrow arrow-right" style="top: 70px; left: 150px;"></div> <div class="node" style="top: 50px; left: 200px;">Log In</div> <div class="arrow arrow-right" style="top: 70px; left: 300px;"></div> <div class="node" style="top: 50px; left: 350px;">Authentication Method</div> <div class="arrow arrow-down" style="top: 90px; left: 400px;"></div> <div class="node" style="top: 130px; left: 350px;">Email & Password</div> <div class="arrow arrow-right" style="top: 150px; left: 450px;"></div> <div class="node" style="top: 130px; left: 500px;">Forgot Password</div> <div class="arrow arrow-down" style="top: 170px; left: 550px;"></div> <div class="node" style="top: 210px; left: 500px;">Email Sent</