Skip to content
This repository was archived by the owner on Jan 14, 2024. It is now read-only.

Updated blog page-Maha Hayek #69

Closed
M-hayek wants to merge 1 commit into from
Closed

Updated blog page-Maha Hayek #69

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 114 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,117 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/
body {width:100%;
height:100%;
font-size: 16px;
font-family:Calibri;
text-align: justify;
background-color:#FEE4C4;
color:black;
line-height: 25px;
box-sizing: border-box;
}

#navbar {position:fixed;
top:0;
height: 70px;
width:100%;
background-color:#5A809E;
}


#navbar ul {list-style-type:none;
display:flex;
justify-content:space-around;
}

#navbar ul a:hover {background:#6CC2BD;
}

.nav-link {color:aliceblue;
font-weight:bolder;
font-size:18px;
display:block;
padding:8px;
text-decoration:none;
}

#main {margin-top:80px;
}

h1 {font-weight: bolder;
font-size:28px;
color:#5A809E}

h2 {font-size:24px;
color: #7c79a2;
font-weight:bold;
}

h3 {font-size:22px;
color: #F57D7C;
font-weight:bold;
}
p:first-child {color:#F57D7C;}

#welcoming {padding-top: 20px;
height:250px;
width:100%;
line-height:5px;
display:flex;
flex-direction:row;
align-items: center;
background-image: url("https://www.design-seeds.com/wp-content/uploads/2017/04/4_3_2ColorDream_LBTOMA.png");
}

#welcomeingmsg p {font-size:24px;
line-height:5px;
font-weight:bold;
position:relative;
left:120px;
}

#profile-img {width:150px;
margin-left:25%;
padding:10px;
object-fit: contain;
padding-top: 20px;
}

#About, #Projects, #Contactme {margin-left:10%;
margin-right:10%;
}

#MSD, #webdev {margin-left:11%;
margin-right:11%;
}

.projectslist {display:flex;
flex-direction: row;
margin:auto;
width:75%;
}

.project-link {text-decoration:none;
color:#5A809E;
font-size:18px;
font-weight:bold;
width:200px;
height:35px;
background-color:#FFC1A6;
display:block;
margin-right:20px;
text-align:center;
}

.project-img {width:200px;
height:200px;
margin-right:20px;
}

#profile-link {text-decoration:none;
font-weight:bold;
color:#7c79a2;
}

#contactme i {font-size: 24px;}
72 changes: 71 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>My Blog</title>

<title> Maha.M Blog</title>
<link
href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
rel="stylesheet"
Expand All @@ -15,8 +16,77 @@
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>


<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<header>
<nav id="navbar">
<ul>
<li> <a class="nav-link" href="#About"> About </a> </li>
<li> <a class="nav-link" href="#Projects"> Projects </a> </li>
<li> <a class="nav-link" href="#Contactme"> Contact Me </a> </li>
<ul>
</nav>
</header>

<main>
<section id="welcoming">
<img src="data:image/jpeg;base64,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" id="profile-img"/>
<div id="welcomingmsg">
<h1> Hello! I am Maha </h1> </br>
<p> A junior web developer </p> </br>
<p> A market Development Advisor </p> </br>
<p> Welcome to my profile </p>
</div>
</section>

<section id="About">
<h2> About </h2>
<div id= "webdev">
<h3> Maha as a Junior Web Developer</h3>
<p> It is never too late to learn new skills and penetrate in new fields. From this belief, Maha has decided to join the world of the web development, as one of the trendiest and required fields. As Maha has moved to UK recently she started to build new set of expertise that best-match the UK job market and at the same time, to follow her passion and interest. Maha has joined a web development bootcamp with Code Your Future, and she succeeded to finish HTML, CSS, and Java script courses and now she is working on developing and enhancing her skills in this field.</p>
</div>

<div id="MSD">
<h3> Maha as a Market Systems Development Advisor</h3>
<p> Maha Hayek is a market systems development advisor, with over six years of experience working with vulnerable groups, including women and youth, in marginalized areas. The scope of her work includes but is not limited to analysing and assessing the needs of different economic sectors, identifying the related market failures, designing and developing intervention models and assuring such interventions have sustainable impact to contribute to the economic development. </p>
</div>
</section>

<section id= "Projects">
<h2> My Web Development Projects </h2>
<p> I have worked on different web projects. Below are samples of my work:</p>

<div id="projectslist">
<p class="project-title" id="tribute-page"> <a href = "https://codepen.io/MahaHayek/full/bGeegqp" target="_blank" class="project-link"> Tribute Page</a>
<img class="project-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT9V8NHPKoFYYaEusjzqRuDkALv6tPrAGW7wA&usqp=CAU" alt="tribute-page"/>
</p>

<p class="project-title" id= "product-landing-page"> <a href = "https://codepen.io/MahaHayek/full/rNLLgEy" target="_blank" class="project-link" >Product Landing Page </a>
<img class="project-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTqWCR6FGw_jpZBQj7PQbDglyNMXF3w331WZA&usqp=CAU" alt="product-landing"/>
</p>

<p class="project-title" id="survey"> <a href ="https://codepen.io/MahaHayek/full/NWrpeZR" target="_blank" class="project-link" >Market Survey </a>
<img class="project-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRIdLrcX0oDqkM9qlzw9Mw6ehOxiKzobjk1NA&usqp=CAU" alt="market-reserach"/>
</p>

<p class="project-title" id="technical-page"> <a href ="https://codepen.io/MahaHayek/full/qBNxPLr" target="_blank" class="project-link" >Technical Page </a>
<img class="project-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSXDWWtitMzevwt_Gc8ZhoLmUbdDmYa4er8OQ&usqp=CAU" alt="tech-page"/>
</p>
</div>

</section>

<footer id="Contactme">
<h2> Contact Me </h2>
<p> To know more about me or to contact me you can visit my profile on: </p>
<a href="https://github.com/M-hayek" id="profile-link" target="_blank"> <i class="fa fa-github"> </i> GitHub </a> </br>
<a href ="https://www.linkedin.com/in/maha-el-hayek-3ab97287/" id="profile-link" target="_blank"> <i class="fa fa-linkedin-square"></i> linkedin </a>
</footer>

</main>

</body>
</html>