From 91666e639bd04a8524e5f0355b85742579df8e06 Mon Sep 17 00:00:00 2001 From: ahmedsaif2002 Date: Mon, 13 Feb 2023 00:36:37 +0000 Subject: [PATCH 1/4] adding face one --- css/style.css | 32 ++++++++++++++++++++++++-------- index.html | 20 ++++++++++++++++++++ 2 files changed, 44 insertions(+), 8 deletions(-) diff --git a/css/style.css b/css/style.css index 75e9841e..0e684aa5 100644 --- a/css/style.css +++ b/css/style.css @@ -1,8 +1,24 @@ -/** - * 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-color: powderblue; + } + + .all-browsers { + margin: 0; + padding: 5px; + background-color: lightgray; + } + + .all-browsers > h1, .browser { + margin: 10px; + padding: 5px; + } + + .browser { + background: white; + } + + .browser > h2, p { + margin: 4px; + font-size: 90%; + } + \ No newline at end of file diff --git a/index.html b/index.html index 67dfc7f5..2ae8fd47 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,26 @@ +
+

Most Popular Browsers

+
+

Google Chrome

+

Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!

+
+
+

Mozilla Firefox

+

Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.

+
+
+

Microsoft Edge

+

Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced + Internet Explorer. + Visit us + +

+
+
+ From ce8dc3d9d6a24df625c31ceaebd8238eb75ae617 Mon Sep 17 00:00:00 2001 From: ahmedsaif2002 Date: Mon, 13 Feb 2023 00:47:31 +0000 Subject: [PATCH 2/4] add articles --- css/style.css | 12 +++++------- index.html | 24 ++++++++++++------------ 2 files changed, 17 insertions(+), 19 deletions(-) diff --git a/css/style.css b/css/style.css index 0e684aa5..5cebd9dd 100644 --- a/css/style.css +++ b/css/style.css @@ -1,23 +1,21 @@ -body { - background-color: powderblue; - } +body - .all-browsers { + .all-article { margin: 0; padding: 5px; background-color: lightgray; } - .all-browsers > h1, .browser { + .all-article > h1, .browser { margin: 10px; padding: 5px; } - .browser { + .article { background: white; } - .browser > h2, p { + .article > h2, p { margin: 4px; font-size: 90%; } diff --git a/index.html b/index.html index 2ae8fd47..c0c938cc 100644 --- a/index.html +++ b/index.html @@ -16,20 +16,20 @@ -
-

Most Popular Browsers

-
-

Google Chrome

-

Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!

+
+

What is Lorem Ipsum?

+
+

What is Lorem Ipsum?

+

GLorem 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 Lorem Ipsum.

-
-

Mozilla Firefox

-

Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.

+
+

Where does it come from?

+

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. + The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

-
-

Microsoft Edge

-

Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced - Internet Explorer. +

+

Why do we use it?

+

t 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 like). Visit us

From 9336a4b479e047dcd4e058104bef295b6e4410e7 Mon Sep 17 00:00:00 2001 From: ahmedsaif2002 Date: Mon, 13 Feb 2023 03:01:10 +0000 Subject: [PATCH 3/4] face two --- css/style.css | 77 +++++++++++++++++++++++++++++++++++++++++---------- index.html | 69 +++++++++++++++++++++++++++++++-------------- 2 files changed, 111 insertions(+), 35 deletions(-) diff --git a/css/style.css b/css/style.css index 5cebd9dd..d770dcf8 100644 --- a/css/style.css +++ b/css/style.css @@ -1,22 +1,71 @@ -body - - .all-article { - margin: 0; - padding: 5px; - background-color: lightgray; + + body { + font-family: Arial; + padding: 20px; + background: #f1f1f1; } - .all-article > h1, .browser { - margin: 10px; - padding: 5px; + /* Header/Blog Title */ + .header { + padding: 30px; + font-size: 30px; + text-align: center; + background: white; } - .article { - background: white; + /* Create two unequal columns that floats next to each other */ + /* Left column */ + .leftcolumn { + float: left; + width: 100%; + } + + /* Right column */ + .rightcolumn { + float: left; + width: 25%; + padding-left: 20px; + } + + /* Fake image */ + .img { + background-color: #aaa; + width: 50%; + padding: 20px; + } + + /* Add a card effect for articles */ + .card { + background-color: white; + padding: 20px; + margin-top: 20px; + } + + /* Clear floats after the columns */ + .row:after { + content: ""; + display: table; + clear: both; + } + + /* Footer */ + .footer {position: fixed; + left: 0; + bottom: 0; + width: 100%; + background-color: red; + color: white; + text-align: center; } +} - .article > h2, p { - margin: 4px; - font-size: 90%; + /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */ + @media screen and (max-width: 800px) { + .leftcolumn, .rightcolumn { + width: 100%; + padding: 0; + } } + + \ No newline at end of file diff --git a/index.html b/index.html index c0c938cc..ab5b47cb 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ content="width=device-width, initial-scale=1, shrink-to-fit=no" /> My Blog + -
-

What is Lorem Ipsum?

-
-

What is Lorem Ipsum?

-

GLorem 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 Lorem Ipsum.

-
-
-

Where does it come from?

-

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. - The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

-
-
-

Why do we use it?

-

t 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 like). - Visit us - -

-
-
+
+

code your future

+
+ +
+
+
+

CYF London 9

+
London, Oct 2022
+
+ +

GLorem 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 Lorem Ipsum

+
+
+

CYF London 10

+
London Jan 2023
+
+
+
+

GLorem 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 Lorem Ipsum

+
+ - - + + + + + From a6e35ea486179080ee38b758cb0e7c62791ac0ab Mon Sep 17 00:00:00 2001 From: ahmedsaif2002 Date: Mon, 13 Feb 2023 03:43:50 +0000 Subject: [PATCH 4/4] CW week 1 V1 --- css/style.css | 58 ++++++++++----------------------------------------- index.html | 33 ++++++----------------------- 2 files changed, 17 insertions(+), 74 deletions(-) diff --git a/css/style.css b/css/style.css index d770dcf8..c0ac2aad 100644 --- a/css/style.css +++ b/css/style.css @@ -3,67 +3,31 @@ font-family: Arial; padding: 20px; background: #f1f1f1; + width: 95%; } /* Header/Blog Title */ .header { padding: 30px; - font-size: 30px; + font-size: 15px; text-align: center; background: white; + border-bottom: black; } - - /* Create two unequal columns that floats next to each other */ - /* Left column */ - .leftcolumn { - float: left; - width: 100%; - } - - /* Right column */ - .rightcolumn { - float: left; - width: 25%; - padding-left: 20px; - } - - /* Fake image */ - .img { - background-color: #aaa; - width: 50%; - padding: 20px; - } - - /* Add a card effect for articles */ - .card { - background-color: white; - padding: 20px; - margin-top: 20px; - } - - /* Clear floats after the columns */ - .row:after { - content: ""; - display: table; - clear: both; - } - - /* Footer */ - .footer {position: fixed; - left: 0; - bottom: 0; - width: 100%; - background-color: red; - color: white; + footer{ + padding: 30px; + font-size: 15px; text-align: center; - } -} + background: white; + width: 95%; + } + /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 800px) { .leftcolumn, .rightcolumn { width: 100%; - padding: 0; + padding: 0.1; } } diff --git a/index.html b/index.html index ab5b47cb..6d5d0528 100644 --- a/index.html +++ b/index.html @@ -18,11 +18,8 @@
-

code your future

+

Code Your Future

- -
-

CYF London 9

London, Oct 2022
@@ -35,35 +32,17 @@

CYF London 10

London Jan 2023
+

GLorem 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 Lorem Ipsum

- - - + +