1 files changed, 184 insertions, 0 deletions
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..6cf4e4e
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,184 @@
+* {
+    box-sizing: border-box;
+}
+
+html {
+    --white: #fbfbfb;
+    --black: #0c0c0c;
+    --gray: #333333;
+    --ligth-gray: #F0F1F5;
+    --green: #1A7320;
+    --font-size-small: 15px;
+    --font-size-normal: 16px;
+    --font-size-large: 17px;
+    --font-size-big-1: 22px;
+    --font-size-big-2: 24px;
+    --font-size-big-3: 32px;
+    --font-size-big-4: 46px;
+    --font-size-big-5: 52px;
+}
+
+a {
+    cursor: pointer;
+}
+
+body {
+    font-family: "Open Sans", sans-serif;
+    line-height: 1.6;
+}
+
+header {
+    border-bottom: 1px solid lightgray;
+}
+
+.icon {
+    width: 40px;
+}
+
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding-top: 0.5rem;
+    color: var(--black);
+}
+
+.nav_logo {
+    width: 120px;
+}
+
+.nav_links {
+    display: flex;
+    list-style: none;
+}
+
+.nav_links li a {
+    color: var(--gray);
+    margin: 0 1rem;
+    text-decoration: none;
+    font-size: 1rem
+}
+
+.nav_links li a:visited {
+    color: var(--gray);
+}
+
+.nav_links li a:hover {
+    text-decoration: underline;
+}
+
+.basic_button {
+    height: 2rem;
+    font-family: "Open Sans", sans-serif;
+    border-radius: 3px;
+    cursor: pointer;
+    padding: 0 10px;
+    margin: 0 .2rem;
+}
+
+.big_button {
+    height: 3rem;
+    width: 15rem;
+    margin-top: 2rem;
+    border-radius: 2rem;
+    font-size: var(--font-size-large);
+    align-self: center;
+    text-transform: uppercase;
+}
+
+.login {
+    color: var(--black);
+    border: 1px solid var(--green);
+    background-color: #fbfbfb;
+}
+
+.sign_up, .big_button {
+    border: none;
+    background-color: var(--green);
+    color: var(--white);
+}
+
+.basic_button:hover {
+    text-decoration: underline;
+}
+
+.banner {
+    margin: 100px 0;
+    text-align: center;
+    color: var(--black);
+}
+
+.banner h1 {
+    font-size: var(--font-size-big-5);
+}
+
+.banner p {
+    font-size: var(--font-size-big-2);
+    margin-top: 8px;
+    margin-bottom: 1px;
+}
+
+.why_papo {
+    background-color: var(--ligth-gray);
+    padding-bottom: 1.2rem;
+}
+
+.why_papo-container {
+    margin-right: auto;
+    margin-left: auto;
+    padding-top: 1rem;
+    padding-bottom: 3rem;
+    max-width: 1200px;
+    display: flex;
+    flex-direction: column;
+}
+
+.why_papo h2 {
+    font-size: var(--font-size-big-3);
+}
+
+.why_papo h3 {
+    font-size: var(--font-size-big-1);
+    margin-top: .5rem;
+}
+
+.why_papo-cards-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding: 1.3rem 0;
+}
+
+.why_papo-card {
+    margin: 0 1rem;
+    width: 30%;
+    padding: 1.5rem;
+    background-color: var(--white);
+    border-radius: 15px;
+    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+}
+
+.features-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.features h2 {
+    font-size: var(--font-size-big-3);
+    margin-bottom: 0;
+}
+
+.features h3 {
+    font-size: 20px;
+    font-weight: 500;
+    margin-top: .5rem;
+}
+
+footer {
+    margin-top: 200px;
+}