Webmail login free sms screen

Here is an example of a webmail login page with a free SMS screen:

Webmail Login Page

Login Form

• Email: [input field]
• Password: [input field]
• Login: [submit button]

Free SMS Screen

Send Free SMS

• To: [input field]
• Message: [input field]
• Send: [submit button]

SMS Balance

• Your current SMS balance is: [display SMS balance]

SMS Rates

• Local SMS: [display local SMS rate]
• International SMS: [display international SMS rate]

SMS History

• View your SMS history: [link to SMS history page]

Note: This is just an example and may not reflect the actual design or functionality of a real webmail service.

Here is some sample HTML and CSS code to create this layout:

<!-- Webmail Login Page -->
<div class="webmail-login">
  <h1>Webmail Login</h1>
  <form>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password"><br><br>
    <input type="submit" value="Login">
  </form>
</div>

<!-- Free SMS Screen -->
<div class="free-sms">
  <h2>Send Free SMS</h2>
  <form>
    <label for="to">To:</label>
    <input type="tel" id="to" name="to"><br><br>
    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea><br><br>
    <input type="submit" value="Send">
  </form>
  <p>Your current SMS balance is: <span id="sms-balance">$0.00</span></p>
  <p>SMS Rates:</p>
  <ul>
    <li>Local SMS: <span id="local-sms-rate">$0.05</span> per SMS</li>
    <li>International SMS: <span id="international-sms-rate">$0.10</span> per SMS</li>
  </ul>
  <p><a href="#">View your SMS history</a></p>
</div>

/* CSS Styles */
.webmail-login {
  width: 300px;
  margin: 20px auto;
  text-align: center;
}

.free-sms {
  width: 300px;
  margin: 20px auto;
  text-align: center;
}

label {
  display: block;
  margin-bottom: 10px;
}

input[type="email"], input[type="password"], input[type="tel"], textarea {
  width: 100%;
  height: 30px;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ccc;
}

input[type="submit"] {
  width: 100%;
  height: 40px;
  background-color: #4CAF50;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #3e8e41;
}

#sms-balance {
  font-weight: bold;
  color: #00698f;
}

#local-sms-rate, #international-sms-rate {
  font-weight: bold;
  color: #00698f;
}

Note that this is just an example and you will need to modify the code to fit your specific needs. Additionally, you will need to add functionality to the submit buttons to send the SMS messages and update the SMS balance.