E-mail Template

Developer
Vlad Sol
Size
4,871 Kb
Views
20,240
  1. E-mail Template Previews
  2. E-mail Template HTML Codes
  3. E-mail Template CSS Codes

How do I make an e-mail template?

What is a e-mail template? How do you make a e-mail template? This script and codes were developed by Vlad Sol on 16 October 2022, Sunday.

E-mail Template Previews
IQ Test

E-mail Template - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>E-mail Template</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head> <title>E-mail</title> <link rel="stylesheet" href="style.css">
</head>
<body> <div class="page-content"> <div class="column column1"> <div class="button1"> <img src="http://imgh.us/dash.svg" alt=""> </div> <div class="function-button"> <img src="http://imgh.us/inbox.svg" alt=""> <p>Inbox</p> </div> <div class="function-button"> <img src="http://imgh.us/sent.svg" alt=""> <p>Sent</p> </div> <div class="function-button"> <img src="http://imgh.us/drafts.svg" alt=""> <p>Drafts</p> </div> <div class="function-button"> <img src="http://imgh.us/remind.svg" alt=""> <p>Reminders</p> </div> <div class="function-button"> <img src="http://imgh.us/bin.svg" alt=""> <p>Bin</p> </div> <div class="function-button"> <img src="http://imgh.us/spam.svg" alt=""> <p>Spam</p> </div> <div class="button2"> <img src="http://imgh.us/settings_7.svg" alt=""> </div> </div> <div class="column column2"> <div class="search"> <p>Search</p> <img src="http://imgh.us/search_24.svg" alt=""> </div> <h2>inbox</h2> <div class="mail"> <div class="profile-photo"> <div class="photo"></div> </div> <div class="info"> <h2>Anastasia Smith</h2> <p class=subject>Subject: Lighting design seminar</p> <p class=mail-text>Hello! Welcome to our workshop on lighting...</p> </div> <div class="date"> <p>Yesterday<br>10:35</p> </div> <div class="more"> <img src="http://imgh.us/more_4.svg" alt=""> </div> </div> <div class="mail"> <div class="profile-photo"> <div class="photo"></div> </div> <div class="info"> <h2>Daniel Wellington</h2> <p class=subject>Subject: Commercial offer for Enigma</p> <p class=mail-text>Dear Mr. Davis, Thank you for considering me...</p> </div> <div class="date"> <p>August 20<br>13:30</p> </div> <div class="more"> <img src="http://imgh.us/more_4.svg" alt=""> </div> </div> <div class="mail"> <div class="profile-photo"> <div class="photo"></div> </div> <div class="info"> <h2>Vicktoria Shuffleton</h2> <p class=subject>Subject: Cascade building photos</p> <p class=mail-text>Good morning! Sending you a photo of the Cascade...</p> </div> <div class="date"> <p>August 15<br>10:15</p> </div> <div class="more"> <img src="http://imgh.us/more_4.svg" alt=""> </div> </div> <div class="mail"> <div class="profile-photo"> <div class="photo"></div> </div> <div class="info"> <h2>Anjelica Huston</h2> <p class=subject>Subject: Architecture and engineering</p> <p class=mail-text>Hello! We invite you to take part in the annual project...</p> </div> <div class="date"> <p>August 15<br>9:24</p> </div> <div class="more"> <img src="http://imgh.us/more_4.svg" alt=""> </div> </div> <div class="mail"> <div class="profile-photo"> <div class="photo"></div> </div> <div class="info"> <h2>Jack Wills</h2> <p class=subject>Subject: Company corporate organization</p> <p class=mail-text>Selected a venue of corporate events and prepared..</p> </div> <div class="date"> <p>August 14<br>10:37</p> </div> <div class="more"> <img src="http://imgh.us/more_4.svg" alt=""> </div> </div> <div class="mail"> <div class="profile-photo"> <div class="photo"></div> </div> <div class="info"> <h2>Steven Forrest</h2> <p class=subject>Subject: The design of the new brandbook</p> <p class=mail-text>Developed a concept and some ideas of the...</p> </div> <div class="date"> <p>August 11<br>16:24</p> </div> <div class="more"> <img src="http://imgh.us/more_4.svg" alt=""> </div> </div> </div> <div class="column column3"> <div class="composed-mail"> <div class="contact-photo"> <div class="profile-photo profile-photo2"> <div class="photo photo2"></div> </div> <div class="contact-info"> <p class=name>Daniel Wellington</p> <p class=subject2><span style="font-weight: bold">Subject</span>: Commercial offer for Enigma</p> <div class="date date2"> <p>August 20<br>13:30</p> </div> <div class="more"> <img src="http://imgh.us/more2.svg" alt=""> </div> </div> </div> <div class="received-mail"> <div class="text"> <p>Dear Mr. Davies,</p> <p> Advice me cousin an spring of needed. Tell use paid law ever yet new. Meant to learn of vexed if style allow he there. Tiled man stand tears ten joy there terms any widen. Procuring continued suspicion its ten. Pursuit brother are had fifteen distant has. Early had add equal china quiet visit. Appear an manner as no limits either praise in. In in written on charmed justice is amiable farther besides. Law insensible middletons unsatiable for apartments boy delightful unreserved. </p> <p> Barton waited twenty always repair in within we do. An delighted offending curiosity my is dashwoods at. Boy prosperous increasing surrounded companions her nor advantages sufficient put. John on time down give meet help as of. Him waiting and correct believe now cottage she another. Vexed six shy yet along learn maids her tiled. Through studied shyness evening bed him winding present. Become excuse hardly on my thirty it wanted. </p> <p> Mr oh winding it enjoyed by between. The servants securing material goodness her. Saw principles themselves ten are possession. So endeavor to continue cheerful doubtful we to. Turned advice the set vanity why mutual. Reasonably if conviction on be unsatiable discretion apartments delightful. Are melancholy appearance stimulated occasional entreaties end. Shy ham had esteem happen active county. Winding morning am shyness evident to. Garrets because elderly new manners however one village she. </p> </div> </div> </div> <div class="attachments-wrapper"> <div class="mail-attach-container"> <div class="images"></div> <div class="images"></div> <div class="images"></div> <div class="images"></div> <div class="images"></div> <div class="more"> <img src="http://imgh.us/more2.svg" alt=""> </div> </div> <div class="mail-attach-footer"> <div class="photo"></div> <p><span style="font-weight: bold; color: #414181">Daniel Wellington</span> attached 5 photos</p> <p>see photo</p> <img src="http://imgh.us/see_1.svg" alt=""> </div> </div> <div class="files-wrapper"> <div class="files-container"> <div class="item"> <img src="http://imgh.us/file1.svg" alt=""> <p>About</p> </div> <div class="item"> <img src="http://imgh.us/file2.svg" alt=""> <p>Price list</p> </div> <div class="more"> <img src="http://imgh.us/more2.svg" alt=""> </div> </div> <div class="files-footer"> <p><span style="font-weight: bold;">2 files attached</p>	<p>download all files</p>	<img src="http://imgh.us/down_3.svg" alt="">	</div>	</div>	<div class="mail-dialogue">	<div class="buttons-wrapper">	<div class="dialogue-button">	<p>Reply</p>	</div>	<p>or</p>	<div class="dialogue-button dialogue-button2">	<p>Forward</p>	</div>	</div>	<p><span>Last account activity: 23 hours ago</span></p> </div> </div> </div>
</body>
</html>
</body>
</html>

E-mail Template - Script Codes CSS Codes

html,
body{	margin: 0;
}
.page-content{	display: flex;	align-items: center;	justify-content: center;	height: 100vh;	background-color: #a3a3f4;
}
.column{	height: 700px;
}
.column1{	position: relative;	width: 80px;	background-color: #3b3b75;	border-radius: 10px 0 0 10px;
}
.column2{	display: flex;	align-items: center;	flex-direction: column;	width: 400px;	background-color: #424282;
}
.column3{	display: flex;	flex-direction: column;	align-items: center;	width: 540px;	background-color: #f8f8f8;	border-radius: 0 10px 10px 0;
}
.button1{	display: flex;	justify-content: center;	align-items: center;	height: 55px;	background-color: #323269;	border-radius: 10px 0 0 0;
}
.button2{	display: flex;	justify-content: center;	align-items: center;	position: absolute;	bottom: 0;	height: 55px;	width: 100%;	background-color: #323269;	border-radius: 0 0 0 10px;
}
.button1 img,
.button2 img{	height: 25px;
}
.button1:hover,
.button2:hover{	cursor: pointer;	transition: 300ms ease-in-out;	background-color: #6c6cb2;
}
.function-button{	display: flex;	flex-direction: column;	justify-content: center;	align-items: center;	height: 80px;
}
.function-button img{	height: 25px;
}
.function-button p{	font-family: Roboto;	font-size: 10px;	font-weight: bold;	color: #9898b4;	margin: 5px;
}
.function-button:hover{	cursor: pointer;	transition: 300ms ease-in-out;	background-color:#5757a5;
}
.function-button:hover > p{	transition: 300ms ease-in-out;	color: #fff;
}
.search{	display: flex;	align-items: center;	justify-content: space-between;	height: 30px;	width: 335px;	background-color: #393974;	border-radius: 5px;	margin: 25px 0;
}
.search:hover{	cursor: pointer;	transition: 300ms ease-in-out;	background-color: #323269;
}
.search p{	font-family: Roboto;	font-size: 12px;	font-weight: bold;	color: #595989;	margin: 0 15px;
}
.search img{	margin: 0 15px;
} .column2 h2{	text-transform: uppercase;	font-family: Roboto;	font-size: 12px;	color: #fff;	margin: 5px;	width: 335px;
}
.mail{	position: relative;	display: flex;	justify-content: center;	align-items: center;	height: 80px;	width: 335px;	border-radius: 5px;	background-color: #323269;	margin: 7px 0;	box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
.mail:hover{	cursor: pointer;	transition: 300ms ease-in-out;	background-color: #5757a5;
}
.mail:hover > .info p{	transition: 300ms ease-in-out;	color: #fff;
}
.profile-photo{	display: inline-flex;	justify-content: center;	align-items: center;	width: 70px;	height: 80px;
}
.photo{	height: 40px;	width: 40px;	border-radius: 100%;	background-color: rgba(0,0,0,0.2);	background-image: url(http://imgh.us/profile_7.svg);	background-size: cover;
}
.info{	display: flex;	flex-direction: column;	justify-content: center;	height: 80px;	width: 265px;
}
.info h2{	text-transform: none;
}
.info p{	margin: 2px 5px;
}
.subject{	font-family: Roboto;	font-size: 10px;	font-weight: bold;	color: #9898b4;
}
.mail-text{	font-family: Roboto;	font-size: 10px;	font-weight: bold;	color: #565684;
}
.date{	position: absolute;	top: 13px;	right: 15px;
}
.date p{	font-family: Roboto;	font-size: 11px;	font-weight: bold;	text-align: right;	color: #7979b7;	margin: 0;
}
.more{	position: relative;	cursor: pointer;	position: absolute;	top: 8px;	right: -20px;
}
.more img{	height: 20px;
}
.mail:nth-child(4){	background-color: #5757a5;
}
.mail:nth-child(4) .info p{	color: #fff;
}
.composed-mail{	display: flex;	flex-direction: column;	align-items: center;	height: 280px;	width: 460px;	background-color: #fff;	border-radius: 5px;	margin: 35px 0 25px 0;	box-shadow: 0 5px 10px rgba(208, 208, 235, 0.7);
}
.mail-attach-container{	position: relative;	display: flex;	justify-content: center;	align-items: center;	height: 100px;	width: 460px;	background-color: #fff;	border-radius: 5px 5px 0 0;
}
.mail-attach-footer,
.files-footer{	display: flex;	justify-content: flex-start;	align-items: center;	height: 45px;	width: 460px;	background-color: #f7f7ff;	border-radius: 0 0 5px 5px;
}
.mail-attach-footer:hover,
.files-footer:hover{	transition: 300ms ease-in-out;	filter: brightness(95%);
}
.mail-attach-footer .photo{	height: 30px;	width: 30px;	margin-left: 10px;
}
.mail-attach-footer p,
.files-footer p{	font-family: Roboto;	font-size: 10px;	color: #9797bd;	margin-left: 10px;
}
.mail-attach-footer p:hover,
.files-footer p:hover{	cursor: pointer;	text-decoration: underline;
}
.mail-attach-footer p:nth-child(3){	margin: 0 5px 0 170px;
}
.files-footer p:nth-child(2){	margin: 0 5px 0 272px;
}
.mail-attach-footer img,
.files-footer img{	height: 15px;
}
.mail-attach-footer img:hover,
.files-footer img:hover{	cursor: pointer;	transition: 300ms ease-in-out;	opacity: 0.7;
}
.attachments-wrapper,
.files-wrapper{	margin-bottom: 25px;	filter: drop-shadow(0px 5px 10px rgba(208, 208, 235, 0.7));
}
.files-container{	position: relative;	height: 60px;	width: 460px;	background-color: #fff;	border-radius: 5px 5px 0 0;
}
.mail-dialogue{	display: flex;	align-items: center;	justify-content: space-between;	height: 60px;	width: 540px;	background-color: #fff;	border-radius: 0 0 10px 0;
}
.contact-photo{	display: inline-flex;
}
.profile-photo2{	height: 115px;	width: 115px;
}
.photo2{	height: 60px;	width: 60px;
}
.contact-info{	position: relative;	display: flex;	flex-direction: column;	justify-content: center;	width: 345px;
}
.name,
.subject2{	font-family: Roboto;	font-size: 15px;	font-weight: bold;	color: #414181;	margin: 7px 0;
}
.subject2{	font-size: 12px;	color: #67679a;	font-weight: 500;
}
.date2{	top: 35px;	right: 30px;
}
.date2 p{	color: #b7b7d0;
}
.images{	margin: 5px;	height: 80px;	width: 80px;	background-color: #eee;
}
.item{	display: inline-flex;	flex-direction: column;	justify-content: flex-end;	align-items: center;	height: 60px;	width: 70px;
}
.item:hover{	transition: 300ms ease-in-out;	background-color: #ebebf2;
}
.item:nth-child(1){	border-radius: 5px 0 0 0;
}
.item img{	cursor: pointer;	height: 30px;
}
.item p{	font-family: Roboto;	font-size: 10px;	color: #9797bd;	margin: 5px 0;
}
.received-mail{	height: 145px;	width: 404px;	overflow: auto;	direction: rtl;
}
.text{	direction: ltr;
}
.text p{	font-family: Roboto;	font-size: 12px;	font-weight: 500;	color: #9a9abc;	line-height: 24px;	margin: 0 0 0 20px;
}
.received-mail::-webkit-scrollbar
{	background-color: #f0f0f5;	width: 4px;
}
.received-mail::-webkit-scrollbar-thumb
{	background-color: #7575a3;
}
.received-mail::-moz-scrollbar
{	background-color: #f0f0f5;	width: 4px;
}
.received-mail::-moz-scrollbar-thumb
{	background-color: #7575a3;
}
.buttons-wrapper{	display: flex;	align-items: center;	height: 30px;	width: 200px;	margin: 0 35px;
}
.buttons-wrapper p{	font-family: Roboto;	font-size: 12px;	font-weight: 500;	color: #5a5a96;	margin: 0 15px;
}
.dialogue-button{	display: flex;	justify-content: center;	align-items: center;	height: 30px;	width: 80px;	background-color: #c2c2ef;	border-radius: 5px;	box-shadow: 0 5px 10px rgba(208, 208, 235, 1);
}
.dialogue-button:hover{	cursor: pointer;	transition: 300ms ease-in-out;	opacity: 0.7;
}
.dialogue-button2{	background-color: #f0f0ff;
}
.mail-dialogue span{	font-family: Roboto;	font-size: 10px;	font-weight: 500;	color: #c7c7da;	margin: 0 45px;
}
E-mail Template - Script Codes
E-mail Template - Script Codes
Home Page Home
Developer Vlad Sol
Username SoloMDFK
Uploaded October 16, 2022
Rating 3
Size 4,871 Kb
Views 20,240
Do you need developer help for E-mail Template?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Vlad Sol (SoloMDFK) Script Codes
Name
Sticky Notes
Heart
A Pen by Vlad Sol
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!