diff --git a/images/team-google.svg b/images/team-google.svg new file mode 100644 index 00000000..f6cfe761 --- /dev/null +++ b/images/team-google.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/team-twitter.svg b/images/team-twitter.svg index aca50aaa..c7a56619 100644 --- a/images/team-twitter.svg +++ b/images/team-twitter.svg @@ -1,7 +1,7 @@ - team-twitter + team-google Created with Sketch. diff --git a/index.html b/index.html new file mode 100644 index 00000000..9b7f1ba6 --- /dev/null +++ b/index.html @@ -0,0 +1,281 @@ + + + + + + + + + + + + + Nova Theme + + +
+ +
+
+

+ Beautiful Free Nova +
+ template +

+

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

+
+ + Download FREE! + +
+
+
+ Next Gen App Banner +
+
+
+ +
+
+

FEATURES

+ +
+ +
+
+ logos row +
+
+ +
+
+ White Imac on light background +
+
+

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 plan plans

+
+ +
+ +
+

THE TEAM

+
+
+ Young men wearing sunglasses +
+

CTO

+

Johnny B Good

+

The brains behind the whole operation

+ +
+
+
+ Younge, sad woman, portrait photo +
+

CEO

+

Roll Over Beethoven

+

The one that puts it all together

+ +
+
+
+ Young men wearing glasses +
+

CFO

+

Chuck Berry

+

The guy with his hand on the wallet

+ +
+
+
+
+ +
+

Download FREE!

+

Take it for a ride for any of your projects!

+ +
+ + +
+ + diff --git a/styles/index.css b/styles/index.css new file mode 100644 index 00000000..105692cb --- /dev/null +++ b/styles/index.css @@ -0,0 +1,467 @@ +body { + font-family: 'Montserrat', serif; +} + +/* Banner */ + +.container { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); +} + +.container__nav { + display: flex; + justify-content: space-between; + align-items: center; + width: 1150px; + padding-top: 35px; +} + +.logo { + max-width: 100px; +} + +.nav { + display: flex; + align-items: center; + gap: 20px; +} + +.nav__link { + text-decoration: none; + color: #ffffff; + font-size: 14px; +} + +.nav__link:hover { + color: #58d5f7; +} + +.btn { + display: flex; + align-items: center; + justify-content: center; + background-color: #0abceb; + border-radius: 10px; + width: 195px; + height: 51px; + transition-duration: 0.4s; + cursor: pointer; +} + +.btn:hover { + background-color: #58d5f7; + color: white; + border-radius: 20px; + box-shadow: -1px 9px 46px -17px rgba(43, 43, 43, 1); +} + +.nav__link--hover:hover { + color: #ffffff; +} + +.hero { + justify-content: flex-start; + align-items: flex-start; + padding-bottom: 150px; + padding-top: 80px; +} + +.left-section__hero { + padding-top: 45px; + width: 560px; +} + +.title { + color: #ffffff; + font-size: 36px; + font-weight: 700; + padding-bottom: 20px; +} + +.description { + line-height: 30px; + font-weight: 400; + font-size: 18px; + color: #ffffff; + padding-bottom: 40px; +} + +.ipad-screen__hero { + background-color: #ffffff; + border: 1px solid #ffffff; + border-width: 15px 15px 80px 15px; + height: 427px; + max-width: 45%; + border-radius: 25px; + transform: rotate(-6deg); +} + +.btn__hero { + background-color: #25f18b; +} + +.btn__hero:hover { + background-color: #6affb4; +} + +/* Feature section */ + +.features__container { + display: flex; + flex-direction: column; + align-items: center; + margin: auto; + padding: 70px 0 90px 0px; + background-color: #000000; +} + +.features__header { + color: #ffffff; + padding-bottom: 70px; + font-weight: 400; + font-size: 30px; +} + +.offer { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + gap: 60px; +} + +.offer__item { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; +} + +.feature__icon { + background-color: white; + border-radius: 50%; + height: 5.625em; + width: 5.625em; + display: flex; + justify-content: center; + align-items: center; +} + +.feature__title { + font-size: 14px; + font-weight: 500; + line-height: 1.1; + margin: 10px 0; + padding: 15px 0; + color: #ffffff; +} + +.feature__description { + font-weight: 300; + font-size: 14px; + color: #ffffff; +} + +/* Logos section */ + +.logos__container { + display: flex; + justify-content: center; + align-items: center; + background-color: #f9fafa; +} + +.logos { + padding: 30px; +} + +/* About */ + +.about__container { + background-color: #ffffff; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); + max-width: 1400px; + margin: auto; + overflow: hidden; +} + +.imac-screen { + padding: 60px 15px 40px 15px; +} + +.about__section-text { + display: flex; + flex-direction: column; + padding: 80px 0 0 100px; + max-width: 500px; +} + +.about__title { + padding-bottom: 35px; + font-weight: 300; + font-size: 30px; + color: #333333; +} + +.about__description { + font-weight: 300; + font-size: 15px; + line-height: 30px; + color: #333333; +} + +/* plan */ + +.plan__container { + background-color: #f8f9f9; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; +} + +.plan__title { + padding-top: 75px; + font-weight: 300; + font-size: 30px; + margin: 20px 0 10px; + color: #333333; +} + +.plan__description { + font-weight: 300; + padding-top: 10px; + margin: 10px 0; + color: #808080; + font-size: 18px; +} + +.plan__cards { + display: flex; + flex-direction: row; + padding: 70px 0 100px; + max-width: 1050px; + margin: auto; + gap: 30px; +} + +.plan__card-item { + display: flex; + justify-content: space-evenly; + flex-direction: column; + max-width: 390px; + margin: auto; + height: 430px; + padding: 30px 40px 25px; +} + +.plan__card-title { + font-size: 18px; + font-weight: 300; +} + +.plan__card-price { + font-size: 45px; + font-weight: 600; +} + +.plan__period { + font-size: 12px; + font-weight: 500; +} + +.plan__list { + display: flex; + flex-direction: column; + gap: 5px; + margin-top: 30px; +} + +.list__item { + font-size: 14px; + color: #333333; +} + +.btn__plan { + margin-top: 60px; +} + +.plan__link--hover:hover { + color: #ffffff; + text-decoration: underline; +} + +.checkmark { + color: #3aeb8c; + margin-right: 5px; +} + +.middle__plan { + background-color: #ffffff; + border: 1px solid #ffffff; + border-radius: 7px; + box-shadow: 5px 8.7px 40px rgba(99, 117, 138, 0.3); +} + +/* The Team */ + +.team__container { + display: flex; + padding: 60px 0 130px; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 60px 0 130px; +} + +.team__title { + padding-bottom: 90px; + font-weight: 300; + font-size: 30px; + margin: 20px 0 10px; +} + +.team__items { + display: flex; + text-align: center; + gap: 50px; +} + +.team-item { + padding: 0 15px 60px; +} + +.team__content { + display: flex; + flex-direction: column; + gap: 20px; + padding-top: 25px; +} + +.team__item-title { + color: #747474; + font-weight: 300; + font-size: 18px; +} + +.team__item-name { + font-weight: 700; + color: #333333; + font-size: 14px; +} + +.team__item-description { + font-weight: 300; + font-size: 14px; +} + +.social-icons__container { + display: flex; + justify-content: center; + align-items: center; + gap: 15px; +} + +/* Email form */ + +.form__container { + display: flex; + flex-direction: column; + background-color: #0abceb; + color: white; + margin: auto; + text-align: center; + padding-top: 25px; + padding-bottom: 40px; +} + +.form__title { + font-weight: 600; + font-size: 24px; + margin: 20px 0 10px; +} + +.form__description { + max-width: 250px; + line-height: 22px; + font-size: 15px; + margin: auto; + font-weight: 300; +} + +.email__form { + display: flex; + justify-content: center; + align-items: center; +} + +.email__input { + background-color: white; + border-radius: 10px; + border: 1px solid #fff; + width: 210px; + height: 51px; + color: #808080; + margin-top: 20px; + border: none; + padding: 6px 12px; +} + +.btn__input { + background-color: #25f18b; + border-radius: 10px; + color: #fff; + height: 51px; + width: 120px; + margin-top: 20px; + margin-left: 3px; + transition-duration: 0.4s; + border: none; + margin-bottom: 0; + font-size: 14px; + font-weight: 400; +} + +/* Footer */ + +.footer__container { + background-color: #464646; + padding-top: 20px; + padding-bottom: 20px; +} + +.content-footer__container { + display: flex; + justify-content: space-between; + align-items: center; + width: 1200px; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; +} + +.footer__info { + display: flex; + justify-content: center; + align-items: center; + margin-left: 40%; +} + +.footer__text { + margin-right: 10px; + font-size: 12px; + color: #ffffff; +} + +.social-icons__footer { + display: flex; + gap: 20px; +} diff --git a/styles/reset.css b/styles/reset.css new file mode 100644 index 00000000..80eeb069 --- /dev/null +++ b/styles/reset.css @@ -0,0 +1,293 @@ +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; +} + +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +img { + max-width: 100%; +} + +ul { + list-style: none; +} /* we'll restore bullets as needed for content */ + +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; +} + +table { + border-collapse: separate; + border-spacing: 0; + text-align: left; +} +th { + font-weight: bold; + vertical-align: bottom; +} +td { + font-weight: normal; + vertical-align: top; +} +td img { + vertical-align: top; +} + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #999; + margin: 1rem 0; + padding: 0; +} + +input, +select { + vertical-align: middle; +} + +pre { + white-space: pre-line; +} + +input[type='radio'] { + vertical-align: text-bottom; +} +input[type='checkbox'] { + vertical-align: bottom; +} + +small { + font-size: 0.8rem; +} + +strong { + font-weight: bold; +} + +sub, +sup { + font-size: 0.8rem; + line-height: 0; + position: relative; +} +sup { + top: -0.5rem; +} +sub { + bottom: -0.25rem; +} + +pre, +code, +kbd, +samp { + font-family: monospace, sans-serif; +} + +label, +input[type='button'], +input[type='submit'], +input[type='file'], +button { + cursor: pointer; +} + +button, +input, +select, +textarea { + margin: 0; +} + +ins { + background-color: var(--highlight-color); + color: #000; + text-decoration: none; +} +mark { + background-color: var(--highlight-color); + color: #000; + font-style: italic; + font-weight: bold; +} + +blockquote { + padding: 2rem; + border-left: 1px solid #333; +} + +.clearfix:after { + content: ''; + display: table; + clear: both; +} /* https://css-tricks.com/snippets/css/clear-fix/ */ + +h1, +h2, +h3, +h4, +h5, +h6 { + text-wrap: balance; +} + +p { + text-wrap: pretty; +} + +@media (prefers-reduced-motion: no-preference) { + :has(:target) { + scroll-behavior: smooth; + } +} + +/* ———— END THE GENERIC RESETS ———— */ + +:root { + --font-system: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', + 'Segoe UI Emoji', 'Segoe UI Symbol'; /* https://css-tricks.com/snippets/css/system-font-stack */ + --text-color: #333; + --featured-color: #03f; + --featured-color-hover: #69f; + --highlight-color: #fcd700; +} + +body { + font-size: 16px; + font-family: var(--font-system); + color: var(--text-color); +} + +a { + color: var(--featured-color); +} +a:hover { + color: var(--featured-color-hover); +} + +@media screen and (max-width: 480px) { +} + +@media print { +}