Html and CSS Form with Wood Texture Background

Leave a Comment / Web Design / By
Click Here to Visit the HTML and CSS Page for Wood Texture
Signup


Login


Contact


Write a Post


Search


Follow Me


Newsletter


Blog Post Title

By Author Name | Date Published

Image description

Intro text introducing the blog post.

Section Title

Section content text.

Another Section Title

Section content text.



Spread the Love

HTML AND CSS CODE

<style>

.bform{
	display: flex;
	flex-direction: column;
	max-width: ;
	background-color: ;
	align-items: ;
	justify-content: center;
	padding: 4px;
	margin: 4px;
	border-radius: 10px;
	background-image: url("https://t4.ftcdn.net/jpg/04/16/21/59/360_F_416215928_QXQJPJE3wtgeOLmkBy0j0hemFZZgvt1B.jpg");
	border: none;
	border-style: none;
}

label{
	padding: 3px;
	margin: 3px;
	font-size: 20px;
	font-weight: bold;
}

input{
	padding: 2px;
	margin: 2px;
	font-size: 20px;
	border-radius: 10px;
	background-image: url("https://t4.ftcdn.net/jpg/04/16/21/59/360_F_416215928_QXQJPJE3wtgeOLmkBy0j0hemFZZgvt1B.jpg");
	border: ;
	border-style: inset;
}

textarea{
	padding: 2px;
	margin: 2px;
	font-size: 20px;
	border-radius: 10px;
	background-color: #003400;
	color: white;
	border: 5px solid #005200;
	border-style: outset;
}

select{
	padding: 2px;
	margin: 2px;
	font-size: 20px;
	border-radius: 10px;
	background-image: url("https://t4.ftcdn.net/jpg/04/16/21/59/360_F_416215928_QXQJPJE3wtgeOLmkBy0j0hemFZZgvt1B.jpg");
	border: ;
}

::placeholder{
	color: #141414;
}

textarea::placeholder{
	color: white;
}

.btnx{
	border: 5px #E00000 solid;
	padding: 3px;
	margin: 3px;
	max-width: ;
	background-color: #E00000;
	background-image: none;
	border-style: outset;
	font-weight: bold;
}

.btnx:hover{
	background-image: url("https://images.toucharger.com/img/graphiques/textures/bois/bois.28852.jpg");
	color: #E0E0E0;
	box-shadow: 3px 3px #888888;
}

.btny{
	display: flex;
	justify-content: right;
}

fieldset{
	background-image: url("https://t4.ftcdn.net/jpg/04/16/21/59/360_F_416215928_QXQJPJE3wtgeOLmkBy0j0hemFZZgvt1B.jpg");
	border: 1px solid black;
	border-radius: 10px;
}

legend{
	background-image: url("https://t4.ftcdn.net/jpg/04/16/21/59/360_F_416215928_QXQJPJE3wtgeOLmkBy0j0hemFZZgvt1B.jpg");
	border: 1px solid black;
	border-radius: 5px;
	font-size: 20px;
}

.social{
	display: flex;
	flex-direction: row;
	background-image: url("https://t4.ftcdn.net/jpg/04/16/21/59/360_F_416215928_QXQJPJE3wtgeOLmkBy0j0hemFZZgvt1B.jpg");
	justify-content: center;
}

div.social-ico{
	border: 15px solid #E00000;
	border-radius: 50px;
	padding: ;
	margin: 5px;
	border-image-source: ;
	border-style: outset;
	border-image-slice: 20;
}

div.social-ico:hover{
	border-style: inset;
	
}

img.social-img{
	height: 75px;
	width: 75px;
}

img.social-img:hover{
	filter: grayscale(65%);
}

.posts{
	padding: 2px;
	margin: 2px;
	font-size: 20px;
	border-radius: 10px;
	background-color: #003400;
	color: white;
	border: 5px solid #005200;
	border-style: outset;
}

.inposts{
	padding: 5px;
	margin: 5px;
}

.shareimage{
	height: 35px;
	width: 35px;
	padding: 3px;
	margin: 2px;
}

.share{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.sharecontent{
	max-width: 500px;
	padding: 3px;
	margin: 3px;
}

.tabletC{
	display: flex;
	flex-direction: column;
	justify-content: ;
	padding: 2px;
	margin: 2px;
	font-size: 20px;
	border-radius: 10px;
	background-color: #003400;
	color: white;
	border: 5px solid #005200;
	border-style: outset;
}

.tabletB{
	border-radius: 10px;
	background-image: url("https://t4.ftcdn.net/jpg/04/16/21/59/360_F_416215928_QXQJPJE3wtgeOLmkBy0j0hemFZZgvt1B.jpg");
}

.signupB{
	padding: 3px;
	margin: 3px;
}



</style>

<!--Signup Form-->

<fieldset>
<legend>Signup</legend>
<form action="submit.php" method="post" class="bform">

	<label for="name">Username:</label>
	<input type="text" id="username" name="username" placeholder="John123" required>
	
	<label for="name">Name:</label>
	<input type="text" id="name" name="name" placeholder="John Smith" required>

	<label for="email">Email:</label>
	<input type="email" id="email" name="email" placeholder="[email protected]" required>

	<label for="password">Password:</label>
	<input type="password" id="password" name="password" placeholder="Password123" required>

	<label for="website">Website:</label>
	<input type="url" id="website" name="website" placeholder="yourwebsitelink.com" required>

	<label for="country">Country:</label>
	<input type="text" id="country" name="country" placeholder="United States" required>

	<div class="btny"><input type="submit" value="Sign Up" class="btnx"></div>
</form>
</fieldset>

<!--Signup Form-->
<br><br>
<!--Login Form-->

<fieldset>
<legend>Login</legend>
<form action="submit.php" method="post" class="bform">

	<label for="name">Username:</label>
	<input type="text" id="username" name="username" placeholder="John123" required>
	
	<label for="password">Password:</label>
	<input type="password" id="password" name="password" placeholder="Password123" required>

	<div class="btny"><input type="submit" value="Login" class="btnx"></div>
</form>
</fieldset>

<!--Login Form-->
<br><br>
<!--Contact Form-->

<fieldset>
<legend>Contact</legend>
<form action="submit.php" method="post" class="bform">

	<label for="name">Username:</label>
	<input type="text" id="username" name="username" placeholder="John123" required>
	
	<label for="name">Name:</label>
	<input type="text" id="name" name="name" placeholder="John Smith" required>

	<label for="email">Email:</label>
	<input type="email" id="email" name="email" placeholder="[email protected]" required>

	<label for="website">Website:</label>
	<input type="url" id="website" name="website" placeholder="yourwebsitelink.com">

	<label for="name">Subject:</label>
	<input type="text" id="subject" name="subject" placeholder="" required>
	
	<label for="message">Message:</label>
	
	<textarea rows="15" cols="" id="message" name="message" required="" maxlength="1000" placeholder="e.g. Please write your message here"></textarea>

	<div class="btny"><input type="submit" value="Submit" class="btnx"></div>
</form>
</fieldset>

<!--Contact Form-->
<br><br>
<!--Submit Post Form-->

<fieldset>
	<legend>Write a Post</legend>
	<form action="submit_post.php" method="post" enctype="multipart/form-data" class="bform">
	  
		<label for="title">Title:</label>
		<input type="text" id="title" name="title">
	  
		<label for="author">Author:</label>
		<input type="text" id="author" name="author">
	  
		<label for="category">Category:</label>
		<select id="category" name="category">
		  <option value="1">Option 1</option>
		  <option value="2">Option 2</option>
		  <option value="3">Option 3</option>
		</select>
	  
		<label for="image">Image:</label>
		<input type="file" id="image" name="image">
		
		<label for="content">Content:</label>
		<textarea rows="15" cols="" id="content" name="content"></textarea>
	 
		<div class="btny"><input type="submit" value="Submit" class="btnx"></div>
	</form>
</fieldset>

<!--Submit Post Form-->
<br><br>
<!--Search Form-->

<fieldset>
	<legend>Search</legend>
<form action="search.php" method="get" class="bform">
  <label for="search">Search:</label>
  <input type="text" id="search" name="search">
  <div class="btny"><input type="submit" value="Find" class="btnx"></div>
</form>
</fieldset>

<!--Search Form-->
<br><br>
<!--Social Bar-->

<fieldset>
	<legend>Follow Me</legend>
<div class="social">

	<div class="social-ico">
		<a href="#" class="social-link"><img src="https://cdn-icons-png.flaticon.com/512/3665/3665167.png" alt="" class="social-img"></a>
	</div>
	
	<div class="social-ico">
		<a href="#" class="social-link"><img src="https://cdn-icons-png.flaticon.com/512/3665/3665173.png" alt="" class="social-img"></a>
	</div>
	
	<div class="social-ico">
		<a href="#" class="social-link"><img src="https://cdn-icons-png.flaticon.com/512/3665/3665178.png" alt="" class="social-img"></a>
	</div>
	
	<div class="social-ico">
		<a href="#" class="social-link"><img src="https://cdn-icons-png.flaticon.com/512/3665/3665296.png" alt="" class="social-img"></a>
	</div>
	
	<div class="social-ico">
		<a href="#" class="social-link"><img src="https://cdn-icons-png.flaticon.com/512/3665/3665249.png" alt="" class="social-img"></a>
	</div>

</div>
</fieldset>

<!--Social Bar-->
<br><br>
<!--Newsletter-->

<fieldset>
<legend>Newsletter</legend>
<form action="submit.php" method="post" class="bform">	
	<label for="name">Name:</label>
	<input type="text" id="name" name="name" placeholder="John Smith" required>

	<label for="email">Email:</label>
	<input type="email" id="email" name="email" placeholder="[email protected]" required>

	<div class="btny"><input type="submit" value="Submit" class="btnx"></div>
</form>
</fieldset>

<!--Newsletter-->
<br><br>
<!--Blog Post-->


<fieldset>

	<div class="posts">
		<div class="inposts">
		<article>
			  <header>
				<h1>Blog Post Title</h1>
				<p>By Author Name | Date Published</p>
			  </header>
			  <section>
				<img src="image.jpg" alt="Image description">
				<p>Intro text introducing the blog post.</p>
			  </section>
			  <section>
				<h2>Section Title</h2>
				<p>Section content text.</p>
			  </section>
			  <section>
				<h2>Another Section Title</h2>
				<p>Section content text.</p>
			  </section>
			  <footer>
				<h3>Related Posts:</h3>
				<ul>
				  <li><a href="#">Related Post 1</a></li>
				  <li><a href="#">Related Post 2</a></li>
				  <li><a href="#">Related Post 3</a></li>
				</ul>
			  </footer>
			</article>
			</div>

	</div>
	
</fieldset>

<!--Blog Post-->

<br><br>
<!--sharePost To Social Media-->
<div class="sharecontent">
<fieldset>
<legend>Spread the Love</legend>
	<div class="share">
	
		<a href="#" target="_blank" class="sharelink"><img src="https://cdn-icons-png.flaticon.com/512/3670/3670226.png" alt="" class="shareimage"></a>
		<a href="#" target="_blank" class="sharelink"><img src="https://cdn-icons-png.flaticon.com/512/145/145802.png" alt="" class="shareimage"></a>
		<a href="#" target="_blank" class="sharelink"><img src="https://cdn-icons-png.flaticon.com/512/3670/3670151.png" alt="" class="shareimage"></a>
		<a href="#" target="_blank" class="sharelink"><img src="https://cdn-icons-png.flaticon.com/512/3670/3670191.png" alt="" class="shareimage"></a>
		<a href="#" target="_blank" class="sharelink"><img src="https://cdn-icons-png.flaticon.com/512/145/145807.png" alt="" class="shareimage"></a>
		<a href="#" target="_blank" class="sharelink"><img src="" alt="" class="shareimage"></a>
		<a href="#" target="_blank" class="sharelink"><img src="" alt="" class="shareimage"></a>

	</div>
</fieldset>
</div>

Leave a Comment

Your email address will not be published. Required fields are marked *