Skip to content
This repository was archived by the owner on Nov 26, 2024. It is now read-only.

email design template #80

Open
larafa wants to merge 2 commits into
base: master
Choose a base branch
from
Open

email design template #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7f7b6e1
email design template
larafa Mar 30, 2018
ad6c0e0
Merge branch 'master' into emailtemplate
larafa Mar 31, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions frontend/src/Email.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="styles/email.css">
Copy link
Member

@harrischristiansen harrischristiansen Apr 3, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Emails cannot reference an external css file

</head>
<body>
<div id="letter">
<img src="http://files.harrischristiansen.com/0L1R2p3G2s05/cryptocards_logo.png" alt="CryptoCards"/>
<h1>Greetings,</h1>
<div id="lettercontents">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin convallis, nunc in ultrices condimentum, nisl tellus porttitor
augue, non semper neque mi quis mauris. Vestibulum vitae euismod odio. Nullam tincidunt ornare volutpat. Nulla vitae tempus
libero. Duis dictum pulvinar laoreet. Vivamus lacinia orci tellus, at fringilla sem sollicitudin ut. Nullam tempus tortor
orci, vitae maximus massa congue non. Donec nulla nibh, dignissim et sagittis sed, euismod a lacus.</p>
<p>Sed in nunc et purus
posuere luctus. Aliquam vitae libero iaculis, dapibus eros a, mollis diam. Nunc in purus quis mi mattis vehicula. Praesent
molestie erat tincidunt turpis suscipit, sit amet tempus lectus congue. Etiam scelerisque, ante ac convallis egestas, arcu
ligula scelerisque odio, vel laoreet lorem lorem viverra justo. Nulla hendrerit, dolor eu ullamcorper ultricies, mauris augue
tempus dolor, a molestie nibh libero eget nibh. Cras aliquam nec odio eu dapibus. Ut ornare mauris vel dolor lobortis, eget
consequat dolor dapibus. Aliquam erat volutpat. Nunc at ultricies urna. In mauris metus, suscipit vitae egestas quis, suscipit
id neque. Vivamus hendrerit maximus efficitur.</p>
<p>Etiam venenatis, ex ut pretium consectetur, nunc dolor pharetra dui, sed rutrum
erat orci ac lacus. Suspendisse viverra ex non felis imperdiet congue. In blandit et felis at mollis. Maecenas nibh tellus,
laoreet sit amet imperdiet tempor, euismod egestas velit. Sed gravida, orci porta ornare fringilla, massa est pharetra nulla,
nec gravida ipsum orci non nibh. Donec tempor turpis in enim sagittis consequat. Integer viverra orci in libero ultrices,
id cursus enim eleifend. Ut nec turpis odio. In hac habitasse platea dictumst. Cras fringilla pellentesque sollicitudin.
Etiam at lorem non urna mattis laoreet. Integer euismod magna mollis lorem venenatis, nec commodo tellus volutpat. Nullam
sed leo aliquet, interdum neque id, efficitur ipsum. Donec consequat orci vitae justo blandit suscipit. Sed facilisis ipsum
et tristique vehicula.</p>
</div>
<p>Thanks,</p>
<p>Your friends at <a href="http://cryptogame.trade/">CryptoCards</a></p>
</div>
</body>
</html>
37 changes: 37 additions & 0 deletions frontend/src/styles/Email.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
body {
background-color: #404040;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align: justify;
padding: 40px;
}

body div#letter {
background-color: whitesmoke;
box-shadow: 0px 10px 100px rgba(24, 24, 24, 0.2);
width: 60%;
margin: auto;
padding: 180px;
}

body div#lettercontents {
float: left;
padding-bottom: 50px;
}

body div h1 {
padding: 18px;
}

body div img {
height: 80px;
width: 80px;
margin: 20px;
float: left;
}

@media (max-width: 600px) {
body div {
width: 95%;
padding: 20px;
}
}