👈 قم بانشاء مجلد وسميه اي اسم تريد
👈 ضعه على سطح المكتب (غير ملزم)
👈 قم بأنشاء ملف باسم 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%);
}
قم بتشغيل الكود في المتصفح



ليست هناك تعليقات:

إرسال تعليق