Closed Basic HTML

Palmeras · Sep 27, 2021

Lathan said:
try mo palitan container mo ng ganito:

.container {
padding: 25px;
background-color: grey;
width: 300px;
margin: auto;
}

ganito lumabas eh

Lathan · Sep 27, 2021

Palmeras said:
View attachment 1638117

ganito lumabas eh

may bago akong sinend na code, copy mo yun boss

Palmeras · Sep 27, 2021

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>

Maraming salamat sir

Palmeras · Sep 27, 2021

Lathan said:
may bago akong sinend na code, copy mo yun boss

salamat ssob

Lathan · Sep 27, 2021

Palmeras said:
salamat ssob

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:

Palmeras · Sep 27, 2021

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

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

Lathan · Sep 27, 2021

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

margin boss

Lathan · Sep 27, 2021

margin-top
margin-right
margin-bottom
margin-left

Lathan · Sep 27, 2021

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

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.

Lathan · Sep 27, 2021

Pede rin ganito:

margin: 25px 50px 75px 100px;
- top margin is 25px
- right margin is 50px
- bottom margin is 75px
- left margin is 100px

More info:
You do not have permission to view the full content of this post. Log in or register now.

Palmeras · Sep 27, 2021

Lathan said:
Pede rin ganito:

margin: 25px 50px 75px 100px;

top margin is 25px

right margin is 50px

bottom margin is 75px

left margin is 100px

More info:
You do not have permission to view the full content of this post. Log in or register now.

Thanks sir sa malaking tulong

ambonjang12345 · Sep 30, 2021

Gamit ka ng bootstrap

Lathan · Sep 30, 2021

ambonjang12345 said:
Gamit ka ng bootstrap

beginner palang yan haha

Pusoy000 · Oct 3, 2021

pag aralan mo nalang flex

Pusoy000 · Oct 3, 2021

how about this

Frankie Arinoli · Oct 3, 2021

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;

phdevnjb · Oct 10, 2021

Nice po. keep learning idol

Closed Basic HTML

Palmeras

Forum Guru

Lathan

Forum Guru

Palmeras

Forum Guru

Palmeras

Forum Guru

Lathan

Forum Guru

Palmeras

Forum Guru

Lathan

Forum Guru

Lathan

Forum Guru

Lathan

Forum Guru

Lathan

Forum Guru

Palmeras

Forum Guru

ambonjang12345

Grasshopper

Lathan

Forum Guru

Pusoy000

Forum Veteran

Pusoy000

Forum Veteran

Frankie Arinoli

Eternal Poster

phdevnjb

Fanatic

Similar threads

Popular Tags

Closed Basic HTML

Forum Guru

Forum Guru

Forum Guru

Forum Guru

Forum Guru

Forum Guru

Forum Guru

Forum Guru

Forum Guru

Forum Guru

Forum Guru

Grasshopper

Forum Guru

Forum Veteran

Forum Veteran

Eternal Poster

Fanatic

Similar threads

Popular Tags

Privacy & Transparency

Privacy & Transparency