diff --git a/about.html b/about.html new file mode 100644 index 0000000000..69fd3db20c --- /dev/null +++ b/about.html @@ -0,0 +1,101 @@ + + + + + + + Great Idea! + + + + + + + + + + + +
+
+ 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 +
+
+ + + + + + \ No newline at end of file diff --git a/css/index.css b/css/index.css index 0c9959c1e5..c21454eb89 100644 --- a/css/index.css +++ b/css/index.css @@ -1,3 +1,238 @@ -/* Use your own code or past solution for Great Idea Web Page CSS here! */ +/* 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; +} + +/* *{ + border: 2px solid red; +} */ +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; +} + +/* Your code starts here! */ + +/* for whole page */ +#body{ + width: 95%; + height: 95%; + margin: 30px; +} + +/* for navigation bar */ +.navigation a { + + text-decoration: none; + /* width: 100%; */ +} +.navigation{ + display: flex; + width: 100%; + align-items: center; + +} +.links{ + display: flex; + justify-content: space-around; + width: 90%; +} +/* .logo{ + text-align: right; +} */ + +/* CSS styles for header */ +header{ + border-bottom: 1px solid red; +} +#first-big-container{ + margin: 30px auto; + display: inline-block; + width: 100%; +} +.big-header{ + width:40%; + display: inline-block; + text-align: center; + margin-top: 5%; +} +h1{ + font-size: 60px; +} +.first-image{ + width:40%; + margin-right: 10%; + float: right; + +} + +/* CSS styles for second-big-container */ + +.second-big-container{ + margin: 20px auto; + width: 100%; +} +/* #top-body-content{ + margin: 20px auto; + width: 100%; +} */ +.feature{ + width:40%; + display: inline-block; + margin-right: 10%; + /* background: lightgrey; + line-height: 1; */ +} +.about{ + width:40%; + display: inline-block; +} +/* CSS styles second image */ +.second-image{ + /* display: flex; + align-items: center; */ + margin: 30px auto; + text-align: center; +} +.middle-img{ + width: 90%; +} +#bottom-body-content{ + border-bottom: 1px solid red; +} +/* CSS styles for bottom-body-content */ +.third-big-container{ + margin: 20px auto; + width: 100%; + display: inline-block; +} + +.service{ + width:30%; + display: inline-block; + +} +.product{ + width:30%; + display: inline-block; + +} +.vision{ + width:30%; + display: inline-block; +} + +/* css style for contact */ +#contact{ + margin: 20px auto; +} +/* css style for footer */ +.footer{ + text-align: center; +} + +/* Media Quary */ +@media (max-width: 800px){ + .navigation{ + flex-direction: column-reverse; + align-items: center; + } + .links{ + width: 100%; + justify-content: space-evenly; + } + .big-header{ + align-content: center; + width: 80%; + } + .first-image{ + display: none; + } +} + +@media (max-width: 500px){ + .navigation{ + flex-direction: column-reverse; + align-content: center; + } + .links{ + display: flex; + width: 100%; + flex-direction: column; + } + a{ + width: 100%; + margin: 0; + text-align: center; + border: 1px solid gray; + } + .second-big-container div{ + flex-direction: column; + width:100%; + align-content: center; + + } + .third-big-container div{ + flex-direction: column; + width:100%; + align-content: center; + } +} +/* ****************************************************************************************************** */ \ No newline at end of file diff --git a/design-files/services-desktop-design.png b/design-files/services-desktop-design.png new file mode 100644 index 0000000000..1c565b509f Binary files /dev/null and b/design-files/services-desktop-design.png differ diff --git a/index.html b/index.html index 476b4b8cb9..9822a6919e 100644 --- a/index.html +++ b/index.html @@ -4,13 +4,101 @@ Great Idea - Responsive I - + + + + + + +
+
+
+

+ 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