diff --git a/index.html b/index.html new file mode 100644 index 00000000..3962af8e --- /dev/null +++ b/index.html @@ -0,0 +1,244 @@ + + + + + + Document + + + + + + +
+
+
+

+ Logo +

+ +
+
+ +
+
+
+

Beautiful Free Nova
template

+

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

+ +
+
+ Screen preview +
+
+
+
+
+
+

Features

+
+
+ + Responsive + +

Fully Responsive

+

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

+
+
+ + Customizable + + +

Customizable

+

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

+
+
+ + Design + + +

Slick and Beautiful Design

+

Trendy and fresh design, fits any website.

+
+
+
+
+ + + +
+
+
+ iMac +
+
+

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 +

CTO
Johnny B. Good

+

+ The brains behind the whole operation. +

+
+ + +
+
+
+ CEO +

+ CEO
+ Roll Over Beethoven +

+

The one that puts it all together.

+
+ + + +
+
+
+ CFO +

CFO
Chuck Berry

+

+ The guy with his hand on the wallet. +

+
+ + +
+
+
+
+
+ + + + diff --git a/main.css b/main.css new file mode 100644 index 00000000..7d1a7342 --- /dev/null +++ b/main.css @@ -0,0 +1,307 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} +body { + font-family: 'Montserrat', serif; + color: #fff; +} +.container { + max-width: 1620px; + margin: 0 auto; + padding: 5px 0; +} + +.logo { + width: 160px; + padding-top: 20px; +} + +.hero { + background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); +} + +.header .container { + display: flex; + justify-content: space-between; + padding-top: 2px; + padding-bottom: 100px; +} + +.heading { + padding-bottom: 20px; + font-size: 40px; +} +.heading__desrciption { + font-size: 20px; + font-weight: 300; + padding-bottom: 40px; +} + +.navigation { + display: flex; + justify-content: center; + align-items: center; + width: 800px; + font-weight: bold; +} + +.menu { + display: flex; + list-style: none; +} + +.menu li { + margin: 0 20px; +} + +.menu li a { + text-decoration: none; + color: #fff; +} + +.section-title { + font-size: 40px; + font-weight: 200; + padding-bottom: 100px; +} + +.features { + background-color: black; + padding-top: 30px; + text-align: center; + padding-bottom: 150px; + position: relative; +} +.features .container { + max-width: 1000px; + margin: auto; +} + +.features-list { + display: flex; + justify-content: space-around; +} + +.feature-item { + width: 30%; + padding: 10px; +} + +.cta-button { + background-color: #0abceb; + color: #fff; + border: none; + padding: 20px 40px; + cursor: pointer; + border-radius: 10px; + font-size: 18px; +} + +.partners .container { + text-align: center; + padding: 30px; + max-width: 100%; + background-color: #f9fafa; +} + +.about .container { + display: flex; + max-width: 1900px; +} +.about-description { + color: black; + padding: 80px; +} +.about-description h2 { + padding-bottom: 50px; +} +.section-title { + padding-top: 60px; + margin-top: -10px; +} +.pricing__description { + font-size: 18px; + font-weight: 300; + margin-top: -70px; + padding-bottom: 70px; +} +.pricing { + background-color: #f8f9f9; + padding-bottom: 100px; +} +.pricing .container { + text-align: center; + color: black; +} + +.pricing-options { + display: flex; + justify-content: space-around; +} + +.pricing-item { + position: relative; + width: 30%; + padding: 10px; + border: 1px #ddd; + min-height: 300px; +} +.pricing-item .cta-button { + position: absolute; + bottom: 10px; + left: 50%; + transform: translateX(-50%); +} + +.pricing-item--details { + position: relative; + width: 25%; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); + border: 1px solid #fff; + background-color: #fff; + border-radius: 10px; +} + +.team .container { + text-align: center; + color: black; +} + +.team-members { + display: flex; + justify-content: space-around; + margin-top: 20px; +} + +.team-member { + text-align: center; +} + +.footer .container { + text-align: center; + padding: 20px 0; + color: black; +} + +.hero-image { + transform: translateX(-350px) translateY(-30px) rotate(-5deg); + border: 15px solid #fff; + border-radius: 20px; + background-color: #fff; +} + +.circle { + display: flex; + align-items: center; + justify-content: center; + height: 80px; + width: 80px; + background-color: #fff; + border-radius: 50%; +} + +.circle_icon { + max-width: 50%; + max-height: 50%; + vertical-align: middle; +} + +.feature-item { + display: flex; + flex-direction: column; + align-items: center; + width: 30%; + padding: 10px; +} + +.feature-item h3 { + margin-top: 20px; + font-size: 18px; + font-weight: 400; +} + +.feature-item p { + margin-top: 10px; + font-size: 16px; + color: #fff; + font-weight: 200; +} + +.about__heading { + font-weight: 300; + font-size: 35px; +} +.about-image { + width: 40%; +} +.about-description { + width: 40%; + font-weight: 300; +} +.about .container { + justify-content: space-around; + padding: 80px; +} +.about-image img { + width: 100%; +} +.pricing__heading { + font-weight: 300; + padding: 20px; +} +.pricing__cost { + display: inline-block; + margin-bottom: 10px; + font-size: 1.5em; + font-size: 50px; + font-weight: bold; +} +.pricing__details { + list-style-type: none; + padding: 20px; + font-weight: 500; + padding-bottom: 100px; +} +.team__heading { + display: inline-block; + font-weight: 300; + margin-top: 30px; + margin-bottom: 5px; +} + +.team__description { + margin-top: 20px; +} +.team__socials { + margin-top: 20px; + display: flex; + gap: 15px; + justify-content: center; +} +.team { + padding-bottom: 200px; +} + +.social-icon { + width: 15px; + height: 15px; +} +.footer { + background-color: #464646; + padding: 20px 0; + text-align: center; + font-size: 14px; +} + +.footer-logo { + width: 100px; + height: auto; + vertical-align: middle; + margin-left: 5px; +} +.footer__description { + color: #fff; + font-weight: 500; +}