diff --git a/great-idea/css/index.css b/great-idea/css/index.css index a6445bd842..2646a3cde6 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -46,6 +46,11 @@ table { border-collapse: collapse; border-spacing: 0; } +img { + width: 100%; + height: auto; + object-fit: cover; +} /* Set every element's box-sizing to border-box */ * { @@ -54,13 +59,232 @@ table { html, body { height: 100%; - font-family: 'Titillium Web', sans-serif; + font-family: 'Open Sans', sans-serif; } h1, h2, h3, h4, h5 { font-family: 'Bangers', cursive; letter-spacing: 1px; - margin-bottom: 15px; + margin-bottom: 0; + font-size: 1.4rem; + font-weight: 700; +} + +p { + line-height: 1.3; + font-size: 1.1rem; + font-weight: 500; +} + +/* ===Utils=== */ +.wrapper-y { + padding: 2.5rem 0 +} +.wrapper-y.only-bottom { + padding-top: 0 +} +.mt-1 { + margin-top: 1rem +} +.mt-1h { + margin-top: 1.5rem +} +.mt-2 { + margin-top: 2rem +} + +.btn { + background: #fff; + border: 1px solid black; + padding: .75rem 1.5rem; + min-width: 170px; + font-weight: 500; + color: #000; + font-size: 1rem; + transition: all .5s +} +.btn:hover { + background: black; + color: white; +} + +.section-heading { + font-size: 1.1rem; +} + +.flex-container { + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} + +@media screen and (max-width: 768px) { + .pt-2-sm { + padding-top: 2rem; + } + + .d-none-sm { + display: none + } + + .image-container { + height: 250px; + } + + .image-container img { + height: 100%; + object-fit: cover; + } +} + +/* Your code starts here! */ +.container { + margin: 0 auto; + padding: 0 1.5rem; + max-width: 1280px; +} + +/* ===Navigation=== */ +nav { + flex-wrap: nowrap; + align-items: center; + width: 100%; + max-width: 1280px; + padding: 1.5rem 0 0; +} + +nav ul { + width: calc(100% - 250px); +} + +@media screen and (min-width: 992px) { + nav ul { + width: calc(100% - 350px); + } +} + +nav li a { + font-size: 1rem; + color: rgba(0,0,0, .5); + font-weight: 600; + text-decoration: none; + padding: 1.5rem 0; + display: block; + transition: color .25s; +} + +nav li a:hover { + color: rgba(0, 0, 0, 1); } -/* Copy and paste your work from yesterday here and start to refactor into flexbox */ \ No newline at end of file +.logo { + width: 200px; +} + +/* ===Header=== */ +header.home-header { + margin: 4rem 0; + align-items: center; +} + +header.home-header div { + width: 100%; + text-align: center; +} + +header.home-header div:last-of-type { + display: none; +} + +header.home-header h1 { + font-size: 3rem; + width: 100%; + margin: 0 auto; + line-height: 1.1; + letter-spacing: 6px; +} + +header.services-header h1 { + font-size: 1.7rem; +} + +@media screen and (min-width: 992px) { + header.home-header div { + width: 50%; + text-align: center; + } + + header.home-header div:last-of-type { + display: block; + } + + header.home-header h1 { + font-size: 6rem; + max-width: 380px; + } +} + +/* ===Main Content=== */ +main { + border-top: 1px solid #000000; + border-bottom: 1px solid #000000; +} + +@media screen and (min-width: 768px) { + .col-2-grid section { + width: calc(50% - 15px); + } + .col-3-grid section { + width: calc(33.33% - 15px); + } +} + +.service-card { + border: 1px solid black; + background: #f6f7f7; + padding: 1.5rem; + margin-bottom: 2.5rem; +} +.service-card:last-child { + margin-bottom: 0; +} +.service-card button { + font-size: .85rem; + padding: .65rem 1.5rem; + min-width: 150px; + border-radius: 7px; +} + +@media screen and (min-width: 768px) { + .service-card { + width: calc(50% - 1.25rem); + } + + .service-card:nth-child(n + 5) { + margin-bottom: 0; + } +} + +/* ===Footer=== */ +footer section:first-of-type { + max-width: 550px; +} +footer ul { + list-style: outside; + padding-left: 15px; + font-size: 1.1rem; +} +footer li { + margin-bottom: .5rem; +} +footer .copyright { + text-align: center; + margin: 4rem 0 2rem; +} + +address span { + max-width: 200px; + display: block; + margin-top: .8rem; + line-height: 1.4; +} \ No newline at end of file diff --git a/great-idea/index.html b/great-idea/index.html index c5f374a238..33165af433 100644 --- a/great-idea/index.html +++ b/great-idea/index.html @@ -3,7 +3,7 @@ - + Great Idea! @@ -15,9 +15,76 @@ - - +
+ - +
+
+

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.

+
+
+
+ + +
\ No newline at end of file diff --git a/great-idea/services.html b/great-idea/services.html index 271c36beae..a558ca02a3 100644 --- a/great-idea/services.html +++ b/great-idea/services.html @@ -3,8 +3,8 @@ - - Great Idea! + + Great Idea! - Services @@ -16,91 +16,90 @@ - -Services -Product -Vision -Features -About -Contact - - - - -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. - -Learn More - - - -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. - -Learn More - - - -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. - -Learn More - - - -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. - -Learn More - - - -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. - -Learn More - - - -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. - -Learn More - - -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 - -Copyright Great Idea! 2018 +
+ + +
+
+ Image of a code snippet. +
+ +
+

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 pellentesqueeleifend. 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 pellentesqueeleifend. 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 pellentesqueeleifend. 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 pellentesqueeleifend. 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 pellentesqueeleifend. 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 pellentesqueeleifend. Mauris euismod facilisis iaculis.

+ +
+
+ + +