Skip to content

Commit

Permalink
Last Update- (Completed)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Aitzaz-Hakro
Aitzaz-Hakro committed Jan 23, 2025
1 parent 9c4a660 commit 920d171
Show file tree
Hide file tree
Showing 7 changed files with 81 additions and 110 deletions.
130 changes: 70 additions & 60 deletions Portfolio-Website-Task1/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="Bootstrap/bootsrap.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="Bootstrap/bootstrap.css">


</head>
<body>
Expand Down Expand Up @@ -185,82 +185,92 @@ <h5 class="card-title"><a href="https://aitzaz-hakro.github.io/Projects/Project1


<!-- ********************----Contact Portion ----************************************************************************ -->
<div class="contactportion col-md-12">
<!-- <div class="col contennt col-md-12 "> -->
<div class="col">
<div class="row">
<div class="col-md-8 " id="Contact" style="margin-top: 90px;">
<div class="col col-md-12">
<div class="row ">


<div class="col-md-6 col-sm-12" id="Contact" >
<h1 style="font-size: 3.4rem; margin-bottom: 30px; margin-left: 40px; "> <span class="text-primary">Contact Me</span></h1>
<p class="desc col-md-6 text-center" style=" margin-left: 40px;">If you have any questions or would like to work together, feel free to contact me using the form below. I will get back to you as soon as possible.</p>
</div>
<div class="col-md-6">

<form id="contactForm">

<div class="form-floating mb-3 col-md-12">
<input type="name" class="form-control" id="name" name="name" placeholder="Name" required>
<label for="floatingPassword">Your Name</label>
</div>
<div class="form-floating col-md-12 mb-3">
<input type="email" class="form-control" id="email" placeholder="[email protected]" name="email" required>
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating col-md-12 ">
<textarea class="form-control" placeholder="Leave a message here" id="message" name="message" required></textarea>
<label for="floatingTextarea">Message</label>
</div>
<div class="col-md-12 mt-3">
<button type="submit" id="submit" class="submit btn btn-primary">Submit</button>
</div>

</form>
</div>



<form id="contactForm" onsubmit="sendEmail(event)">
<div class="form-floating mb-3 col-md-6">
<input type="name" class="form-control" id="floatingPassword" name="name" placeholder="Name" required>
<label for="floatingPassword">Your Name</label>
</div>
<div class="form-floating col-md-6 mb-3">
<input type="email" class="form-control" id="floatingInput email" placeholder="[email protected]" name="email" required>
<label for="floatingInput">Email address</label>
<div class="row mt-3">
<div class="row col-md-12 " id="Contact" >
<h1 style="font-size: 3.4rem; margin-bottom: 30px; margin-left: 40px; "> <span class="text-primary">Connect With Me</span></h1>
</div>
</div>
<div class="form-floating col-md-6 ">
<textarea class="form-control" placeholder="Leave a message here" id="floatingTextarea message" name="message" required></textarea>
<label for="floatingTextarea">Message</label>
<div class="row col-md-12 mt-3 icons">
<div class="col-md-1 " style="background-color: white; height: auto;"><a href="https://www.linkedin.com/in/aitzazhassan2005/" target="_blank"><img src="media/linkedin.svg" alt="LinkedIn"></a></div>
<div class="col-md-1 " style="background-color: white; height: auto;"><a href="https://github.com/Aitzaz-Hakro" target="_blank" ><img src="media/github.svg" alt=""></a></div>
<div class="col-md-1 " style="background-color: white; height: auto;"><a href="https://www.instagram.com/aitzazhakro?igsh=Nm5yNzNuM2ZzZXZ6/" target="_blank"><img src="media/instagram.svg" alt="Instagram"></a></div>
<div class="col-md-1 " style="background-color: white; height: auto;"><a href="https://m.facebook.com/p/Aitzaz-Hakro-61558071621584/?mibextid=ZbWKwL&wtsid=rdr_0vyHMtbVkLpRnmYTk&hr=1" target="_blank"><img src="media/facebook.svg" alt=""></a></div>
</div>
<div class="col-md-12 mt-3">
<button type="submit" class="btn btn-primary">Submit</button>
</form>

</div>
</div>
</div>


</div> <!--column -->

</div>


</div> <!--container -->





<script src="Bootstrap/bootstrap.bundle.js"></script>
<script src="https://cdn.emailjs.com/dist/email.min.js"></script>
<script>
// template_jo5chcn template_id
// service_58a0k2o service_id
// aAzEqBPEgwzj79xo3 public_id
emailjs.init("RwXk0YbMf5i9cfx8Y");

// Handle form submission
document.getElementById('contactForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the default form submission

<script>
emailjs.init("RwXk0YbMf5i9cfx8Y");

// Handle form submission
document.getElementById('contactForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the default form submission

// Collect form data
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const message = document.getElementById('message').value;
// Collect form data
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const message = document.getElementById('message').value;

// Prepare email template parameters
const templateParams = {
from_name: name,
from_email: email,
message: message
};
// Prepare email template parameters
const templateParams = {
name: name,
email: email,
message: message
};

// Send email using EmailJS
emailjs.send('service_58a0k2o', 'template_jo5chcn', templateParams)
.then(response => {
alert('Email sent successfully!');
document.getElementById('contactForm').reset(); // Reset form fields
})
.catch(error => {
console.error('Error sending email:', error);
alert('Failed to send email. Please try again.');
});
});
// Send email using EmailJS
emailjs.send('service_uovvmzk', 'template_wbua1cr', templateParams)
.then(response => {
alert('Email sent successfully!');
document.getElementById('contactForm').reset(); // Reset form fields
})
.catch(error => {
console.error('Error sending email:', error);
alert('Failed to send email. Please try again.');
});
});
</script>

</body>
</body>
</html>
1 change: 1 addition & 0 deletions Portfolio-Website-Task1/media/facebook.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions Portfolio-Website-Task1/media/github.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions Portfolio-Website-Task1/media/instagram.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions Portfolio-Website-Task1/media/linkedin.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions Portfolio-Website-Task1/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<a ><img src="media/linkedin.svg" alt="linkedin" class=" logo1" ></a>
<a href="https://github.com/Aitzaz-Hakro"><img src="media/github.svg" alt="linkedin" class=" logo1" ></a>
<a href=""><img src="media/instagram.svg" alt="linkedin" class=" logo1" ></a>
54 changes: 4 additions & 50 deletions Portfolio-Website-Task1/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,58 +136,8 @@ body{
margin-bottom: 200px !important;
}

@media only screen and (max-width: 375px){
.desc{
font-size: 1rem;
}
.animate1,
.animate2,
.animate3,
.animate4,
.animate5, .img {
width: 100lvh;
opacity: 0;

}

.hoverimage {
width: 10px !important;
top: 0%;
position: absolute;
background-color: transparent;
cursor: pointer;
z-index: 3;
}

.profilephoto{
width: 100px;
border-radius: 10%;
filter: grayscale(100%); /*it will make the image black and white*/

box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
/* background-color: red; */
background: linear-gradient(45deg, #ddd 25%, transparent 25%) 0 0 / 10px 10px;
}

}

@media only screen and (max-width: 600px){
.desc{
font-size: 1rem;
}
.animate1,
.animate2,
.animate3,
.animate4,
.animate5, .img {
/* width: 100vh; */
width: 100lvh;

opacity: 0;

}

}

@media only screen and (min-width: 2000px){
.desc{
Expand Down Expand Up @@ -215,3 +165,7 @@ body{
background: linear-gradient(45deg, #ddd 25%, transparent 25%) 0 0 / 10px 10px;
}
}
.icons{
display: flex;
justify-content: space-around
}

0 comments on commit 920d171

Please sign in to comment.