From 4a5738c54863ffb652e88bf3178bc00e03f1deb6 Mon Sep 17 00:00:00 2001 From: HusseinAlsakkaf <64165255+HusseinAlsakkaf@users.noreply.github.com> Date: Thu, 7 May 2020 17:17:20 +0100 Subject: [PATCH 1/2] General frame of the blog This is the HTML and CSS general building blocks of the blog. --- week1/3-website/css/style.css | 39 ++++++++++++++++++++++------ week1/3-website/index.html | 49 +++++++++++++++++++++++++++++++++-- 2 files changed, 78 insertions(+), 10 deletions(-) diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css index 75e9841e..7d2a21eb 100644 --- a/week1/3-website/css/style.css +++ b/week1/3-website/css/style.css @@ -1,8 +1,31 @@ -/** - * 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; + border-left: bold; + text-align: justify; + text-justify: inter-word; +} +#title{ + font-family: cursive; + text-align: justify; + text-justify: inter-word; + text-align: center; + +} +h1,h2{ + text-align: center; + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + + +} +h3{ + font-family: sans-serif; +} +p{ + font-family: monospace; +} +main:first-child{ + background-color: red; +} \ No newline at end of file diff --git a/week1/3-website/index.html b/week1/3-website/index.html index 67dfc7f5..f66f7b66 100644 --- a/week1/3-website/index.html +++ b/week1/3-website/index.html @@ -16,7 +16,52 @@ - - +
+
+

Brag Diary

+
+ This is a dairy that we are required to do separately, however as they say
-two birds with one stone- I decided to make the brag dairy as my blog. +
+
+ +
+
+
+

Introduction

+

+ 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 Code Your Future. + +

+
+ +
+
+

Week 1(Week starting 27th april)

+

Core Competencies: Employability and Personal Development Skills

+

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 Code Your Future. Lorem Ipsum. + +

+
+
+

Challenges

+

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 link.). + +

+
+
+

Achievements

+

+ 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 words. etc. + + +

+
+
+
From a87c935b8084dbdae3bd4589175a85b85b8ef831 Mon Sep 17 00:00:00 2001 From: HusseinAlsakkaf <64165255+HusseinAlsakkaf@users.noreply.github.com> Date: Fri, 8 May 2020 20:39:12 +0100 Subject: [PATCH 2/2] finalized finalized and ready for submission. --- week1/3-website/css/style.css | 37 ++++++++++++++++++++++++++++++++--- week1/3-website/index.html | 14 ++++++++++--- 2 files changed, 45 insertions(+), 6 deletions(-) diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css index 7d2a21eb..d7658d3b 100644 --- a/week1/3-website/css/style.css +++ b/week1/3-website/css/style.css @@ -3,7 +3,6 @@ body{ text-align: center; margin-left: 100px; margin-right: 100px; - border-left: bold; text-align: justify; text-justify: inter-word; } @@ -14,6 +13,14 @@ body{ 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; @@ -26,6 +33,30 @@ h3{ p{ font-family: monospace; } -main:first-child{ - background-color: red; +.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; + + } } \ No newline at end of file diff --git a/week1/3-website/index.html b/week1/3-website/index.html index f66f7b66..2f32fde5 100644 --- a/week1/3-website/index.html +++ b/week1/3-website/index.html @@ -23,10 +23,9 @@
This is a dairy that we are required to do separately, however as they say
-two birds with one stone- I decided to make the brag dairy as my blog.
-
-
+

Introduction

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. @@ -37,7 +36,7 @@

Introduction

Through this blog, I hope I can track my self-growth and achievements on my journey with Code Your Future.

-
+
@@ -46,12 +45,16 @@

Core Competencies: Employability and Personal Development Skills

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 Code Your Future. Lorem Ipsum.

+

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

Challenges

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 link.).

+

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

Achievements

@@ -60,8 +63,13 @@

Achievements

+

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

+