Skip to content

Commit

Permalink
I added a header and redesigned all the page and make it prettier rel…
Browse files Browse the repository at this point in the history 
…ate#21
  • Loading branch information
@mariamabunada
mariamabunada committed Apr 6, 2022
1 parent daa1bf0 commit e58d872
Show file tree
Hide file tree
Showing 11 changed files with 182 additions and 90 deletions.
Binary file added cdr.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added google-forms.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added illustrator (1).png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added illustrator.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
124 changes: 81 additions & 43 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
<head>
<title>mariam abunada portfolio</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" href="all.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="all.min.css" />
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap"
rel="stylesheet"
Expand All @@ -15,48 +15,86 @@
/>
</head>
<body>
<div class="container">
<header class="myname">
<h1 class="name">MARIAM ABUNADA</h1>
<h5 class="role">Graphic Designer</h5>
<section><h4 class="myname">MARIAM ABUNADA</h4></section>
<header>
<h5 class="navs"><a href="#contact">Contact</a></h5>
<h5 class="navs"><a href="#skills">Skills</a></h5>
<h5 class="navs"><a href="#about">About</a></h5>
<h5 class="navs"><a href="#home">Home</a></h5>
</header>
<section class="aboutme">
<section class="box" >About me</section>
<p>
Graphic Designer proficient in job-related software, including Adobe
Photoshop, Adobe Illustrator, and Corel Draw.
Experienced in creating designs, sample layouts, and concepts and
generating new ideas. An enthusiastic individual accustomed to working
in deadline-driven environments.
Well-developed verbal and written communication skills.
A hardworking and passionate job seeker with strong organizational
skills eager to secure a Graphic Design position. Ready to help the team
achieve company goals.
</p>
</section>
<section class="myskills">
<section class="box"> My Skills</section>
<section>
<ul class="list">
<li>Photoshop 95%</li>
<li>coreldraw 90%</li>
<li>illustrator 85%</li>
<li>social media designs 90%</li>
<li>logo design 85%</li>
<li>printing designs 90%</li>
<li>microsoft package 90%</li>
<li>google package 85%</li>
</ul></section>
</section>
<section class="contact" style="margin-bottom:64px">
<section class="box">Contact details</section>
<section class="icons">
<p><i class="fas fa-map-marker-alt myicon"> </i> Palestine, Gaza</p>
<p><i class="fas fa-phone myicon"></i> +972 597 962 285</p>
<p><i class="fab fa-behance myicon"></i> mariam abunada</p>
<p><i class="fab fa-twitter myicon"></i> mariam.abunada</p>
<p><i class="fa fa-envelope myicon"> </i> Email: mariamabunada2000@gmail.com</p>
<div class="container">
<section class="home" id="home">
<section class="para">
<p class="fpara">Hi there!</p>
<p class="spara">It's mariam ^_^</p>
</section>
<img src="./vector-0٢.png" class="img1" />
</section>
<section class="aboutme" id="about">
<section class="title" >About me</section>
<p class="aboutpara">
my name is mariam, 22 years old,
front end web development learner,
I'm also interested in graphic design
such as social media and printings and logo design.
</p>
</section>
<section class="myskills" id="skills">
<section class="title" >My Skills</section>

<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 6</div>
<img class="images" src="./programming (1).png" />
<div class="text">HTML,CSS & JS</div>
</div>

<div class="mySlides fade">
<div class="numbertext">2 / 6</div>
<img class="images" src="./photoshop.png" />
<div class="text">Photoshop</div>
</div>

<div class="mySlides fade">
<div class="numbertext">3 / 6</div>
<img class="images" src="./cdr.png" />
<div class="text">coreldraw</div>
</div>

<div class="mySlides fade">
<div class="numbertext">4 / 6</div>
<img class="images" src="./illustrator.png" />
<div class="text">illustrator</div>
</div>

<div class="mySlides fade">
<div class="numbertext">5 / 6</div>
<img class="images" src="./google-forms.png" />
<div class="text">google office suite</div>
</div>

<div class="mySlides fade">
<div class="numbertext">6 / 6</div>
<img class="images" src="./illustrator (1).png" />
<div class="text">microsoft office suite</div>
</div>
</div>
</section>

<section class="contact" id="contact">
<section class="title">Contact details</section>
<ul class="icons">
<li><i class="fas fa-map-marker-alt myicon"> </i> Palestine, Gaza</li>
<li><i class="fas fa-phone myicon"></i> +972 597 962 285</li>
<li><i class="fab fa-behance myicon"></i> mariam abunada</li>
<li><i class="fab fa-twitter myicon"></i> mariam.abunada</li>
<li>
<i class="fa fa-envelope myicon"> </i> Email:
mariamabunada2000@gmail.com
</li>
</ul>
</section>
</section>
</div>
<script src="./script.js"></script>
</body>
</html>
Binary file added photoshop.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added programming (1).png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added programming.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
var slideIndex = 0;
showSlides();

function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
134 changes: 87 additions & 47 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,93 @@
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script&family=Montserrat&display=swap");
body {
font-family: "Montserrat", sans-serif;
background-image: url("./bg.jpg");
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
min-height: 100vh;
}
* {
margin: 0;
padding: 0;
}
.container {
header{
display: flex;
/*justify-content: center;*/
align-items: flex-start;
margin: 3vh;
flex-direction: column;
flex-direction: row-reverse;
justify-content: stretch;
align-items: center;
max-width: 100%;
height: 80px;
font-size: 20px;
background-color:#8d8ae4 ;
box-shadow: 0 0 10px rgb(160, 160, 160);
}
.myname {
.myname{
position:absolute;
padding: 22px;
color: aliceblue;
font-size: 20px;
margin: 1.5vh;
}
.navs{
margin: 1.5vh;
}
.home{
display: flex;
flex-direction: column;
flex-direction: row;
justify-content: center;
align-items: center;
min-height: calc(100vh - 80px);
}
.name {
color: #741037;
.para{
padding-bottom: 12px;
border-bottom: 1px solid #ffc219;
font-weight: 500;
padding-left: 1vh;
padding-right: 1vh;
color: #4c1d7b;
}
.role {
color: #178984;
font-size: 20px;
.fpara{
font-size: 25px;
}
.aboutme {
.spara{
font-size: 35px;
}
.img1{
width: 50%;
}
.container {
display: flex;
/* justify-content: center;*/
justify-content: center;
align-items: flex-start;
flex-direction: column;
max-width: 35%;
text-align: start;
font-weight: 450;
margin: 1vh;
}
.box {
.aboutme {
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: white;
background: #741037;
width: 210px;
height: 56px;
border-radius: 50px;
margin: 1vh;
align-items:center;
flex-direction: row;
width: 100%;
min-height: 70vh;
text-align: start;
font-weight: 500;
color: #4c1d7b;
padding: 10vh;
background-color: #f7f8fa;
}
.aboutpara{
max-width: 35%;
}
.title {
font-size: 40px;
color: #ffc219;
font-weight: 500;
padding-right: 4vh;
}
.myskills{
display: flex;
/*justify-content: center;*/
align-items: flex-start;
flex-direction: column;
max-width: 50%;
text-align: start;
font-weight: 450;
margin: 1vh;
align-items:center;
flex-direction: row;
max-width: 35%;
min-height: 70vh;
text-align: center;
font-weight: 500;
color: #4c1d7b;
padding: 10vh;

}
.list{
Expand All @@ -70,12 +96,26 @@ list-style: none;
}
.contact{
display: flex;
/*justify-content: center;*/
align-items: flex-start;
flex-direction: column;
max-width: 50%;
align-items:center;
flex-direction: row;
width: 100%;
min-height: 70vh;
text-align: start;
font-weight: 450;
margin: 1vh;
font-weight: 500;
color: #4c1d7b;
padding: 10vh;
background-color: #f7f8fa;
}
.icons{
color: #4c1d7b;
list-style: none;
}
a{
text-decoration: none;
color: white;
}
.images{
width: 20vh;
height: 20vh;
}

Binary file added vector-0٢.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit e58d872

Please sign in to comment.