From 755091fc91034f0ee3be9816023c9eba2e0c8eb7 Mon Sep 17 00:00:00 2001 From: Marcus Puie Vai Kwan Date: Fri, 26 Apr 2019 06:21:11 +1000 Subject: [PATCH 1/2] added index.html, index.cssand services.html, services.css! --- great-idea/css/index.css | 142 ++++++++++++++++++++++++++++- great-idea/css/services.css | 173 ++++++++++++++++++++++++++++++++++++ great-idea/index.html | 99 ++++++++++++++++++--- great-idea/services.html | 165 ++++++++++++++++------------------ 4 files changed, 479 insertions(+), 100 deletions(-) create mode 100644 great-idea/css/services.css diff --git a/great-idea/css/index.css b/great-idea/css/index.css index a6445bd842..a55991216b 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -63,4 +63,144 @@ h1, h2, h3, h4, h5 { margin-bottom: 15px; } -/* Copy and paste your work from yesterday here and start to refactor into flexbox */ \ No newline at end of file +/* Your code starts here! */ + +.container { + width: 880px; + /* border: 10px dashed black; */ + margin: auto; + display: flex; + flex-flow: wrap; +} + +header { + /* border: 5px dashed orange; */ + padding: 20px 20px 20px; + display: flex; + flex-flow: wrap; + align-items: center; +} + +nav { + /* border: 3px solid red; */ +} + +nav a { + color: grey; + text-decoration: none; + padding: 0 25px 0px; + /* border: 3px solid blue; */ +} + +.intro-container { + text-align: center; + display: flex; + flex-flow: wrap; + justify-content: space-evenly; + align-items: center; + /* border: 3px solid green; */ +} + +.intro { + /* border: 4px dashed red; */ + width: 450px; + text-align: center; + padding: 0px 0px 40px; + display: flex; + flex-direction: column; + align-items: center; +} + + .intro h1 { + font-size: 50pt; + /* border: 1px dashed red; */ +} + + +.introimg { + width: 30%; + /* border: 1px dashed red; */ + /* TRBL*/ + padding: 20px 10px 10px 20px; +} + +.intro button { + padding: 5px 40px 5px; + border: 1px solid black; + font-family: 'Titillium Web'; +} + +header p { + text-align: center; + border: 1px solid black; + width: 150px; +} +.codeimg { + width: 30%; + height: 30%; + /*TRBL*/ + padding: 0 20px 20px 100px; +} + +.top-content { + border-top: 1px solid black; + padding: 30px 0 30px; + display: flex; + flex-flow: wrap; +} + + +.top-content .features { + /* border: 1px solid red; */ + width: 49%; + margin-right: 5px; + +} + +.top-content .about { + /* border: 1px solid red; */ + width: 49%; +} + +.middle-img { + display: block; + width: 100%; +} + +.bottom-content { + border-bottom: 1px solid black; + padding: 20px 0 30px; + display: flex; + flex-flow: wrap; +} + +.bottom-content .services { + width: 32%; + /* border: 1px solid red; */ + +} + +.bottom-content .product { + width: 32%; + margin: 0px 10px 0px; +} + +.bottom-content .vision { + width: 32%; +} + +.contact-content { + margin-top: 30px; + width: 100%; +} + +footer { + margin-bottom: 10%; + align-self: center; +} + +footer { + width: 100%; + text-align: center; + margin: 50px 0px 50px; 10px; +} \ No newline at end of file diff --git a/great-idea/css/services.css b/great-idea/css/services.css new file mode 100644 index 0000000000..cd326ca0af --- /dev/null +++ b/great-idea/css/services.css @@ -0,0 +1,173 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: square; + padding: 20px 0px 20px 0px; + margin: 20px 0px 20px 20px; +} + +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* Set every element's box-sizing to border-box */ +* { + box-sizing: border-box; +} + +html, body { + height: 100%; + font-family: 'Titillium Web', sans-serif; +} + +h1, h2, h3, h4, h5 { + font-family: 'Bangers', cursive; + letter-spacing: 1px; + margin: 10px 0px 10px 0px; +} + +h1 { + font-size: 30px; +} + +.container { + width: 900px; + /* border: 10px dashed black; */ + margin: auto; + display: flex; + flex-flow: wrap; + justify-content: space-between; + align-content: center; +} + +header { + width: 100%; + display: flex; + margin: 20px 0px 20px 0px; + align-items: center; + justify-content: space-between; +} + +nav { + padding: 0 25px 0px 0px; +} + +nav a { + color: grey; + text-decoration: none; + padding: 0 55px 0px 0px; +} + +button { + width: 150px; + height: 35px; + padding: 5px 40px 5px; + margin: 10px 0px 10px 0px; + border: 1px solid black; + border-radius: 5px; + font-family: 'Titillium Web'; +} + +p { + margin: 10px 0px 10px 0px; +} + +img.services-header-img { + margin: 10px 0px 10px 0px; + width: 100%; +} + +div.intro { + margin: 10px 0px 10px 0px; + padding: 20px 0px 20px 0px; + border-bottom: 1px solid black; +} + + +section.types { + display: flex; + flex-wrap: wrap; + width: 100%; + border-bottom: 1px solid black; + justify-content: space-between; +} + +section.types div { + width: 47%; + display: flex; + flex-direction: column; + align-items: baseline; + padding: 10px 10px 10px 10px; + margin: 30px 10px 10px 10px; + border: 1px solid black; + background-color: lightgrey; + +} + +section.facts-section { + display: flex; + justify-content: space-between; +} + +div.facts { + +} + +section.facts-section div.facts { + display: flex; + flex-direction: column; + width: 40%; + justify-content: space-evenly; + margin: 10px; 0px; 10px; 0px; +} + +footer { + width: 100%; + text-align: center; + margin: 50px 0px 50px; 10px; +} + +img.services-info-img { + width: 40%; + height: auto; +} \ No newline at end of file diff --git a/great-idea/index.html b/great-idea/index.html index c5f374a238..0314d66524 100644 --- a/great-idea/index.html +++ b/great-idea/index.html @@ -1,23 +1,100 @@ - - + + - Great Idea! + Great Idea! - - + + - - + + +
+
+ - - + + +
+ +
+
+

Innovation
+ On
+ Demand

+ +
+ + Image of a code snippet. +
+ +
+
+

Features

+

+ Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis. +

+
+ +
+

About

+

+ Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis. +

+
+
+ + Image of code snippets across the screen +
+
+

Services

+

+ Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis. +

+
+ +
+

Product

+

+ Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis. +

+
+ +
+

Vision

+

+ Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis. +

+
+
+ +
+

Contact

+
+ 123 Way 456 Street
+ Somewhere, USA

+ 1 (888) 888-8888

+ sales@greatidea.io +
+
+ +
+

Copyright Great Idea! 2018

+
+
\ No newline at end of file diff --git a/great-idea/services.html b/great-idea/services.html index 271c36beae..bdc2e8abce 100644 --- a/great-idea/services.html +++ b/great-idea/services.html @@ -1,10 +1,11 @@ + - Great Idea! + Great Idea! - Services @@ -15,93 +16,81 @@ - - -Services -Product -Vision -Features -About -Contact - - - - -Our services header image - -Services - -Our services provide the best digital value in nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque eleifend. Mauris euismod facilisis iaculis. - - -Digital Design - -Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque -eleifend. Mauris euismod facilisis iaculis. - -Learn More - - - -UX / UI - -Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque -eleifend. Mauris euismod facilisis iaculis. - -Learn More - - - -Digital Marketing - -Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque -eleifend. Mauris euismod facilisis iaculis. - -Learn More - - - -Web Development - -Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque -eleifend. Mauris euismod facilisis iaculis. - -Learn More - - - -iOS Development - -Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque -eleifend. Mauris euismod facilisis iaculis. - -Learn More - - - -Android Development - -Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque -eleifend. Mauris euismod facilisis iaculis. - -Learn More - - -Some Facts About Our Services - -Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque -eleifend. Mauris euismod facilisis iaculis. - - -Awesome thing -Amazing thing -Cool thing -Great thing - -one of our employees hard at work - -Copyright Great Idea! 2018 - +
+
+ + +
+ + Our services header image + +
+

Services

+

Our services provide the best digital value in nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce + finibus sem neque, sed faucibus nibh pellentesque eleifend. Mauris euismod facilisis iaculis.

+
+
+
+

Digital Design

+

Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque + eleifend. Mauris euismod facilisis iaculis.

+ +
+
+

UX / UI

Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh + pellentesque eleifend. Mauris euismod facilisis iaculis

+ +
+
+

Digital Marketing

+

Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque + eleifend. Mauris euismod facilisis iaculis.

+
+
+

Web Development

+

Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque +eleifend. Mauris euismod facilisis iaculis.

+
+
+

iOS Development

+

Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque + eleifend. Mauris euismod facilisis iaculis.

+
+
+

Android Development

+

Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque + eleifend. Mauris euismod facilisis iaculis.

+ +
+
+
+
+

Some Facts About Our Services

+

Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque + eleifend. Mauris euismod facilisis iaculis.

+
    +
  • Awesome thing
    • +
    +
  • Amazing thing
    • +
    +
  • Cool thing
    • +
    +
  • Great thing
    • +
+
+ one of our employees hard at work +
+
+

Copyright Great Idea! 2018

+
+
\ No newline at end of file From 6a4d912181ecddd49a31516d132acf775e3793a8 Mon Sep 17 00:00:00 2001 From: Marcus Puie Vai Kwan Date: Fri, 26 Apr 2019 06:31:46 +1000 Subject: [PATCH 2/2] added name as per instructions at bottom --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index c306c33be1..c92126ff49 100644 --- a/README.md +++ b/README.md @@ -32,4 +32,6 @@ Once you have finished the home page using flex box module, go build the service ## Stretch Goals * [ ] Create another page based on one of the navigation items in addition to services. Try to create a layout that follows the patterns of the first two designs but with your own creative twist. Use lorem ipsum text for all your content. -* [ ] Introduce media queries into your services page to create a mobile view that stacks all the boxes on top of each other on phone but looks like the layout file on desktop. \ No newline at end of file +* [ ] Introduce media queries into your services page to create a mobile view that stacks all the boxes on top of each other on phone but looks like the layout file on desktop. + +Name: Marcus Kwan \ No newline at end of file