From 7fc25cd24d8b45bdf5c8d643161d71c0183bc7f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Be=C5=82z?= Date: Sun, 4 Aug 2024 17:51:39 +0000 Subject: [PATCH 1/2] Initial Commit --- index.html | 194 +++++++++++++++++++++++++++++ reset.css | 89 +++++++++++++ styles.css | 360 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 643 insertions(+) create mode 100644 index.html create mode 100644 reset.css create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 00000000..8e6942e9 --- /dev/null +++ b/index.html @@ -0,0 +1,194 @@ + + + + + + Document + + + + +
+
+
+ +
+ +
+
+
+

Beautiful Free Nova
template

+

A top notch premium quality
template for your next web
project

+ +
+
+ graphic with zmockup +
+
+
+ +
+
+

FEATURES

+
+
+
+
+ Icon of phone +
+

FULLY RESPONSIVE

+

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

+
+
+
+ Icon of phone +
+

CUSTOMIZABLE

+

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

+
+
+
+ Icon of phone +
+

SLICK AND BEAUTIFUL
DESIGN

+

Trendy and fresh design, fits any website.

+
+
+
+ +
+
+ vertical list of supported brands +
+
+ + + +
+
+

CHOOSE YOUR PRICING PLAN

+

Pick any of our super affordable pricings

+
+
+
+

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 7 Projects
+ 2 Additional Developers
+ Unlimited Support
+ 1.5GB Disk Space +

+ +
+
+
+ +
+
+

THE TEAM

+
+
+
+ picture of cto +

CTO

+

Johnny B Good

+

The brain behind the whole operation

+ + +
+ +
+ picture of cto +

CEO

+

Roll Over Beethoven

+

The one that puts it all together

+ + +
+
+ picture of cto +

CFO

+

Johnny B Good

+

The guy with his hand on the wallet

+ + +
+
+
+ + + + \ No newline at end of file diff --git a/reset.css b/reset.css new file mode 100644 index 00000000..4f6eb3cb --- /dev/null +++ b/reset.css @@ -0,0 +1,89 @@ +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: .8rem;} + +strong {font-weight: bold;} + +sub, sup {font-size: .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 { + +} diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..4263f760 --- /dev/null +++ b/styles.css @@ -0,0 +1,360 @@ + + +/* GENERAL ---------------------------------------------------------------------*/ + +@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); + +* { + font-family: "Montserrat"; +} + +.btn { + padding: 15px 35px; + border: none; + border-radius: 8px ; + color: white; + font-weight: 600; + background-color: #25F18B; + cursor: pointer; +} + +/* Main --------------------------------------------------------------------- Main*/ + +.Main { + background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235)); +} + +.Main__header { + display: flex; + justify-content: space-between; + align-items: center; + margin: auto; + max-width: 1150px; +} + +.Main__header_box_logo { + width: 100px; +} + +.Main__header__menu { + display: flex; + padding: 40px 0; + margin-bottom: 35px; +} + +.Main__header__menu__item { + margin-left: 45px; + font-weight: 600; +} + +.Main__header__menu__item__link { + text-decoration: none; + color: white; +} + +.Main__content { + display: flex; + justify-content: space-between; + max-width: 1150px; + margin: auto; +} + +.Main__content__left { + color: white; + flex-direction: column; + margin-bottom: 200px; +} + +.Main__content__left__title { + font-size: 34px; + font-weight: 700; + margin: 50px 0 25px; + line-height: 1; +} + +.Main__content__left__text { + font-weight: 200; + line-height: 1.6; + margin: 0 0 25px 0; +} + +.Main__content__right { + text-align: center; + min-width: 700px; +} + +.Main__content__right_img { + width: 550px; + transform: rotate(-4deg); + margin: 10px; +} + +/* Features --------------------------------------------------------------------- Features */ + +.Features { + background-color: black; + color: white; + padding: 5px 0 5px; +} + +.Features__header { + margin: auto; + max-width: 1150px; + text-align: center; + padding: 40px 0 50px; + + /* border: 3px solid deepskyblue ; */ +} + +.Features__header__title { + font-size: 24px; + font-weight: 300; +} + +.Features__header__box { + display: flex; + max-width: 1150px; + margin: 5px auto 5px; + padding: 0 120px 0; + + /* border: 3px solid deepskyblue ; */ +} + +.Features__header__box__card { + text-align: center; + display: flex; + flex-direction: column; + padding: 10px 10px 100px; + width: 33.3333%; + margin: 10px; + + /* border: 3px solid yellow; */ +} + +.Features__header__box_card__bg { + background-color: rgb(255, 255, 255); + margin: 10px auto 30px; + border-radius: 100%; + min-width: 90px ; + min-height: 90px; + display: flex; +} + +.Features__header__box__card__bg__img { + margin: auto; + align-items: center; +} + +.Features__header__box__card__title { + font-weight: 500; + margin-bottom: 20px; +} + +.Features__header__box__card__text { + font-weight: 200; + line-height: 1.3; +} + +/* Brands --------------------------------------------------------------------- Brands */ + +.Brands { + /* border: 2px solid green; */ +} + +.Brands__box { + margin: auto; + max-width: 1150px; + text-align: center; + padding: 30px 0 30px; + + /* border: 3px solid deepskyblue ; */ +} + +/* Advert --------------------------------------------------------------------- Advert */ + +.Advert { + display: flex; + justify-content: center; + + /* border: 3px solid green; */ +} + +.Advert__card { + padding: 20px; + margin: 10px; + + /* border: 3px solid orange; */ +} + +.Advert__card__img { + max-width: 550px; +} + +.Advert__card__title { + font-size: 24px; + margin: 30px 0 45px; +} + +.Advert__card__text { + line-height: 1.6; +} + +/* Price --------------------------------------------------------------------- Price */ + +.Price { + /* border: 3px solid green; */ +} + +.Price__header { + text-align: center; + max-width: 1150px; + margin: 5px auto 5px; + + /* border: 3px solid deepskyblue */ +} + +.Price__header__title { + font-size: 24px; + margin: 35px 0 15px; +} + +.Price__header__text { + margin-bottom: 10px; +} + +.Price__box{ + display: flex; + max-width: 1150px; + margin: auto; + padding: 40px 90px 60px ; + + /* border: 3px solid deepskyblue */ +} + +.Price__box__card { + cursor: pointer; + display: flex; + flex-direction: column; + align-items: center; + width: 33.3333%; + margin: 10px; + text-align: center; + min-height: 430px; + position: relative; + + /* border: 3px solid orange; */ +} + +.Price__box__card:hover { + box-shadow: 0 0 40px 3px rgba(0,0,0,0.1) ; + scale: 1.04; +} + +.Price__box__card__title { + font-size: 18px; + margin: 50px 0 10px; +} + +.Price__box__card__price { + font-size: 36px; + font-weight: 700; + margin: 0 0 5px; +} + +.Price__box__card__month { + font-size: 12px; + margin: 0 0 40px; +} + +.Price__box__card__text { + font-weight: 600; + line-height: 1.5; +} + +.Price__box__card__btn { + background-color: #0ABCEB; + position: absolute; + bottom: 40px; +} + +/* Team --------------------------------------------------------------------- Team */ + +.Team { + /* border: 3px solid green; */ +} + +.Team__header { + text-align: center; + max-width: 1150px; + margin: 5px auto 5px; + + /* border: 3px solid deepskyblue */ +} + +.Team__header__title { + font-size: 27px; + margin: 50px 0 50px ; +} + +.Team__box { + max-width: 1150px; + margin: auto; + display: flex; + padding: 40px 90px 30px ; + + /* border: 3px solid deepskyblue; */ +} + +.Team__box__card { + margin: auto; + display: flex; + flex-direction: column; + align-items: center; + + /* border: 3px solid orange; */ +} + +.Team__box__card__img { + margin: 10px 0 30px; +} + +.Team__box__card__title { + font-size: 18px; + font-weight: 300; +} + +.Team__box__card__name { + font-weight: 600; + margin: 0 0 10px; +} + +.Team__box__card__text { + margin: 0 0 10px; +} + +.Team__box__card__social { + display: flex; + margin-bottom: 140px; +} + +.Team__box__card__social__link { + margin: 0 10px 0; +} + +/* Team --------------------------------------------------------------------- Team */ + +.Footer { + background-color: #464646 ; + display: flex; + justify-content: center; + align-items: center; + padding: 15px 0 15px; +} + +.Footer__text { + color: white; + font-size: 8px; + font-weight: 700; + margin-right: 10px; +} + From ba25bfeea0fd6255126bc802cc3d0f21429a0066 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Be=C5=82z?= Date: Sun, 4 Aug 2024 18:11:51 +0000 Subject: [PATCH 2/2] details fix --- styles.css | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/styles.css b/styles.css index 4263f760..c1098314 100644 --- a/styles.css +++ b/styles.css @@ -87,6 +87,9 @@ width: 550px; transform: rotate(-4deg); margin: 10px; + border: 20px solid white; + border-radius: 30px; + background-color: white ; } /* Features --------------------------------------------------------------------- Features */ @@ -208,7 +211,7 @@ .Price__header { text-align: center; max-width: 1150px; - margin: 5px auto 5px; + margin: 90px auto 5px; /* border: 3px solid deepskyblue */ } @@ -248,6 +251,7 @@ .Price__box__card:hover { box-shadow: 0 0 40px 3px rgba(0,0,0,0.1) ; scale: 1.04; + border-radius: 5px; } .Price__box__card__title { @@ -300,7 +304,7 @@ max-width: 1150px; margin: auto; display: flex; - padding: 40px 90px 30px ; + padding: 40px 60px 30px ; /* border: 3px solid deepskyblue; */ } @@ -341,7 +345,7 @@ margin: 0 10px 0; } -/* Team --------------------------------------------------------------------- Team */ +/* Footer --------------------------------------------------------------------- Footer */ .Footer { background-color: #464646 ; @@ -353,7 +357,7 @@ .Footer__text { color: white; - font-size: 8px; + font-size: 10px; font-weight: 700; margin-right: 10px; }