From 64aa5d9046030be4c8b20c7d5370f8a269a2089a Mon Sep 17 00:00:00 2001 From: Ndawi Date: Wed, 29 May 2019 09:17:18 -0400 Subject: [PATCH 1/4] i still having issues centering the GREAT IDEA LOGO in the nav and i was unable to figure out how to evenly space out the main text. --- great-idea-website/css/index.css | 117 ++++++++++++++++++++++++++++-- great-idea-website/index.html | 119 +++++++++++++++++++------------ 2 files changed, 184 insertions(+), 52 deletions(-) diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index 7766e7f18..960d69bd5 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/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) */ @@ -12,8 +12,8 @@ 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, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; @@ -24,7 +24,7 @@ time, mark, audio, video { vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } @@ -63,4 +63,111 @@ h1, h2, h3, h4, h5 { margin-bottom: 15px; } -/* Your code starts here! */ \ No newline at end of file +/* Your code starts here! */ + + +.container{ + margin: 0 auto; + width: 900px; +} + +nav a{ + color: lightgray; + padding: 25px; + text-decoration: none; + display: inline-block; +} + +.logo{ + display: inline-block; + margin-left: 90px; + margin-top: 50px; + +} + +.titlemessage{ + display: inline-block; + padding: 30px; + margin-left: 10px; + margin-right: 60px; +} + +h1{ + font-size: 90px; + text-align: center; +} + +button{ + border: 1px solid black; + font-size: 18px; + border-radius: 2px; + width: 180px; + padding: 5px 24px; + margin: 0px 90px; +} + +button:hover { + background-color: black; + color: white; +} + +.titlepic{ + padding: 40px 0px; + display: inline-block; +} + +.titlepic img{ + display: inline-block; +} + +.Contentarea{ + padding: 10px 0px; +} + + + +.toptext p{ +display: inline-block; +text-align: justify; + +} + +.toptext{ +display: inline-block; +margin-top: 20px; +width: 400px; +height: 130px; +/*border: 1px solid red;*/ +} + +.top{ + margin-right: 20px; +} + + .middle-img { + padding: 5px 0px; +} + +.bottomtext p{ +text-align: justify; + +} +.bottomtext{ +display: inline-block; +vertical-align: top; +margin: 20px 0px; +width: 270px; +height: 130px; +/*border: 1px solid red;*/ +} + +.Contact{ + margin: 50px 0px; +} + + +footer{ + text-align: center; + padding-bottom: 80px; + +} diff --git a/great-idea-website/index.html b/great-idea-website/index.html index 92beabd65..b11847885 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -14,50 +14,75 @@ - - - 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 - - - \ No newline at end of file + +
+ +
+ +
+ +
+
+

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 a97cc7496375f2afd6f59357171886ba5c8fb248 Mon Sep 17 00:00:00 2001 From: XAmi101 Date: Thu, 30 May 2019 17:21:22 -0400 Subject: [PATCH 2/4] I think I am understanding git flow now --- README.md | 40 ---------------------------------------- 1 file changed, 40 deletions(-) delete mode 100644 README.md diff --git a/README.md b/README.md deleted file mode 100644 index dffdf0bc8..000000000 --- a/README.md +++ /dev/null @@ -1,40 +0,0 @@ -# User Interface Project: Great Idea Web Page - -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.** - -**Lambda Life Tip:** Use the code from your instructor's demonstration to help you tackle the objectives. - -## To Get Started - -* Fork / Clone this project into a directory on your machine. - -* Open the code with your preferred integrated development environment (IDE). - -* Start on the objectives - -## Objectives: - -Project objectives are meant to increase your knowledge by giving you practice on the principles learned earlier in the day. Aim to complete every objective on this list. Get as far as you can on the design as we will be using your work today for tomorrow's project as well. - -**Watch this short guide on how to setup your project:** [UI Project Setup 101](https://youtu.be/UU9WjpMsaLE) - -- [ ] Study the [desktop design file](design-files/desktop.jpg). Visualize how you would convert the design into HTML and CSS. Make a quick sketch of how you would build the HTML structure. Use your sketch as a plan of action for the next two objectives. Challenge yourself to only use 10 minutes for this particular objective. - -- [ ] Go to your [index.html](great-idea-website/index.html) file and build out your HTML structure. You have been provided all the content and images you need to get started inside the `index.html` file. Start to code HTML around the content! - -- [ ] Style your HTML using the [desktop design file](design-files/desktop.jpg) as a visual guide. Use any CSS properties you want for general styling but for layout, you can only use the box model (content, padding, margin, border) and `display:inline-block`. - -## Stretch Goals: - -Stretch goals are not required. Complete the project objectives before working on stretch. Stretch goals are not covered in the guided demo and need some research on your part. There is no particular order in this list, just pick one that sounds fun and push yourself. - -- [ ] Give the navigation a background color and have it be fixed to the top of the page so that it scrolls with the user. You will want to study what z-index means in case you encounter any issues when you scroll. -- [ ] Introduce a new font family from [google fonts](https://fonts.google.com/) - -- [ ] Create a new page based off of a navigation item. Create your own layout using box model and `display: inline-block;` - -- [ ] Change all the image tags into background images instead - -- [ ] Research CSS animations and see how you could implement some ideas when hovering over buttons or navigation items \ No newline at end of file From 228f882d0329bdb392e55e57389641e011cf34cb Mon Sep 17 00:00:00 2001 From: XAmi101 Date: Thu, 30 May 2019 17:51:06 -0400 Subject: [PATCH 3/4] Okay I fixed the README file --- great-idea-website/css/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index 960d69bd5..302d4eca5 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -1,7 +1,7 @@ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) -*/ +Ndawi Eke*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, From e8a79d3b7d29ca3b43ee30c2d756730034d98b29 Mon Sep 17 00:00:00 2001 From: XAmi101 Date: Thu, 30 May 2019 18:06:21 -0400 Subject: [PATCH 4/4] Okay now I fixed the README file --- README.md | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 000000000..5ffc66258 --- /dev/null +++ b/README.md @@ -0,0 +1,42 @@ +NDAWi EKE + +# User Interface Project: Great Idea Web Page + +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.** + +**Lambda Life Tip:** Use the code from your instructor's demonstration to help you tackle the objectives. + +## To Get Started + +* Fork / Clone this project into a directory on your machine. + +* Open the code with your preferred integrated development environment (IDE). + +* Start on the objectives + +## Objectives: + +Project objectives are meant to increase your knowledge by giving you practice on the principles learned earlier in the day. Aim to complete every objective on this list. Get as far as you can on the design as we will be using your work today for tomorrow's project as well. + +**Watch this short guide on how to setup your project:** [UI Project Setup 101](https://youtu.be/UU9WjpMsaLE) + +- [ ] Study the [desktop design file](design-files/desktop.jpg). Visualize how you would convert the design into HTML and CSS. Make a quick sketch of how you would build the HTML structure. Use your sketch as a plan of action for the next two objectives. Challenge yourself to only use 10 minutes for this particular objective. + +- [ ] Go to your [index.html](great-idea-website/index.html) file and build out your HTML structure. You have been provided all the content and images you need to get started inside the `index.html` file. Start to code HTML around the content! + +- [ ] Style your HTML using the [desktop design file](design-files/desktop.jpg) as a visual guide. Use any CSS properties you want for general styling but for layout, you can only use the box model (content, padding, margin, border) and `display:inline-block`. + +## Stretch Goals: + +Stretch goals are not required. Complete the project objectives before working on stretch. Stretch goals are not covered in the guided demo and need some research on your part. There is no particular order in this list, just pick one that sounds fun and push yourself. + +- [ ] Give the navigation a background color and have it be fixed to the top of the page so that it scrolls with the user. You will want to study what z-index means in case you encounter any issues when you scroll. +- [ ] Introduce a new font family from [google fonts](https://fonts.google.com/) + +- [ ] Create a new page based off of a navigation item. Create your own layout using box model and `display: inline-block;` + +- [ ] Change all the image tags into background images instead + +- [ ] Research CSS animations and see how you could implement some ideas when hovering over buttons or navigation items