Today I will be teaching you how to create a clean simple textbox for your website using only HTML and CSS
HTML
<!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 rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
<div id="textBox">
<div id="heading">
<p>This is a Heading</p>
</div>
<div id="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>CSS
*{
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
}
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #222222;
}
#textBox{
height: 25vh;
width: 30%;
border: 1px solid black;
background-color: #F9F9F9;
border-radius: 10px;
}
#heading{
height: 15%;
display: flex;
align-items: center;
font-size: 20px;
font-weight: bold;
background: linear-gradient(to right, #e44d26, #f16529);
border-radius: 9px 9px 0 0;
padding-left: 7px;
overflow: hidden;
}
#text{
height: 65%;
padding-left: 7px;
margin-top: 10px;
font-size: 16px;
overflow: hidden;
}If you found this blog post helpful don’t forget to check out my other projects and if you want more content follow me on
YouTube: https://www.youtube.com/channel/UC2nxqB2usQIS2c8zwVZKWEQ
Instagram: https://www.instagram.com/coding_for_the_web/
Twitter: https://twitter.com/LearnWebCoding
Comments