From 21175b0a7df5862d5719313c818355b4e2ddf030 Mon Sep 17 00:00:00 2001 From: Tracie T Date: Tue, 28 May 2019 17:02:07 -0500 Subject: [PATCH 1/3] stopping point #1 --- great-idea-website/css/index.css | 26 ++++++++- great-idea-website/index.html | 94 +++++++++++++++++--------------- 2 files changed, 75 insertions(+), 45 deletions(-) diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index 7766e7f18..327a0ec87 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -63,4 +63,28 @@ h1, h2, h3, h4, h5 { margin-bottom: 15px; } -/* Your code starts here! */ \ No newline at end of file +/* Your code starts here! */ +.navigation-top { + width: 100%; + height: 55px; + display: inline-block; + background-color: lightcyan; + position: sticky; + top: 0; + text-align: left; +} +.logo { + display: inline-block; +} + +.mantra { + display: inline-block; +} +.circle-code { + display: inline-block; +} +a { + padding: 20px 30px; + margin: 30px 10px; + height: 150px; +} \ No newline at end of file diff --git a/great-idea-website/index.html b/great-idea-website/index.html index 92beabd65..f184a159a 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -15,49 +15,55 @@ - - Services - Product - Vision - Features - About - Contact - - - Innovation - On - Demand - - Get Started - - 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 - + +
+

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 From 0f19bcf2f535b5c5bd6ccaf5afb200d527297563 Mon Sep 17 00:00:00 2001 From: Tracie T Date: Wed, 29 May 2019 09:33:06 -0500 Subject: [PATCH 2/3] Final updates --- great-idea-website/css/index.css | 23 ++++++++++++++++++++++- great-idea-website/index.html | 4 ++-- 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index 327a0ec87..1730038dc 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -79,12 +79,33 @@ h1, h2, h3, h4, h5 { .mantra { display: inline-block; + font-family: 'Bangers', cursive; + font-size: 80px; + word-break: break-all; } .circle-code { display: inline-block; } +.upper { + column-count: 2; + column-gap: 40px; + column-span: all; +} +.lower { + column-count: 3; + column-gap 10px; + column-span: all; +} +.middle-image { + position: absolute; + top: 20px; + bottom: +} a { padding: 20px 30px; margin: 30px 10px; height: 150px; -} \ No newline at end of file +} +hr { + border: 1px solid black; +} diff --git a/great-idea-website/index.html b/great-idea-website/index.html index f184a159a..7d998d65e 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -25,7 +25,7 @@
-

Innovation On Demand

+

Innovation On Demand


Image of a code snippet.
@@ -39,8 +39,8 @@

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
+ Image of code snippets across the screen

Services

Aliquam elementum magna eros, ac posuere elvit tempus et. From 889f3d4490bea3595a6c347e479307600ddf85d5 Mon Sep 17 00:00:00 2001 From: Tracie T Date: Thu, 30 May 2019 17:02:43 -0500 Subject: [PATCH 3/3] Assignment one, with README update for the Git Project --- README.md | 1 + great-idea-website/index.html | 88 +++++++++++++++++++++-------------- 2 files changed, 55 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index dffdf0bc8..955ef28a9 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,6 @@ # User Interface Project: Great Idea Web Page +Tracie Twite Being able to create a user interface from scratch based on a design file is considered a basic necessity for front end developers. We will be building a single page website using HTML and CSS. Given this [design file](design-files/desktop.jpg), use HTML and CSS to build the web page layout. Remember, you can only use `display:inline-block` and box model CSS properties for this project. **Note: you are NOT permitted to use Flexbox or CSS Grid. This is an exercise in basic layout techniques.** diff --git a/great-idea-website/index.html b/great-idea-website/index.html index 7d998d65e..b4a435ac6 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -16,54 +16,74 @@

-
-

Innovation On Demand


+
+
+

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