Simple create Contact Us page design in html and CSS
Learn How to make glassmorphism design using html and css | glassmorphism Contact us page design | Contact Us Page using html and css. Web site Design Tutorial
Video Tutorial
How to use the code in stpe by step
- Open Your text Editor(like: VS code, SublimeText or Notepad++)
- Create a .html(like: index.html) file
- Copy the HTML code the code and past in the index.html file
- Then, Create a .css(like: style.css) file
- Copy the CSS code and past in style.css file
- Open the file in your browser
HTML CODE
HTML is a standard language for web page. With HTML you can create your own website. HTML is easy to learn - You will enjoy it
<!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">
<title>Glass Morphism Contact us</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cointainer">
<div class="cointainer-fluid">
<div class="left-cointaint">
<div class="left-top-cointaint">
<span>Contact</span><br>
<span class="us">us</span>
</div>
<div class="left-bottom-cointaint">
<span>Contact Info: +43 645 56 564</span>
</div>
</div>
<div class="right-cointaint">
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<input type="text" placeholder="Contact No">
<textarea rows="2" placeholder="Message"></textarea>
<div class="btn">
<button type="reset">Cancle</button>
<button type="submit">Send</button>
</div>
</div>
</div>
</div>
</body>
</html>
CSS CODE
The Full from of CSS is Cascading Style Sheets. It explains how to show HTML elemnts on display. For web designers, it is powerfull tool to adjust the design and control of the web pages t demonstrate how they should be viewed.
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
padding: 0;
margin: 0;
}
body{
background: #0d0d725f;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Poppins', sans-serif;
}
body::before{
content: '';
position: absolute;
width: 200px;
height: 200px;
background: #007991;
background: -webkit-linear-gradient(to right, #78ffd6, #007991);
background: linear-gradient(to right, #78ffd6, #007991);
border-radius: 50%;
top: 100px;
left: 200px;
}
body::after{
content: '';
position: absolute;
width: 200px;
height: 200px;
background: #ff7e5f;
background: -webkit-linear-gradient(to right, #feb47b, #ff7e5f);
background: linear-gradient(to right, #feb47b, #ff7e5f);
border-radius: 50%;
bottom: 150px;
right: 200px;
z-index: -1;
}
.cointainer{
width: 750px;
height: 400px;
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 8px 32px 0 rgba(185, 185, 187, 0.37);
backdrop-filter: blur(4.0px);
-webkit-backdrop-filter: blur(4.0px);
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.18);
}
.cointainer-fluid{
display: flex;
}
.left-cointaint{
width: 50%;
}
.left-top-cointaint{
margin-top: 70px;
margin-left: 50px;
}
.left-top-cointaint span{
font-size: 30px;
text-transform: uppercase;
line-height: 30px;
font-weight: bold;
color: #eb2632;
}
.left-top-cointaint .us::after{
content: '';
width: 30px;
border: 2px solid #eb2632;
position: absolute;
margin-top: 5px;
top: 33%;
left: 50px;
}
.left-bottom-cointaint{
position: absolute;
bottom: 30px;
padding: 10px;
margin-left: 50px;
font-size: 12px;
text-transform: uppercase;
color: rgb(80, 79, 79);
}
.right-cointaint{
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 400px;
}
.right-cointaint input, textarea{
width: 80%;
padding: 10px;
margin-right: 20px;
background: none;
border: none;
outline: none;
border-bottom: 1px solid #999;
color: #fff;
margin-bottom: 20px;
}
::placeholder{
text-transform: uppercase;
}
.right-cointaint input[type=text]{
text-transform: uppercase;
}
.btn{
display: flex;
position: absolute;
right: 30px;
bottom: 50px;
}
.btn button{
background: none;
border: none;
outline: none;
padding-right: 20px;
cursor: pointer;
color: #eb2632;
font-size: 15px;
text-transform: uppercase;
font-weight: 700;
}
Posts
No comments: