diff --git a/css/main.css b/css/main.css
new file mode 100644
index 00000000..e30f064c
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,304 @@
+html, body {
+    margin: 0;
+    padding: 0;
+
+    font-family: "Montserrat", sans-serif;
+    color: black;
+    scroll-behavior: smooth;
+}
+a {
+    text-decoration: none;
+}
+.main-container {
+    /* padding: 5px; */
+    /* width: 100%; */
+    /* border: 10px solid green; */
+}
+.header {
+    background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235));
+}
+.container {
+    margin: 0 auto;
+    padding: 5px 0;
+    max-width: 1150px;
+}
+.cta-button {
+    padding: 15px;
+    min-width: 200px;
+    margin-top: 20px;
+    font-weight: bold;
+    font-size: 1.2rem;
+    color: white;
+    background-color: #2ecc71;
+    border: none;
+    border-radius: 6px;
+    transition: background-color 0.4s ease-in-out;
+    cursor: pointer;
+}
+.cta-button:hover {
+    background-color: #27ae60;
+}
+
+
+/* NAV */
+.navbar__container {
+    display: flex;
+    justify-content: space-between;
+    height: 80px;
+}
+.header__logo {
+    padding: 10px 5px 0 5px;
+    width: 130px;
+}
+.nav__items {
+    display: flex;
+    list-style: none;
+    min-width: 80px;
+    padding: 10px;
+}
+.nav__links {
+    margin-left: 25px;
+    color: white;
+    font-weight: bold;
+    letter-spacing: 1px;
+}
+.nav__link {
+    color: white;
+}
+/* END OF NAV */
+
+
+/* HERO */
+.hero {
+    display: flex;
+    justify-content: center;
+    height: calc(100vh - 100px);
+}
+.hero__info {
+    margin: 0 10px;
+}
+.hero__header {
+    margin-top: 160px;
+    font-size: 2rem;
+    color: white;
+}
+.hero__sub-header {
+    font-size: 1.2rem;
+    line-height: 30px;
+    color: white;
+}
+.hero__image {
+    position: relative;
+    flex-basis: 60%;
+}
+.hero__image-container {
+    position: absolute;
+    left: 20px;
+    top: 80px;
+    border: 20px solid white;
+    border-bottom: 70px solid white;
+    rotate: -6deg;
+    width: 90%;
+    height: 400px;
+    border-radius: 20px;
+    background-color: white;
+    background-image: url(../images/screen.png);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+/* END OF HERO */
+
+/*  FEATURES */
+.features {
+    background-color: black;
+}
+.features__heading {
+    padding: 30px 0;
+    color: white;
+    text-align: center;
+    font-weight: 300;
+}
+.features__content {
+    display: flex;
+    justify-content: center;
+}
+.feature {
+    margin: 10px 5px;
+    padding: 40px 10px 100px 10px;
+    width: 240px;
+    text-align: center;
+    color: white;
+}
+.icon__container {
+    margin: 0 auto;
+    width: 40px;
+    background-color: white;
+    padding: 20px;
+    border-radius: 50%;
+}
+/* END OF FEATURES */
+
+
+/* LOGOS */
+.logos {
+    background-color: #ecf0f1;
+}
+.logos__images-container {
+    margin: 0 auto;
+    width: 60%;
+    height: 80px;
+    background-image: url(../images/logos.png);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+/* END OF LOGOS */
+
+
+/* ABOUT */
+.about {
+    display: flex;
+}
+.about__image {
+    margin: 10px;
+    padding: 20px 20px 40px 20px;
+    flex-basis: 55%;
+}
+.about__image-container {
+    margin: 0 auto;
+    width: 90%;
+    height: 600px;
+    background-image: url(../images/imac.png);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+.about__info {
+    margin: 10px;
+    padding: 40px 80px 40px 40px;
+    flex-basis: 45%;
+}
+.about__header {
+    text-transform: uppercase;
+    font-weight: 300;
+}
+.about__sub-header {
+    margin: 40px 340px 0 0;
+    line-height: 32px;
+}
+/* END OF ABOUT */
+
+
+/* OFFER */
+.offer {
+    background-color: #ecf0f1;
+}
+.offer__heading {
+    text-align: center;
+    padding: 30px 0 10px 0;
+}
+.offer__header {
+    font-weight: 300;
+}
+.offer__sub-header {
+    color: rgba(0, 0, 0, 0.4);
+}
+.offer__plans {
+    display: flex;
+    justify-content: center;
+}
+.offer__card {
+    position: relative;
+    padding: 10px 20px;
+    margin: 40px 10px;
+    width: 250px;
+    text-align: center;
+    transition: box-shadow 0.3s ease-in-out;
+}
+.offer__card--shadow:hover {
+    box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.3);
+    border-radius: 12px;
+    background-color: white;
+}
+.offer__name {
+    font-weight: 300;
+    text-transform: uppercase;
+    color: rgba(0, 0, 0, 0.4);
+}
+.price {
+    font-size: 2.4rem;
+    line-height: 0;
+}
+.term {
+    font-size: 0.6rem;
+}
+.offer__details {
+    margin-top: 35px;
+    margin-bottom: 120px;
+    line-height: 26px;
+}
+.cta-button--offer {
+    position: absolute;
+    bottom: 5%;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 15px;
+    min-width: 160px;
+    margin-top: 60px;
+    color: white;
+    background-color: #3498db;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background-color 0.4s ease-in-out ;
+}
+.cta-button--offer:hover {
+    background-color: #2980b9;
+}
+/* END OF OFFER */
+
+
+/* TEAM */
+.team__heading {
+    font-weight: 300;
+    text-align: center;
+    padding: 40px 0;
+}
+.team__members {
+    display: flex;
+    justify-content: center;
+}
+.member {
+    margin: 40px 5px;
+    width: 280px;
+    text-align: center;
+}
+.member__title {
+    font-weight: 300;
+}
+.member__name {
+    font-weight: bold;
+}
+.social__icons {
+    margin-bottom: 80px;
+}
+/* END OF TEAM */
+
+
+/* FOOTER */
+.footer {
+    background-color: black;
+}
+.copyright {
+    position: relative;
+    color: white;
+    text-align: center;
+    padding: 30px;
+}
+.copyright__logo {
+    position: absolute;
+    padding: 5px;
+    bottom: 15px;
+}
+/* END PF FOOTER */
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..73b350a1
--- /dev/null
+++ b/index.html
@@ -0,0 +1,340 @@
+<!DOCTYPE html>
+<html lang="pl">
+
+<head>
+    <meta charset="UTF-8">
+    <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1.0"
+    >
+    <title>Projekt-01</title>
+
+
+    <link
+        rel="preconnect"
+        href="https://fonts.googleapis.com"
+    >
+    <link
+        rel="preconnect"
+        href="https://fonts.gstatic.com"
+        crossorigin
+    >
+    <link
+        href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
+        rel="stylesheet"
+    >
+    <!-- <link
+        rel="stylesheet"
+        href="./css/reset.css"
+    > -->
+    <link
+        rel="stylesheet"
+        href="./css/main.css"
+    >
+
+</head>
+
+<body>
+
+    <header class="header main-container">
+        <div
+            class="navbar__container container"
+            id="nav"
+        >
+            <img
+                class="header__logo"
+                src="./images/logo.svg"
+                alt="header-logo-nova"
+            >
+            <nav class="nav">
+                <ul class="nav__items">
+                    <li class="nav__links"><a
+                            class="nav__link"
+                            href="#team"
+                        >The Team</a></li>
+                    <li class="nav__links"><a
+                            class="nav__link"
+                            href="#offer"
+                        >Pricing</a></li>
+                    <li class="nav__links"><a
+                            class="nav__link"
+                            href="#features"
+                        >Features</a></li>
+                </ul>
+            </nav>
+        </div>
+
+        <section class="hero container">
+            <div class="hero__info">
+                <h1 class="hero__header">Beautiful Free Nova template</h1>
+                <p class="hero__sub-header">A top notch premium quality <br> template for your next <br> project.</p>
+                <button class="cta-button">Download FREE</button>
+            </div>
+            <div class="hero__image">
+                <div class="hero__image-container">
+
+                </div>
+            </div>
+        </section>
+    </header>
+    <main>
+
+        <section
+            class="features main-container"
+            id="features"
+        >
+            <h2 class="features__heading container">Features</h2>
+            <div class="features__content container">
+                <div class="feature">
+                    <div class="icon__container">
+                        <img
+                            class="feature__icon"
+                            src="./images/responsive.svg"
+                            alt="mobile-phone"
+                        >
+                    </div>
+                    <h4>Fully responsive</h4>
+                    <p>Looks amazing on any device, smartphone, tablet, laptop and desktop.</p>
+                </div>
+                <div class="feature">
+                    <div class="icon__container">
+                        <img
+                            class="feature__icon"
+                            src="./images/customizable.svg"
+                            alt="tools"
+                        >
+                    </div>
+                    <h4>Customizable</h4>
+                    <p>Change the colors, pictures or any of the sections to suit your needs.</p>
+                </div>
+                <div class="feature">
+                    <div class="icon__container">
+                        <img
+                            class="feature__icon"
+                            src="./images/design.svg"
+                            alt="certificate"
+                        >
+                    </div>
+                    <h4>Slick and beautiful design</h4>
+                    <p>Trendy and fresh design, fits any website.</p>
+                </div>
+            </div>
+
+        </section>
+
+        <section class="logos main-container">
+            <div class="logos__images container">
+                <div class="logos__images-container">
+
+                </div>
+            </div>
+
+        </section>
+
+        <section class="about main-container">
+            <div class="about__image">
+                <div class="about__image-container">
+
+                </div>
+            </div>
+            <div class="about__info">
+                <h1 class="about__header">Simple and beautiful</h1>
+                <p class="about__sub-header">
+                    Use Nova theme for your next project. It is completely customizable so you
+                    can change any of the section to fit your needs. Nova Theme is Free for any kind of use, personal
+                    and commercial. Have fun and good luck!
+                </p>
+            </div>
+
+        </section>
+
+        <section
+            id="offer"
+            class="offer main-container"
+        >
+            <div class="offer__heading container">
+                <h2 class="offer__header">Choose your pricing plan</h2>
+                <p class="offer__sub-header">Pick any our super affordable pricing plans</p>
+            </div>
+            <div class="offer__plans container">
+                <div class="offer__card offer__card--shadow">
+                    <h4 class="offer__name">Basic</h4>
+                    <div class="offer__price">
+                        <h2 class="price">$15</h2>
+                        <p class="term">per month</p>
+                    </div>
+                    <p class="offer__details">
+                        Up to 7 Projects <br>
+                        2 Additional Developers
+                    </p>
+                    <button class="cta-button--offer">Get started!</button>
+                </div>
+                <div class="offer__card offer__card--shadow">
+                    <h4 class="offer__name">Agancy</h4>
+                    <div class="offer__price">
+                        <h2 class="price">$55</h2>
+                        <p class="term">per month</p>
+                    </div>
+                    <p class="offer__details">
+                        Up to 25 Projects <br>
+                        2 Additional Developers <br>
+                        Unlimited Support
+                    </p>
+                    <button class="cta-button--offer">Get started!</button>
+                </div>
+                <div class="offer__card offer__card--shadow">
+                    <h4 class="offer__name">Pro</h4>
+                    <div class="offer__price">
+                        <h2 class="price">$75</h2>
+                        <p class="term">per month</p>
+                    </div>
+                    <p class="offer__details">
+                        Up to 25 Projects <br>
+                        2 Additional Developers <br>
+                        Unlimited Support <br>
+                        1.5GB Disk Space
+                    </p>
+                    <button class="cta-button--offer">Get started!</button>
+                </div>
+            </div>
+
+        </section>
+
+        <section
+            id="team"
+            class="team main-container"
+        >
+            <h2 class="team__heading container">The team</h2>
+            <div class="team__members container">
+                <div class="member">
+                    <figure class="member__details">
+                        <img
+                            src="./images/cto.png"
+                            alt=""
+                            class="member__avatar"
+                        >
+                        <figcaption>
+                            <h4 class="member__title">CTO</h4>
+                            <p class="member__name">Johnny B Good</p>
+                            <p class="member__description">The brains behind the whole operation</p>
+                        </figcaption>
+                        <div class="social__icons">
+                            <a
+                                href=""
+                                class="icon__link"
+                            >
+                                <img
+                                    src="./images/team-twitter.svg"
+                                    alt="tweeter"
+                                    class="tweeter__icon"
+                                >
+                            </a>
+                            <a
+                                href=""
+                                class="icon__link"
+                            >
+                                <img
+                                    src="./images/team-facebook.svg"
+                                    alt="tweeter"
+                                    class="tweeter__icon"
+                                >
+                            </a>
+                        </div>
+                    </figure>
+                </div>
+                <div class="member">
+                    <figure class="member__details">
+                        <img
+                            src="./images/ceo.png"
+                            alt=""
+                            class="member__avatar"
+                        >
+                        <figcaption>
+                            <h4 class="member__title">CEO</h4>
+                            <p class="member__name">Roll Over Beethoven</p>
+                            <p class="member__description">The one that puts it all together</p>
+                        </figcaption>
+                        <div class="social__icons">
+                            <a
+                                href=""
+                                class="icon__link"
+                            >
+                                <img
+                                    src="./images/team-twitter.svg"
+                                    alt="tweeter"
+                                    class="tweeter__icon"
+                                >
+                            </a>
+                            <a
+                                href=""
+                                class="icon__link"
+                            >
+                                <img
+                                    src="./images/team-facebook.svg"
+                                    alt="tweeter"
+                                    class="tweeter__icon"
+                                >
+                            </a>
+                        </div>
+                    </figure>
+                </div>
+                <div class="member">
+                    <figure class="member__details">
+                        <img
+                            src="./images/cfo.png"
+                            alt=""
+                            class="member__avatar"
+                        >
+                        <figcaption>
+                            <h4 class="member__title">CFO</h4>
+                            <p class="member__name">Chuck Berry</p>
+                            <p class="member__description">The guy with his hand on the wallet</p>
+                        </figcaption>
+                        <div class="social__icons">
+                            <a
+                                href=""
+                                class="icon__link"
+                            >
+                                <img
+                                    src="./images/team-twitter.svg"
+                                    alt="tweeter"
+                                    class="tweeter__icon"
+                                >
+                            </a>
+                            <a
+                                href=""
+                                class="icon__link"
+                            >
+                                <img
+                                    src="./images/team-facebook.svg"
+                                    alt="tweeter"
+                                    class="tweeter__icon"
+                                >
+                            </a>
+                        </div>
+                    </figure>
+                </div>
+
+            </div>
+        </section>
+
+    </main>
+
+    <footer class="footer main-container">
+        <section class="copyright">
+            A free template by <a
+                href="https://themewagon.com/themes/project-app-showasing-onepage-bootstrap-template-free-nova/"
+            >
+                <img
+                    class="copyright__logo"
+                    src="./images/webscope.svg"
+                    alt="webscope"
+                >
+            </a>
+        </section>
+    </footer>
+
+
+</body>
+
+</html>
\ No newline at end of file