-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (134 loc) · 6.52 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<nav>
<div>
<img class="desktop" src="./Ninja Mail Assets/Desktop Logos/Image20231108121852.png" alt="ninja mail logo">
<img class="mobile" src="./Ninja Mail Assets/Mobile Images/NinjaMail Logo1.png"
alt="ninja mail logo mobile">
</div>
<ul class="menu">
<li><a href="Features">Features</a></li>
<li><a href="Pricing">Pricing</a></li>
<li><a href="Services">Services</a></li>
<li><a href="Partners">Partners</a></li>
<li><button class="signupbutton">Sign Up Free</button></li>
</ul>
</nav>
<header class="intro">
<div class="wrapper">
<h1>Create Stunning Email Campaigns</h1>
<p>Create and launch email campaigns that captivate your customers in just a few clicks.</p>
<button class="Trynowbutton">Try Now</button>
<button class="Demobutton">Get A Demo</button>
</div>
<div class="intro_img">
<img class="desktop" src="./Ninja Mail Assets/Desktop Images/photo hero.png" alt="woman working at laptop">
<img class="mobile" src="./Ninja Mail Assets/Mobile Images/hero photo.png" alt="woman working at laptop">
</div>
</header>
<!-- specify divs more, more specific class names-->
<main class="section1">
<img src="" alt="">
<h2>Reach More Customers</h2>
<button>Learn How</button>
<img class="desktop" src="./Ninja Mail Assets/Desktop Images/Video.png" alt="people at outside cafe">
<!-- need to resize mobile img-->
<img class="mobile" src="./Ninja Mail Assets/Desktop Images/Video.png" alt="people at outside cafe">
</div>
</main>
<main class="section2">
<img class="desktop" src="./Ninja Mail Assets/Desktop Images/photo.png" alt="woman holds a mobile phone">
<img class="mobile" src="./Ninja Mail Assets/Mobile Images/photo.png" alt="woman holds a mobile phone">
<p>Launch campaigns but also find new customers. Our unique platform handles campaigns from start to
end.</p>
<a href="">Learn More ></a>
<img class="desktop" src="./Ninja Mail Assets/Desktop Images/photo-1.png"
alt="team works on a project together">
<img class="mobile" src="./Ninja Mail Assets/Mobile Images/photo-1.png" alt="team works on a project together">
<p>Start building and sharing with your team today. NinjaMail is renowned for its industry leading
team
collaboration tools.</p>
<a href="">Learn More ></a>
<h2>The source for
proven, engaging
email campaigns
</h2>
<p>Whether you’re a startup, small
business, e-commerce store, or
want to promote your app, NinjaMail
has the feature set tailored for
your business. </p>
</div>
</main>
<main class="section3">
<img class="desktop" src="./Ninja Mail Assets/Desktop Images/CaseStudy1.png"
alt="professional photo of Frankie">
<img class="mobile" src="./Ninja Mail Assets/Mobile Images/CaseStudy1.png" alt="professional photo of Frankie">
<img class="desktop" src="./Ninja Mail Assets/Desktop Images/CaseStudy2.png" alt="professional photo of Camile">
<img class="mobile" src="./Ninja Mail Assets/Mobile Images/CaseStudy2.png" alt="professional photo of Camile">
<img class="desktop" src="./Ninja Mail Assets/Desktop Images/CaseStudy3.png" alt="professional photo of Elayne">
<img class="mobile" src="./Ninja Mail Assets/Mobile Images/CaseStudy3.png" alt="professional photo of Elayne">
<ul>
<h4>Frankie Camile Elayne</h4>
<p>Member since 2016 Member since 2012 Member since 2018</p>
</ul>
</main>
<div></div>
<h2>Learn how others are reaching their audience easier than ever before.</h2>
<p>Enter your email</p> <button class="JoinListButton">Join Our List</button>
<div></div>
<main class="section4">
<h2>All the best brands already use us.</h2>
<img class="desktop" src="./Ninja Mail Assets/Desktop Logos/Logo1.png" alt="Last Knight Paris Logo">
<img class="mobile" src="./Ninja Mail Assets/Mobile Logos/Logo1.png" alt="Last Knight Paris Logo">
<img class="desktop" src="./Ninja Mail Assets/Desktop Logos/Logo2.png" alt="Dragon Eye Yodka Logo">
<img class="mobile" src="./Ninja Mail Assets/Mobile Logos/Logo2.png" alt="Dragon eye Yodka Logo">
<img class="desktop" src="./Ninja Mail Assets/Desktop Logos/Logo3.png" alt="Quest AI Logo">
<img class="mobile" src="./Ninja Mail Assets/Mobile Logos/Logo3.png" alt="Quest AI Logo">
<img class="desktop" src="./Ninja Mail Assets/Desktop Logos/Logo4.png" alt="Radio Tee Logo">
<img class="mobile" src="./Ninja Mail Assets/Mobile Logos/Logo4.png" alt="Radio Tee Logo">
<img class="desktop" src="./Ninja Mail Assets/Desktop Logos/Logo5.png" alt="Game Commerce Logo">
<img class="mobile" src="./Ninja Mail Assets/Mobile Logos/Logo5.png" alt="Game Commerce Logo">
</div>
</main>
<div class="section5">
<h2>Get started today!</h2>
<button>Pick A Plan</button>
</div>
<footer class="footer">
<p>NinjaMail</p>
<ul>
<a href="^1^">Features</a>
<a href="^2^">About Us</a>
<a href="^3^">Medium</a>
<a href="^4^">Contact Us</a>
<a href="^5^">Pricing</a>
<a href="^6^">Tutorials</a>
<a href="^7^">Twitter</a>
<a href="^8^">Slack</a>
<a href="^9^">Services</a>
<a href="^10^">Resources</a>
<a href="^11^">Facebook</a>
<a href="^12^">Jobs</a>
<a href="^13^">Partners</a>
<a href="^14^">Help Center</a>
<a href="^15^">Instagram</a>
<a href="^16^">Templates</a>
<a href="^17^">LinkedIn</a>
<a href="^18^">Case Studies</a>
</ul>
<img src="./Ninja Mail Assets/Desktop Logos/Image20231108121852.png" alt="Ninja Mail Logo">
NinjaMail. © 2019, All rights reserved.
<a href="#">Terms & Conditions</a>
<a href="#">Privacy Policy</a>
</div>
<script scr="script.js"></script>
</body>
</html>