What's new
By:

๐Ÿ”’ Closed Basic HTML

Status
Not open for further replies.
Lathan said:
try mo palitan container mo ng ganito:


.container {
padding: 25px;
background-color: grey;
width: 300px;
margin: auto;
}
Click to expand...
1632722742102.png


ganito lumabas eh
 
teapotpot said:
View attachment 1638470

HTML: 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Login Page </title>
<style>
Body {
  font-family: Calibri, Helvetica, sans-serif;
  background-color: black;
}
button {
       background-color: #000000;
        color: white;
        padding: 15px;
        margin: 10px 0px;
        border: none;
        cursor: pointer;
         }
 form {
       
    }
 input[type=text], input[type=password] {
        width: 100%;
        margin: 8px 0;
        padding: 12px 20px;
        display: inline-block;
        border: 2px solid green;
        box-sizing: border-box;
    }
 button:hover {
        opacity: 0.7;
    }
  .cancelbtn {
        width: auto;
        padding: 10px 18px;
        margin: 10px 5px;
    }
   
 
 .container {
        width:400px;
        max-width: 100%;
        padding: 25px;
        background-color: grey;
        border: 3px solid #f1f1f1;
        margin-inline: auto;
    }

 .container > button:nth-child(6) {
      display: block;
      width: 100%;
  }
 

 
</style>
</head>
<body>
    <center> <h1 style="color: white;"> Sino ka ba? </h1> </center>

    <form>
        <div class="container">
            <label>Username : </label>
            <input type="text" placeholder="Enter Username" name="username" required>
            <label>Password : </label>
            <input type="password" placeholder="Enter Password" name="password" required>
            <input type="checkbox"> Show Password
            <button type="submit">Login</button>
            <input type="checkbox" checked="checked"> Remember me
            <button type="button" class="cancelbtn"> Cancel</button>
            Forgot <a href="#"> password? </a>
        </div>
    </form>
</body>
</html>
Click to expand...
Maraming salamat sir
 
Palmeras said:
salamat ssob
Click to expand...
HTML: 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Login Page </title>
<style>
Body {
  font-family: Calibri, Helvetica, sans-serif;
  background-color: black;
}
button {
       background-color: #000000;
       width: 100%;
        color: white;
        padding: 15px;
        margin: 10px 0px;
        border: none;
        cursor: pointer;
         }
 form {
        border: 3px solid #f1f1f1;
        width: 350px;
        margin: auto;
    }
 input[type=text], input[type=password] {
        width: 100%;
        margin: 8px 0;
        padding: 12px 20px;
        display: inline-block;
        border: 2px solid green;
        box-sizing: border-box;
    }
 button:hover {
        opacity: 0.7;
    }
  .cancelbtn {
        width: auto;
        padding: 10px 18px;
        margin: 10px 5px;
    }
    
 
 .container {
        padding: 25px;
        background-color: grey;
        width: 300px;
        margin: auto;
    }
</style>
</head>
<body>
    <h1 style="color: white; text-align: center;"> Sino ka ba? </h1>

    <form>
        <div class="container">
            <label>Username : </label>
            <input type="text" placeholder="Enter Username" name="username" required>
            <label>Password : </label>
            <input type="password" placeholder="Enter Password" name="password" required>
            <button type="submit">Login</button>
            <input type="checkbox" checked="checked"> Remember me
            <button type="button" class="cancelbtn"> Cancel</button>
            Forgot <a href="#"> password? </a>
        </div>
    </form> 
</body> 
</html>

Output:
Screenshot_2021-09-27-14-11-39-647_com.brave.browser.webp
 
Lathan said:
HTML: 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Login Page </title>
<style>
Body {
  font-family: Calibri, Helvetica, sans-serif;
  background-color: black;
}
button {
       background-color: #000000;
       width: 100%;
        color: white;
        padding: 15px;
        margin: 10px 0px;
        border: none;
        cursor: pointer;
         }
 form {
        border: 3px solid #f1f1f1;
        width: 350px;
        margin: auto;
    }
 input[type=text], input[type=password] {
        width: 100%;
        margin: 8px 0;
        padding: 12px 20px;
        display: inline-block;
        border: 2px solid green;
        box-sizing: border-box;
    }
 button:hover {
        opacity: 0.7;
    }
  .cancelbtn {
        width: auto;
        padding: 10px 18px;
        margin: 10px 5px;
    }
   
 
 .container {
        padding: 25px;
        background-color: grey;
        width: 300px;
        margin: auto;
    }
</style>
</head>
<body>
    <h1 style="color: white; text-align: center;"> Sino ka ba? </h1>

    <form>
        <div class="container">
            <label>Username : </label>
            <input type="text" placeholder="Enter Username" name="username" required>
            <label>Password : </label>
            <input type="password" placeholder="Enter Password" name="password" required>
            <button type="submit">Login</button>
            <input type="checkbox" checked="checked"> Remember me
            <button type="button" class="cancelbtn"> Cancel</button>
            Forgot <a href="#"> password? </a>
        </div>
    </form>
</body>
</html>

Output:
View attachment 1638811
Click to expand...
Last question sir kung gusto ko sya imove ng position alin ang babaguhin? sensya na dami tanong Psych student ako eh kanina ko lang sinubukan 'to HAHAHHA
 
Palmeras said:
Last question sir kung gusto ko sya imove ng position alin ang babaguhin? sensya na dami tanong Psych student ako eh kanina ko lang sinubukan 'to HAHAHHA
Click to expand...
palitan mo yung margin: auto sa container class.
ng ganito:

margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;

Plaitan mo rin kung ilang pixels gusto mo.
 
Lagyan mo lodsng border radius para maganda yung interface, tsaka background image palitan mo

border-radius: 10px solid #(AnyColor na gusto mo);

Sa body naman ilagay mo, Background-image: file directory/file name;
 
Status
Not open for further replies.

Similar threads

About this Thread

  • 36
    Replies
  • 2K
    Views
  • 8
    Participants
Last reply from:
phdevnjb

New Topics

Trending Topics

Online now

Members online
934
Guests online
1,257
Total visitors
2,191

Forum statistics

Threads
2,277,407
Posts
28,976,397
Members
1,228,937
Latest member
bidcad
Back
Top