Skip to content

Commit 326cfce

Browse files
mostlypandamostlypanda
committed
nodemailer
1 parent fe594dc commit 326cfce

File tree

2 files changed

+161
-0
lines changed

2 files changed

+161
-0
lines changed

‎using nodemailer for 2 way authentication/responsiveform/index.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Acme Web Design</title>
8+
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />
10+
<link rel="stylesheet" href="style.css">
11+
</head>
12+
<body>
13+
<div class="container">
14+
<h1 class="brand"><span>Acme</span> Web Design</h1>
15+
<div class="wrapper animated bounceInLeft">
16+
<div class="company-info">
17+
<h3>Acme Web Design</h3>
18+
<ul>
19+
<li><i class="fa fa-road"></i> 44 Something st</li>
20+
<li><i class="fa fa-phone"></i> (555) 555-5555</li>
21+
<li><i class="fa fa-envelope"></i> [email protected]</li>
22+
</ul>
23+
</div>
24+
<div class="contact">
25+
<h3>Email Us</h3>
26+
<form>
27+
<p>
28+
<label>Name</label>
29+
<input type="text" name="name">
30+
</p>
31+
<p>
32+
<label>Company</label>
33+
<input type="text" name="company">
34+
</p>
35+
<p>
36+
<label>Email Address</label>
37+
<input type="email" name="email">
38+
</p>
39+
<p>
40+
<label>Phone Number</label>
41+
<input type="text" name="phone">
42+
</p>
43+
<p class="full">
44+
<label>Message</label>
45+
<textarea name="message" rows="5"></textarea>
46+
</p>
47+
<p class="full">
48+
<button>Submit</button>
49+
</p>
50+
</form>
51+
</div>
52+
</div>
53+
</div>
54+
</body>
55+
</html>

‎using nodemailer for 2 way authentication/responsiveform/style.css‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
*{
2+
box-sizing: border-box;
3+
}
4+
5+
body{
6+
background:#92bde7;
7+
color:#485e74;
8+
line-height:1.6;
9+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
10+
padding:1em;
11+
}
12+
13+
.container{
14+
max-width:1170px;
15+
margin-left:auto;
16+
margin-right:auto;
17+
padding:1em;
18+
}
19+
20+
ul{
21+
list-style: none;
22+
padding:0;
23+
}
24+
25+
.brand{
26+
text-align: center;
27+
}
28+
29+
.brand span{
30+
color:#fff;
31+
}
32+
33+
.wrapper{
34+
box-shadow: 0 0 20px 0 rgba(72,94,116,0.7);
35+
}
36+
37+
.wrapper > *{
38+
padding: 1em;
39+
}
40+
41+
.company-info{
42+
background:#c9e6ff;
43+
}
44+
45+
.company-info h3, .company-info ul{
46+
text-align: center;
47+
margin:0 0 1rem 0;
48+
}
49+
50+
.contact{
51+
background:#f9feff;
52+
}
53+
54+
/* FORM STYLES */
55+
.contact form{
56+
display: grid;
57+
grid-template-columns: 1fr 1fr;
58+
grid-gap:20px;
59+
}
60+
61+
.contact form label{
62+
display:block;
63+
}
64+
65+
.contact form p{
66+
margin:0;
67+
}
68+
69+
.contact form .full{
70+
grid-column: 1 / 3;
71+
}
72+
73+
.contact form button, .contact form input, .contact form textarea{
74+
width:100%;
75+
padding:1em;
76+
border:1px solid #c9e6ff;
77+
}
78+
79+
.contact form button{
80+
background:#c9e6ff;
81+
border:0;
82+
text-transform: uppercase;
83+
}
84+
85+
.contact form button:hover,.contact form button:focus{
86+
background:#92bde7;
87+
color:#fff;
88+
outline:0;
89+
transition: background-color 2s ease-out;
90+
}
91+
92+
/* LARGE SCREENS */
93+
@media(min-width:700px){
94+
.wrapper{
95+
display: grid;
96+
grid-template-columns: 1fr 2fr;
97+
}
98+
99+
.wrapper > *{
100+
padding:2em;
101+
}
102+
103+
.company-info h3, .company-info ul, .brand{
104+
text-align: left;
105+
}
106+
}

0 commit comments

Comments
 (0)