Skip to content

Commit

Permalink
resume section and footer section added
Browse files Browse the repository at this point in the history
  • Loading branch information
@abir-alahe
abir-alahe committed Jan 14, 2023
1 parent a0695d6 commit 8a2f702
Show file tree
Hide file tree
Showing 3 changed files with 139 additions and 2 deletions.
0 images/icons/js.png → images/icons/js1.png
View file
File renamed without changes
85 changes: 83 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
<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=Open+Sans&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/4e15074d08.js" crossorigin="anonymous"></script>
</head>
<body>
<header class="header">
Expand All @@ -26,7 +27,7 @@ <h2 class="nav-title">Ma<span class="text-primary">r</span>y</h2>
<h3 class="banner-sub-title">Hi, I am</h3>
<h1 class="banner-title">Mary Hardy</h1>
<p class="banner-description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas minima aut nesciunt dolore earum sapiente!</p>
<button class="btn-primary">Download CV</button>
<button class="btn-primary"><i class="fa-solid fa-download"></i> Download CV</button>
</div>
<img src="images/hardy.png" alt="">
</div>
Expand Down Expand Up @@ -80,9 +81,89 @@ <h3 class="section-title">What I Do</h3>
</div>
</div>
</section>
<!-- Resume Content -->
<section class="resume">
<h3 class="section-title">A Summary of My Resume</h3>
<div class="resume-content">
<div>
<h3 class="resume-title">My Education</h3>
<div class="resume-item">
<h4 class="title">Master in Computer Engineering</h4>
<h5 class="sub-title">Harvard University / 2015 - 2017</h5>
<p class="description">List skill/technologies here. You can change the icon above
to any of the 1500+ FontAwesome 5 free icons available. Aenean commodo ligula eget dolor.</p>
</div>
<hr>
<div class="resume-item">
<h4 class="title">Master in Computer Engineering</h4>
<h5 class="sub-title">Harvard University / 2015 - 2017</h5>
<p class="description">List skill/technologies here. You can change the icon above
to any of the 1500+ FontAwesome 5 free icons available. Aenean commodo ligula eget dolor.</p>
</div>
<hr>
<div class="resume-item">
<h4 class="title">Master in Computer Engineering</h4>
<h5 class="sub-title">Harvard University / 2015 - 2017</h5>
<p class="description">List skill/technologies here. You can change the icon above
to any of the 1500+ FontAwesome 5 free icons available. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<div>
<h3 class="resume-title">My Experience</h3>
<div class="resume-item">
<h4 class="title">Master in Computer Engineering</h4>
<h5 class="sub-title">Harvard University / 2015 - 2017</h5>
<p class="description">List skill/technologies here. You can change the icon above
to any of the 1500+ FontAwesome 5 free icons available. Aenean commodo ligula eget dolor.</p>
</div>
<hr>
<div class="resume-item">
<h4 class="title">Master in Computer Engineering</h4>
<h5 class="sub-title">Harvard University / 2015 - 2017</h5>
<p class="description">List skill/technologies here. You can change the icon above
to any of the 1500+ FontAwesome 5 free icons available. Aenean commodo ligula eget dolor.</p>
</div>
<hr>
<div class="resume-item">
<h4 class="title">Master in Computer Engineering</h4>
<h5 class="sub-title">Harvard University / 2015 - 2017</h5>
<p class="description">List skill/technologies here. You can change the icon above
to any of the 1500+ FontAwesome 5 free icons available. Aenean commodo ligula eget dolor.</p>
</div>
</div>
</div>
<div class="resume-button">
<button class="btn-primary"><i class="fa-solid fa-download"></i> Download CV</button>
</div>
</section>

</main>
<footer>

<!-- contract section -->
<section class="contact">
<div>
<h3 class="section-title">Lets Connect</h3>
<p class="section-description">Please fill out the form on this section to contact with me or call between 9:00 A.M and 8.00 P.M ET, Monday through Friday.</p>
<a href="">
<img src="images/icons/facebook.png" alt="">
</a>
<a href="">
<img src="images/icons/twitter.png" alt="">
</a>
<a href="">
<img src="images/icons/insta.png" alt="">
</a>
</div>
<div>
<h3 class="section-title">Let’s Message me</h3>
<form action="">
<input type="text" name="" id="" placeholder="Your Name">
<input type="email" name="" id="" placeholder="Your Email">
<textarea name="" id="" cols="30" rows="10" placeholder="Message"></textarea>
<input class="btn-primary" type="submit" value="submit">
</form>
</div>
</section>
</footer>
</body>
</html>
56 changes: 56 additions & 0 deletions styles/portfolio.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ main {
/* What I do styles */
.what-i-do {
margin-top: 130px;
margin-bottom: 130px;
}
.skills-container {
display: flex;
Expand All @@ -131,3 +132,58 @@ main {
font-weight: 400;
font-size: 16px;
}

/* Resume Styles */
.resume-content {
display: flex;
gap: 24px;
}
.resume-item {
margin-top: 30px;
margin-bottom: 30px;
}
.resume .section-title{
margin-bottom: 60px;
}
.resume .title {
font-weight: 700;
font-size: 25px;
line-height: 34px;
color: #474747;
margin-bottom: 10px;
}
.resume .sub-title {
font-weight: 600;
font-size: 20px;
line-height: 27px;
color: #757575;
margin-bottom: 20px;
}
.resume .description {
ont-weight: 400;
font-size: 16px;
color: #757575;
}
.resume-button {
text-align: center;
}
/* contact styles */
.contact {
margin-top: 130px;
display: flex;
gap: 100px;
background-color: #FFF8F3;
padding: 130px 220px;
}
.contact .section-title{
text-align: left;
}
.contact input[type="text"], input[type="email"], textarea {
margin-bottom: 24px;
border: 0;
width: 100%;
padding: 18px 30px;
}
.contact a{
text-decoration: none;
}

0 comments on commit 8a2f702

Please sign in to comment.