Skip to content
This repository was archived by the owner on Oct 26, 2020. It is now read-only.

Hussein week1 #16

Open
HusseinAlsakkaf wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Hussein week1 #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4a5738c
General frame of the blog
HusseinAlsakkaf May 7, 2020
a87c935
finalized
HusseinAlsakkaf May 8, 2020
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
70 changes: 62 additions & 8 deletions week1/3-website/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,62 @@
/**
* Add your custom styles below
*
* Remember:
* - Be organised, use comments and separate your styles into meaningful chunks
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/
body{
background: linear-gradient(90deg,#808000,#40E0D0);
text-align: center;
margin-left: 100px;
margin-right: 100px;
text-align: justify;
text-justify: inter-word;
}
#title{
font-family: cursive;
text-align: justify;
text-justify: inter-word;
text-align: center;

}
main div:first-child /*This will selct the Introduction "box" which can be selcted otherwise by the id #introduction */
{
padding: 40px;
box-shadow:
inset 0 -3em 3em #808000,
0 0 0 2px #808000,
0.3em 0.3em 1em #40E0D0;
}
h1,h2{
text-align: center;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;


}
h3{
font-family: sans-serif;
}
p{
font-family: monospace;
}
.summary{ /*Styling the summaries in shadow boxes */
font-size: 12px;
font-family: cursive;
font-style: italic;
width: 350px;
padding: 10px 10px 20px 10px;
border: 1px solid #808000;
box-shadow: 10px 10px 5px;
}


#footer {
height: 40px;
width: 100%;
background-color: olive;
color: black;
border-style: ridge;
border-color: darkslategrey;
}

@media (min-width: 800px) {
body {
margin-left: 350px;
margin-right: 350px;

}
}
57 changes: 55 additions & 2 deletions week1/3-website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,60 @@
<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>
<div id="title">
<h1>Brag Diary</h1>
<h5>
This is a dairy that we are required to do separately, however as they say<br> -two birds with one stone- I decided to make the brag dairy as my blog.
</h5>
</div>
</header>
<main>
<div id="introduction">
<h2>Introduction</h2>
<p>
This blog is personal to me and an opportunity for me to record my growth and the skills I pick up over the next few months, so that when I create my CV/resume and start applying for jobs, I can see how far I have come and what I have achieved, with examples.

I will be building an experience map for yourself. I will do this by reflecting on what I have done over the week, talking about what I have achieved, and what I have found difficult. A lot of work I will accomplish in the next few weeks will get forgotten and by the time you reach the end of the course, you will find it difficult to remember the skills you picked up along the way. This document ensures that does not happen. I can track what I have learned, even if it is not aligned with your goals, it is good to see the extra tasks you did and what you learned from that.

I will be clear in my goals, this blog will allow me to track the skills I am working on and which skills I need to perhaps work on more. I will be open about my goals and share with others whilst asking for feedback. Encourage each other to share our achievements and praise the hard work and achievements of each other, no matter how small they may seem.
Through this blog, I hope I can track my self-growth and achievements on my journey with <a href="https://codeyourfuture.io/"target="_blank" >Code Your Future.</a>

</p>
</div>

<section id="week1">
<article>
<h2>Week 1(Week starting 27th april)</h2>
<h3>Core Competencies: Employability and Personal Development Skills</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of <a href="https://codeyourfuture.io/"target="_blank" >Code Your Future.</a> Lorem Ipsum.

</p>
<h4>Summary</h4>
<p class="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</article>
<article>
<h3>Challenges</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the <a href="https://codeyourfuture.io/"target="_blank" >link.</a>).

</p>
<h4>Summary</h4>
<p class="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</article>
<article>
<h3>Achievements</h3>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic <a href="https://codeyourfuture.io/"target="_blank" >words.</a> etc.


</p>
<h4>Summary</h4>
<p class="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</article>
</section>
<div id="footer">
<p>Email Adress: info@marseye.com &nbsp; Phone Number: 044786965700</p>
</div>
</main>
</body>
</html>