diff --git a/css/index.css b/css/index.css index 09344e0dc..32be834df 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,440 @@ -/* Use your CSS from RWD - I here. IF you don't have CSS, use the solution CSS from RWD - I*/ \ No newline at end of file +/* Use your CSS from RWD - I here. IF you don't have CSS, use the solution CSS from RWD - I*/ + + +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; +} +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, h6 { + font-family: 'Bangers', cursive; + letter-spacing: 1px; + margin-bottom: 15px; +} + +/* Your code starts here! */ +html { + font-size: 62.5%; +} + +.full-container { + display: flex; + flex-direction: column; + align-items: center; + max-width: 880px; + margin: 0 auto; + +} + +.container { + display: flex; + justify-content: space-around; + align-items: center; + margin: 4% 0%; + width: 90%; +} + + +.container2 { + display: flex; + justify-content: space-around; + margin-top: 2%; + margin-left: 18%; +} + +.container3 { + font-weight: bold; + font-size: 4.5rem; + width: 30%; + display: flex; + flex-wrap: wrap; + align-items: center; + align-content: center; + justify-content: center; + margin-left: 0.5%; +} + +.container4 { + width: 50%; +} + +.container5 { + display: flex; + margin-top: 2.4%; + margin-bottom: 2%; + width: 80%; + font-size: 1.29rem; +} + +.container6 { + margin-top: 2.5%; + display: flex; + width: 80%; + font-size: 1.29rem; +} + + +.copy{ + width: 100%; + text-align: center; + margin-top: 2%; +} + +.street { + margin-bottom: 1%; +} + +.phone { + line-height: 2.5rem; +} + +a { + font-size: 1.29rem; + text-decoration: none; + color: grey; +} + + +nav { + word-spacing: 4.58rem; + margin-left: 1%; +} + + +button { + cursor: pointer; + background: white; + border: 1px solid black; + font-size: 40%; + width: 100%; + margin-top: 10%; +} + +h1 { + font-size: 5.6rem; + width: 100%; + text-align: center; + margin-right: 9%; +} + +hr { + width: 80%; + margin-bottom: 1%; + border-top: 0.2rem solid black; +} + +hr.first-line { + margin-top: 6rem; +} + +hr.second-line{ + margin-top: 2.5%; +} + +.middle-img { + width: 79.5%; +} + +.logo { + width:19%; + padding-right: 1%; +} + +.logo img{ + width: 100%; +} + +.container4 img { + width: 85%; +} + +.button { + width: 61.5%; + display: flex; + justify-content: flex-end; +} + +.foot { + width: 80%; + margin-top: 2%; + font-size: 1.25rem; +} + +/* tablet view */ +@media(max-width: 800px) { + +.container { + max-width: 100%; + flex-direction: column-reverse; + align-items: center; + margin: 0 auto; +} + +.container2 { + width: 80%; + margin: 0% 0%; + padding-right: 0.2rem; + padding-top:8%; + padding-bottom: 1rem; + } + +.container4 { +display: none; + +} + +.container5 { + width: 80%; + font-size: 1.3rem; + justify-content: space-around; + margin-bottom: 1rem; +} + +.container6 { + width: 79.5%; + margin: 3.5% 1% 0% 0%; + padding-right: 2%; +} + +.container6 p { + font-size: 1.25rem; + line-height: 1.4rem; +} + +img.middle-img { + width:78%; +} + +.feat { + border: 1px solid white; + width: 90%; + margin-left: 2.5%; +} + +.about { + border: 1px solid white; + width: 90%; +} + +.serve { + padding: 0% 3%; +} + +.prod { + padding: 0% 3%; +} + +.visi{ + padding: 0% 3%; +} + +.logo { + margin-top: 4%; + margin-left: 1.5%; + width: 22%; +} + +nav { + display: flex; + justify-content: space-around; + width: 95%; + margin-top: 4%; +} + +h1 { + /* margin-top: 5.7rem; + margin-left: 32.5rem; */ + width: 100%; + margin-bottom: 5%; +} + + +hr.first-line { + margin-top: 6%; + width: 78%; +} + +hr.second-line { + margin-top: 2.25%; + width: 78%; +} + +.button { + display: flex; + justify-content: center; + width: 100%; + padding-right: 9%; + padding-left: 13%; + margin-right: 4%; +} + +button { + font-size: 30%; +} + +.foot { + width: 76%; + padding-top: 0.35rem; +} + +.copy p { + font-size: 1.3rem; +} +.logo img { + width: 100%; +} + +} +/* mobile view */ +@media(max-width: 500px) { + + .full-container { + max-width: 100%; + } + + .container { + width: 100%; + } + + .container2 { + width: 100%; + } + + .container5 { + flex-direction: column; + margin-top: 8.5%; + padding-bottom: 2.5%; + } + + .container6 { + flex-direction: column; + margin-top: 0%; + } + + + .middle-img { + padding: 1rem 1rem; + } + + nav { + width: 83%; + border-top: 1px solid black; + text-align: center; + display: flex; + flex-direction: column; + } + + a { + font-size: 1.5rem; + line-height: 4.75rem; + border-bottom: 1px solid black; + } + + .logo { + width: 84%; + text-align: center; + margin-top: 5%; + } + + .logo img { + width: 37%; + } + + .button { + margin-top: 5%; + margin-left: 3%; + } + + button { + border: 1px solid black; + width: 100%; + } + + hr.first-line { + margin-top: 10.5%; + } + + hr.second-line { + margin-top: 3%; + width: 80%; + } + + .about { + margin-top: 6.5%; + margin-left: 2%; + } + + .feat { + margin-left: 2%; + } + + .serve { + margin-top: 3%; + } + + .prod { + margin-top: 10%; + + } + + .visi { + margin-top: 11%; + } + + .foot { + margin-top: 4%; + } + + .copy { + margin-top: 4%; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 6ee66a434..86a94007c 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,80 @@ - - - +
+ +
+ + +
+
+
+
+

+ 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