What's new

Help Basic HTML

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
 

Attachments

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.jpg
 

Attachments

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;
 

Similar threads

Popular Tags

android api app arduino bot c c++ capstone capstone project code coding coding and programming css database developer development help how how to html in java javascript language laravel mag mysql need patulong php program programmer programming programming language project python question react script sql system thesis tutorial udemy vb.net visual basic web web development website with

About this Thread

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

New Topics

Popular On This Forum

Online statistics

Members online
1,115
Guests online
3,959
Total visitors
5,074
Back
Top