diff --git a/index.html b/index.html new file mode 100644 index 00000000..776ef10d --- /dev/null +++ b/index.html @@ -0,0 +1,297 @@ + + + + + + + + + + + + Nova Theme + + + +
+ +
+
+ + + +
+ +
+ + +
+
+

Beautiful Free Nova template

+

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

+ +
+
+ Phone screen +
+
+ +
+ +
+ +
+
+

FEATURES

+
+
+
+ respnosive icon +
+
+

FULLY RESPONSIVE

+

Looks amazing on any device: smartphone, tablet, laptop and + desktop.

+
+
+
+
+ customizable icon +
+
+

CUSTOMIZABLE

+

Change the colors, pictures or any of the sections to suit your + needs.

+
+
+
+
+ medal icon +
+
+

SLICK AND BEAUTIFUL DESIGN

+

Trendy and fresh design, fits any website.

+
+
+
+
+
+ + + + + +
+
+ monitor photo +
+
+
+

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

+
+
+
+

BASIC

+

$15

+
per month
+
    +
  • Up to 7 Projects
    • +
  • 2 Additional Developers
    • +
+
+
+
+

AGENCY

+

$55

+
per month
+
    +
  • Up to 25 Projects
    • +
  • 2 Additional Developers
    • +
  • Unlimited Support
    • +
+
+
+
+

PRO

+

$75

+
per month
+
    +
  • Up to 25 Projects
    • +
  • 2 Additional Developers
    • +
  • Unlimited Support
    • +
  • 1.5GB Disk Space
    • +
+
+
+
+
+ + +
+

THE TEAM

+
+
+ cto picture +
+

CTO

+
Johnny B Good
+

The brains behind the whole operation

+ twitter icon + facebook icon +
+
+
+ ceo picture +
+

CEO

+
Roll Over Beethoven
+

The one that puts it all together

+ twitter icon + facebook icon +
+
+
+ cfo picture +
+

CFO

+
Chuck Berry
+

The guy with his hand on the wallet

+ twitter icon + facebook icon +
+
+
+
+ + + + +
+ + + + \ No newline at end of file diff --git a/reset.css b/reset.css new file mode 100644 index 00000000..299a6d16 --- /dev/null +++ b/reset.css @@ -0,0 +1,135 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +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; +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 00000000..4da37a9e --- /dev/null +++ b/style.css @@ -0,0 +1,429 @@ +html { + font-family: "Montserrat", sans-serif; + scroll-behavior: smooth; +} + + +a { + text-decoration: none; + background-color: transparent; +} + +.header--background { + background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); + overflow: hidden; + position: relative; + height: 45rem; +} + +h1 { + font-size: 36px; +} + +h2 { + font-size: 30px; +} + +h4 { + font-size: 18px; +} + +h5 { + font-size: 12px; +} + +/* header section */ +.header--container { + display: flex; + justify-content: space-between; + align-items: center; + height: 10rem; + padding: 0 20%; +} + +.header--logo { + max-width: 100%; + width: 7rem; + margin-right: 1rem; +} + +.header--logo--container { + display: flex; + align-items: center; +} + +.header--nav { + padding: 5px 20px; +} + +.nav--items { + display: flex; +} + + +.nav--item { + font-size: 1.4rem; + padding: 0 2rem; + transition: color 0.3 ease-in-out; + color: #fff; +} + +.nav--item:hover { + color: #06bceb; +} + +/* header section */ +/* hero section */ + +.hero--container { + color: #fff; + display: flex; + justify-content: space-between; + align-items: center; + margin: 0 20%; +} + +.hero--heading { + font-weight: bold; + max-width: 70%; + margin-bottom: 2rem; +} + +.hero--description { + line-height: 30px; + text-align: left; + max-width: 50%; + font-weight: 300; +} + +.hero--img--background { + background-color: #fff; + transform: rotate(-6deg); + border-radius: 25px; + box-shadow: inset 0 4px 7px 1px #fff, inset 0 -5px 20px rgba(173, 186, 204, .25), 0 0px 33px rgba(0, 21, 64, .14), 0 10px 20px rgba(0, 21, 64, .05); + width: 540px; + margin: 0 15px 0 15px; + padding: 15px; +} + +.hero--img { + width: 98%; + margin: 5px; + height: 80%; +} + +.hero--btn { + background-color: #25f18B; + border-radius: 10px; + border: 1px solid #25f18B; + width: 210px; + height: 51px; + color: white; + margin: 30px auto; + transition-duration: 0.4s; + margin-left: auto; +} + +.hero--btn:hover { + background-color: #6affb4; + border-radius: 20px; + box-shadow: -1px 9px 46px -17px rgba(43, 43, 43, 1); +} + +/* hero section */ +/* features */ + +.features { + background-color: black; + padding-top: 40px; + padding-bottom: 90px; + position: relative; + text-align: center; +} + +.features--box { + max-width: 1000px; + margin: auto; +} + +.features--header { + color: white; + padding-bottom: 70px; +} + +.features--container { + color: white; + text-align: center; + padding: 30px; + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} + +.feature--item { + background-color: white; + border-radius: 50%; + height: 5.625rem; + width: 5.625rem; + display: flex; + justify-content: center; + align-items: center; + box-shadow: 4px 14px 28px #393939; + margin-bottom: 2rem; +} + +.feature--icon { + max-width: 23px; + vertical-align: middle; +} + +.row { + width: 30%; + margin-bottom: 25px; + display: flex; + flex-direction: column; + align-items: center; +} + +.feature--description { + margin-top: 10px; +} + +/* features */ +/* logos */ + +.logos { + background-color: #F9FAFA; + text-align: center; + +} + +.logos--img { + padding: 30px; +} + +/* logos */ +/* about */ + +.about { + max-width: 1400px; + margin: auto; + overflow: hidden; + display: flex; +} + +.about--container { + width: 50%; +} + +.about--img { + padding-top: 60px; + padding-bottom: 40px; + display: block; + max-width: 100%; + height: auto; +} + +.about--container--background { + text-align: justify; + padding-top: 80px; + padding-left: 100px; +} + +.about--header { + padding-bottom: 35px; + font-weight: 300; + margin-top: 20px; + margin-bottom: 10px; +} + +.about--text { + font-weight: 300; + font-size: 15px; + line-height: 30px; + max-width: 400px; + margin: inherit; + text-align: left; + padding-bottom: 40px; +} + +/* about */ +/* pricing */ + +.pricing { + background-color: #F8F9F9; +} + +.pricing--header { + padding-top: 75px; + font-weight: 300; + text-align: center; + margin-top: 20px; + margin-bottom: 10px; +} + +.pricing--subheader { + padding-top: 10px; + color: grey; + font-weight: 300; + text-align: center; + margin-top: 20px; + margin-bottom: 10px; +} + +.pricing--table { + padding: 70px 0 100px; + margin: auto; + display: flex; + max-width: 1050px; +} + +.pricing--plan { + text-align: center; + max-width: 390px; + margin: auto; + height: 430px; + padding: 36px 15px 45px; +} + +.midplan { + text-align: center; + max-width: 390px; + margin: auto; + height: 430px; + padding: 36px 15px 45px; + box-shadow: 5px 8.7px 40px rgba(99, 117, 138, 0.3); + border-radius: 7px; +} + +.col { + width: 33%; + position: relative; + min-height: 1px; + padding-right: 15px; + padding-left: 15px; +} + +.plan--title { + font-size: 18px; + padding-bottom: 5px; + font-weight: 300; +} + +.plan--cost { + font-size: 45px; + font-weight: bold; + margin-top: 10px; + margin-bottom: 10px; + line-height: 1.1; +} + +.plan--time { + padding-bottom: 20px; + margin-top: 10px; + margin-bottom: 10px; + font-weight: 500; +} + +.plan--features li { + list-style-type: none; + margin-bottom: 10px; +} + +.pricing--button { + background-color: #06bceb; + border-radius: 10px; + border: #06bceb; + width: 164px; + height: 51px; + color: white; + transition-duration: 0.4s; + padding: 15px; + margin: auto; + position: absolute; + left: calc(50% - 82px); + bottom: 10rem; + font-weight: 300; +} + +.pricing--button:hover { + background-color: #58d5f7; + color: white; + border-radius: 20px; + box-shadow: -1px 9px 46px -17px rgba(43, 43, 43, 1); + text-decoration: underline; +} + + +/* pricing */ +/* team */ + +.team { + padding-top: 60px; + padding-bottom: 130px; +} + +.team--header { + padding-bottom: 90px; + font-weight: 300; + text-align: center; +} + +.team--container { + display: flex; + justify-content: center; + margin: auto; + max-width: 1050px; +} + +.team--member { + text-align: center; + padding-bottom: 60px; + padding-left: 15px; + padding-right: 15px; + width: 33%; +} + +.team--member--text { + padding-top: 20px; +} + +.team--function { + color: #747474; + font-weight: 300; + margin-top: 10px; + margin-bottom: 10px; +} + +.team--name { + font-weight: 600; + font-size: 14px; + margin-top: 10px; + margin-bottom: 10px; +} + +.team--description { + font-weight: 300; + margin: 0 0 10px; +} + +/* team */ +/* footer */ +.footer { + background-color: #464646; + padding-top: 20px; + padding-bottom: 20px; + display: flex; + justify-content: center; +} + +.footer--container { + display: flex; +} + +.footer--text { + color: white; + font-size: 12px; + padding-right: 10px; + align-self: center; +} \ No newline at end of file