I'm trying to make a typing test and I'm having trouble trying to make the textarea exactly in the center. I've tried align-items, align-self, align-content, but nothing works. Here's what my code looks like:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Impact";
}
body{
background-color: grey;
}
.container{
width: 80vmin;
padding: 50px 30px;
background-color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 10px;
box-shadow: 0 20px 40px;
}
.stats{
text-align: right;
font-size: 18px;
margin-bottom: 30px;
}
textarea{
align-content: center;
resize: none;
width: 100%;
border-radius: 5px;
padding: 10px 5px;
font-size: 16px;
margin:20px
}
button{
float: right;
margin-top: 20px;
background-color: gold;
color: black;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 18px;
margin: 10px;
}
button:hover{
background-color:rgb(66, 154, 209)
}
button:active{
background:#003659
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>My Typing Test</title>
<link rel="stylesheet" href="Test.css" />
</head>
<body>
<div class="container">
<div class="stats">
<p>Time: <span id="time">0s</span></p>
<p>WPM: <span id="wpm">0</span></p>
</div>
<div id="words" onmousedown="return false"
onselect="return false">
</div>
<textarea rows="3"></textarea>
<div class= "ButtonControl">
<button id= "Start Timer">Start Test</button>
<button id= "Reload Page">Reset Test</button>
</div>
</div>
<script src="Test.js"></script>
</body>
</html>
How do I center the textarea even if the user tries to resize the window?
Your textarea didn't work because of margin.
You set width: 100%; and margin: 20px;, so the textarea went 20px left.
You can solve it by removing margin: 20px(First example) or adding new div that has 20px padding and contains textarea.(Second example).
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Impact";
}
body{
background-color: grey;
}
.container{
width: 80vmin;
padding: 50px 30px;
background-color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 10px;
box-shadow: 0 20px 40px;
}
.stats{
text-align: right;
font-size: 18px;
margin-bottom: 30px;
}
textarea{
align-content: center;
resize: none;
width: 100%;
border-radius: 5px;
padding: 10px 5px;
font-size: 16px;
}
button{
float: right;
margin-top: 20px;
background-color: gold;
color: black;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 18px;
margin: 10px;
}
button:hover{
background-color:rgb(66, 154, 209)
}
button:active{
background:#003659
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>My Typing Test</title>
<link rel="stylesheet" href="Test.css" />
</head>
<body>
<div class="container">
<div class="stats">
<p>Time: <span id="time">0s</span></p>
<p>WPM: <span id="wpm">0</span></p>
</div>
<div id="words" onmousedown="return false"
onselect="return false">
</div>
<textarea rows="3"></textarea>
<div class= "ButtonControl">
<button id= "Start Timer">Start Test</button>
<button id= "Reload Page">Reset Test</button>
</div>
</div>
<script src="Test.js"></script>
</body>
</html>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Impact";
}
body{
background-color: grey;
}
.container{
width: 80vmin;
padding: 50px 30px;
background-color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 10px;
box-shadow: 0 20px 40px;
}
.stats{
text-align: right;
font-size: 18px;
margin-bottom: 30px;
}
.TextControl {
padding: 0 20px;
}
textarea{
align-content: center;
resize: none;
width: 100%;
border-radius: 5px;
padding: 10px 5px;
font-size: 16px;
}
button{
float: right;
margin-top: 20px;
background-color: gold;
color: black;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 18px;
margin: 10px;
}
button:hover{
background-color:rgb(66, 154, 209)
}
button:active{
background:#003659
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>My Typing Test</title>
<link rel="stylesheet" href="Test.css" />
</head>
<body>
<div class="container">
<div class="stats">
<p>Time: <span id="time">0s</span></p>
<p>WPM: <span id="wpm">0</span></p>
</div>
<div id="words" onmousedown="return false"
onselect="return false">
</div>
<div class="TextControl"><textarea rows="3"></textarea></div>
<div class= "ButtonControl">
<button id= "Start Timer">Start Test</button>
<button id= "Reload Page">Reset Test</button>
</div>
</div>
<script src="Test.js"></script>
</body>
</html>
Basically made a flex container around the text area, and centered all its contents
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Impact";
}
body{
background-color: grey;
}
.container{
width: 80vmin;
padding: 50px 30px;
background-color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 10px;
box-shadow: 0 20px 40px;
}
.stats{
text-align: right;
font-size: 18px;
margin-bottom: 30px;
}
textarea{
align-content: center;
resize: none;
width: 100%;
border-radius: 5px;
padding: 10px 5px;
font-size: 16px;
margin:20px
}
/* new code here */
.testbox{
display: flex;
align-items: center;
justify-content: center; }
button{
float: right;
margin-top: 20px;
background-color: gold;
color: black;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 18px;
margin: 10px;
}
button:hover{
background-color:rgb(66, 154, 209)
}
button:active{
background:#003659
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>My Typing Test</title>
<link rel="stylesheet" href="Test.css" />
</head>
<body>
<div class="container">
<div class="stats">
<p>Time: <span id="time">0s</span></p>
<p>WPM: <span id="wpm">0</span></p>
</div>
<div id="words" onmousedown="return false"
onselect="return false">
</div>
<!-- new code here --> <div class="testbox" > <textarea
rows="3"></textarea> </div>
<div class= "ButtonControl">
<button id= "Start Timer">Start Test</button>
<button id= "Reload Page">Reset Test</button>
</div>
</div>
<script src="Test.js"></script>
</body>
</html>
try to use in the container with position: relative
and position absolute in the texterea,
then you can define left: some px...
Related
I've created a login form using html and css. Everything was okay but then there is a problem arises when I tried to resize the width and height of the window screen by cursor. Contents inside the form are overlapping each other when I'm resizing the window screen from the bottom by cursor. I've styled the display of the body as flex but I don't know why this is happening.
Before resizing the window screen
After resizing the window screen from bottom
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
padding: 10px;
background: linear-gradient(150deg, #311432, #9400D3, #FF0000);
}
.container {
max-width: 1100px;
height: 70%;
width: 80%;
background-color: #05C3DD;
padding: 60px 30px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
}
.container .container {
margin-left: auto;
margin-right: auto;
max-width: 500px;
height: 100%;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
.container .container .title {
font-size: 25px;
color: #05C3DD;
font-weight: 500;
position: relative;
margin-left: 15px;
margin-bottom: 28px;
}
.content form .login-details {
margin: 20px 0 12px 0;
}
form .login-details .input-box {
margin-bottom: 30px;
margin-left: 15px;
width: calc(100% / 2 - 20px);
}
form .input-box span .details {
display: block;
font-weight: 500;
margin-bottom: 5px;
}
.login-details .input-box input {
height: 45px;
width: 205%;
outline: none;
font-size: 16px;
padding-left: 15px;
border: 1px solid #ccc;
border-bottom-width: 2px;
transition: all 0.3s ease;
}
.login-details .input-box input:focus,
.login-details .input-box input:valid {
border-color: #05C3DD;
}
.button {
text-align: center;
}
form .button input {
height: 40px;
width: 93%;
border: none;
color: #fff;
font-size: 16px;
font-weight: 500;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(360deg, #05C3DD, #05C3DD);
}
form .button input:hover {
/* transform: scale(0.99); */
background: linear-gradient(-360deg, #71b7e6, #71b7e6);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<link rel="stylesheet" href="style2.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="container">
<div class="title">Login To Your Account</div>
<div class="content">
<form action="#">
<div class="login-details">
<div class="input-box">
<span class="details"></span>
<input type="text" placeholder="Username" required>
</div>
<div class="input-box">
<span class="details"></span>
<input type="text" placeholder="Password" required>
</div>
</div>
<div class="button">
<input type="submit" value="Login">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Your .container and body heights are fixed values which means the content won't have any affect on their layout once you start reducing the height of the window.
Try using min-height instead to allow the content to affect their layout:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body{
display: flex;
min-height: 100vh; /** min-height used here instead */
justify-content: center;
align-items: center;
padding: 10px;
background: linear-gradient(150deg, #311432, #9400D3, #FF0000);
}
.container {
max-width: 1100px;
min-height: 70%; /** min-height used here instead */
width: 80%;
background-color: #05C3DD;
padding: 60px 30px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
}
.container .container {
margin-left: auto;
margin-right: auto;
max-width: 500px;
height: 100%;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
.container .container .title {
font-size: 25px;
color: #05C3DD;
font-weight: 500;
position: relative;
margin-left: 15px;
margin-bottom: 28px;
}
.content form .login-details {
margin: 20px 0 12px 0;
}
form .login-details .input-box {
margin-bottom: 30px;
margin-left: 15px;
width: calc(100% / 2 - 20px);
}
form .input-box span .details {
display: block;
font-weight: 500;
margin-bottom: 5px;
}
.login-details .input-box input {
height: 45px;
width: 205%;
outline: none;
font-size: 16px;
padding-left: 15px;
border: 1px solid #ccc;
border-bottom-width: 2px;
transition: all 0.3s ease;
}
.login-details .input-box input:focus,
.login-details .input-box input:valid {
border-color: #05C3DD;
}
.button {
text-align: center;
}
form .button input {
height: 40px;
width: 93%;
border: none;
color: #fff;
font-size: 16px;
font-weight: 500;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(360deg, #05C3DD, #05C3DD);
}
form .button input:hover {
/* transform: scale(0.99); */
background: linear-gradient(-360deg, #71b7e6, #71b7e6);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<link rel="stylesheet" href="style2.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="container">
<div class="title">Login To Your Account</div>
<div class="content">
<form action="#">
<div class="login-details">
<div class="input-box">
<span class="details"></span>
<input type="text" placeholder="Username" required>
</div>
<div class="input-box">
<span class="details"></span>
<input type="text" placeholder="Password" required>
</div>
</div>
<div class="button">
<input type="submit" value="Login">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
i am trying to make the add button on the middle of the box not just be in the center but be on the middle of it.
.gallery {
background-color: #fbfbfb;
border-radius: 5px;
border-style: solid;
border: 1px solid #bbbbbb;
height: 85px;
line-height: 1;
box-sizing: border-box;
margin: 12px;
height: auto;
}
input[type="file"] {
display: none;
}
.images-upload {
background-color: #ffffff;
border-radius: 5px;
border: 1px dashed #ccc;
display: inline-block;
padding: 3px;
cursor: pointer;
width: 165px;
height: 85px;
}
.images-preview {
border-radius: 5px;
border: 1px solid #ccc;
display: inline-block;
width: 165px;
height: 85px;
padding-top: -14px;
}
.button-container {
height: 90px;
display: inline-block;
}
.image-container {
height: 90px;
width: 15%;
display: inline-block;
}
.custom-icon {
color: #00afca;
}
.close-btn {
background: none;
color: white;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
position: relative;
left: -160px;
top: -15px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
width: 0px;
}
.close-btn:hover {
color: red;
box-shadow: red 0px 7px 29px 0px;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="./assets/css/style.css" class="href">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
</head>
<body>
<div class="container">
<div class="gallery w-100 m-2">
<div class="p-3">
<div class="button-container my-1">
<div for="images-upload" class="images-upload">
<i class=" fas fa-plus-circle fa-3x custom-icon"></i>
</div>
<input id="images-upload" type="file" name="images" multiple="multiple">
</div>
<div class="image-container d-inline my-1">
<img src="https://via.placeholder.com/200x150" alt="" class="images-preview">
<button class="close-btn"> <i class="fas fa-2x fa-times"></i></button>
</div>
</div>
</div>
</div>
</body>
put the button in a div and style that div like this:
.divClass {
display: flex;
align-items: center;
justify-content: center;
}
<div class="divClass">
<button>add</button>
</div>
the button should be centered in the div
The most simple way to center a button is to do this.
#button {
align-items: center;
text-align: center;
}
<div id="button" align="center">
<button>
Button
</button>
</div>
You need to set the parent to position absolute, then the child to position relative, and put the button 50% away from the edge and that will move the left top corner to the center, so you move it back with transform 50% of the child width and height.
I Hope that makes sense
.gallery {
background-color: #fbfbfb;
border-radius: 5px;
border-style: solid;
border: 1px solid #bbbbbb;
height: 120px;
line-height: 1;
box-sizing: border-box;
margin: 12px;
}
input[type="file"] {
display: none;
}
.images-upload {
background-color: #ffffff;
border-radius: 5px;
border: 1px dashed #ccc;
display: inline-block;
padding: 3px;
cursor: pointer;
width: 165px;
height: 85px;
}
.images-preview {
border-radius: 5px;
border: 1px solid #ccc;
display: inline-block;
width: 165px;
height: 85px;
padding-top: -14px;
margin-top: -5px;
}
.button-container {
height: 90px;
display: inline-block;
position: relative;
float: left;
}
.image-container {
height: 90px;
width: 15%;
display: inline-block;
position: relative;
float: left;
padding: 5px;
}
.custom-icon {
color: #00afca;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.close-btn {
background: none;
color: white;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
position: relative;
left: 10px;
top: -80px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
width: 0px;
}
.close-btn:hover {
color: red;
box-shadow: red 0px 7px 29px 0px;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="./assets/css/style.css" class="href">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
</head>
<body>
<div class="container">
<div class="gallery w-100 m-2">
<div class="p-3">
<div class="button-container my-1">
<div for="images-upload" class="images-upload">
<i class=" fas fa-plus-circle fa-3x custom-icon"></i>
</div>
<input id="images-upload" type="file" name="images" multiple="multiple">
</div>
<div class="image-container d-inline my-1">
<img src="https://via.placeholder.com/200x150" alt="" class="images-preview">
<button class="close-btn"> <i class="fas fa-2x fa-times"></i></button>
</div>
</div>
</div>
</div>
</body>
I'm trying to make the card component responsive for the #media screen (max-width: 768px) but I'm getting a small image size that is shrunk.
i tried setting the height of the container to different sizes using vh, % but none of it seems to working like I wanted. Please spare some of your time to review the code and help me. Thank you.
Image link for the error:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;700&family=Lexend+Deca&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./css/style.css" />
<title>Responsive Card</title>
</head>
<body>
<div class="container">
<div class="card">
<div class="card__header">
<h1>Get <span>insights</span> that help your business grow.</h1>
</div>
<div class="card__paragraph">
<p>Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency.</p>
</div>
<div class="card__footer">
<span>
<h2>10k+</h2>
<p>Companies</p>
</span>
<span>
<h2>314</h2>
<p>Templates</p>
</span>
<span>
<h2>12M+</h2>
<p>Queries</p>
</span>
</div>
</div>
<div class="img__box">
<div class="overlay"></div>
</div>
</div>
</body>
</html>
Default Code for Desktop screen:
body {
background-color: var(--background-color);
width: 100%;
height: 100vh;
color: #fff;
font-family: var(--body-font);
}
h1,
h2 {
font-family: var(--header-font);
}
.container {
position: relative;
max-width: 1120px;
height: auto;
display: flex;
padding: 25px;
margin: 10vh auto;
}
.card {
position: relative;
background-color: var(--card-background);
position: relative;
width: 100%;
height: auto;
padding: 3rem;
border-radius: 6px 0 0 6px;
}
.card__header {
font-family: var(--header-font);
font-size: 1.2rem;
margin-bottom: 25px;
}
.card__header span {
color: var(--image-overlay);
}
.card__paragraph {
color: var(--paragraph);
margin-bottom: 50px;
line-height: 2rem;
font-size: 1rem;
}
.card__footer {
display: flex;
}
.card__footer span {
margin-right: 3.5rem;
}
.card__footer h2 {
margin-bottom: 0.4rem;
}
.card__footer p {
color: var(--paragraph);
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.8rem;
}
.img__box {
position: relative;
background: url(/img/img2.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: auto;
border-radius: 0px 6px 6px 0px;
}
.img__box .overlay {
background-color: var(--image-overlay);
opacity: 0.7;
width: 100%;
height: 100%;
border-radius: 0px 6px 6px 0px;
}
/*Code For making Responsive for screen breakpoint 768px*/
#media screen and (max-width:768px) {
.container {
display: flex;
flex-direction: column-reverse;
width: 80%;
height: 100%;
margin: 50px auto;
}
.card {
width: 100%;
height: 100%;
padding: 2rem;
border-radius: 0 0 6px 6px;
text-align: center;
margin-bottom: 50px;
}
.img__box {
width: 100%;
height: 100%;
border-radius: 6px 6px 0 0;
}
.img__box .overlay {
border-radius: 6px 6px 0 0;
}
.card__footer {
display: block;
}
}
Here hope this solves the issue. Snippet won't show the actual result. Try with your code.
body {
background-color: var(--background-color);
width: 100%;
height: 100vh;
color: #fff;
font-family: var(--body-font);
background:#000;
}
h1,
h2 {
font-family: var(--header-font);
}
.container {
position: relative;
max-width: 1120px;
height: auto;
display: flex;
padding: 25px;
margin: 10vh auto;
}
.card {
position: relative;
background-color: var(--card-background);
position: relative;
width: 100%;
height: auto;
border-radius: 6px 0 0 6px;
}
.card__header {
font-family: var(--header-font);
font-size: 1.2rem;
margin-bottom: 25px;
}
.card__header span {
color: var(--image-overlay);
}
.card__paragraph {
color: var(--paragraph);
margin-bottom: 50px;
line-height: 2rem;
font-size: 1rem;
}
.card__footer {
display: flex;
}
.card__footer span {
margin-right: 3.5rem;
}
.card__footer h2 {
margin-bottom: 0.4rem;
}
.card__footer p {
color: var(--paragraph);
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.8rem;
}
.img__box {
position: relative;
background: url(https://www.gsb.stanford.edu/sites/default/files/styles/1630x_variable/public/build-better-teams-key.jpg?itok=cenTh4Hq);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: auto;
border-radius: 0px 6px 6px 0px;
}
.img__box .overlay {
background-color: var(--image-overlay);
opacity: 0.7;
width: 100%;
height: 100%;
border-radius: 0px 6px 6px 0px;
}
/*Code For making Responsive for screen breakpoint 768px*/
#media screen and (max-width:768px) {
.container {
display: flex;
flex-direction: column-reverse;
width: 80%;
height: 100%;
margin: 50px auto;
}
.card {
width: 100%;
height: 100%;
border-radius: 0 0 6px 6px;
text-align: center;
margin-bottom: 50px;
}
.img__box {
width: 100%;
height: 15%;
border-radius: 6px 6px 0 0;
}
.img__box .overlay {
border-radius: 6px 6px 0 0;
}
.card__footer {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;700&family=Lexend+Deca&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./css/style.css" />
<title>Responsive Card</title>
</head>
<body>
<div class="container">
<div class="card">
<div class="card__header">
<h1>Get <span>insights</span> that help your business grow.</h1>
</div>
<div class="card__paragraph">
<p>Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency.</p>
</div>
<div class="card__footer">
<span>
<h2>10k+</h2>
<p>Companies</p>
</span>
<span>
<h2>314</h2>
<p>Templates</p>
</span>
<span>
<h2>12M+</h2>
<p>Queries</p>
</span>
</div>
</div>
<div class="img__box">
<div class="overlay"></div>
</div>
</div>
</body>
</html>
I am trying to create a simple form using material design component and it doesn't work properly placeholder doesn't removed when i starts entering the details how can i do this and i also tried using the filled also but on that also i am not able to remove the background placeholder here is my tried code and i have added all the material library required for this https://material.io/develop/web/docs/getting-started
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#get-started {
background-color: #9e0b0f;
border: 0;
border-radius: 0;
font-family: "NewsGothicBold", san-serif !important;
text-transform: uppercase;
margin: auto;
display: block;
padding: 10px 22px 5px 25px;
font-size: 18px;
font-weight: normal;
margin-top: 20px;
}
.forms {
font-family: "NewsGothicBold", san-serf;
width: 390px;
margin: 20px auto 0;
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
padding: 0 0 40px;
border-radius: 8px;
color: #555;
background-color: #fff;
}
.username,
.password {
display: flex;
margin: 20px auto;
width: 300px;
}
.mdc-text-field {
width: 350px;
margin-top: 20px;
margin-left: 20px;
}
.mdc-select {
width: 350px;
margin-top: 20px;
margin-left: 20px;
}
#media (max-width: 450px) {
.forms {
font-family: "NewsGothicBold", san-serf;
width: 330px;
margin-top: 20px !important;
margin: 0 auto;
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
padding: 0 0 40px;
border-radius: 8px;
color: #555;
background-color: #fff;
}
.mdc-text-field {
width: 290px;
margin-top: 20px;
margin-left: 20px;
}
.mdc-select {
width: 290px;
margin-top: 20px;
margin-left: 20px;
}
}
</style>
</head>
<body>
<div class="forms">
<form>
<label class="mdc-text-field mdc-text-field--outlined">
<span class="mdc-notched-outline">
<span class="mdc-notched-outline__leading"></span>
<span class="mdc-notched-outline__notch">
<span class="mdc-floating-label" id="my-label-id">Your Name</span>
</span>
<span class="mdc-notched-outline__trailing"></span>
</span>
<input
type="text"
class="mdc-text-field__input"
aria-labelledby="my-label-id"
/>
</label>
<label class="mdc-text-field mdc-text-field--outlined">
<span class="mdc-notched-outline">
<span class="mdc-notched-outline__leading"></span>
<span class="mdc-notched-outline__notch">
<span class="mdc-floating-label" id="my-label-id"
>Your EMAIL</span
>
</span>
<span class="mdc-notched-outline__trailing"></span>
</span>
<input
type="text"
class="mdc-text-field__input"
aria-labelledby="my-label-id"
/>
</label>
<button class="mdc-button mdc-button--raised mt-10" id="get-started">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">DOWNLOAD YOUR GUIDE</span>
</button>
</form>
</div>
</body>
</html>
Hello, I tried to use your code and it looks like the input is at the front and the placeholder your saying is at the back. If you still don't understand me. Remove the class on the input like this:
<input
type="text"
//remove the class
aria-labelledby="my-label-id"
/>
so I think you have to use other form design. Or like this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<style>
#get-started {
background-color: #9e0b0f;
border: 0;
border-radius: 0;
font-family: "NewsGothicBold", san-serif !important;
text-transform: uppercase;
margin: auto;
display: block;
padding: 10px 22px 5px 25px;
font-size: 18px;
font-weight: normal;
margin-top: 20px;
}
.forms {
font-family: "NewsGothicBold", san-serf;
width: 390px;
margin: 20px auto 0;
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
padding: 0 0 40px;
border-radius: 8px;
color: #555;
background-color: #fff;
}
input[type="text"] {
width: 100%;
padding: 20px;
box-sizing: border-box;
height: 46px;
border: 1px solid rgb(172, 172, 172);
border-radius: 4px;
}
.mdc-text-field--outlined {
height: 56px;
overflow: visible;
}
.username,
.password {
display: flex;
margin: 20px auto;
width: 300px;
}
.mdc-text-field {
width: 350px;
margin-top: 20px;
margin-left: 20px;
}
.mdc-select {
width: 350px;
margin-top: 20px;
margin-left: 20px;
}
#media (max-width: 450px) {
.forms {
font-family: "NewsGothicBold", san-serf;
width: 330px;
margin-top: 20px !important;
margin: 0 auto;
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
padding: 0 0 40px;
border-radius: 8px;
color: #555;
background-color: #fff;
}
.mdc-text-field {
width: 290px;
margin-top: 20px;
margin-left: 20px;
}
.mdc-select {
width: 290px;
margin-top: 20px;
margin-left: 20px;
}
}
</style>
</head>
<body>
<div class="forms">
<form>
<label class="mdc-text-field mdc-text-field--outlined">
<input
type="text"
placeholder="Your Name"
aria-labelledby="my-label-id"
/>
</label>
<label class="mdc-text-field mdc-text-field--outlined">
<input
type="text"
placeholder="Your Name"
aria-labelledby="my-label-id"
/>
</label>
<button class="mdc-button mdc-button--raised mt-10" id="get-started">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">DOWNLOAD YOUR GUIDE</span>
</button>
</form>
</div>
</body>
</html>
let me know if I helped, Good Luck. Take Care😀😀😀!!!
I have a little question about CSS and image buttons. I searched and tryed many options but none of them worked for me.
I need to link my image button in the CSS style. When you push the image a new webpage opens where you can take a picture of yourself. But my image stays at the same position no matter what I change.
If I use the code that is written on How to link an image and target a new window then my image stays at the bottom.
body {
margin: 0;
padding: 0;
background: url(basf.jpg);
background-size: cover;
font-family: sans-serif;
}
.loginBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 80px 40px;
width: 350px;
height: 500px;
box-sizing: border-box;
background: rgba(0, 0, 0, .5);
}
.user {
width: 130px;
height: 130px;
border-radius: 50%;
overflow: hidden;
position: absolute;
top: calc(-150px/2);
left: calc(50% - 65px);
}
button.imgbtn1 {
width: 70px;
height: 70px;
border-radius: 50%;
overflow: hidden;
position: absolute;
top: calc(-20px/2);
left: calc(50% - -30px);
cursor: pointer;
}
h2 {
margin: 0;
padding: 0 0 20px;
color: deepskyblue;
text-align: center;
}
.loginBox p {
margin: 0;
padding: 0;
font-weight: bold;
color: #fff;
}
.loginBox input {
width: 100%;
margin-bottom: 20px;
}
.loginBox input[type="text"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
::placeholder {
color: rgba(255, 255, 255, .5);
}
.loginBox input[type="submit"] {
border: none;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
background: deepskyblue;
cursor: pointer;
border-radius: 20px;
}
.loginBox input[type="submit"]:hover {
background: #deepskyblue;
color: #262626;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Registration Form</title>
<link rel="stylesheet" type="text/css" href="style3.css">
</head>
<body>
<div class="loginBox">
<img src="user.png" class="user">
<h2>Meld u aan</h2>
<form>
<p>Naam</p>
<input type="text" name="" placeholder="Naam">
<p>Voornaam</p>
<input type="text" name="" placeholder="Voornaam">
<p>Bedrijf</p>
<input type="text" name="" placeholder="Bedrijf">
<p>Doel
<p>
<input type="text" name="" placeholder="Doel">
<input type="submit" id="btnClick" value="zend" />
<img src="foto.png" />
</form>
</div>
</body>
</html>
After playing around for a while I have found something that works.
html:
<center><div id = "imgPositioning">
<img id = "imgOne" class = "user" src="user.png" />
<img src="foto.png" id = "imgTwo" class="user"/>
</div></center>
css:
#imgPositioning{
display:inline;
}
#imgTwo{
height:100px;
width:200px;
}
#imgOne{
height:50px;
width:100px;
float:center;
}
The answer. (found it with help from a friend). Now I need to do a bit of restyling.
Thanks for the answers! ;)
body {
margin: 0;
padding: 0;
background: url(basf.jpg);
background-size: cover;
font-family: sans-serif;
}
.user-picture {
position: absolute;
top: -25px;
width: 100%;
}
.user-picture-box {
max-width: 150px;
height: 150px;
margin: 0 auto;
position: center;
}
.user-picture-image {
width: 130px;
height: 130px;
border-radius: 50%;
overflow: hidden;
position: absolute;
top: calc(-150px/2);
left: calc(50% - 70px);
}
.user-create-picture {
width: 70px;
height: 70px;
border-radius: 50%;
position: absolute;
top: calc(-20px/2);
left: calc(50% - -30px);
cursor: pointer;
}
.user-create-picture ('img') {
width: 70px;
height: 70px;
border-radius: 50%;
position: absolute;
top: calc(-20px/2);
left: calc(50% - -30px);
cursor: pointer;
}
.login-box {
display: block;
position: relative;
background-color: rgba(0, 0, 0, .5);
margin: 100px auto 0px auto;
max-width: 350px;
}
.login-form {
padding: 80px 20px 20px 20px;
}
.login-box h2 {
color: deepskyblue;
text-align: center;
}
.login-box label {
margin: 0;
padding: 0;
font-weight: bold;
color: #fff;
}
.login-box input {
width: 100%;
}
.login-box input[type="text"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
margin-bottom: 20px;
}
::placeholder {
color: rgba(255, 255, 255, .5);
}
.login-box input[type="submit"] {
border: none;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
background: deepskyblue;
cursor: pointer;
border-radius: 20px;
}
.login-box input[type="submit"]:hover {
background: deepskyblue;
color: #262626;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Registration Form</title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class="login-box">
<div class="user-picture">
<div class="user-picture-box">
<img src="user.png" class="user-picture-image">
<a href="http://localhost/Form/foto.html" class="user-create-picture">
<img src="foto.png" height="70px" width="70px">
</a>
</div>
</div>
<div class="login-form">
<h2>Meld u aan</h2>
<form>
<label for="naam">Naam</label>
<input type="text" id="naam" name="naam" placeholder="Naam">
<label for="voornaam">Voornaam</label>
<input type="text" id="voornaam" name="voornaam" placeholder="Voornaam">
<label for="bedrijf">Bedrijf</label>
<input type="text" id="bedrijf" name="bedrijf" placeholder="Bedrijf">
<label for="doel">Doel</label>
<input type="text" id="doel" name="doel" placeholder="Doel">
<input type="submit" id="btnClick" value="zend" />
</form>
</div>
</div>
</body>
</html>
end result picture