From 6de2b5da44b5405265741a20d0bd8838f07fa272 Mon Sep 17 00:00:00 2001 From: myCallthomas Date: Sun, 3 Jun 2018 18:46:41 +0100 Subject: [PATCH 1/4] initial templateincluding header and nav section --- about.html | 0 contact.html | 0 index.html | 35 +++++++++++++++++++++++++++++++++++ style.css | 20 ++++++++++++++++++++ 4 files changed, 55 insertions(+) create mode 100644 about.html create mode 100644 contact.html create mode 100644 index.html create mode 100644 style.css diff --git a/about.html b/about.html new file mode 100644 index 0000000..e69de29 diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html new file mode 100644 index 0000000..13f8ed9 --- /dev/null +++ b/index.html @@ -0,0 +1,35 @@ + + + + + + +My Journey + + + + + + +
+
+
+

My Journey

+
+ + + +
+
+ + + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..b27c02b --- /dev/null +++ b/style.css @@ -0,0 +1,20 @@ +body { + font-family: 'Slabo 27px', serif; + padding: 0; + margin: 0; + background-color: #f4f4f4; + +} + +.container{ + width: 80%; + margin: auto; + overflow: hidden; +} +header{ + background-color: #353637; + color: #ffffff; + padding-top: 30px; + min-height: 70px; + +} From 24cf847340fd81e89c16df7dd7b8f4e2e874d2db Mon Sep 17 00:00:00 2001 From: myCallthomas Date: Sun, 3 Jun 2018 18:50:54 +0100 Subject: [PATCH 2/4] header and nav alignment --- style.css | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/style.css b/style.css index b27c02b..28244c4 100644 --- a/style.css +++ b/style.css @@ -18,3 +18,27 @@ header{ min-height: 70px; } +header a{ + color:#ffffff; + text-decoration: none; + text-transform: uppercase; + font-size: 16px; +} +header li{ + float: left; + display: inline; + padding: 0 20px 0 20px; +} + +header #title{ + float: left; +} + +header #title h1{ + margin: 0; +} + +header nav{ + float: right; + margin-top: 10px; +} From ab433e670f902a586898d48788f5f792496ec8aa Mon Sep 17 00:00:00 2001 From: myCallthomas Date: Sun, 3 Jun 2018 21:30:41 +0100 Subject: [PATCH 3/4] update to home and about page --- index.html | 9 +++++++++ style.css | 16 ++++++++++++++++ 2 files changed, 25 insertions(+) diff --git a/index.html b/index.html index 13f8ed9..1fdac67 100644 --- a/index.html +++ b/index.html @@ -25,6 +25,15 @@

My Journey

+
+
+

An insight to our Projects

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,

+
+ + +
+ diff --git a/style.css b/style.css index 28244c4..ce7b11f 100644 --- a/style.css +++ b/style.css @@ -42,3 +42,19 @@ header nav{ float: right; margin-top: 10px; } +#showcase{ + min-height: 400px; + background: url("showcaseback.jpg") no-repeat center; + background-size: cover; + text-align: center; + color: #000; +} + +#showcase h1{ + margin-top: 100px; + font-size: 30px; + margin-bottom: 10px; +} +#showcase p{ + font-size: 20px; +} From 8c43391c45d0ab6f3fddee0a9168855acfc72b01 Mon Sep 17 00:00:00 2001 From: myCallthomas Date: Mon, 4 Jun 2018 10:38:58 +0100 Subject: [PATCH 4/4] my first website --- about.html | 116 ++++++++++++++++++++++++++++++++++++++++++++++ index.html | 97 +++++++++++++++++++++++++++++++++------ style.css | 132 +++++++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 326 insertions(+), 19 deletions(-) diff --git a/about.html b/about.html index e69de29..0b2e4bf 100644 --- a/about.html +++ b/about.html @@ -0,0 +1,116 @@ + + + + + + + + + + My Journey + + + + + + + + +
+
+
+

My Journey

+
+ + + +
+
+ +
+
+

+ + +

+

Where It All Began

+ +
+ + +
+ + + +
+
+

Go placidly amid the noise and haste, and remember what peace there may be in silence.

+ + +
+ +
+ +
+
+

+ + +
+ + +
+ +
+
+
+ +

Expectations

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

+
+
+ +

The impact

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

+
+
+ +

The only way

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

+
+ +
+ +
+ + +
+

My Journey, Copyright © 2018

+ +
+ + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index 1fdac67..58aee8f 100644 --- a/index.html +++ b/index.html @@ -1,20 +1,25 @@ - + + - - - - -My Journey - - + + + + + + My Journey + + + + +
-
-

My Journey

+
+

My Journey....

-
+
+
+ +
-

An insight to our Projects

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,

+

+ + +

+

Watch This Space

+

We are approaching a new age of synthesis. Knowledge cannot be merely a degree or a skill... it demands a broader vision, capabilities in critical thinking and logical deduction without which we cannot have constructive progress.

+ +
+
+

myCallThomas@gmail.com

+ +
- + +
+ +
+
+ +

+
+ + +
+ +
+
+
+

Expectations

+

To be creative and consrtuctive

+
+
+ +

The impact

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

+
+
+ +

The only way

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

+
+ +
+ +
+ + + + + + + + + + + + + + + + + diff --git a/style.css b/style.css index ce7b11f..ebf5dd7 100644 --- a/style.css +++ b/style.css @@ -10,24 +10,35 @@ body { width: 80%; margin: auto; overflow: hidden; + +} + +ul{ + margin: ; + padding: ; } + +/*header*/ + header{ - background-color: #353637; + background-color: #CECCCC; color: #ffffff; - padding-top: 30px; - min-height: 70px; + min-height: 50px; } + + header a{ color:#ffffff; text-decoration: none; text-transform: uppercase; font-size: 16px; } + header li{ float: left; display: inline; - padding: 0 20px 0 20px; + padding: 0px 20px 20px 20px; } header #title{ @@ -42,9 +53,43 @@ header nav{ float: right; margin-top: 10px; } + +header .highlight, header .current a { + color: #000; + font-weight: bold; + +} + +header a:hover{ + color: #fff; + font-weight: bold; +} + +#mycall{ + padding-left: 30px; +} + +/*Showcase*/ +#showcasehome{ + min-height: 400px; + background: url("computer-beat.jpg") no-repeat center; + background-size: cover; + text-align: center; + color: #000; +} + +#showcasehome h1{ + margin-top: 100px; + font-size: 30px; + margin-bottom: 10px; +} +#showcasehome p{ + font-size: 20px; +} + #showcase{ min-height: 400px; - background: url("showcaseback.jpg") no-repeat center; + background: url("backgroundlap.jpg") no-repeat center; background-size: cover; text-align: center; color: #000; @@ -58,3 +103,80 @@ header nav{ #showcase p{ font-size: 20px; } + +/* About page*/ + +#showcase1{ + min-height: 400px; + background: url("computer-brain.jpg") no-repeat center; + background-size: cover; + text-align: center; + color: #000; +} + +#showcase1 h1{ + margin-top: 100px; + font-size: 30px; + margin-bottom: 10px; +} +#showcase1 p{ + font-size: 20px; +} + +#showcase2{ + min-height: 400px; + background: url("desktop.jpg") no-repeat center; + background-size: cover; + text-align: center; + color: #000; +} + +#showcase2 h1{ + margin-top: 100px; + font-size: 30px; + margin-bottom: 10px; +} +#showcase2 p{ + font-size: 20px; +} + +/*Newsletter*/ +#newsletter{ + padding: 15px; + color: #fff; + background: #CECCCC; +} + +#newsletter h1{ + float: left; +} + #newsletter form{ + float: right; + margin-top: 15px; + } + + + + +#boxes{ + margin-top: 20px; +} + +#boxes .box{ + float: left; + text-align: center; + width: 30%; + padding: 10px: +} + +#space{ + padding: 70px; +} + +footer{ + padding: 20px; + margin-top: 20px; + color: #fff; + background-color: #CECCCC; + text-align: center; +}