<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Me</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="contact-info">
<div class="profile">
<img src="https://styles.redditmedia.com/t5_5pq0bo/styles/profileIcon_0uhzk56mi2d81.png?width=256&height=256&frame=1&auto=webp&crop=256:256,smart&s=a9bab2190338877765e3209c580d83a97b3564af" alt="Profile Picture">
<div class="profile-text">
<div class="name">Developer: <br> Michael R. Gibson</div>
<div class="email">DevlandFullStack@gmail.com</div>
<div class="phone">xxx.xxx.4923</div>
</div>
</div>
</div>
<nav>
<ul>
<li><a href="#" class="nav-link">About</a></li>
<li><a href="#" class="nav-link">Project Details</a></li>
<li><a href="#" class="nav-link">Skills</a></li>
<li><a href="#" class="nav-link">Recommendations</a></li>
</ul>
</nav>
</header>
<section class="about-me">
<h2>About Me</h2>
<div class="profile-bio">
<div class="profile-image">
<img src="https://styles.redditmedia.com/t5_5pq0bo/styles/profileIcon_0uhzk56mi2d81.png?width=256&height=256&frame=1&auto=webp&crop=256:256,smart&s=a9bab2190338877765e3209c580d83a97b3564af" alt="Profile Picture">
</div>
<div class="bio">
<p>Welcome to my corner of the web! I'm Michael R. Gibson, an aspiring IBM Developer passionate about all things tech. With a background in full-stack development, I thrive on bringing innovative ideas to life through code.</p>
<p>My journey in the world of development began years ago, sparked by a fascination with how technology can shape and revolutionize industries. Since then, I've honed my skills in various programming languages, frameworks, and methodologies to tackle diverse challenges.</p>
<p>Whether it's crafting elegant front-end interfaces or architecting robust backend systems, I enjoy every aspect of the development process. I believe in the power of collaboration and continuously seek opportunities to learn and grow alongside fellow developers.</p>
</div>
</div>
<div class="contact">
<h3>Get in Touch</h3>
<ul>
<li>Email: <a href="mailto:DevlandFullStack@gmail.com">DevlandFullStack@gmail.com</a></li>
<li>Phone: xxx.xxx.4923</li>
</ul>
</div>
</section>
<section class="skills-gallery">
<h2>Skills</h2>
<div class="skill-box-container">
<div class="skill-box">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsubI1xnS2EsbFC7IKOtHXy3o2yp5zNGHX8-mLk-0nVw&s" alt="HTML Logo">
<p>HTML5</p>
</div>
<div class="skill-box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png" alt="CSS Logo">
<p>CSS3</p>
</div>
<div class="skill-box">
<img src="https://repository-images.githubusercontent.com/657736250/efe020c3-cfc2-41f9-be41-ad581ffc9969" alt="JavaScript Logo">
<p>JavaScript</p>
</div>
<div class="skill-box">
<img src="https://www.webfx.com/wp-content/uploads/2022/08/github-logo.png" alt="Github Logo">
<p>GitHub</p>
</div>
<div class="skill-box">
<img src="https://qph.cf2.quoracdn.net/main-qimg-28cadbd02699c25a88e5c78d73c7babc" alt="Python Logo">
<p>Python</p>
</div>
<!-- Add more skill boxes for additional skills -->
</div>
<section class="projects">
<h2>Project Details</h2>
<div class="project-details">
<div class="project">
<h3>Project 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum eget ante sed tristique.</p>
<p>Client: Self Made Culture Inc.</p>
<p>Duration: 2 years</p>
</div>
<div class="project">
<h3>Project 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<p>Client: GRYY Corp.</p>
<p>Duration: 4 months</p>
</div>
<div class="project">
<h3>Project 3</h3>
<p>Etiam nec lectus sit amet felis tristique hendrerit. Vestibulum ultrices, orci nec suscipit laoreet, ante lorem efficitur nisl.</p>
<p>Client: Fox LLc.</p>
<p>Duration: 5 months</p>
</div>
<div class="recommendations-block">
<h2>Recommendations</h2>
<div class="recommendation-box">
<h3>Recommendation 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis libero in felis commodo, id tristique libero vehicula.</p>
</div>
<div class="recommendation-box">
<h3>Recommendation 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis libero in felis commodo, id tristique libero vehicula.</p>
</div>
<div class="recommendation-box">
<h3>Recommendation 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis libero in felis commodo, id tristique libero vehicula.</p>
</div>
<div class="recommendations-form">
<h2>Leave a Recommendation</h2>
<form id="recommendation-form">
<div class="form-group">
<label for="name"></label>
<input type="text" id="name" name="name" placeholder="Name (Optional):">
</div>
<div class="form-group">
<label for="message"></label>
<textarea id="message" name="message" required placeholder="Message"></textarea>
</div>
<div class="form-group">
<button type="submit">Submit</button>
</div>
</form>
</div>
<div id="recommendation-box"></div>
</div>
<!-- New recommendation box will be added here -->
</div>
</div>
</section>
</section>
</body>
</html>/* Global styles */
body {
margin: 0;
font-family: Arial, sans-serif;
}
/* Header styles */
header {
background-color: #6a0dad;
color: white;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
h2 {
text-align: center;
}
/* Navigation styles */
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: white;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
/* Contact information box styles */
.contact-info {
background-color: dark-purple;
color: white;
padding: 10px;
border-radius: 5px;
display: flex;
flex-direction: column;
align-items: flex-start; /* Aligns items to the left */
}
.profile {
display: flex;
align-items: center;
margin-bottom: -30px;
}
.profile img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
margin-bottom: 50px;
margin: 0, auto;
}
.profile-image img {
display: block;
margin: 0 auto;
}
.profile-text {
margin-top: auto; /* Pushes the text to the bottom */
}
.name, .email, .phone {
margin: 5px 0px;
}
/* Styles for the "Skills" section */
.skills-gallery {
max-width: 800px;
margin: 20px auto; /* Center the section horizontally */
}
.skills-gallery h2 {
text-align: center;
}
.skill-box-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
.skill-box {
background-color: #f0f0f0;
padding: 20px;
border-radius: 10px;
text-align: center;
}
.skill-box img {
width: 60px;
height: 80px;
}
.skill-box p {
margin-top: 10px;
font-weight: bold;
}
.recommendations-block {
text-align: center;
margin-top: 10px;
}
.recommendations-block h2{
margin-top: 10px;
}
.recommendation-box {
display: inline-block;
width: 240px;
height: 220px;
background-color: #f0f0f0;
border: 3px solid #ccc;
margin: 10px;
margin-bottom: 30px;
padding: -20px;
padding-bottomm 10px;
box-sizing: border-box;
}
.recommendation-box h3 {
margin-top: 10px;
}
.recommendations-form {
max-width: 400px;
margin: 0 auto;
}
.recommendations-form h2{
max-width: 400px;
margin: 0 auto;
text-align: left;
}
.form-group{
margin-bottom: 20px;
}
.form-group label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
.form-group input[type="text"],
.form-group textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
.form-group textarea {
height: 100px;
}
.form-group button {
padding: 10px 20px;
background-color: #FDF5E6;
color: #800080;
border-box: none;
width: 140px;
border-radius: 5px;
cursor: pointer;
}document.addEventListener("DOMContentLoaded", function () {
document
.getElementById("recommendation-form")
.addEventListener("submit", function (event) {
event.preventDefault();
let name = document.getElementById("name").value;
let message = document.getElementById("message").value;
// Create a new recommendation item
let recommendationItem = document.createElement("div");
recommendationItem.classList.add("recommendation-item");
// Create elements to display name and message
let nameLabel = document.createElement("p");
nameLabel.textContent = "Name: " + (name ? name : "Anonymous"); // If name is empty, display "Anonymous"
let messageLabel = document.createElement("p");
messageLabel.textContent = "Message: " + message;
// Append name and message elements to recommendation item
recommendationItem.appendChild(nameLabel);
recommendationItem.appendChild(messageLabel);
// Append recommendation item to the recommendation box
let recommendationBox = document.getElementById("recommendation-box");
recommendationBox.appendChild(recommendationItem);
// Optionally, you can clear the form fields after submission
document.getElementById("name").value = "";
document.getElementById("message").value = "";
window.alert("Thank you for submitting a recommendation!");
});
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.