From d96ce4d050d8e2c1face600d57d3210c2293a93a Mon Sep 17 00:00:00 2001 From: Berhane Woldetensay Date: Sun, 10 May 2020 23:31:29 +0100 Subject: [PATCH 01/17] Update style.css --- week1/3-website/css/style.css | 69 +++++++++++++++++++++++++++++++---- 1 file changed, 61 insertions(+), 8 deletions(-) diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css index 75e9841e..c8c6e3a1 100644 --- a/week1/3-website/css/style.css +++ b/week1/3-website/css/style.css @@ -1,8 +1,61 @@ -/** - * 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: #4a4; + } + .blog-name { + text-align: center; + margin: 30px 8px; + padding: 15px; + border-radius: 5px; + background: #fca; + } + + .article-1 h3 { + text-align: center; + } + h3 { + display: block; + font-size: 1.17em; + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 0px; + margin-inline-end: 0px; + font-weight: bold; + } + .article { + display: grid; + grid-template-columns: 31vw 31vw 31vw; + grid-gap: 30px; + justify-items: center; + font: 1rem/1.56 "ubuntu", Verdana, Arial, sans-serif; + } + article:first-child { + color: #123; + background-color: #faa; + } + .article_1 { + border-radius: 1em; + text-align: center; + color: #aceef3; + + font-size: 1.5vw; + background-color: rgb(38, 107, 109); + } + + img { + max-width: 50%; + display: block; + height: auto; + margin: 0 auto; + } + + #img-div { + background: green; + padding: 10px; + margin: -10; + height: 10; + } + .rights { + text-align: center; + font: 1.2rem/1.56 "ubuntu", Verdana, Arial, sans-serif; + } + From fa2e2ff21fa1bd28a47cb967286959bf334639b0 Mon Sep 17 00:00:00 2001 From: Berhane Woldetensay Date: Sun, 10 May 2020 23:32:26 +0100 Subject: [PATCH 02/17] Update index.html --- week1/3-website/index.html | 99 ++++++++++++++++++++++++++++++-------- 1 file changed, 80 insertions(+), 19 deletions(-) diff --git a/week1/3-website/index.html b/week1/3-website/index.html index 67dfc7f5..a010fd2a 100644 --- a/week1/3-website/index.html +++ b/week1/3-website/index.html @@ -1,22 +1,83 @@ - - - - My Blog - - - - - - - - + + + + + + My Random Blog + + + + + + + +
+

Random Blog

+
+ Lorem Ipsum + +
+ +
+
+ +

Left

+ +
+ +

Donec efficitur massa justo, et dignissim ante pretium id. In lorem magna, commodo vel tristique at, + dignissim ac dui. Fusce ac diam a ex pellentesque porttitor malesuada eget ante. Nam finibus porta mauris. + Pellentesque convallis mi nec massa convallis bibendum. Aenean ornare augue vitae mattis posuere. Lorem + ipsum dolor sit amet, consectetur adipiscing elit. Aliquam metus metus, ornare vitae vehicula ac, lobortis + in ligula.

+ Lorem Ipsum + +
+ +
+

Middle Article

+
+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis enim sapien, convallis id aliquet ut, + fermentum at velit. In auctor venenatis feugiat. Nullam pharetra ornare urna a elementum. In convallis + posuere pretium. Nulla mattis molestie tellus, eu gravida diam ultrices vitae. Nunc ultrices, nisl quis + varius fringilla, est ante pellentesque odio, id condimentum est justo nec quam. Orci varius natoque + penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum et purus ipsum. Maecenas + mauris nisl, fringilla a egestas et, tincidunt vel urna. +

+ Lorem Ipsum +
+
+ +
+

Right

+
+

+ Aenean lacinia, justo nec porta tincidunt, elit magna mollis nibh, at vulputate est sem eu lorem. Integer + leo turpis, cursus ut tincidunt at, accumsan quis enim. Donec malesuada porttitor gravida. Ut dictum mi + ornare, egestas tellus nec, euismod dolor. Curabitur ex arcu, consectetur ac porttitor sed, efficitur + placerat justo. Aliquam placerat viverra velit vitae egestas. Duis dapibus ex sem. Aliquam fringilla augue a + nibh aliquet, ut auctor dui rhoncus. Sed tincidunt aliquam ante nec venenatis. Integer aliquet tortor sed ex + pretium, viverra rutrum sem hendrerit. Nunc eu auctor elit, a fringilla risus. Mauris ornare velit sit amet + mi porta, non vestibulum augue faucibus. +

+ Lorem Ipsum +
+
+
+ +
+
+ +
+ All rights reserved by Random Blog. Copyright © 2020 +
+
+ + + From df597a6fa18f2e03125030e01185b637be3786f8 Mon Sep 17 00:00:00 2001 From: bireworld Date: Fri, 22 May 2020 11:14:37 +0100 Subject: [PATCH 03/17] index file update --- week2/2-website/index.html | 50 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/week2/2-website/index.html b/week2/2-website/index.html index 876b59d6..75cb4f18 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -12,7 +12,57 @@ +
+ + + + +
+
+
+
+

Introducing Karma

+

Bring Wifi with you, everywhere you go.

+
+ +
+
+
+
+
+

Everyone needs a little karma.

+
    +
  • Internet for all devices image
    • +
    Internet for all devices
    +
  • Boost your productivity image
    • +
    Boost your productivity
    +
  • Pay as You Go image
    • +
    Pay as you go
    +
+ +
+
+
+
+
+
+
Join us on
+
    + + ::before + + ::before +
  • ::before +
+
From c52aa7065271f00870dbd762ef8d9728c2b4ecd5 Mon Sep 17 00:00:00 2001 From: bireworld Date: Fri, 22 May 2020 11:47:59 +0100 Subject: [PATCH 04/17] html update --- week2/2-website/index.html | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/week2/2-website/index.html b/week2/2-website/index.html index 75cb4f18..fecf9c47 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -51,18 +51,19 @@

Everyone needs a little karma.

-
+
Join us on
    - - ::before - - ::before -
  • ::before + + +
+ +
© Karma Mobility, Inc.
+
From b5ffa1ce6bd308dcf529ce99a85dbb2ed7e269c0 Mon Sep 17 00:00:00 2001 From: bireworld Date: Fri, 22 May 2020 12:13:20 +0100 Subject: [PATCH 05/17] add comment --- week2/2-website/index.html | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/week2/2-website/index.html b/week2/2-website/index.html index fecf9c47..41e5910f 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -4,14 +4,14 @@ Karma - + - +
@@ -26,6 +26,7 @@
+

Introducing Karma

@@ -51,6 +52,7 @@

Everyone needs a little karma.

+
@@ -64,9 +66,5 @@
Join us on
© Karma Mobility, Inc.
- - - - - + From 520b8bde6f95325b82eecb507ad03e96ff9a4537 Mon Sep 17 00:00:00 2001 From: bireworld Date: Sat, 23 May 2020 13:46:47 +0100 Subject: [PATCH 06/17] index update --- week2/2-website/index.html | 111 +++++++++++++++++++++---------------- 1 file changed, 64 insertions(+), 47 deletions(-) diff --git a/week2/2-website/index.html b/week2/2-website/index.html index 41e5910f..4b0f164d 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -1,5 +1,6 @@ + @@ -8,63 +9,79 @@ - + + -
- - - - -
-
- -
-
-

Introducing Karma

-

Bring Wifi with you, everywhere you go.

-
- +
+ +
+ + + + + + +
+ + + + +
+
+ + +

Introducing Karma

+

Bring Wifi with you, everywhere you go.

+
-
-
-
-
+ +
+
+

Everyone needs a little karma.

    -
  • Internet for all devices image
    • +
  • Internet for all devices image
    • Internet for all devices
    -
  • Boost your productivity image
    • +
  • Boost your productivity image
    • Boost your productivity
    -
  • Pay as You Go image
    • +
  • Pay as You Go image +
    • Pay as you go
+
-
-
- -
-
-
-
Join us on
-
    - - -
  • -
- -
© Karma Mobility, Inc.
-
-
- - + + +
+
+ +
+
Join us on
+
    + + +
  • +
+ +
© Karma Mobility, Inc.
+ +
+
+ + + + \ No newline at end of file From 1ca5fbf90a441078250e28c6a5a90670455317b9 Mon Sep 17 00:00:00 2001 From: bireworld Date: Sun, 24 May 2020 11:27:49 +0100 Subject: [PATCH 07/17] index update --- week2/2-website/index.html | 94 ++++++++++++++++++++++++++------------ 1 file changed, 64 insertions(+), 30 deletions(-) diff --git a/week2/2-website/index.html b/week2/2-website/index.html index 4b0f164d..66f69705 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -18,18 +18,19 @@
- + -
@@ -37,28 +38,41 @@
-
- - -

Introducing Karma

-

Bring Wifi with you, everywhere you go.

-
-
+
+

Introducing Karma

+

Bring Wifi with you, everywhere you go.

+
+

Everyone needs a little karma.

    -
  • Internet for all devices image
    • -
    Internet for all devices
    -
  • Boost your productivity image
    • -
    Boost your productivity
    -
  • Pay as You Go image -
    • -
    Pay as you go
    +
    +
  • Internet for all devices image
    • +
    +
    Internet for all devices
    +
    +
    +
    +
  • Boost your productivity image
    • +
    +
    Boost your productivity
    +
    +
    + +
    +
  • Pay as You Go image +
    • +
    +
    Pay as you go
    +
    +
    +
@@ -66,20 +80,40 @@

Everyone needs a little karma.

+
+
-
-
+ +
Join us on
-
    +
+ + + +
    + + +
  • + +
    • +
+ + + + + -
© Karma Mobility, Inc.
+
© Karma Mobility, Inc.
-
From c6e37cae66f8aa58c2be416ee1ef0400c21698f2 Mon Sep 17 00:00:00 2001 From: bireworld Date: Sun, 24 May 2020 11:29:01 +0100 Subject: [PATCH 08/17] style update --- week2/2-website/css/style.css | 226 +++++++++++++++++++++++++++++++++- 1 file changed, 225 insertions(+), 1 deletion(-) diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index 5cb025ce..2777ba66 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -1,11 +1,235 @@ /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ - +html{ + height: 100%; + width: 100%; +} body { + width: 100%; font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; + margin: 0; + padding: 0; + + +} +.parent { + background-color: #ffffff; + margin: 0; + padding: 30px; + height:100%; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content:center; + +} +.header { + + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content:center; + border-bottom: 1px solid #DDD; + } +.header .logo{ +margin-right: 150px; +width: 40px; +height: 40px; +} +.nav .nav-menu { + list-style: none; + display: flex; + flex-direction: row; + align-items: center; + justify-content:center; + text-decoration: none; + color: #838994 + +} +.nav-menu li.active { + color: #2c2e31; + font-weight: 500; +} + +.top_content { + /* background-color: #f800db;*/ + background-image: url(../img/first-background.jpg); + background-position: center bottom; + background-repeat: no-repeat; + background-size: cover; + height: 500px; + width: 100%; + margin: inherit; + padding: inherit; + display: flex; + justify-content: center; + +} +.top_content_container{ + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + +} +.top_content h1{ + + color: white; + text-align: center; + font-family: inherit; + + + + +} +.top_content h3{ + /*padding-left: 12.5rem;*/ + color: white; + text-align: center; + font-weight: 300; + + + + +} +.top_content .btn{ + /*padding-left: 12.5rem;*/ + color: white; + text-align: center; + margin-top: 1.563rem; +} +button{ + + width: 9.688rem; + background-color: #f15a29; + border-color: #f15a29; + text-shadow: none; + border-style: none; + border-radius: 4px; + padding: 1rem 1.5rem; + color: white; + font-size: 1.125rem; + +} +.bottom_content{ + display: flex; + flex-direction: column; + align-items: center; + justify-content:center; + width: 100%; + + +} +.bottom_content h2{ + font-size: 2.75rem; + margin: 1.625rem 0 3.125rem; + font-weight: 100; + +} +.case{ + display: flex; + flex-direction: row; + align-items: center; + justify-content:center; + width: 100%; + list-style: none; +} +.case_list{ + padding: 40px; + margin: 40px; + +} +.caption{ + + text-align: center; + font-size: 1.563rem; +} +.caption h5{ + text-align: center; + padding: 10px; +} +ul .case_list .caption { + /*background-color: lightcoral;*/ + display: block; + + width: 100%; + + +} +hr{ + width: 100%; +} +.footer { + display: flex; + flex-direction: column; + width: 100%; + align-items: center; + justify-content: center; + +} +.footer h5{ + text-align: center; + margin-block-start: 1.67em; + margin-block-end: 1.67em; + margin-inline-start: 0px; + margin-inline-end: 0px; +} +.icons { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + padding: 20px; + margin: 20px; + border: 0; + +} +ul{ + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 0px; + margin-inline-end: 0px; + padding-inline-start: 40px; + +} +li{ + list-style: none; + padding: 10px; + + +} +.footer .icons > li { + border-radius: 1.25rem; + width: 2.5rem; + height: 2.5rem; + display: inline-block; + margin: 1.25rem 5px; + border: 1px solid #eaebec; + padding: 0.625rem 0; + text-align: center; +} +.footer .twitter { + color: #55acee; +} +.footer .facebook { + color: #4c66a4; +} +.footer .instagram{ + color: #3f729b; +} +.fa { + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} /** * Add your custom styles below * From 8dabe815560206ce642d476fb7d092878a326155 Mon Sep 17 00:00:00 2001 From: bireworld Date: Sun, 24 May 2020 22:12:47 +0100 Subject: [PATCH 09/17] final style update --- week2/2-website/css/style.css | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index 2777ba66..cf1ec1af 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -10,9 +10,9 @@ body { -webkit-font-smoothing: antialiased; margin: 0; padding: 0; - - + } +/* flexbox*/ .parent { background-color: #ffffff; margin: 0; @@ -230,6 +230,20 @@ li{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } +/****Media Queries****/ + + + +@media only screen and (min-width:400){ + .nav .nav-menu { + height: 200px; + flex-direction: column; + } + .header .logo{ + margin: 0; + } +} + /** * Add your custom styles below * From 3514b7eec7034d649756e0ea574f65e1a36566f5 Mon Sep 17 00:00:00 2001 From: bireworld Date: Sun, 24 May 2020 22:14:48 +0100 Subject: [PATCH 10/17] final html update --- week2/2-website/index.html | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/week2/2-website/index.html b/week2/2-website/index.html index 66f69705..352e4598 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -1,6 +1,6 @@ - + @@ -21,16 +21,17 @@ -
    +
    +
      -
    • Meet Karma
      • -
    • How it Works
      • -
    • Store
      • -
    • Blog
      • -
    • Help
      • -
    • Login
      • -
    -
    +
  • Meet Karma
    • +
  • How it Works
    • +
  • Store
    • +
  • Blog
    • +
  • Help
    • +
  • Login
    • +
+
From ed860e8148f793f24b68a8d907d889995716185f Mon Sep 17 00:00:00 2001 From: bireworld Date: Fri, 29 May 2020 12:09:03 +0100 Subject: [PATCH 11/17] add main html and css files --- week3/2-website/main.css | 73 +++++++++++++++++++++++++++++++++++++++ week3/2-website/main.html | 44 +++++++++++++++++++++++ 2 files changed, 117 insertions(+) create mode 100644 week3/2-website/main.css create mode 100644 week3/2-website/main.html diff --git a/week3/2-website/main.css b/week3/2-website/main.css new file mode 100644 index 00000000..f95f4f2a --- /dev/null +++ b/week3/2-website/main.css @@ -0,0 +1,73 @@ +* { + font-family: "Pacifico", cursive; + background-color: rgb(188, 243, 226); + } + .container{ + width: 100%; + background-color: aqua; + display: flex; + flex-direction: column; + + } + .container .header{ + width: 100%; + margin: 10px; + background-color: beige; + } + header.header{ + margin: 10px; + } + .header .top-header{ + width: 100%; + background-color: blueviolet; + margin: 10px; + display: flex; + flex-direction: row; + justify-content: space-between; + } + .top-header .logo{ + width: 100px; + height: 100px; + background-color: cyan; + padding: 10px; + } + .top-header .contact-button{ + color: rgb(200, 144, 233); + font-size: 25px; + border-color: rgb(252, 251, 253); + border-radius: 10px; + border-width: medium; + width: 125px; + height: 50px; + margin-top: 50px; + margin-right: 20px; + } + .header .nav{ + background-color: greenyellow; + + + } + .header .nav-bar{ + + } + .nav-bar .nav-list{ + list-style: none; + display: flex; + justify-content: space-evenly; +} +.nav-list li{ + margin: 5px; + padding: 5px; + background-color: coral +} + + .container .main{ + background-color: darkgoldenrod; + height: 200px; + margin: 20px; + } + .container .footer{ + background-color: darkgreen; + height: 200px; + margin: 20px; + } \ No newline at end of file diff --git a/week3/2-website/main.html b/week3/2-website/main.html new file mode 100644 index 00000000..5d89d7e9 --- /dev/null +++ b/week3/2-website/main.html @@ -0,0 +1,44 @@ + + + + + Cake-Factory + + + + +
+
+
+ + +
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+ + + \ No newline at end of file From 1d986d86ed69204e2b339700a9115a6a532ed452 Mon Sep 17 00:00:00 2001 From: bireworld Date: Sat, 30 May 2020 07:05:55 +0100 Subject: [PATCH 12/17] update html and css files --- week3/2-website/main.css | 96 +++++++++++++++++++++++++++++++++++---- week3/2-website/main.html | 41 ++++++++++++++--- 2 files changed, 121 insertions(+), 16 deletions(-) diff --git a/week3/2-website/main.css b/week3/2-website/main.css index f95f4f2a..caf7e98d 100644 --- a/week3/2-website/main.css +++ b/week3/2-website/main.css @@ -4,7 +4,7 @@ } .container{ width: 100%; - background-color: aqua; + /*background-color: aqua;*/ display: flex; flex-direction: column; @@ -18,7 +18,7 @@ margin: 10px; } .header .top-header{ - width: 100%; + background-color: blueviolet; margin: 10px; display: flex; @@ -42,13 +42,10 @@ margin-top: 50px; margin-right: 20px; } - .header .nav{ + .header .nav .nav-bar{ background-color: greenyellow; - } - .header .nav-bar{ - } .nav-bar .nav-list{ list-style: none; @@ -59,13 +56,92 @@ margin: 5px; padding: 5px; background-color: coral -} - - .container .main{ - background-color: darkgoldenrod; +} + .container .main-container{ + /*background-color: darkgoldenrod;*/ height: 200px; margin: 20px; + display: flex; + flex-direction: row; + justify-content: space-around; + + } + .main-container .info-section{ + background-color: cornflowerblue; + margin-right: 20px; + width: 33%; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + } + .main-container .image-section{ + background-color: darkolivegreen; + width: 67%; + display: flex; + flex-direction: column; + justify-content: space-between; + } + .image-section .image-carousel{ + background-color: darksalmon; + + + height:100%; + margin: 5px; + + + + } + .image-section .image-list{ + background-color: dodgerblue; + + + } + .image-list ul{ + margin: 0px; + padding: 0px; + padding: 10px; + display: flex; + justify-content: space-around; } + .image-list ul li{ + background-color: orchid; + list-style: none; + + width: 50px; + height: 50px; + + + } + .container .section{ + /*background-color: violet;*/ + margin: 10px; + /*padding: 10px;*/ + /*width: 100%;*/ + /*height: 100%;*/ + + + } + .section .cake-images{ + + height: 100%; + width: 100%; + + } + .cake-images .cake-portrait { + display: flex; + flex-direction: row; + justify-content: space-around; + +} + .cake-portrait .cakes{ + background-color: orange; + list-style: none; + margin: 20px; + padding: 10px; +} + } + .container .footer{ background-color: darkgreen; height: 200px; diff --git a/week3/2-website/main.html b/week3/2-website/main.html index 5d89d7e9..ef863251 100644 --- a/week3/2-website/main.html +++ b/week3/2-website/main.html @@ -1,14 +1,13 @@ + Cake-Factory - + +
@@ -29,16 +28,46 @@
-
+
+
+

Hello

+

Information

+
+
+
+ +
+
+
    +
  • image1
    • +
  • image2
    • +
  • image3
    • +
  • image4
    • +
+
+ +
+
+
+
    +
  • cake1
    • +
  • cake2
    • +
  • cake3
    • +
  • cake4
    • +
+
+ +
- + + \ No newline at end of file From 78302a94d94427342334ee65817675b3832af7eb Mon Sep 17 00:00:00 2001 From: bireworld Date: Tue, 2 Jun 2020 00:36:39 +0100 Subject: [PATCH 13/17] html and css update --- week3/2-website/main.css | 100 ++++++++++++++++++++------------------ week3/2-website/main.html | 31 ++++++++---- 2 files changed, 74 insertions(+), 57 deletions(-) diff --git a/week3/2-website/main.css b/week3/2-website/main.css index caf7e98d..a0a7837d 100644 --- a/week3/2-website/main.css +++ b/week3/2-website/main.css @@ -1,6 +1,6 @@ * { font-family: "Pacifico", cursive; - background-color: rgb(188, 243, 226); + background-color: rgb(223, 197, 228); } .container{ width: 100%; @@ -12,24 +12,25 @@ .container .header{ width: 100%; margin: 10px; - background-color: beige; + /*background-color: beige;*/ } + /*} header.header{ margin: 10px; + }*/ + + .header .top-header { + /* background-color: lavenderblush;*/ + /* margin: 10px; */ + display: flex; + flex-direction: column; + /* justify-content: space-between; */ + align-items: center; } - .header .top-header{ - - background-color: blueviolet; - margin: 10px; - display: flex; - flex-direction: row; - justify-content: space-between; - } .top-header .logo{ - width: 100px; - height: 100px; - background-color: cyan; - padding: 10px; + width: 200px; + height: 200px; + padding: 20px; } .top-header .contact-button{ color: rgb(200, 144, 233); @@ -39,8 +40,6 @@ border-width: medium; width: 125px; height: 50px; - margin-top: 50px; - margin-right: 20px; } .header .nav .nav-bar{ background-color: greenyellow; @@ -50,48 +49,44 @@ .nav-bar .nav-list{ list-style: none; display: flex; - justify-content: space-evenly; + flex-direction: column; } +/* .nav-list li{ margin: 5px; padding: 5px; - background-color: coral -} + } */ .container .main-container{ /*background-color: darkgoldenrod;*/ height: 200px; - margin: 20px; - display: flex; - flex-direction: row; - justify-content: space-around; - + margin: 20px; + display: flex; + flex-direction: column; + /* justify-content: space-around; */ + align-items: center; } .main-container .info-section{ - background-color: cornflowerblue; - margin-right: 20px; - width: 33%; - display: flex; - flex-direction: column; - justify-content: space-evenly; - align-items: center; + + background-color: cornflowerblue; + /* margin-right: 20px; */ + width: 100%; + text-align: center; } .main-container .image-section{ - background-color: darkolivegreen; - width: 67%; - display: flex; - flex-direction: column; - justify-content: space-between; - } - .image-section .image-carousel{ - background-color: darksalmon; - - height:100%; - margin: 5px; + display: flex; + flex-direction: column; + align-items: center; + } + /* .image-section { + + display: flex; + flex-direction: column; + align-items: center; - } + }/* .image-section .image-list{ background-color: dodgerblue; @@ -112,7 +107,7 @@ height: 50px; - } + }*/ .container .section{ /*background-color: violet;*/ margin: 10px; @@ -130,8 +125,8 @@ } .cake-images .cake-portrait { display: flex; - flex-direction: row; - justify-content: space-around; + flex-direction: column; + align-items: center; } .cake-portrait .cakes{ @@ -143,7 +138,18 @@ } .container .footer{ - background-color: darkgreen; + background-color: rgb(128, 233, 128); height: 200px; margin: 20px; + } + .footer .footer-list{ + display: flex; + flex-direction: row; + justify-content: center; + margin: 20px; + } + .footer-list li{ + background-color: orchid; + list-style: none; + padding: 10px; } \ No newline at end of file diff --git a/week3/2-website/main.html b/week3/2-website/main.html index ef863251..5d70cda0 100644 --- a/week3/2-website/main.html +++ b/week3/2-website/main.html @@ -12,7 +12,7 @@
- +
@@ -34,17 +34,23 @@

Hello

Information

-
- +
+ picture of Brian M. the CEOpicture of Brian M. the CEO +
+
+ picture of Andy C. the CFOpicture of Andy C. the CFO
-
-
    -
  • image1
    • -
  • image2
    • -
  • image3
    • -
  • image4
    • -
+
+ picture of Angela W. the COOpicture of Angela W. the COO
+
+ picture of Amie S. the CTOpicture of Amie S. the CTO +
+
@@ -63,6 +69,11 @@

Hello

+
    +
  • Site Map
    • +
  • Contact
    • +
  • Delivery
    • +
From ed080aca06e0e7bf388efa2cae8b210f71a3bcdb Mon Sep 17 00:00:00 2001 From: bireworld Date: Sun, 7 Jun 2020 10:30:08 +0100 Subject: [PATCH 14/17] html and css update --- week3/2-website/main.css | 103 ++++++++++++++++++++++++++------------ week3/2-website/main.html | 25 +++------ 2 files changed, 80 insertions(+), 48 deletions(-) diff --git a/week3/2-website/main.css b/week3/2-website/main.css index a0a7837d..afe9dfc7 100644 --- a/week3/2-website/main.css +++ b/week3/2-website/main.css @@ -7,11 +7,11 @@ /*background-color: aqua;*/ display: flex; flex-direction: column; - + align-items: center; } .container .header{ width: 100%; - margin: 10px; + /*background-color: beige;*/ } /*} @@ -20,45 +20,56 @@ }*/ .header .top-header { - /* background-color: lavenderblush;*/ - /* margin: 10px; */ + /* background-color: lavenderblush; + margin: 10px; */ display: flex; flex-direction: column; /* justify-content: space-between; */ align-items: center; + margin-bottom: 10px; + margin-top: 20px; } .top-header .logo{ + background-color: lavenderblush; width: 200px; height: 200px; padding: 20px; } .top-header .contact-button{ - color: rgb(200, 144, 233); + background-color: lavenderblush; + /*color: rgb(200, 144, 233);*/ font-size: 25px; - border-color: rgb(252, 251, 253); + /*border-color: rgb(252, 251, 253);*/ border-radius: 10px; border-width: medium; width: 125px; height: 50px; + margin: 20px; } - .header .nav .nav-bar{ - background-color: greenyellow; - + .header .nav { + background-color: lavenderblush; + width: 100%; - } + }/* + .nav .nav-bar{ + background-color: lavenderblush; + }*/ .nav-bar .nav-list{ + list-style: none; display: flex; flex-direction: column; -} -/* + align-items: center; + margin-right: 30px + } + .nav-list li{ margin: 5px; padding: 5px; - } */ + /*background-color: lavenderblush; */ + } .container .main-container{ /*background-color: darkgoldenrod;*/ - height: 200px; margin: 20px; display: flex; flex-direction: column; @@ -77,7 +88,29 @@ display: flex; flex-direction: column; align-items: center; + width: 300px; + height: 250px; + padding: 20px; + margin-top: 20px; } + .image-carousel{ + background-color: khaki; + width: 300px; + height: 300px; + padding: 20px; + } + .carousel-item{ + list-style: none; + display: flex; + justify-content: space-around; + margin: 0px; + padding: 0; + + } + .carousel-item li{ + margin-top: 20px; + padding: 20px; + } /* .image-section { display: flex; @@ -110,46 +143,54 @@ }*/ .container .section{ /*background-color: violet;*/ - margin: 10px; + /*margin-top: 100px;*/ /*padding: 10px;*/ /*width: 100%;*/ /*height: 100%;*/ } - .section .cake-images{ + .section .cake-samples{ - height: 100%; - width: 100%; + display: flex; + flex-direction: column; + align-items: center; + margin-right: 20px; + - } - .cake-images .cake-portrait { + }/* + .cake-samples .cake-portrait { display: flex; flex-direction: column; align-items: center; -} +}*/ .cake-portrait .cakes{ - background-color: orange; + background-color: orange; list-style: none; - margin: 20px; + margin-top: 10px; padding: 10px; + width: 100px; + height: 100px; } - } + - .container .footer{ + /* .container .footer{ background-color: rgb(128, 233, 128); height: 200px; margin: 20px; - } + }*/ .footer .footer-list{ display: flex; - flex-direction: row; - justify-content: center; - margin: 20px; + flex-direction: column; + align-items: center; + margin-right: 20px; + } .footer-list li{ background-color: orchid; list-style: none; - padding: 10px; - } \ No newline at end of file + padding: 20px; + margin: 10px; + } + @media screen \ No newline at end of file diff --git a/week3/2-website/main.html b/week3/2-website/main.html index 5d70cda0..8a4dd0b9 100644 --- a/week3/2-website/main.html +++ b/week3/2-website/main.html @@ -34,22 +34,13 @@

Hello

Information

-
- picture of Brian M. the CEOpicture of Brian M. the CEO -
-
- picture of Andy C. the CFOpicture of Andy C. the CFO -
-
- picture of Angela W. the COOpicture of Angela W. the COO -
-
- picture of Amie S. the CTOpicture of Amie S. the CTO -
+
IMAGE CAROUSEL
+
    +
  • IMG1
    • +
  • IMG2
    • +
  • IMG3
    • +
  • IMG4
    • +
@@ -57,7 +48,7 @@

Hello

-
+
  • cake1
  • cake2
    • From c3671dfef5be6822bd6d9fdffacebdab9cf17932 Mon Sep 17 00:00:00 2001 From: bireworld Date: Sun, 7 Jun 2020 13:46:18 +0100 Subject: [PATCH 15/17] initial mobile size --- week3/2-website/main.css | 140 ++++++++++++++++++++------------------ week3/2-website/main.html | 14 ++-- 2 files changed, 81 insertions(+), 73 deletions(-) diff --git a/week3/2-website/main.css b/week3/2-website/main.css index afe9dfc7..2dc8b3a3 100644 --- a/week3/2-website/main.css +++ b/week3/2-website/main.css @@ -1,61 +1,44 @@ * { font-family: "Pacifico", cursive; - background-color: rgb(223, 197, 228); + background-color: rgb(251, 248, 252); } + /*---Main Container---*/ .container{ width: 100%; - /*background-color: aqua;*/ display: flex; flex-direction: column; align-items: center; } - .container .header{ - width: 100%; - - /*background-color: beige;*/ - } - /*} - header.header{ - margin: 10px; - }*/ - + /*---Navigation Bar and Header ---*/ .header .top-header { - /* background-color: lavenderblush; - margin: 10px; */ + background-color: lightgrey; display: flex; flex-direction: column; - /* justify-content: space-between; */ align-items: center; margin-bottom: 10px; margin-top: 20px; } .top-header .logo{ - background-color: lavenderblush; + background-color: darkgrey; width: 200px; height: 200px; padding: 20px; } .top-header .contact-button{ - background-color: lavenderblush; - /*color: rgb(200, 144, 233);*/ + background-color:darkgrey; font-size: 25px; - /*border-color: rgb(252, 251, 253);*/ border-radius: 10px; border-width: medium; width: 125px; height: 50px; margin: 20px; } - .header .nav { - background-color: lavenderblush; - width: 100%; - - }/* - .nav .nav-bar{ - background-color: lavenderblush; - }*/ + .nav-bar{ + background-color: lightgrey; + } + .nav-bar .nav-list{ - + background-color: lightgrey; list-style: none; display: flex; flex-direction: column; @@ -66,20 +49,18 @@ .nav-list li{ margin: 5px; padding: 5px; - /*background-color: lavenderblush; */ + background-color: darkgrey; } .container .main-container{ - /*background-color: darkgoldenrod;*/ + margin: 20px; display: flex; flex-direction: column; - /* justify-content: space-around; */ align-items: center; } .main-container .info-section{ - background-color: cornflowerblue; - /* margin-right: 20px; */ + background-color: lightgrey; width: 100%; text-align: center; } @@ -88,29 +69,40 @@ display: flex; flex-direction: column; align-items: center; - width: 300px; - height: 250px; padding: 20px; margin-top: 20px; } .image-carousel{ - background-color: khaki; + background-color: lightgrey; width: 300px; height: 300px; padding: 20px; } - .carousel-item{ + .carousel-list{ + background-color: lightgrey; + margin: 20px; + padding: 20px; + } + .carousel-list .carousel-item{ + background-color: lightgrey; list-style: none; display: flex; - justify-content: space-around; - margin: 0px; - padding: 0; + flex-direction: column; + align-items: center; + margin: 20px; + + } .carousel-item li{ - margin-top: 20px; + margin: 20px; padding: 20px; - } + background-color: darkgrey; + /* width: 100%; */ + /* height: 100%; */ + margin-right: 50px; +} + /* .image-section { display: flex; @@ -141,56 +133,70 @@ }*/ - .container .section{ + /*.container .section{ /*background-color: violet;*/ /*margin-top: 100px;*/ /*padding: 10px;*/ /*width: 100%;*/ - /*height: 100%;*/ + /*height: 100%; - } + }*/ + .section{ + background-color: lightgrey; + }/* .section .cake-samples{ + + /* margin-right: 20px; + background-color: lightgrey; display: flex; flex-direction: column; align-items: center; - margin-right: 20px; - - }/* - .cake-samples .cake-portrait { + }*/ + .cake-samples{ + display: flex; flex-direction: column; align-items: center; -}*/ + padding: 50px; + background-color: lightgrey; + +} + .cake-portrait{ + background-color: lightgrey; + } + .cake-portrait .cakes{ - background-color: orange; list-style: none; - margin-top: 10px; - padding: 10px; + padding: 20px; width: 100px; height: 100px; -} + background-color: darkgrey; + margin: 20px; + } - /* .container .footer{ - background-color: rgb(128, 233, 128); - height: 200px; - margin: 20px; - }*/ - .footer .footer-list{ - display: flex; - flex-direction: column; + .footer{ + margin-top: 20px; + display: flex; + flex-direction: column; align-items: center; - margin-right: 20px; + padding: 50px; + background-color: lightgrey; + } + .footer .footer-list{ + background-color: lightgrey; } .footer-list li{ - background-color: orchid; - list-style: none; - padding: 20px; - margin: 10px; + list-style: none; + padding: 20px; + width: 100px; + height: 100px; + background-color: darkgrey; + margin: 20px; } @media screen \ No newline at end of file diff --git a/week3/2-website/main.html b/week3/2-website/main.html index 8a4dd0b9..19dd563f 100644 --- a/week3/2-website/main.html +++ b/week3/2-website/main.html @@ -35,12 +35,14 @@

    Hello

IMAGE CAROUSEL
-
    -
  • IMG1
    • -
  • IMG2
    • -
  • IMG3
    • -
  • IMG4
    • -
+
+
    +
  • IMG1
    • +
  • IMG2
    • +
  • IMG3
    • +
  • IMG4
    • +
+
From 010a31a19b32c8e6c25288b6bcc0d38ab0ce00dd Mon Sep 17 00:00:00 2001 From: bireworld Date: Tue, 9 Jun 2020 19:36:53 +0100 Subject: [PATCH 16/17] html and css update --- week3/2-website/main.css | 265 ++++++++++++++++++++------------------ week3/2-website/main.html | 6 +- 2 files changed, 144 insertions(+), 127 deletions(-) diff --git a/week3/2-website/main.css b/week3/2-website/main.css index 2dc8b3a3..0d1a4d9d 100644 --- a/week3/2-website/main.css +++ b/week3/2-website/main.css @@ -1,7 +1,4 @@ -* { - font-family: "Pacifico", cursive; - background-color: rgb(251, 248, 252); - } + /*---Main Container---*/ .container{ width: 100%; @@ -10,14 +7,7 @@ align-items: center; } /*---Navigation Bar and Header ---*/ - .header .top-header { - background-color: lightgrey; - display: flex; - flex-direction: column; - align-items: center; - margin-bottom: 10px; - margin-top: 20px; - } + .top-header .logo{ background-color: darkgrey; width: 200px; @@ -37,63 +27,25 @@ background-color: lightgrey; } - .nav-bar .nav-list{ - background-color: lightgrey; - list-style: none; - display: flex; - flex-direction: column; - align-items: center; - margin-right: 30px - } - .nav-list li{ margin: 5px; padding: 5px; background-color: darkgrey; } - .container .main-container{ - - margin: 20px; - display: flex; - flex-direction: column; - align-items: center; - } + .main-container .info-section{ background-color: lightgrey; width: 100%; text-align: center; } - .main-container .image-section{ - - display: flex; - flex-direction: column; - align-items: center; - padding: 20px; - margin-top: 20px; - } - .image-carousel{ - background-color: lightgrey; - width: 300px; - height: 300px; - padding: 20px; - } + .carousel-list{ background-color: lightgrey; margin: 20px; padding: 20px; } - .carousel-list .carousel-item{ - background-color: lightgrey; - list-style: none; - display: flex; - flex-direction: column; - align-items: center; - margin: 20px; - - - - } + .carousel-item li{ margin: 20px; padding: 20px; @@ -103,68 +55,10 @@ margin-right: 50px; } - /* .image-section { - - display: flex; - flex-direction: column; - align-items: center; - - - - }/* - .image-section .image-list{ - background-color: dodgerblue; - - - } - .image-list ul{ - margin: 0px; - padding: 0px; - padding: 10px; - display: flex; - justify-content: space-around; + .section{ + background-color: lightgrey; } - .image-list ul li{ - background-color: orchid; - list-style: none; - - width: 50px; - height: 50px; - - - }*/ - /*.container .section{ - /*background-color: violet;*/ - /*margin-top: 100px;*/ - /*padding: 10px;*/ - /*width: 100%;*/ - /*height: 100%; - - }*/ - .section{ - background-color: lightgrey; - }/* - .section .cake-samples{ - - - /* margin-right: 20px; - background-color: lightgrey; - display: flex; - flex-direction: column; - align-items: center; - - }*/ - .cake-samples{ - - display: flex; - flex-direction: column; - align-items: center; - - padding: 50px; - background-color: lightgrey; - -} .cake-portrait{ background-color: lightgrey; } @@ -178,16 +72,7 @@ margin: 20px; } - - .footer{ - margin-top: 20px; - display: flex; - flex-direction: column; - align-items: center; - padding: 50px; - background-color: lightgrey; - } - .footer .footer-list{ +.footer .footer-list{ background-color: lightgrey; } @@ -199,4 +84,136 @@ background-color: darkgrey; margin: 20px; } - @media screen \ No newline at end of file + @media (max-width: 400px){ + .header .top-header { + background-color: lightgrey; + display: flex; + flex-direction: column; + align-items: center; + flex-wrap: wrap; + margin-bottom: 10px; + margin-top: 20px; + } + .nav-bar .nav-list{ + background-color: lightgrey; + list-style: none; + display: flex; + flex-direction: column; + align-items: center; + margin-right: 30px + } + .container .main-container{ + + margin: 20px; + display: flex; + flex-direction: column; + align-items: center; + } + .main-container .image-section{ + + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; + margin-top: 20px; + } + .image-carousel{ + background-color: lightgrey; + width: 300px; + height: 300px; + padding: 20px; + } + .carousel-list .carousel-item{ + background-color: lightgrey; + list-style: none; + display: flex; + flex-direction: column; + align-items: center; + margin: 20px; + + } + .cake-samples{ + + display: flex; + flex-direction: column; + align-items: center; + + padding: 50px; + background-color: lightgrey; + + } + + .footer{ + margin-top: 20px; + display: flex; + flex-direction: column; + align-items: center; + padding: 50px; + background-color: lightgrey; + } + } + @media (min-width: 800px){ + .header .top-header { + background-color: lightgrey; + display: flex; + flex-direction: row; + justify-content: space-evenly; + margin-bottom: 10px; + margin-top: 20px; + } + .nav-bar .nav-list{ + background-color: lightgrey; + list-style: none; + display: flex; + flex-direction: row; + justify-content: space-around; + margin-right: 30px + } + .container .main-container{ + background-color: lawngreen; + /*margin: 20px;*/ + display: flex; + flex-direction: row; + justify-content: flex-start; + } + .info-section{ + width: 30%; + background-color: lightseagreen; + align-self: flex-start; + margin: 20px; + } + .image-section{ + width: 70%; + background-color: magenta; + display: flex; + flex-direction: column; + justify-content: center; + } + .image-carousel{ + align-self: center; + width: 100%; + height: auto; + padding: 10px; + } + .carousel-list .carousel-item{ + display: flex; + flex-direction: row; + justify-content: space-evenly; + margin: 20px; + + } + + .cake-samples ul{ + display: flex; + justify-content: space-evenly; + } + .footer ul{ + width: 100%; + margin-top: 20px; + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 50px; + background-color: lightgrey; + } + } \ No newline at end of file diff --git a/week3/2-website/main.html b/week3/2-website/main.html index 19dd563f..d7f151fb 100644 --- a/week3/2-website/main.html +++ b/week3/2-website/main.html @@ -43,7 +43,7 @@

Hello

  • IMG4
    • - +
    @@ -57,7 +57,7 @@

    Hello

  • cake3
  • cake4
    • - +