diff --git a/great-idea/css/index.css b/great-idea/css/index.css index a6445bd842..107f9c86d8 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -63,4 +63,127 @@ 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 +/* my index code starts here */ + +.navbar { + display: flex; + position: fixed; + top: 0; + width: 100%; + background-color: yellow; +} + +nav { + width: 950px; + height: 50px; + display: flex; + justify-content: space-evenly; + align-items: center; +} + +a { + text-align: center; + color: slategrey; + text-decoration: none; +} + +.logo { + height: 50%; + padding-top: 0.5%; + +} + +header { + margin-top: 9%; + display: flex; + justify-content: space-evenly; + align-items: center; +} + +header h1 { + display: flex; + flex-direction: column; + align-items: center; + height: 225px; + width: 425px; + font-size: 95px; + text-align: center; +} + +button { + border: 1px solid slategrey; + height: 25px; + width: 150px; +} + +.header-img { + margin-bottom: 5%; +} + +hr { + width: 75%; + align: center; +} + +.TopSection { + display: flex; + justify-content: space-evenly; + margin: 0 14%; +} + +p { + text-align: left; +} + +.topsection-left { + height: 100px; + width: 450px; +} + +.topsection-right { + height: 100px; + width: 450px; +} + +.middle-img { + margin: 1% 14%; +} + +.BottomSection { + display: flex; + justify-content: space-evenly; + margin: 0 14%; +} + +.BottomSection-Left { + height: 150px; + width: 280px; +} + +.BottomSection-Middle { + height: 150px; + width: 280px; +} + +.BottomSection-Right { + height: 150px; + width: 280px; +} + +.contact { + /* display: block; */ + display: flex; + flex-direction: column; + width: 200px; + height: 150px; + margin-left: 14%; +} + +.contact p { + line-height: 25px; +} + +footer { + text-align: center; + margin: 50px; +} \ 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..6e50414164 --- /dev/null +++ b/great-idea/css/services.css @@ -0,0 +1,192 @@ +/* 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; +} + +/* my index code starts here */ + +.services-nav { + display: flex; +} + +nav { + width: 75%; + display: flex; + justify-content: space-evenly; + align-items: center; + margin-left: 0 14%; + +} + +.services-navbar a { + text-decoration: none; + color: slategrey; +} + +.services-header-img { + display: block; + margin: 2% 14%; +} + +.services { + margin: 2% 14%; +} + +hr { + width: 72%; +} + +.middle-section { + display: flex; + flex-wrap: wrap; + margin: 2% 14%; + justify-content: space-between; + align-content: space-around; +} + +.digital-design { + display: flex; + flex-direction: column; + background-color: lightgrey; + width: 400px; + margin: 2% 0; + border: 1px solid; + padding: 2%; +} + +.ux-ui { + display: flex; + flex-direction: column; + background-color: lightgrey; + width: 400px; + margin: 2% 0; + border: 1px solid; + padding: 2%; +} + +.digital-marketing { + display: flex; + flex-direction: column; + background-color: lightgrey; + width: 400px; + margin: 2% 0; + border: 1px solid; + padding: 2%; +} + +.web-dev { + display: flex; + flex-direction: column; + background-color: lightgrey; + width: 400px; + margin: 2% 0; + border: 1px solid; + padding: 2%; +} + +.ios-dev { + display: flex; + flex-direction: column; + background-color: lightgrey; + width: 400px; + margin: 2% 0; + border: 1px solid; + padding: 2%; +} + +.android-dev { + display: flex; + flex-direction: column; + background-color: lightgrey; + width: 400px; + margin: 2% 0; + border: 1px solid; + padding: 2%; +} + +button { + width: 100px; + height: 25px; + margin-top: 3%; +} + +.servicesbottomsection { + display: flex; + margin: 2% 14%; + justify-content: space-between; +} + +.some-facts { + width: 400px; +} + +li { + margin-top: 3%; + margin-left: 5%; + list-style-type: disc; +} + +footer { + text-align: center; + margin-top: 3%; +} \ No newline at end of file diff --git a/great-idea/index.html b/great-idea/index.html index c5f374a238..db5f9eabac 100644 --- a/great-idea/index.html +++ b/great-idea/index.html @@ -16,7 +16,86 @@
- + + + ++ 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. +
++ 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. +
+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. +
+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. +
+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. +
++ 123 Way 456 Street + Somewhere, USA + 1 (888) 888-8888 + sales@greatidea.io +
+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.
+ +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.
+ +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.
+ +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.
+ +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.
+ +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.
+ +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.
+ +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.
+