$MailSignDesign3

by mtambulut

HTML

<table class="tableMain" style="box-shadow: 0 6px 0px -3px rgba(0,0,0,.1), 0 0px 0px 0px rgba(0,0,0,.14), 0 2px 3px 2px rgba(0,0,0,.12); border-spacing: 0px;background-image: radial-gradient(farthest-side ellipse at 20% 50%, #f2f5f7 18%, #4bc0da);">
  <tbody>
    <tr>
      <td style="width:34%;">
        <img class="main" style="max-width:100%; margin:auto; left:0;right:0;right:0;left:0; display: block;" src="img/cargoTransparent2.png" alt="MngMailDesign" oncontextmenu="return false" onselectstart="return false" ondragstart="return false">
      </td>
      <td style="background-color: white;width:66%;">
        <table class="main" text-align="left" valign="top" border="0" cellpadding="0" cellspacing="0" style="line-height: 16px; font-family: Arial, arial, sans-serif; font-size: 13px;width:100%;">

          <tr>
            <td>
              <header style="border: 1px solid grey;height: 50px;top:8px; margin-left: -2px; background-color:#1c6cca; color:white;margin-top: -1px;">
                <div class="mng" style="margin:16px;font-weight: 800;font-size: larger;">MNG-Kargo</div>
                <div class="social-row" style="float: right;margin-top: -40px;margin-right: 14px;">
                  <a href="https://www.mngkargo.com.tr" style="margin: 2px;text-decoration: none;">
                    <img src="img/icon/1487957759_Facebook.png" alt="facebookMNG" height="32" />
                  </a>
                  <a href="https://www.mngkargo.com.tr" style="margin: 2px;text-decoration: none;">
                    <img src='img/icon/1487957754_Twitter.png' height="32" alt="twitterMNG" />
                  </a>
                  <a href="https://www.mngkargo.com.tr" style="margin: 2px;text-decoration: none;">
                    <img src='img/icon/1487957736_GooglePlus.png' height="32" alt="googleplusMNG" />
                  </a>
                  <a href="https://www.mngkargo.com.tr" style="margin: 2px;text-decoration: none;">
                    <img...

CSS

@media (max-width: 580px) {
	  .form1 {
	    width: 100% !important;
	    float: left;
	    margin-bottom: 14px !important;
	  }
	  .form2 {
	    width: 100% !important;
	    float: right;
	    margin-bottom: 6px !important;
	  }
	}
	
	@media (max-width: 480px) {
	  .line {
	    margin-top: 0 !important;
	  }
	}
	
	@media (max-width: 440px) {
	  .a1 {
	    margin-right: 22px;
	  }
	  .onclick {
	    width: 100%;
	    margin: 8px 112px 3px 11px !important;
	  }
	  .form1 {
	    width: 100% !important;
	    margin: 0 0 20px 0px;
	  }
	  .form2 {
	    width: 100% !important;
	  }
	  .kargoDurum {
	    margin: 18px 0 -32px 0px;
	    display: block !important;
	  }
	  .mng {
	    width: 8%;
	    margin: 10px !important;
	  }
	  .social-row {
	    margin-top: -44px !important;
	    margin-right: 2px !important;
	  }
	}
	
	@media (max-width: 360px) {
	  .onclick {
	    margin: 8px 112px 3px 11px !important;
	  }
	  .form1 {
	    width: 100% !important;
	    margin: 0 0 20px 0px;
	  }
	  .form2 {
	    width: 100% !important;
	  }
	  .kargoDurum {
	    margin: 18px 0 -32px 0px;
	  }
	}
	/* iPads (portrait) ----------- */
	
	@media only screen and (min-device-width: 1364px) and (max-device-width: 1368px) {
	  .tableMain {
	    zoom: 2;
	  }
	  .explain {
	    zoom: 2;
	  }
	  .litt {
	    zoom: 2;
	  }
	}

JavaScript

// <meta name="viewport" content="width=device-width, initial-scale=1.0">
// head tagına muhakkak eklenmeli