-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
113 lines (102 loc) · 5.01 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emmalie Cole - Personal Webpage</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bellota+Text:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
<!-- favicon code below -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
</head>
<body>
<header>
<div class="banner-content">
<img src="banner.jpg" alt="Banner Image" class="banner">
</div>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="education.html">Education</a></li>
<li><a href="experience.html">Experience</a></li>
<li><a href="skills.html">Skills</a></li>
<li><a href="bio.html">Bio</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<!-- text and photo formatting below for inside the about-container -->
<style>
.about-container {
display: flex;
align-items: center; /* Aligns items vertically in the center */
justify-content: flex-start; /* Aligns items horizontally, with text and image in line */
padding: 20px;
}
.profile-container {
margin-right: 20px; /* Adds space between the image and text */
}
.profile-pic {
width: 400px; /* Adjust the width as needed */
height: auto; /* Maintain aspect ratio */
border-radius: 8px; /* Optional: to add rounded corners to the image */
}
/* reduce space below the main header */
h2 {
margin-bottom: 10px; /* Reduce the space below the main header */
}
.about-text {
margin-top: 0; /* Ensure no extra margin is added above the text */
}
</style>
<div class="content">
<section id="about">
<h2>Welcome to My Personal Webpage!</h2>
<h4>Thank you for visiting</h4>
<div class="about-container">
<div class="profile-container">
<img src="profile.jpg" alt="Emmalie Cole" class="profile-pic">
</div>
<div class="about-text">
<p>I’m Emmalie, a passionate computer science student and aspiring software engineer. This site is a reflection of my journey in technology, showcasing the projects I’ve dedicated myself to and the skills I’ve developed along the way.</p>
<p>This website is entirely designed and built by me, highlighting my technical capabilities and creativity. I invite you to explore the <a href="https://i-ekoul.github.io/projects.html">Projects</a> section, where you’ll find a curated collection of my work.</p>
<p>In addition to my technical pursuits, I also enjoy delving into creative projects. This balance between technical expertise and creativity drives my approach to problem-solving and innovation.</p>
<p>If you’re interested in learning more or wish to connect, you can easily find my LinkedIn, Skype, and GitHub profiles by clicking on the respective favicons located at the bottom this page. For further inquiries or collaboration opportunities, please visit the <a href="#contact">Contact</a> section.</p>
</div>
</div>
</section>
</div>
<footer>
<p>© 2024 Emmalie Cole</p>
<p>
<a href="https://github.com/i-ekoul"><i class="fab fa-github" style="font-size: 30px;"></i></a>
<a href="https://www.linkedin.com/in/es-cole/"><i class="fab fa-linkedin" style="font-size: 30px;"></i></a>
<a href="skype:live:emmalie.cole?chat"><i class="fab fa-skype" style="font-size: 30px;"></i></a>
<!-- Add other social media icons similarly -->
</p>
</footer>
<!-- Turn Navigational links into buttons-->
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>
</body>
</html>