parent
689e3783e2
commit
c8e8010a62
@ -0,0 +1,149 @@
|
||||
<!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>Document</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p>
|
||||
some thing
|
||||
</p>
|
||||
<h1>
|
||||
<span>
|
||||
|
||||
</span>
|
||||
</h1>
|
||||
<br>
|
||||
<hr>
|
||||
|
||||
<div id="something">
|
||||
<strong class="text primary">
|
||||
some thing !!!
|
||||
</strong>
|
||||
<a href="google.com">google</a>
|
||||
</div>
|
||||
<!-- attributes:
|
||||
all html elements can have attributes,
|
||||
attributes provide additional information about an element
|
||||
attributes usually come in name/value pairs like : name="value"
|
||||
|
||||
|
||||
inline and block level elements:
|
||||
block : fills the width
|
||||
inline : contains the content
|
||||
-->
|
||||
<div>
|
||||
block element
|
||||
</div>
|
||||
<div>
|
||||
inline element
|
||||
</div>
|
||||
<!-- heading tags -->
|
||||
<h1>element</h1>
|
||||
<h2>element</h2>
|
||||
<h3>element</h3>
|
||||
<h4>element</h4>
|
||||
<h5>element</h5>
|
||||
<h6>element</h6>
|
||||
<hr>
|
||||
<!-- lists -->
|
||||
<ul>
|
||||
<li>
|
||||
<a href=""></a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href=""></a></li>
|
||||
<li><a href=""></a></li>
|
||||
<li><a href=""></a></li>
|
||||
<li><a href=""></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<!-- ordered list -->
|
||||
<ol>
|
||||
<li><a href=""></a></li>
|
||||
<li><a href=""></a></li>
|
||||
<li><a href=""></a></li>
|
||||
<li><a href=""></a></li>
|
||||
<li><a href=""></a></li>
|
||||
<li><a href=""></a></li>
|
||||
</ol>
|
||||
<hr>
|
||||
<strong>important for the browser</strong>
|
||||
<b>not important for the browser</b>
|
||||
<i>italic and not imortant for the browser</i>
|
||||
<em>italic and important for the browser and seo</em>
|
||||
<small>small font size</small>
|
||||
<br>
|
||||
<mark>
|
||||
higlights the text default is yellow.
|
||||
</mark>
|
||||
<br>
|
||||
<p>web <del>design(drows line on the word)</del> course</p>
|
||||
<br>
|
||||
<p>draws <ins>underline</ins> underline</p>
|
||||
<br>
|
||||
<p>brings the <sub>text</sub> down</p>
|
||||
|
||||
<!-- html Quatation Elements -->
|
||||
<q>this is some text</q>
|
||||
<blockquote>
|
||||
this is some text
|
||||
</blockquote>
|
||||
<abbr title="something">
|
||||
some thing more
|
||||
</abbr>
|
||||
<address>
|
||||
<!-- اطلاعاتی در مورد نویسنده ی یک اثر -->
|
||||
مدیر سایت من هستم
|
||||
به نشانی اینترنتی : www.somethng.com
|
||||
</address>
|
||||
<p>
|
||||
<cite>برای نشان دادن نام یک اثر برای مثال</cite>
|
||||
</p>
|
||||
<bdo dir="rtl">ساختار متن را عوض میکند</bdo>
|
||||
|
||||
<!-- table
|
||||
برای پنل های کاربری استفاده شود
|
||||
-->
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<caption>لیست کاربران وبسایت</caption>
|
||||
<tr>
|
||||
<th>user Id</th>
|
||||
<th>user name</th>
|
||||
<th>name</th>
|
||||
<th>email</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>ahamd</td>
|
||||
<td>ahamd 110</td>
|
||||
<td>ahamd@gmail.com</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>جمع کل </td>
|
||||
<td>1000000</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<!-- برای عنوان اسلاید یا عنوان یک عکس از caption -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,33 @@
|
||||
<!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>Document</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- برای نشان دادن یک فایل ویدیویی یا صوتی در سایت از آن استفاده میشود -->
|
||||
<!-- multi media tags -->
|
||||
<!-- اکثر فرمت های ویدیویی را نیز پشتیبانی میکند -->
|
||||
<video src="the video address" controls loop width="100%" height="50%"></video>
|
||||
<!-- اگر چند نسخه از یک فایل را داشته باشیم و مرورگر بر اساس توانایی پشتیبانی از آن بخواهد انتخاب کند طبق زیر عمل میکنیم -->
|
||||
<!-- زمانی استفاده میشود که احتمال میدهیم مرورگر کاربر یک سری از فرمت های رایج را نمیتواند پشتیبانی کند -->
|
||||
<!-- یا این که اگر به هر دلیلی این فایل موجود نباشد -->
|
||||
<video controls width="100%" autoplay>
|
||||
<source src="something.mp4" />
|
||||
<source src="something.avi" />
|
||||
</video>
|
||||
<hr>
|
||||
<audio src="the audio address" controls loop></audio>
|
||||
<!-- برای زمانی که جاوا اسکریپت در مرورگر کاربر غیر فعال باشد -->
|
||||
<noscript>
|
||||
کاربر گرامی جاوااسکریپت مرورگر خود را فعال نمایید برای مشاهده ی ویدیو
|
||||
</noscript>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,65 @@
|
||||
<!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>Semanthic tag Element</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!--
|
||||
در نسخه ی جدید ایجاد شده است.
|
||||
باعث خوانایی صفخات وب میشود
|
||||
div:
|
||||
تگ های دیو همیشه در بر گیرنده ی یک سری المان دیگر هستند wrapper
|
||||
aside:
|
||||
برای ساید بار استفاده میشود کناره های صفخات وب استفاده مبشود.
|
||||
block level
|
||||
section:
|
||||
هر جا که احساس کردید که میخواهید بخش بندی انجام دهید باید از این تگ استفاده شود
|
||||
main:
|
||||
محتوای اصلی سایت را درون این تگ قرار میدهیم
|
||||
figure:
|
||||
بخشی از سایت یا بخشهایی از آن که تصویر در آن موجود است پیشنهاد شده که از این تگ استفاده شود
|
||||
article:
|
||||
هر جا که یک سری متن و توضیحات بود
|
||||
و برای فرمت دهی متن بود در این تگ باید گذاشته شود
|
||||
time:
|
||||
برای نشان دادن ساعت استفاده میشود اما معنای خاصی ندارد
|
||||
صرفا برای موتور های جست و جو است
|
||||
|
||||
-->
|
||||
<div></div>
|
||||
<span></span>
|
||||
<section></section>
|
||||
<nav>
|
||||
<a href="">first</a>
|
||||
<a href="">second</a>
|
||||
<a href="">third</a>
|
||||
</nav>
|
||||
<aside></aside>
|
||||
<header></header>
|
||||
<footer></footer>
|
||||
<main></main>
|
||||
<figure>
|
||||
<img src="sourse" alt="">
|
||||
<figcaption>توضیحات در مورد تصویر</figcaption>
|
||||
</figure>
|
||||
<article></article>
|
||||
<details>
|
||||
<summary>
|
||||
Lorem ipsum dolor sit amet.
|
||||
</summary>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit consequatur atque recusandae consequuntur rem
|
||||
explicabo alias blanditiis quibusdam velit commodi.
|
||||
</p>
|
||||
</details>
|
||||
<mark>highlighted text</mark>
|
||||
<time>uses to show the time</time>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>loading Project</title>
|
||||
<style>
|
||||
.loading {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 10px solid #efefef;
|
||||
margin: 200px;
|
||||
border-radius: 50%;
|
||||
border-left: 10px solid red;
|
||||
animation: loading 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<!-- notes
|
||||
|
||||
-->
|
||||
|
||||
<body>
|
||||
<div class="loading"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,70 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Flip Card Animation</title>
|
||||
<style>
|
||||
*,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
direction: rtl;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
li,
|
||||
ol,
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.flip-card {
|
||||
width: 300px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.flip-card img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.filp-card-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
transition: transform 1s;
|
||||
transform-style: preserve-3d;
|
||||
|
||||
}
|
||||
|
||||
.flip-card:hover .filp-card-inner {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="flip-card">
|
||||
<div class="filp-card-inner">
|
||||
<div class="flip-card-front">
|
||||
<img src="./css1/images/flipCard/@Wallpaper_4K3D (12614).jpg" alt="">
|
||||
</div>
|
||||
<div class="flip-card-back">
|
||||
<h1>Car Image</h1>
|
||||
<h5>made in some Country</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,129 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.animate {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: blue;
|
||||
margin: 100px;
|
||||
animation-name: changeColor;
|
||||
animation-duration: 5s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-fill-mode: forwards;
|
||||
/* animation-play-state: paused; */
|
||||
animation-delay: 3s;
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
.animated-2 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
animation-name: change;
|
||||
animation-duration: 5s;
|
||||
animation-iteration-count: infinite;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes changeColor {
|
||||
from {
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
to {
|
||||
background-color: red;
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes change {
|
||||
0% {
|
||||
background-color: green;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
25% {
|
||||
background-color: yellow;
|
||||
top: 0;
|
||||
left: 200px;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-color: red;
|
||||
top: 200px;
|
||||
left: 200px;
|
||||
}
|
||||
|
||||
78% {
|
||||
background-color: blue;
|
||||
top: 200px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-color: aqua;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<!-- notes
|
||||
برای ایجاد انیمیشن های خودکار استفاده میشود
|
||||
@keyframes
|
||||
animation
|
||||
animation-delay
|
||||
animation-direction
|
||||
animaiton-duration
|
||||
animation-fill-mode
|
||||
animation-iterarion-count
|
||||
animation-name
|
||||
animation-play-state
|
||||
animation-timing-function
|
||||
|
||||
animation-play-state
|
||||
اینیمیشن به صورت پیشفرض بلیباشد یا نه
|
||||
|
||||
animation-fill-mode
|
||||
forwards
|
||||
backwards
|
||||
|
||||
animation-play-state:
|
||||
paused
|
||||
running
|
||||
default: running
|
||||
|
||||
animation-timing-function:
|
||||
|
||||
animation-dalay: runs the animation after givven delay
|
||||
|
||||
animation-direction:
|
||||
reverse -> starts from the end
|
||||
alternated-reverse
|
||||
|
||||
short hand:
|
||||
animation: animationName animation-duration timing-fucntion delay iteration-count direction fill-mode play-state
|
||||
|
||||
-->
|
||||
|
||||
<body>
|
||||
<div class="animate"></div>
|
||||
<hr>
|
||||
<div class="animated-2"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,579 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<!--[if gte mso 9]>
|
||||
<xml>
|
||||
<o:OfficeDocumentSettings>
|
||||
<o:AllowPNG/>
|
||||
<o:PixelsPerInch>96</o:PixelsPerInch>
|
||||
</o:OfficeDocumentSettings>
|
||||
</xml>
|
||||
<![endif]-->
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="x-apple-disable-message-reformatting">
|
||||
<!--[if !mso]><!-->
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<!--<![endif]-->
|
||||
<title></title>
|
||||
|
||||
<style type="text/css">
|
||||
table,
|
||||
td {
|
||||
color: #aeb9cf;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #0000ee;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
#u_content_image_1 .v-src-width {
|
||||
width: 211px !important;
|
||||
}
|
||||
|
||||
#u_content_image_1 .v-src-max-width {
|
||||
max-width: 75% !important;
|
||||
}
|
||||
|
||||
#u_content_button_2 .v-size-width {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
#u_content_button_4 .v-size-width {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
#u_content_text_12 .v-text-align {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
#u_content_image_4 .v-text-align {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
#u_content_text_13 .v-text-align {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
#u_content_image_6 .v-src-width {
|
||||
width: 178px !important;
|
||||
}
|
||||
|
||||
#u_content_image_6 .v-src-max-width {
|
||||
max-width: 25% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 620px) {
|
||||
.u-row {
|
||||
width: 600px !important;
|
||||
}
|
||||
|
||||
.u-row .u-col {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.u-row .u-col-50 {
|
||||
width: 300px !important;
|
||||
}
|
||||
|
||||
.u-row .u-col-100 {
|
||||
width: 600px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.u-row-container {
|
||||
max-width: 100% !important;
|
||||
padding-left: 0px !important;
|
||||
padding-right: 0px !important;
|
||||
}
|
||||
|
||||
.u-row .u-col {
|
||||
min-width: 320px !important;
|
||||
max-width: 100% !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.u-row {
|
||||
width: calc(100% - 40px) !important;
|
||||
}
|
||||
|
||||
.u-col {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.u-col > div {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table,
|
||||
tr,
|
||||
td {
|
||||
vertical-align: top;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ie-container table,
|
||||
.mso-container table {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
* {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
a[x-apple-data-detectors='true'] {
|
||||
color: inherit !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hide-mobile {
|
||||
max-height: 0px;
|
||||
overflow: hidden;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.hide-desktop {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body class="clean-body"
|
||||
style="margin: 0;padding: 0;-webkit-text-size-adjust: 100%;background-color: #1c2434;color: #aeb9cf">
|
||||
<!--[if IE]>
|
||||
<div class="ie-container"><![endif]-->
|
||||
<!--[if mso]>
|
||||
<div class="mso-container"><![endif]-->
|
||||
<table style="border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;min-width: 320px;Margin: 0 auto;background-color: #1c2434;width:100%"
|
||||
cellpadding="0" cellspacing="0">
|
||||
<tbody>
|
||||
<tr style="vertical-align: top">
|
||||
<td style="word-break: break-word;border-collapse: collapse !important;vertical-align: top">
|
||||
<!--[if (mso)|(IE)]>
|
||||
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||
<tr>
|
||||
<td align="center" style="background-color: #1c2434;"><![endif]-->
|
||||
|
||||
|
||||
<div class="u-row-container" style="padding: 0px;background-color: transparent">
|
||||
<div class="u-row"
|
||||
style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;">
|
||||
<div style="border-collapse: collapse;display: table;width: 100%;background-color: transparent;">
|
||||
<!--[if (mso)|(IE)]>
|
||||
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||
<tr>
|
||||
<td style="padding: 0px;background-color: transparent;" align="center">
|
||||
<table cellpadding="0" cellspacing="0" border="0" style="width:600px;">
|
||||
<tr style="background-color: transparent;"><![endif]-->
|
||||
|
||||
<!--[if (mso)|(IE)]>
|
||||
<td align="center" width="600"
|
||||
style="width: 600px;padding: 50px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"
|
||||
valign="top"><![endif]-->
|
||||
<div class="u-col u-col-100"
|
||||
style="max-width: 320px;min-width: 600px;display: table-cell;vertical-align: top;">
|
||||
<div style="width: 100% !important;">
|
||||
<!--[if (!mso)&(!IE)]><!-->
|
||||
<div style="padding: 50px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;">
|
||||
<!--<![endif]-->
|
||||
|
||||
<table style="font-family:arial,helvetica,sans-serif;" role="presentation"
|
||||
cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:arial,helvetica,sans-serif;"
|
||||
align="left">
|
||||
|
||||
<table height="0px" align="center" border="0" cellpadding="0"
|
||||
cellspacing="0" width="100%"
|
||||
style="border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;border-top: 0px solid #BBBBBB;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%">
|
||||
<tbody>
|
||||
<tr style="vertical-align: top">
|
||||
<td style="word-break: break-word;border-collapse: collapse !important;vertical-align: top;font-size: 0px;line-height: 0px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%">
|
||||
<span> </span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!--[if (!mso)&(!IE)]><!-->
|
||||
</div>
|
||||
<!--<![endif]-->
|
||||
</div>
|
||||
</div>
|
||||
<!--[if (mso)|(IE)]></td><![endif]-->
|
||||
<!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="u-row-container" style="padding: 0px;background-color: transparent">
|
||||
<div class="u-row"
|
||||
style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;">
|
||||
<div style="border-collapse: collapse;display: table;width: 100%;background-color: transparent;">
|
||||
<!--[if (mso)|(IE)]>
|
||||
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||
<tr>
|
||||
<td style="padding: 0px;background-color: transparent;" align="center">
|
||||
<table cellpadding="0" cellspacing="0" border="0" style="width:600px;">
|
||||
<tr style="background-color: transparent;"><![endif]-->
|
||||
|
||||
<!--[if (mso)|(IE)]>
|
||||
<td align="center" width="600"
|
||||
style="width: 600px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"
|
||||
valign="top"><![endif]-->
|
||||
<div class="u-col u-col-100"
|
||||
style="max-width: 320px;min-width: 600px;display: table-cell;vertical-align: top;">
|
||||
<div style="width: 100% !important;">
|
||||
<!--[if (!mso)&(!IE)]><!-->
|
||||
<div style="padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;">
|
||||
<!--<![endif]-->
|
||||
|
||||
<table id="u_content_image_1" style="font-family:arial,helvetica,sans-serif;"
|
||||
role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="overflow-wrap:break-word;word-break:break-word;padding:20px;font-family:arial,helvetica,sans-serif;"
|
||||
align="left">
|
||||
|
||||
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||
<tr>
|
||||
<td class="v-text-align"
|
||||
style="padding-right: 0px;padding-left: 0px;"
|
||||
align="center">
|
||||
|
||||
<img align="center" border="0" src="{{site-logo}}"
|
||||
alt="Image" title="Image"
|
||||
style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 37.68%;max-width: 211.01px;"
|
||||
width="211.01" class="v-src-width v-src-max-width"/>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table style="font-family:arial,helvetica,sans-serif;" role="presentation"
|
||||
cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:arial,helvetica,sans-serif;"
|
||||
align="left">
|
||||
|
||||
<table height="0px" align="center" border="0" cellpadding="0"
|
||||
cellspacing="0" width="100%"
|
||||
style="border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;border-top: 1px solid #293549;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%">
|
||||
<tbody>
|
||||
<tr style="vertical-align: top">
|
||||
<td style="word-break: break-word;border-collapse: collapse !important;vertical-align: top;font-size: 0px;line-height: 0px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%">
|
||||
<span> </span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!--[if (!mso)&(!IE)]><!-->
|
||||
</div>
|
||||
<!--<![endif]-->
|
||||
</div>
|
||||
</div>
|
||||
<!--[if (mso)|(IE)]></td><![endif]-->
|
||||
<!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="u-row-container" style="padding: 0px;background-color: transparent">
|
||||
<div class="u-row"
|
||||
style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;">
|
||||
<div style="border-collapse: collapse;display: table;width: 100%;background-color: transparent;">
|
||||
<!--[if (mso)|(IE)]>
|
||||
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||
<tr>
|
||||
<td style="padding: 0px;background-color: transparent;" align="center">
|
||||
<table cellpadding="0" cellspacing="0" border="0" style="width:600px;">
|
||||
<tr style="background-color: transparent;"><![endif]-->
|
||||
|
||||
<!--[if (mso)|(IE)]>
|
||||
<td align="center" width="600"
|
||||
style="width: 600px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"
|
||||
valign="top"><![endif]-->
|
||||
<div class="u-col u-col-100"
|
||||
style="max-width: 320px;min-width: 600px;display: table-cell;vertical-align: top;">
|
||||
<div style="width: 100% !important;">
|
||||
<!--[if (!mso)&(!IE)]><!-->
|
||||
<div style="padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;">
|
||||
<!--<![endif]-->
|
||||
|
||||
<table style="font-family:arial,helvetica,sans-serif;" role="presentation"
|
||||
cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="overflow-wrap:break-word;word-break:break-word;padding:33px 55px;font-family:arial,helvetica,sans-serif;"
|
||||
align="left">
|
||||
|
||||
<div class="v-text-align"
|
||||
style="line-height: 160%; text-align: center; word-wrap: break-word;">
|
||||
<p style="line-height: 160%; font-size: 14px;"><span
|
||||
style="line-height: 28.8px; font-size: 18px;">
|
||||
<?php esc_attr_e('Verify your Email Address for {{sitename}}','digits');?></span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!--[if (!mso)&(!IE)]><!-->
|
||||
</div>
|
||||
<!--<![endif]-->
|
||||
</div>
|
||||
</div>
|
||||
<!--[if (mso)|(IE)]></td><![endif]-->
|
||||
<!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="u-row-container" style="padding: 1px;background-color: transparent">
|
||||
<div class="u-row"
|
||||
style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;">
|
||||
<div style="border-collapse: collapse;display: table;width: 100%;background-color: transparent;">
|
||||
<!--[if (mso)|(IE)]>
|
||||
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||
<tr>
|
||||
<td style="padding: 1px;background-color: transparent;" align="center">
|
||||
<table cellpadding="0" cellspacing="0" border="0" style="width:600px;">
|
||||
<tr style="background-color: transparent;"><![endif]-->
|
||||
|
||||
<!--[if (mso)|(IE)]>
|
||||
<td align="center" width="600"
|
||||
style="width: 600px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"
|
||||
valign="top"><![endif]-->
|
||||
<div class="u-col u-col-100"
|
||||
style="max-width: 320px;min-width: 600px;display: table-cell;vertical-align: top;">
|
||||
<div style="width: 100% !important;">
|
||||
<!--[if (!mso)&(!IE)]><!-->
|
||||
<div style="padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;">
|
||||
<!--<![endif]-->
|
||||
|
||||
<table id="u_content_button_4" style="font-family:arial,helvetica,sans-serif;"
|
||||
role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:arial,helvetica,sans-serif;"
|
||||
align="left">
|
||||
|
||||
<div class="v-text-align" align="center">
|
||||
<!--[if mso]>
|
||||
<table width="100%" cellpadding="0" cellspacing="0" border="0"
|
||||
style="border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;font-family:arial,helvetica,sans-serif;">
|
||||
<tr>
|
||||
<td class="v-text-align"
|
||||
style="font-family:arial,helvetica,sans-serif;"
|
||||
align="center">
|
||||
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
|
||||
xmlns:w="urn:schemas-microsoft-com:office:word"
|
||||
href="{{verify-link}}"
|
||||
style="height:72px; v-text-anchor:middle; width:394px;"
|
||||
arcsize="16.5%" stroke="f"
|
||||
fillcolor="#293549">
|
||||
<w:anchorlock/>
|
||||
<center style="color:#FFFFFF;font-family:arial,helvetica,sans-serif;">
|
||||
<![endif]-->
|
||||
<a href="{{verify-link}}" target="_blank" class="v-size-width"
|
||||
style="box-sizing: border-box;display: inline-block;font-family:arial,helvetica,sans-serif;text-decoration: none;-webkit-text-size-adjust: none;text-align: center;color: #FFFFFF; background-color: #293549; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; width:68%; max-width:100%; overflow-wrap: break-word; word-break: break-word; word-wrap:break-word; mso-border-alt: none;border-top-width: 0px; border-top-style: solid; border-left-width: 0px; border-left-style: solid; border-right-width: 0px; border-right-style: solid; border-bottom-width: 0px; border-bottom-style: solid;">
|
||||
<span style="display:block;padding:24px 20px;line-height:120%;"><span
|
||||
style="font-size: 20px; line-height: 24px;"><strong><span
|
||||
style="line-height: 24px; font-size: 20px;"><span
|
||||
style="line-height: 24px; font-size: 20px;">
|
||||
<?php esc_attr_e('Click here to Verify Email','digits');?></span></span>
|
||||
</strong>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<!--[if mso]></center></v:roundrect></td></tr></table><![endif]-->
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!--[if (!mso)&(!IE)]><!-->
|
||||
</div>
|
||||
<!--<![endif]-->
|
||||
</div>
|
||||
</div>
|
||||
<!--[if (mso)|(IE)]></td><![endif]-->
|
||||
<!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="u-row-container" style="padding: 0px;background-color: transparent">
|
||||
<div class="u-row"
|
||||
style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;">
|
||||
<div style="border-collapse: collapse;display: table;width: 100%;background-color: transparent;">
|
||||
<!--[if (mso)|(IE)]>
|
||||
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||
<tr>
|
||||
<td style="padding: 0px;background-color: transparent;" align="center">
|
||||
<table cellpadding="0" cellspacing="0" border="0" style="width:600px;">
|
||||
<tr style="background-color: transparent;"><![endif]-->
|
||||
|
||||
<!--[if (mso)|(IE)]>
|
||||
<td align="center" width="600"
|
||||
style="width: 600px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"
|
||||
valign="top"><![endif]-->
|
||||
<div class="u-col u-col-100"
|
||||
style="max-width: 320px;min-width: 600px;display: table-cell;vertical-align: top;">
|
||||
<div style="width: 100% !important;">
|
||||
<!--[if (!mso)&(!IE)]><!-->
|
||||
<div style="padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;">
|
||||
<!--<![endif]-->
|
||||
|
||||
<table style="font-family:arial,helvetica,sans-serif;" role="presentation"
|
||||
cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="overflow-wrap:break-word;word-break:break-word;padding:30px 10px;font-family:arial,helvetica,sans-serif;"
|
||||
align="left">
|
||||
|
||||
<table height="0px" align="center" border="0" cellpadding="0"
|
||||
cellspacing="0" width="100%"
|
||||
style="border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;border-top: 1px solid #293549;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%">
|
||||
<tbody>
|
||||
<tr style="vertical-align: top">
|
||||
<td style="word-break: break-word;border-collapse: collapse !important;vertical-align: top;font-size: 0px;line-height: 0px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%">
|
||||
<span> </span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!--[if (!mso)&(!IE)]><!-->
|
||||
</div>
|
||||
<!--<![endif]-->
|
||||
</div>
|
||||
</div>
|
||||
<!--[if (mso)|(IE)]></td><![endif]-->
|
||||
<!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{{protected-by-digits}}
|
||||
|
||||
|
||||
|
||||
<div class="u-row-container" style="padding: 0px;background-color: transparent">
|
||||
<div class="u-row"
|
||||
style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;">
|
||||
<div style="border-collapse: collapse;display: table;width: 100%;background-color: transparent;">
|
||||
<!--[if (mso)|(IE)]>
|
||||
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||
<tr>
|
||||
<td style="padding: 0px;background-color: transparent;" align="center">
|
||||
<table cellpadding="0" cellspacing="0" border="0" style="width:600px;">
|
||||
<tr style="background-color: transparent;"><![endif]-->
|
||||
|
||||
<!--[if (mso)|(IE)]>
|
||||
<td align="center" width="600"
|
||||
style="width: 600px;padding: 50px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"
|
||||
valign="top"><![endif]-->
|
||||
<div class="u-col u-col-100"
|
||||
style="max-width: 320px;min-width: 600px;display: table-cell;vertical-align: top;">
|
||||
<div style="width: 100% !important;">
|
||||
<!--[if (!mso)&(!IE)]><!-->
|
||||
<div style="padding: 50px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;">
|
||||
<!--<![endif]-->
|
||||
|
||||
<table style="font-family:arial,helvetica,sans-serif;" role="presentation"
|
||||
cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:arial,helvetica,sans-serif;"
|
||||
align="left">
|
||||
|
||||
<table height="0px" align="center" border="0" cellpadding="0"
|
||||
cellspacing="0" width="100%"
|
||||
style="border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;border-top: 0px solid #BBBBBB;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%">
|
||||
<tbody>
|
||||
<tr style="vertical-align: top">
|
||||
<td style="word-break: break-word;border-collapse: collapse !important;vertical-align: top;font-size: 0px;line-height: 0px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%">
|
||||
<span> </span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!--[if (!mso)&(!IE)]><!-->
|
||||
</div>
|
||||
<!--<![endif]-->
|
||||
</div>
|
||||
</div>
|
||||
<!--[if (mso)|(IE)]></td><![endif]-->
|
||||
<!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!--[if mso]></div><![endif]-->
|
||||
<!--[if IE]></div><![endif]-->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>transition</title>
|
||||
<style>
|
||||
a[class*="link"] {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.link {
|
||||
background-color: lightgreen;
|
||||
color: #fff;
|
||||
margin: 100px;
|
||||
padding: 5px 10px;
|
||||
transition-property: all;
|
||||
transition-duration: 0.5s;
|
||||
transition-delay: 1s;
|
||||
transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.rotate {
|
||||
width: 100px;
|
||||
height: 80px;
|
||||
background-color: red;
|
||||
transition: width 1s, transform 1s ease-out;
|
||||
}
|
||||
|
||||
.rotate:hover {
|
||||
width: 150px;
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
</style>
|
||||
<!--
|
||||
notes :
|
||||
|
||||
transiton,
|
||||
transition-delay,
|
||||
transition-duration,
|
||||
transition-property,
|
||||
transiton-timing-function,
|
||||
|
||||
transition-timing-functions:
|
||||
linear
|
||||
ease
|
||||
ease-in
|
||||
ease-in-out
|
||||
ease-out
|
||||
steps(6,end)-jumpend jumpstart jumpnone
|
||||
cubic-bezier()
|
||||
|
||||
shorthand:
|
||||
transition: transition-property transition-duration transition-timing-function trasition-delay;
|
||||
|
||||
aminatable css properties :
|
||||
there is a list in developers.mozila.com
|
||||
|
||||
-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a href="#" class="link">link</a>
|
||||
<div class="rotate"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in new issue