Currently, I have been dedicatedly working on my website which is utilizing a built-in HTML editor that offers me various styling options. My main goal is to replicate the design and styles of the form displayed on this page:
If you want to take a look at my progress so far, here is the JSFIDDLE link: https://jsfiddle.net/su5rr2nh/1/
Despite my efforts, I am encountering some challenges in replicating the exact styles, including the dimensions of textboxes and select/dropdown elements. The images are not aligning properly within the textboxes, and my buttons do not resemble the ones on the reference page.
Here are snippets of my code:
<div style="padding: 40px; background-color: rgba(243, 242, 242, 0.611765); border: 3px dashed rgba(0,0,0,0.7);">
<h1 style="font-size: 32px; text-align: center; font-weight: bold;">FREE BONUS!</h1>
<h4 style="font-size: 18px; color: rgba(47, 47, 47, 0.6); text-align: center;">Reserve your seat TODAY for this free training, and we will send you our <span style="font-weight: bold;">Amazon's Secret Business Cheatsheet</span> that will get you up and running in NO TIME!</h4>
<input id="name" style="border-radius: 5px !important; padding: 10px 90px; margin-top: 10px;" name="name" type="text" placeholder="Your Name.." />
<img src="http://beaminggeek.com/profitbuilder/wp-content/uploads/2017/02/name2.png"/>
<input id="email" style="border-radius: 5px !important; padding: 10px 90px; margin: 10px;" name="email" type="email" placeholder="Your Email.."/>
<img src="http://beaminggeek.com/profitbuilder/wp-content/uploads/2017/02/email2.png"/>
<select style="border-radius: 5px !important; padding: 10px 90px; margin: 10px;">
<option value="desired">Select Desired Date</option>
<option value="yesterday">Watch Yesterday's Broadcast Now</option>
<option value="feb8th">Wednesday, Feb 8th, 2017</option>
<option value="feb8th">Wednesday, Feb 8th, 2017</option>
</select>
<button style="padding: 13px 35px; margin-right: auto; margin-left: auto; color: #fff; font-weight: bold; display: inline-block; -ms-transform: all .2s ease-in-out; -webkit-transform: all .2s ease-in-out; transform: all .2s ease-in-out; text-align: center !important; text-decoration: none !important; background-color: #ea6645;">Register Your Spot Now! * seats are extremely limited *</button>
<p>* we will not spam, rent or sell your information *</p>
<p>Your Local Time: 4:18 PM</p>
</div>
I've given my best shot at replicating every style element, but it seems like something is still missing. Any assistance in identifying any overlooked aspects would be greatly appreciated. Feel free to make modifications directly on my jsfiddle if needed as my primary aim is to mirror the styles accurately. Although I've utilized Chrome's inspector tool, the vast amount of generated code is making it challenging to pinpoint the issue.
Any kind of guidance or support on this matter would be tremendously helpful.