×

HTML Code

Below is the HTML code:

<!-- Sample HTML code --> <div class="card"> <h4><a href="CssLayoutsLibrary.php" style="background-color: #f2f2f2; padding: 5px 20px; color:black;text-decoration:none;border-radius:5px;"><< Layouts</a></h4> <div class="button-container"> <button id="openHtmlModalBtn" class="button">Open HTML Code</button> <button id="openCssModalBtn" class="button">Open CSS Code</button> </div> <h2>Register</h2> <form action="#" method="POST"> <label for="name">Name</label> <input type="text" id="name" name="name" placeholder="Enter your name" required> <label for="email">Email</label> <input type="email" id="email" name="email" placeholder="Enter your email" required> <label for="password">Password</label> <input type="password" id="password" name="password" placeholder="Enter your password" required> <button type="submit">Register</button> </form> </div> Copy Code

×

CSS Code

Below is the CSS code:

* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #f7f7f7; display: flex; justify-content: center; align-items: center; height: 100vh; } .card { background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 20px; width: 100%; max-width: 400px; } h2 { text-align: center; margin-bottom: 20px; color: #333; } h4 { text-align: center; margin-bottom: 20px; color: #333; } form { display: flex; flex-direction: column; } label { margin-bottom: 5px; font-weight: bold; color: #555; } input { padding: 10px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; } button { padding: 10px 20px; background: linear-gradient(to right top, rgb(11, 23, 210), rgb(49, 192, 211)); color: white; border: none; border-radius: 5px; cursor: pointer; width: 200px; text-align: center; display: inline-block; margin-bottom: 20px; } button:hover { background-color: #0056b3; } .button-container { display: flex; justify-content: center; gap: 10px; width: 100%; /* Ensures buttons are within the full width of the form */ } /* Flexbox to center the buttons */ form > div { display: flex; justify-content: center; /* Centers buttons horizontally */ gap: 10px; /* Adds space between buttons */ } /* Media Query for Smaller Screens */ @media (max-width: 600px) { .card { max-width: 90%; padding: 15px; } input, button { font-size: 14px; padding: 8px; } h2 { font-size: 24px; } } Copy Code