-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
250 lines (223 loc) · 12.5 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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eric Ornduff</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="jquery.flipster.min.css">
<script src="https://kit.fontawesome.com/b41e626a2b.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="header">
<div class="container">
<nav>
<img src="./images/car-crash-logo.JPEG" class="logo">
<ul id="sidemenu">
<li><a href="#header">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contacts">Contacts</a></li>
<i class="fa-solid fa-xmark" onclick="closemenu()"></i>
</ul> <i class="fa-solid fa-bars" onclick="openmenu()"></i>
</nav>
<div class="header-text">
<p>Auto Body Painter</p>
<h1>Hi, I'm <span>Eric</span> <br> out of North Carolina</h1>
</div>
</div>
</div>
<!------------About------------------->
<div id="about">
<div class="container">
<div class="row">
<div class="about-col-1">
<img src="./images/eric-photo.jpg">
</div>
<div class="about-col-2">
<h1 class="sub-title">About Me</h1>
<p>Professional responsible for applying paint and other finishes to vehicles. responsibles include preparing surfaces for painting by sanding, filling, or priming, and then mixing and matching paint colors to achieve the desired shade. Use tools like spray guns, paint brushes, or rollers to apply the paint, ensuring a smooth and even finish.</p>
<div class="tab-titles">
<p class="tab-links active-link" onclick="opentab('skills')">Skills</p>
<p class="tab-links" onclick="opentab('experiance')">Experiance</p>
<p class="tab-links" onclick="opentab('education')">Education</p>
</div>
<div class="tab-contents active-tab" id="skills"><!--skills-->
<p>Proficient in a diverse range of painting techniques. My expertise extends to conducting major as well as minor bodywork repairs and accurately estimating costs for painting services. With meticulous attention to detail and a precise, artistic approach, I ensure that each vehicle is restored to its pristine condition..</p>
<ul>
<li><span>Automotive Painting</span></li>
<li><span>Vehicle Preperation</span></li>
<li><span>Excellent Body Repair Skills</span></li>
<li><span>Sanding</span></li>
<li><span>Cavity Filling</span></li>
<li><span>Rust Removal</span></li>
<li><span>Vehicle Shuttling</span></li>
<li><span>Mixing Paint Acording to Specifications</span></li>
<li><span>Hazardous Waste</span></li>
</ul>
</div>
<div class="tab-contents" id="experiance"><!--experiance-->
<ul>
<li><span>Working with Different Paint Systems</span> <br> Solvent-based paints like urethane and acrylic enamel, known for their durability and high-gloss finish, as well as waterborne paints, which are environmentally friendly and offer excellent color matching</li>
<li><span>Color Matching</span> <br> Ensuring accurate color matching is crucial, often involving identifying the paint code on the vehicle’s identification plate to find the exact formula for the original paint color</li>
<li><span>Preparation and Finishing</span> <br> Sanding and priming, before painting, as well as finishing touches like buffing and polishing to ensure a high-quality result</li>
<li><span>Custom Work</span> <br> Custom painting, working with airbrushes, decals, and creating unique designs according to customer requests</li>
<li><span>Dealing with Challenges:</span> <br> Paint runs, fading, and defects, which require problem-solving skills and expertise to correct</li>
<li><span>Use of Tools and Equipment</span> <br> Proficiency with various tools, including spray guns and other painting equipment to achieve the desired finish on different types of vehicles</li>
<li><span>Health and Safety</span> <br> Handling potentially hazardous materials safely and knowledgeably is part of the job, as is maintaining a safe and clean work environment.</li>
</ul>
</div>
<div class="tab-contents" id="education"><!--education-->
<ul>
<li><span>Dale Earnhart Chevrolet</span> <br> North Carolina</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!---------Services----------------->
<div id="services">
<div id="container">
<h1 class="sub-title">My Services</h1>
<div class="services-list">
<div>
<i class="fa-solid fa-paintbrush"></i>
<h2>Automotive Painter</h2>
<p>Skilled technician who specializes in applying paint and finishes to vehicles. Work in various settings, including auto repair shops, car dealerships, and factories. High level of skill, attention to detail, and an artistic eye to ensure quality finishes on vehicle surfaces.</p>
<a href="learn-more.html">Learn More</a>
</div>
<div>
<i class="fa-solid fa-car"></i>
<h2>Cavity Filling</h2>
<p>Automotive cavity filling refers to the process of injecting foam into the cavities of a vehicle’s body, such as sills, pillars, and posts. It’s a specialized process that contributes significantly to the vehicle’s overall performance and comfort.</p>
<a href="learn-more.html">Learn More</a>
</div>
<div>
<i class="fa-brands fa-rust"></i>
<h2>Rust Removal</h2>
<p>Process of eliminating rust from a vehicle’s body to prevent further corrosion and maintain the integrity of the metal. It’s a meticulous process that requires proper safety measures, as rust removers and other chemicals can be hazardous. Rust removal is performed to ensure a high-quality finish and longevity of the repair</p>
<a href="learn-more.html">Learn More</a>
</div>
<div>
<i class="fa-solid fa-wrench"></i>
<h2>Body Repair</h2>
<p>Automotive body repair is a process that involves fixing damages to a vehicle’s bodywork, which includes dents, scratches, and structural damage from collisions or accidents. The goal is to restore the vehicle to its pre-accident condition both in terms of safety and aesthetics.</p>
<a href="learn-more.html">Learn More</a>
</div>
</div>
</div>
</div>
<!---------------Portfolio---------------------->
<div id="portfolio">
<div class="container">
<h1 class="sub-title">My Work</h1>
<div class="work-list">
<div class="work">
<img src="./images/red.jpg">
<div class="layer">
<h3>Full Restore</h3>
<p>Fully Restore your Vehicle to it's formare glory or, change the color it's your choice. </p>
<a href="#"><i class="fa-solid fa-droplet"></i></a>
</div>
</div>
<div class="work">
<img src="./images/Rust1.JPG">
<div class="layer">
<h3>Rebuild</h3>
<p>Taking your old Vehicle and making it stand out again. Using old or new parts to make it new again. </p>
<a href="#"><i class="fa-solid fa-infinity"></i></a>
</div>
</div>
<div class="work">
<img src="./images/white1.jpg">
<div class="layer">
<h3>Add Big or Small Touches</h3>
<p>Add as many big or small touches to custom your Vehicle to your needs or specifications. </p>
<a href="#"><i class="fa-solid fa-magnifying-glass"></i></a>
</div>
</div>
</div>
<a class="btn" href="seemore.html">See More Photos</a>
</div>
<!-- ----------Contact---------------- -->
<div id="contact">
<div class="container">
<div class="row">
<div class="contact-left">
<h1 class="sub-title">Contact Me</h1>
<p><i class="fa-solid fa-paper-plane"></i> [email protected]</p>
<p><i class="fa-solid fa-square-phone"></i> (812) 240-9609</p>
<div class="social-icons">
<a href=""><i class="fa-brands fa-facebook"></i></a>
<a href=""><i class="fa-brands fa-instagram"></i></a>
<a href=""><i class="fa-brands fa-linkedin"></i></a>
</div>
<a href="" download class="btn btn2">Download My Resume</a><!--add resume PDF download-->
</div>
<div class="content-right">
<form name="submit-to-google-sheet">
<input type="text" name="Name" placeholder="Your Name" required>
<input type="email" name="Email" placeholder="Your Email" required>
<textarea name="Message" rows="6" placeholder="Your Message"></textarea>
<button type="submit" class="btn btn2">Submit</button>
</form>
<span id="msg"></span>
</div>
</div>
</div>
<div class="copyright">
<p><i class="fa-solid fa-car-burst">Copyright @</i> EOCustoms & Collisions.com</p>
</div>
</div>
<script>
var tablinks = document.getElementsByClassName("tab-links");
var tabcontents = document.getElementsByClassName("tab-contents");
function opentab(tabname) {
for(tablink of tablinks) {
tablink.classList.remove("active-link");
}
for(tabcontent of tabcontents) {
tabcontent.classList.remove("active-tab");
}
event.currentTarget.classList.add("active-link");
document.getElementById(tabname).classList.add("active-tab");
}
</script>
<script>
var sidemenu = document.getElementById("sidemenu");
function openmenu(){
sidemenu.style.right = "0";
}
function closemenu(){
sidemenu.style.right = "-200px";
}
</script>
<script>
const scriptURL = 'https://script.google.com/macros/s/AKfycbwweto5Lf03DtliijLgfy2rRWhfSFKD2ebFzTpbWuhH-tevuei3hPxZyWhSwCoY2d_iaA/exec'
const form = document.forms['submit-to-google-sheet']
const msg = document.getElementById(msg)
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => {
msg.innerHTML = "Message sent successfully"
setTimeout(function(){
msg.innerHTML = ""
})
},5000)
form.reset()
.catch(error => console.error('Error!', error.message))
})
</script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="jquery.flipster.min.js"></script>
<script>
$('.carousel').flipster({
style:'carousel',
spacing: -0.10,
});
</script>
</body>
</html>