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/css/index.css b/great-idea-website/css/index.css index 7766e7f18..1730038dc 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -63,4 +63,49 @@ 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; + 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; +} +hr { + border: 1px solid black; +} diff --git a/great-idea-website/index.html b/great-idea-website/index.html index 92beabd65..b4a435ac6 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -15,49 +15,75 @@
- - Services - Product - Vision - Features - About - Contact - -
- Innovation
- On
- Demand
-
- Get Started
-
-
-
- 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.
-
-
-
- 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
+
+
+ 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.
+
+
+ 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.
+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.
+