diff --git a/index.html b/index.html new file mode 100644 index 00000000..3e719cde --- /dev/null +++ b/index.html @@ -0,0 +1,200 @@ + + + + + + + + + + + Web project + + +
+
+ + +
+
+
+

Beautiful Free Nova Template

+

+ A top notch premium quality template for your next web project. +

+ +
+
+ +
+
+
+
+
+

Features

+
+ +
+
+
+ +
+
+
+
+
+

Simple and beautiful

+

+ Use Nova theme for your next web project. It is completely + customizable so you can change any of the sections to fit your needs. + Nova Theme is Free for any kind of use, personal and commercial. Have + fun and good luck! +

+
+
+
+
+

Choose your pricing plan

+

+ Pick any of our super affordable pricing plans +

+
+ +
+
+
+

The team

+
+ +
+ + + diff --git a/src/reset.css b/src/reset.css new file mode 100644 index 00000000..57c883da --- /dev/null +++ b/src/reset.css @@ -0,0 +1,312 @@ +/* + HTML5 Reset :: style.css + ---------------------------------------------------------- + We have learned much from/been inspired by/taken code where offered from: + + Eric Meyer :: http://meyerweb.com + HTML5 Doctor :: http://html5doctor.com + and the HTML5 Boilerplate :: http://html5boilerplate.com + +-------------------------------------------------------------------------------*/ + +/* Let's default this puppy out +-------------------------------------------------------------------------------*/ + +html, +body, +body div, +span, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +abbr, +address, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +samp, +small, +strong, +sub, +sup, +var, +b, +i, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +figure, +footer, +header, +menu, +nav, +section, +time, +mark, +audio, +video, +details, +summary { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-weight: normal; + vertical-align: baseline; + background: transparent; +} + +main, +article, +aside, +figure, +footer, +header, +nav, +section, +details, +summary { + display: block; +} + +/* Handle box-sizing while better addressing child elements: + http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */ + +/* Responsive images and other embedded objects */ +/* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */ +img, +object, +embed { + max-width: 100%; +} + +/* + Note: keeping IMG here will cause problems if you're using foreground images as sprites. + In fact, it *will* cause problems with Google Maps' controls at small size. + If this is the case for you, try uncommenting the following: + +#map img { + max-width: none; +} +*/ + +/* force a vertical scrollbar to prevent a jumpy page */ +html { + overflow-y: scroll; +} + +/* we use a lot of ULs that aren't bulleted. + you'll have to restore the bullets within content, + which is fine because they're probably customized anyway */ +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} + +a { + margin: 0; + padding: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; +} + +del { + text-decoration: line-through; +} + +abbr[title], +dfn[title] { + border-bottom: 1px dotted #000; + cursor: help; +} + +/* tables still need cellspacing="0" in the markup */ +table { + border-collapse: separate; + border-spacing: 0; +} +th { + font-weight: bold; + vertical-align: bottom; +} +td { + font-weight: normal; + vertical-align: top; +} + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; +} + +input, +select { + vertical-align: middle; +} + +pre { + white-space: pre; /* CSS2 */ + white-space: pre-wrap; /* CSS 2.1 */ + white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ + word-wrap: break-word; /* IE */ +} + +input[type="radio"] { + vertical-align: text-bottom; +} +input[type="checkbox"] { + vertical-align: bottom; +} +.ie7 input[type="checkbox"] { + vertical-align: baseline; +} +.ie6 input { + vertical-align: text-bottom; +} + +select, +input, +textarea { + font: 99% sans-serif; +} + +table { + font-size: inherit; + font: 100%; +} + +small { + font-size: 85%; +} + +strong { + font-weight: bold; +} + +td, +td img { + vertical-align: top; +} + +/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; +} +sup { + top: -0.5em; +} +sub { + bottom: -0.25em; +} + +/* standardize any monospaced elements */ +pre, +code, +kbd, +samp { + font-family: monospace, sans-serif; +} + +/* hand cursor on clickable elements */ +.clickable, +label, +input[type="button"], +input[type="submit"], +input[type="file"], +button { + cursor: pointer; +} + +/* Webkit browsers add a 2px margin outside the chrome of form elements */ +button, +input, +select, +textarea { + margin: 0; +} + +/* make buttons play nice in IE */ +button, +input[type="button"] { + width: auto; + overflow: visible; +} + +/* scale images in IE7 more attractively */ +.ie7 img { + -ms-interpolation-mode: bicubic; +} + +/* prevent BG image flicker upon hover + (commented out as usage is rare, and the filter syntax messes with some pre-processors) +.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));} +*/ + +/* let's clear some floats */ +.clearfix:after { + content: " "; + display: block; + clear: both; +} diff --git a/src/style.css b/src/style.css new file mode 100644 index 00000000..c30f8b3b --- /dev/null +++ b/src/style.css @@ -0,0 +1,219 @@ +:root { + --gradient: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); + --color-primary: #06bceb; + --color-secondary: #23f18b; + --color-light: #ffffff; + --color-medium-light: #f8f9f9; + --color-medium-dark: #464646; + --color-dark: #000000; +} + +body { + font-family: "Montserrat", sans-serif; + font-optical-sizing: auto; + font-style: normal; +} +h1, +h2, +h3, +p { + font-family: inherit; + font-weight: 300; +} +h1 { + font-size: 36px; + font-weight: 700; +} +h2 { + margin-bottom: 16px; + font-size: 30px; + text-transform: uppercase; +} +h3 { + font-size: 14px; +} +button { + padding: 15px 20px; + border-radius: 6px; + border: 0; + color: var(--color-medium-dark); + font-family: inherit; + transition: 150ms ease-in-out; +} +button:hover { + scale: 1.1; +} +.button--primary { + background-color: var(--color-primary); +} +.button--secondary { + background-color: var(--color-secondary); + width: 60%; +} +.container { + max-width: 1150px; + margin: 0 auto; +} +.content { + margin-top: 44px; + display: flex; + flex-direction: column; + gap: 25px; +} +.container--cards { + display: flex; + gap: 10px; + justify-content: center; + padding: 40px 0 80px; + flex-wrap: wrap; +} +.card { + width: 300px; + text-align: center; + display: flex; + flex-direction: column; + gap: 20px; + align-items: center; +} +.team__position { + display: inline-block; +} +.team__position, +.team__info { + margin-bottom: 12px; +} +.title { + font-weight: 700; + margin-bottom: 14px; +} +.card-image { + display: flex; + align-items: center; + justify-content: center; + background-color: var(--color-light); + padding: 10px; + border-radius: 100%; + width: 80px; + height: 80px; + object-fit: contain; +} +.nav__list { + display: flex; + gap: 24px; +} +.list__link { + color: var(--color-light); + text-decoration: none; + transition: all 150ms ease-in-out; +} +.list__link:hover { + border-bottom: 1px solid var(--color-light); +} +.hero { + background: var(--gradient); +} +.container--header { + padding: 40px 0; + display: flex; + justify-content: space-between; + align-items: center; +} +.container--hero { + display: flex; + align-items: flex-start; + padding: 50px 0 100px; + gap: 90px; + color: var(--color-light); +} +.container--logos { + display: flex; + justify-content: center; + padding: 20px; + background-color: var(--color-medium-light); +} +.hero__media { + background-color: var(--color-light); + padding: 17px; + transform: rotate(-5deg); + border-radius: 20px; +} +.media-text { + display: flex; + justify-content: center; + gap: 80px; + padding: 40px; + line-height: 2; + color: var(--color-medium-dark); +} +.media { + width: 40%; +} +.text { + margin-top: 16px; + width: 30%; +} +.text__title { + text-transform: uppercase; +} +.pricing { + background-color: var(--color-medium-light); +} +.pricing .card { + padding: 40px; + display: flex; + flex-direction: column; + gap: 30px; + text-align: center; +} +.card--featured { + background: var(--color-light); + border-radius: 6px; + box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; +} +.plan-price__title, +.card-content__title { + text-transform: uppercase; +} +.price { + font-size: 32px; + font-weight: 700; + margin: 12px 0; +} +.plan-details { + margin-bottom: 30px; +} +.card--team { + width: 30%; + text-align: center; + display: flex; + flex-direction: column; + gap: 20px; + align-items: center; +} +.team { + text-align: center; +} +footer { + background-color: var(--color-medium-dark); + color: var(--color-light); + text-align: center; + font-size: 14px; +} +.footer__container { + display: flex; + justify-content: center; + align-items: center; + gap: 10px; + padding: 20px 0; +} +.features { + background-color: var(--color-dark); + color: var(--color-light); +} +.logos { + background-color: var(--color-medium-light); +} +.container--title { + padding: 60px 0 26px; + text-align: center; +}