👈 قم بانشاء مجلد وسميه اي اسم تريد
👈 ضعه على سطح المكتب (غير ملزم)
👈 قم بأنشاء ملف باسم index.html (لا تنسى الامتداد .html او .htm)
👈 قم بانشاء ملف اخر وسمه style.css
👈ا كتب بداخل ملف index.html الكود التالي:
<html>
<head>
<meta charset="utf-8">
<title>Send Msg</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="" method="post">
<img src="https://b.top4top.net/p_761cd8pf1.png">
<input type="text" name="email" placeholder="Email">
<textarea placeholder="Enter your message here..."></textarea>
<input type="submit" value="Send">
</form>
</body>
</html>
👈 ضع الكود التالي في ملف style.css
body {
background: linear-gradient(117deg, #ffffff 0, #13fedc5c 100%);
padding: 0px;
margin: 0px;
}
form {
margin: 100px auto;
width: 406px;
padding: 20px;
border-radius: 4px;
position: relative;
background: linear-gradient(117deg, #01fee7 0, #feff53 100%);
}
button,input[type="submit"]{
outline: 0;
cursor: pointer;
}
form img {
position: absolute;
width: 50px;
top: -20px;
left: -26px;
}
form textarea,form input[type="text"] {
width: 100%;
padding: 8px 20px;
margin: 10px 0px;
border: 1px solid #fff;
border-radius: 2px;
resize: none;
}
form textarea { height: 75px; }
form input[type="submit"] {
width: 32%;
height: 34px;
border-radius: 39px;
color: #12b289;
font-size: 17px;
background: linear-gradient(117deg, #ffffff 0, #fafafa 100%);
}
قم بتشغيل الكود في المتصفح
التصنيف:
برمجة مواقع