Skip to content

Commit

Permalink
Merge pull request #2 from Ab-hinav/dev
Browse files Browse the repository at this point in the history 
Completed structure with contact form
  • Loading branch information
@Ab-hinav
Ab-hinav authored Oct 30, 2023
2 parents 838946a + 3af4d09 commit a038528
Show file tree
Hide file tree
Showing 3 changed files with 196 additions and 10 deletions.
76 changes: 74 additions & 2 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ header.hero{
.hero::before {
content: '';
position: absolute;
background: rgba(0, 0, 0, 0.6);
background: rgba(73, 56, 56, 0.6);
top: 0;
left: 0;
width: 100%;
Expand Down Expand Up @@ -227,7 +227,6 @@ header.hero{
justify-content:space-between;
padding: .3rem;
transition: all .3s ease-in;
opacity: 1;
}


Expand All @@ -248,6 +247,79 @@ header.hero{
width: 80%;
}

/* about us */
#about-us{
margin: 1rem 2rem;
border-radius: 10px;
padding: 1rem;
display: flex;
justify-content: space-between;
}

#about-us .flex-items{
display: flex;
flex-direction: column;
width: 50%;
}

#contact-us{
margin: 1rem 2rem;
border-radius: 10px;
padding: 1rem;
}

#contact-us .form-control{
margin-top: .5rem;
display: flex;
flex-direction: column;
max-width: 60%;
line-height: 1.5;
margin-bottom: .5rem;
}
#contact-us .form-control label{
font-size: large;
font-weight: 600;
margin: .3rem 0;
}

#contact-us .form-control input,#contact-us .form-control textarea{
line-height: 2;
padding: .3rem;
border-radius: 10px;
}

/* main footer */
#main-footer{
padding: 1rem;
}

#main-footer .social{
display: flex;
justify-content: center;
gap: 2rem;
}

#main-footer .social a{
text-decoration: none;
color: #f4f4f4;
}

#main-footer .footer-content{
width: 40%;
}

#main-footer .legal{
margin-top: .2rem;
display: flex;
justify-content: center;
gap: 1rem;
}

#main-footer .legal a{
text-decoration: none;
color: #f4f4f4;
}

/* utilities */

.container{
Expand Down
56 changes: 55 additions & 1 deletion assets/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ centralEu.addEventListener('click', () => {
panels.forEach(panel => panel.classList.add('hide'));

panels[0].classList.toggle('hide');

});

easternEu.addEventListener('click', () => {
Expand All @@ -25,3 +25,57 @@ asia.addEventListener('click', () => {

panels[2].classList.toggle('hide');
});



function submitToAPI(e) {
e.preventDefault();
var URL = "https://jnr9lnb7cg.execute-api.us-east-1.amazonaws.com/prod/contact-us";

var Namere = /[A-Za-z]{1}[A-Za-z]/;
if (!Namere.test($("#name-input").val())) {
alert("Name can not less than 2 char");
return;
}

if ($("#email-input").val() == "") {
alert("Please enter your email id");
return;
}

var reeamil = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,6})?$/;
if (!reeamil.test($("#email-input").val())) {
alert("Please enter valid email address");
return;
}

var name = $("#name-input").val();
var email = $("#email-input").val();
var desc = $("#description-input").val();
var data = {
name: name,
email: email,
desc: desc
};

$.ajax({
type: "POST",
url: URL,
dataType: "json",
crossDomain: "true",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(data),


success: function () {
// clear form and show a success message
alert("Your message sent SucessFully !");
document.getElementById("contact-form").reset();
location.reload();
},
error: function () {
// show an error message
alert("There was some error , try dropping us an email");
}
});
}
74 changes: 67 additions & 7 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,12 @@
rel="stylesheet"
/>
<link rel="stylesheet" href="./assets/css/style.css" />
<script src="./assets/js/script.js" defer></script>
<link
rel="stylesheet"
media="screen and (max-width: 768px)"
href="./css/mobile.css"
/>

</head>
<body>
<header class="hero">
Expand All @@ -33,12 +38,13 @@
<ul id="menu">
<li><a href="#services">Services</a></li>
<li><a href="#key-markets">KeyMarkets</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="">Contact</a></li>
<li><a href="#about-us">About Us</a></li>
<li><a href="#contact-us">Contact</a></li>
</ul>
<div id="lang">
<a href="">EN</a>
<a href="">RU</a>
<a href="">LV</a>
</div>
</div>

Expand All @@ -64,7 +70,7 @@ <h1>
</div>
</div>

<a href="#about" class="btn"
<a href="#contact-us" class="btn"
><i class="fas fa-chevron-right"></i> Contact Us</a
>
</div>
Expand Down Expand Up @@ -136,15 +142,15 @@ <h3 class="text-sports bg-dark">Import/Export</h3>
</p>
</div>
</section>

<!-- key markets -->
<section id="key-markets" class="bg-light">
<h2>Our Key Markets</h2>
<ul>
<button class="btn btn-dark">Central Europe</button>
<button class="btn btn-primary">Eastern Europe</button>
<button class="btn btn-secondary">China</button>
</ul>
<div class="panel eu">
<div class="panel eu ">
<div class="map-img eu"></div>
<p class="eu bg-dark">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt
Expand All @@ -153,7 +159,7 @@ <h2>Our Key Markets</h2>
<button class="btn">Next</button>
</p>
</div>
<div class="panel ceu hide">
<div class="panel ceu hide ">
<div class="map-img eu"></div>
<p class="eu bg-primary">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt
Expand All @@ -170,6 +176,60 @@ <h2>Our Key Markets</h2>
</p>
</div>
</section>

<section id="about-us" class="bg-light">

<div class="flex-items">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error aut dignissimos voluptates ipsa cumque fuga quam ipsum, numquam placeat nesciunt, beatae voluptatum id. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam iste quidem saepe obcaecati voluptate ipsam, doloremque beatae reiciendis, eum dignissimos nam, quisquam alias vero.
</p>
</div>
<img src="./assets/images/arving-logo.jpg" alt="">
</section>

<section id="contact-us" class="bg-light">
<h2> Book Your Free Business Consultation </h2>

<form id="contact-form" method="post">
<div class="form-control">
<label for="Name"> Your Name</label>
<input id="name-input" type="text" name="name" placeholder="Your Name so we know who you are !">
<label for="Email"> Your Email</label>
<input type="email" id="email-input" name="email" id="email" placeholder="So we can connect !">
<label for="message">Your Message</label>
<textarea name="message" id="description-input" placeholder="Your Message to Us !" rows="5"></textarea>
</div>

<button class="btn" onClick="submitToAPI(event)">Submit</button>
</form>


</section>

</main>

<footer id="main-footer" class="bg-dark">
<div class="footer-content">
<img src="./assets/images/arving-logo.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint veniam dolorem, dolorum assumenda ad sequi quo id maiores doloremque mollitia?</p>
</div>

<div class="social">
<a href=""><i class="fab fa-facebook fa-2x"></i></a>
<a href=""><i class="fab fa-twitter fa-2x"></i></a>
<a href=""><i class="fab fa-instagram fa-2x"></i></a>
</div>

<div class="legal">
<a href="">Privacy</a>
<a href="">Legal</a>
</div>

</footer>
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous" defer></script>
<script src="./assets/js/script.js" defer></script>
</body>
</html>

0 comments on commit a038528

Please sign in to comment.