From b501d90e66bcdd3e2e3d681261f4c62d669389c0 Mon Sep 17 00:00:00 2001 From: danwil91 Date: Fri, 20 Mar 2020 00:14:08 -0400 Subject: [PATCH 1/3] UI III Project --- great-idea/css/index.css | 107 ++++++++++++++++++++++++++++++++++++++- great-idea/index.html | 72 ++++++++++++++++++++++++-- great-idea/services.html | 2 +- 3 files changed, 176 insertions(+), 5 deletions(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index a6445bd842..09436a6056 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -63,4 +63,109 @@ 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 +nav{ + /*margin: 20px; + padding: 20px; + word-spacing: 50px; + text-align: center;*/ + display: flex; + justify-content: space-around; + align-items: center; + } + +a{ + text-decoration: none; + color: darkgrey; + } + +.nav-links{ + margin: 20px; +} + +header{ + /*margin: 20px; + padding: 20px; + text-align: center;*/ + width: 600px; + height: 400px; + display: flex; + flex-direction: column; + flex-wrap: wrap; + align-items: center; + justify-content: center; + } + +h1{ + margin: 50px; + width: 300px; + height: 200px; + font-size: 75px; + } +button{ + font-size: 30px; + font-family: 'Titillium Web', sans-serif; + padding: 3px 30px; + border: 1px solid black; +} + +/*div{ + display: inline-block; + }*/ + +.top-content{ + height: 200px; + display: flex; + justify-content: space-evenly; +} + +.items { + display: flex; + flex-direction: column; + width: 525px; + height: 200px; + margin: 50px; + padding: 25px; +} + +/*.top-content .items{ + width: 525px; + height: 200px; + padding: 25px; + margin: 50px; + box-align: center; +}*/ + +.middle-img{ + width: 1100px; + margin-left: 125px; + margin-right:125px; +} + +.bottom-content{ + height: 200px; + display: flex; + justify-content: space-evenly; +} + +.item{ + display: flex; + flex-direction: column; + width: 290px; + height: 200px; + padding: 25px; +} +/*.bottom-content .item{ + width: 290px; + height: 200px; + padding: 25px; + margin: 50px; + display: inline-block; +}*/ + +address{ + margin: 75px; +} + +footer{ + text-align: center; +} diff --git a/great-idea/index.html b/great-idea/index.html index c5f374a238..f483142df8 100644 --- a/great-idea/index.html +++ b/great-idea/index.html @@ -15,9 +15,75 @@ - - - + + +
+

+ 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 +
+ + \ No newline at end of file diff --git a/great-idea/services.html b/great-idea/services.html index 271c36beae..ae893dacd9 100644 --- a/great-idea/services.html +++ b/great-idea/services.html @@ -4,7 +4,7 @@ - Great Idea! + Great Idea! - Services From d3755fbaedd8e2376596667eca96070b59e5852d Mon Sep 17 00:00:00 2001 From: danwil91 Date: Fri, 20 Mar 2020 13:23:34 -0400 Subject: [PATCH 2/3] edits to UI III Project --- great-idea/css/services.css | 64 ++++++++++++ great-idea/services.html | 190 +++++++++++++++++++----------------- 2 files changed, 167 insertions(+), 87 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..a269b16180 --- /dev/null +++ b/great-idea/css/services.css @@ -0,0 +1,64 @@ +/* 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; +} + +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; +} diff --git a/great-idea/services.html b/great-idea/services.html index ae893dacd9..4b61c13c55 100644 --- a/great-idea/services.html +++ b/great-idea/services.html @@ -15,93 +15,109 @@ - - -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. + + +
+
+ +
+ +
+
+
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 adff06b58773a9aca5158a83c74152d685918d86 Mon Sep 17 00:00:00 2001 From: danwil91 Date: Fri, 20 Mar 2020 14:33:40 -0400 Subject: [PATCH 3/3] Final UI III Project --- great-idea/css/services.css | 70 +++++++++++++++++++++++++++++++++++++ great-idea/services.html | 57 +++++++++++++++--------------- 2 files changed, 99 insertions(+), 28 deletions(-) diff --git a/great-idea/css/services.css b/great-idea/css/services.css index a269b16180..ee15b885d5 100644 --- a/great-idea/css/services.css +++ b/great-idea/css/services.css @@ -62,3 +62,73 @@ h1, h2, h3, h4, h5 { letter-spacing: 1px; margin-bottom: 15px; } + +nav{ + margin: 20px; + padding: 20px; + word-spacing: 50px; + display: flex; + justify-content: space-evenly; + } + + a{ + text-decoration: none; + color: darkgrey; + } + +.nav-links{ + margin: 20px; +} + +.services-header-img{ + margin-left: 215px; + margin-right: 215px; +} + +header{ + margin: 50px 215px; + font-size: 20px; +} + +h1{ + font-size: 30px; +} + +.blocks{ + border: 1px solid black; + height: 250px; + width: 425px; + margin: 25px; + padding: 15px; + font-size: 20px; +} + +content{ + margin: 25px 190px; + display: flex; + flex-wrap: wrap; +} + +section{ + margin: 25px 190px; + font-size: 20px; + display: flex; +} + +section .text{ + margin: 25px; + width: 400px; +} + +.services-info-img{ + margin: 25px; +} + +ul{ + list-style-type: square; + margin-left: 20px; +} + +footer{ + text-align: center; +} \ No newline at end of file diff --git a/great-idea/services.html b/great-idea/services.html index 4b61c13c55..24617f6007 100644 --- a/great-idea/services.html +++ b/great-idea/services.html @@ -7,7 +7,7 @@ Great Idea! - Services - +