From b44da21bcbee8910531e10981c2dcad4137aa29a Mon Sep 17 00:00:00 2001 From: targatop Date: Wed, 18 Mar 2020 21:38:04 -0400 Subject: [PATCH 1/2] ui iii rerun --- README.md | 2 +- great-idea/css/index.css | 126 ++++++++++++++++++++++++++++++++++++++- great-idea/index.html | 78 +++++++++++++++++++++++- 3 files changed, 203 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 7fdf93bfc0..7b43dc9797 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ Once you have finished the home page using flex box module, go build the service ## Objectives -* [ ] Home Page Refactor: +* [ X ] Home Page Refactor: * Note that the provided HTML is blank. This is because I want you to use your code from yesterday if possible. If you didn't finish, that's fine, just use the solution from yesterday * Refactor the home page layout with flexbox where `inline-block` was used before. * In your navigation elements, point the services `` to `services.html` diff --git a/great-idea/css/index.css b/great-idea/css/index.css index a6445bd842..1341245e71 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -63,4 +63,128 @@ 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 +/* Copy and paste your work from yesterday here and start to refactor into flexbox */ +/* Your code starts here! */ + +/* top line navigation and logo */ +.capsule{ + width: 80%; + display: flex; + justify-content: center; + justify-content: space-around; + align-items: center; + margin-top: 10px; +} +.topPeak nav a{ + padding-top: 15px; + color: gray; + text-decoration: none; + text-align: left; + margin-left: 50px; +} +.logo{ + justify-content: flex-end; + height: auto; + width: auto; +} +/* middle with round picture and button */ +.centerBox{ + width: 80%; + display: flex; + margin-bottom: 25px; +} +.centerText{ + width: 60%; + color: black; + font-size: 60px; + font-weight: bold; + font-style: italic; + text-align: center; + margin-top: 95px; + margin-left: 95px; +} +.clicker{ + border: 1px solid black; + padding: 8px 38px; + text-align: center; + text-decoration: none; + font-size: 14px; +} +.roundPic{ + margin-top: 65px; + margin-right: 55px; +} +/* text and rectangle picture*/ +.hr1{ + display: flex; + width: 68%; + margin-left: 89px; +} +.belly{ + width: 80%; + display: flex; + margin-left: 89px; +} +.features { + width: 44%; + margin-top: 30px; +} +.about { + width: 44%; + margin-top: 30px; +} +.middlePic { + display: flex; + justify-content: flex-start; + margin-top: 35px; + margin-left: 89px; + width: 96%; +} +.gut{ + display: flex; + margin-left: 89px; + margin-top: 25px; +} +.services{ + width: 24%; + height: 100px; + margin-top: 20px; + margin-right: 10px; + +} +.product{ + width: 24%; + height: 100px; + margin-top: 20px; + margin-right: 10px; + +} +.vision{ + width: 24%; + height: 100px; + margin-top: 20px; + margin-right: 0px; +} +.hr2{ + display: block; + width: 68%; + margin-top: 60px; + margin-left: 89px; +} + +/* bottom part*/ +.contact{ + margin-top: 40px; + margin-left: 89px; + text-align: left; +} +.copyright{ + width: 68%; + display: flex; + justify-content: center; + margin-top: 40px; + margin-left: 8%; + margin-bottom: 30px; +} + + diff --git a/great-idea/index.html b/great-idea/index.html index c5f374a238..1ed8d38f56 100644 --- a/great-idea/index.html +++ b/great-idea/index.html @@ -16,7 +16,83 @@ - +
+
+ +
+
+ +
+
+
+
+

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 +
+ From 80410fd9acc962e120715a9d8f3bceadc41ed0a9 Mon Sep 17 00:00:00 2001 From: targatop Date: Thu, 19 Mar 2020 19:54:46 -0400 Subject: [PATCH 2/2] moving on --- great-idea/css/Services.css | 180 ++++++++++++++++++++++++++++++++ great-idea/css/index.css | 160 +++++++++++++--------------- great-idea/index.html | 161 +++++++++++++---------------- great-idea/services.html | 201 ++++++++++++++++++++---------------- 4 files changed, 440 insertions(+), 262 deletions(-) create mode 100644 great-idea/css/Services.css diff --git a/great-idea/css/Services.css b/great-idea/css/Services.css new file mode 100644 index 0000000000..306d9e6b58 --- /dev/null +++ b/great-idea/css/Services.css @@ -0,0 +1,180 @@ +/* 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: none; +} +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; + border: 1px solid black; +} + +html, body { + height: 100%; + font-family: 'Titillium Web', sans-serif; +} + +h1, h2, h3, h4, h5 { + font-family: 'Bangers', cursive; + letter-spacing: 1px; + margin-bottom: 15px; +} + +/* Copy and paste your work from yesterday here and start to refactor into flexbox */ + +/* ********* XXX Your code starts here! XXX ***********/ + +.top nav.topNav { + width: 79%; + margin: 25px auto; + display: flex; + justify-content: space-evenly; + align-items: center; +} +.top nav.topNav a{ + text-decoration: none; + color: gray; +} +.topImg{ + width: 100%; + display: flex; + justify-content: center; +} +.task{ + width: 70%; + margin-top: 15px; + margin-left: 200px; + margin-bottom: 30px; + display: flex; + flex-direction: column; +} +h1{ + font-size: 25px; + margin-top: 15px; +} +.borderline{ + width: 70%; + display: flex; + justify-content: center; + border: 1px solid gray; +} +.theater { + display: flex; + flex-flow: row wrap; + justify-content: space-between; + width: 70%; + margin-left: 195px; + margin-top: 30px; + margin-bottom: 10px; + /*border: 1px dashed purple;*/ +} +.theater div.screen{ + width: 48%; + padding: 5px; + margin-bottom: 20px; + display: flex; + flex-flow: row wrap; + border: 1px solid gray; + background-color: lightgrey; +} +h3{ + font-weight: bold; + font-size: 17px; + margin-top: 15px; + margin-left: 15px; +} +.parag{ + margin-left: 15px; + margin-right: 15px; +} +.clicky { + background-color: white; + border: 1px solid black; + border-radius: 4px; + color: black; + padding: 10px 45px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 14px; + margin-top: 15px; + margin-left: 15px; + cursor: pointer; + } + +.cover{ + width: 70%; + display: flex; + margin-left: 195px; + margin-top: 30px; + flex-flow: row; + justify-content: space-between; + /*border: 1px solid blue;*/ +} +h5{ + font-weight: bold; + font-size: 17px; +} +.galron{ + width: 85%; +} +.list{ + display: block; + margin-top: 25px; + margin-left: 15px; + text-align: left; + line-height: 2; +} +.botPic{ + width: 50%; + +} +.copyright{ + margin: 50px auto; + text-align: center; +} + diff --git a/great-idea/css/index.css b/great-idea/css/index.css index 1341245e71..aa8f211040 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -1,4 +1,4 @@ -/* http://meyerweb.com/eric/tools/css/reset/ +/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 License: none (public domain) */ @@ -49,7 +49,8 @@ table { /* Set every element's box-sizing to border-box */ * { - box-sizing: border-box; + box-sizing: border-box; + /*border: 1px solid green;*/ } html, body { @@ -64,127 +65,114 @@ h1, h2, h3, h4, h5 { } /* Copy and paste your work from yesterday here and start to refactor into flexbox */ -/* Your code starts here! */ -/* top line navigation and logo */ -.capsule{ +/* ******* XXX Your code starts here! XXX *********************/ + +.top{ +} +.topNav{ width: 80%; + margin-top: 15px; + margin-left: 100px; display: flex; - justify-content: center; - justify-content: space-around; + flex-flow: row; + justify-content: space-evenly; align-items: center; - margin-top: 10px; } -.topPeak nav a{ - padding-top: 15px; - color: gray; +.topNav a{ text-decoration: none; - text-align: left; - margin-left: 50px; -} -.logo{ - justify-content: flex-end; - height: auto; - width: auto; -} -/* middle with round picture and button */ -.centerBox{ - width: 80%; - display: flex; - margin-bottom: 25px; + color: gray; } -.centerText{ +.title{ width: 60%; - color: black; + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 45px; + margin-left: 280px; + margin-bottom: 60px; font-size: 60px; font-weight: bold; font-style: italic; text-align: center; - margin-top: 95px; - margin-left: 95px; + /*border: 1px solid green;*/ } -.clicker{ +.clickHere { + background-color: white; border: 1px solid black; - padding: 8px 38px; + color: black; + padding: 5px 35px; text-align: center; text-decoration: none; - font-size: 14px; -} -.roundPic{ - margin-top: 65px; - margin-right: 55px; -} -/* text and rectangle picture*/ -.hr1{ + font-size: 12px; + margin-top: 5px; + } +h3{ + font-size: 30px; +} +.borderline1{ + width: 70%; display: flex; - width: 68%; - margin-left: 89px; + align-content: flex-start; + border: 1px solid gray; } -.belly{ - width: 80%; +.topText{ + /*border: 2px solid greenyellow;*/ + width: 70%; + margin-top: 35px; + margin-left: 195px; display: flex; - margin-left: 89px; -} -.features { - width: 44%; - margin-top: 30px; -} -.about { - width: 44%; - margin-top: 30px; + justify-content: space-evenly; + justify-content: center; } -.middlePic { - display: flex; - justify-content: flex-start; +.picMiddle{ + width: 100%; margin-top: 35px; - margin-left: 89px; - width: 96%; + margin-left: 196px; } -.gut{ +.bottomText{ + width: 70%; + margin-top: 10px; + margin-left: 190px; display: flex; - margin-left: 89px; - margin-top: 25px; + justify-content: space-evenly; } .services{ - width: 24%; - height: 100px; + width: 35%; + height: 50px; margin-top: 20px; - margin-right: 10px; - + margin-right: 5px; + padding: 5px; } .product{ - width: 24%; - height: 100px; + width: 35%; + height: 50px; margin-top: 20px; - margin-right: 10px; - + margin-right: 5px; + padding: 5px; } .vision{ - width: 24%; - height: 100px; + width: 35%; + height: 50px; margin-top: 20px; - margin-right: 0px; + margin-right: 5px; + padding: 5px; } -.hr2{ - display: block; - width: 68%; - margin-top: 60px; - margin-left: 89px; +.borderline2{ + width: 70%; + margin-top: 125px; + display: flex; + justify-content: flex-start; + border: 1px solid gray; } - -/* bottom part*/ .contact{ - margin-top: 40px; - margin-left: 89px; + display: block; + margin-top: 75px; + margin-left: 195px; text-align: left; } .copyright{ - width: 68%; - display: flex; - justify-content: center; - margin-top: 40px; - margin-left: 8%; - margin-bottom: 30px; + margin: 55px auto; + text-align: center; } - diff --git a/great-idea/index.html b/great-idea/index.html index 1ed8d38f56..d300ad0a34 100644 --- a/great-idea/index.html +++ b/great-idea/index.html @@ -1,99 +1,84 @@ - - - - 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.

+
+
+

Innovation
On
Demand

+

- -
-

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.

+
+ Image of a code snippet.
- -
-

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.

+
+
+
+
+
+
+
+

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 -
- - - +
+
+
+

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..a3d27560ad 100644 --- a/great-idea/services.html +++ b/great-idea/services.html @@ -1,106 +1,131 @@ + - Great Idea! + Great Idea! - Services - + - -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