كونكر عرب - قالب للبريد الاكتروني متوافق مع الجوال

السلام عليكم ورحمة الله وبركاته

ده قالب بسيط عملته دلوقتي متوافق مع الجوال ياعني الرساله في البريد اتكون متوافقه سواء تليفون او كمبيوتر او اي جهاز تاني emoji14

هو تصميم بسيط وخفيف

عفواً لايمكن عرض الروابط إلا بعد الرد على الموضوع
القالب

كود PHP:


		
			
<!doctype html>

<html>

  <head>

    <meta name="viewport" content="width=device-width" />

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>Email</title>



<style>

       



    .body{

        background: #4A235A;

        text-align: center;

        color:#fff;

        font-family: arial,sans-serif;

    }

    .box{

        width:70%;

        margin:auto;

        background:#633974;

        margin-top:100px;

        border-bottom:2px solid #F4D03F;

        border-radius:15px;

    }    

    .box .title{

        background:#7D3C98;

        padding:10px;

        border-bottom:2px solid #4A235A;

        border-radius:0px 0px 5px 5px;

        font-family: arial,sans-serif;

        

    }

    .box .text{

        font-size:16px;

        padding:15px;

        text-align:center;

        font-weight: bold;

    }

    .box table{

        margin-top:10px;

        margin:auto;

        border-collapse: collapse;

        width:80%;

        margin-bottom:30px;

    }

    .box table thead{

        background:#8E44AD;

        border-left:5px solid #8A40A9;

        border-right:5px solid #8A40A9;

        

        

    }

    .box table tbody{

        background:#462055;

        border-left:5px solid #291432;

        border-right:5px solid #291432;

    }

    .box table tbody td{

        padding:10px;

        border:1px solid #391846;

    }

    .box table tbody td:hover{

        background:#260A32;

    }

    .box table tr th{

        width:50%;

        padding:10px;

    }

    

    .footer{

    color:#fff;

    background:#922B21;

    position: fixed;

    left: 0;

    bottom: 0;

    width: 100%;

    padding:5px;

}

.footer a{

    color:#C39BD3;

    text-decoration:none;

}

.button{

    

     width:100%;

     margin:auto;

     margin-bottom:30px;

}

.button a{

    text-decoration:none;

    color:#fff;

     background:#4B205C;

    padding:15px;

    border-radius:50px;

}

.button a:hover{

     background:#562951;

}

.button a img{

    width:20px;

    padding-right:10px;

    

}

</style>

</head>

<body class="body">



<div class="box">

<div class="title">Website Name</div>



<div class="text">I Forgot The Password</div>

    <table>

        <thead>

            <tr>

            <th>Your account</th>

            <th>Password</th>

            </tr>

        </thead>

        <tbody>

        <tr>

            <td>Mohamed yasser</td>

            <td>123456</td>

        </tr>

        </tbody>

    </table>

    <div class="button">

            <a href="#"><img src="https://www.flaticon.com/svg/vstatic/svg/0/340.svg?token=exp=1610888056~hmac=a844368696ede6d6ae6c556bae056261">Back to home</a>

    </div>

    

</div>

<div class="footer">

     all copyright @ <a href="https://www.facebook.com/daany10222">Mohamed Yasser</a>

    </div>

</div>

</body>