Merge pull request #9 from LesiaUKR/privacy

Privacy
LesiaUKR · Aug 23, 2024 · 97e3ee0 · 97e3ee0
2 parents e29dc9b + dee9f95
commit 97e3ee0
Show file tree

Hide file tree

Showing 7 changed files with 201 additions and 7 deletions.
diff --git a/src/index.html b/src/index.html
@@ -14,9 +14,7 @@
     <link rel="stylesheet" href="./scss/styles.scss" />
   </head>
   <body>
-    <header>
-      <load src="./partials/header.html" />
-    </header>
+    <load src="./partials/header.html" />
 
     <main>
       <load src="./partials/home.html" />

diff --git a/src/privacy-policy.html b/src/privacy-policy.html
@@ -6,21 +6,137 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Privacy policy</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/2.0.0/modern-normalize.min.css"
+    />
     <link rel="stylesheet" href="./scss/styles.scss" />
   </head>
   <body>
     <header>
       <load src="./partials/header.html" />
     </header>
     <main>
-      <section>
-        <a href="./index.html">Go to home</a>
-        <h1>Welcome to page Privacy policy</h1>
-      </section>
+      <div class="privacy-wrapper">
+        <div class="container">
+          <h1 class="privacy-title" text="Privacy Policy">Privacy Policy</h1>
+          <p class="privacy-description">
+            This privacy policy will explain how our organization uses the
+            personal data we collect from you when you use our website.
+            Starluckyventures.com is a free online gaming platform where the
+            gamer can play and win without any risks. It is a simple portal to
+            access social games for free and play with your friends. Remember
+            that winning at these games does not mean you will have any future
+            winnings. It is crucial that you remember this since your luck will
+            differ depending on many factors. Have fun and Play as much as you
+            like.
+          </p>
+          <section class="privacy-section marketing-section">
+            <h2 class="privacy-subtitle" text="Marketing">Marketing</h2>
+            <p class="privacy-text">
+              You have the right at any time to stop Starluckyventures.com
+              contacting you for marketing purposes.
+            </p>
+            <p class="privacy-text">
+              Starluckyventures.com would like to send you information about
+              products and services of ours that we think you might like, as
+              well as those of our partner companies.
+            </p>
+            <p class="privacy-text">
+              If you have agreed to receive marketing, you may always opt out at
+              a later date.
+            </p>
+            <p class="privacy-text">
+              If you no longer wish to be contacted for marketing purposes,
+              please contact us.
+            </p>
+          </section>
+          <section class="privacy-section">
+            <h2
+              class="privacy-subtitle"
+              text="What are your data protection rights?"
+            >
+              What are your data protection rights?
+            </h2>
+            <p class="privacy-text">
+              Starluckyventures.com would like to make sure you are fully aware
+              of all of your data protection rights. Every user is entitled to
+              the following:
+            </p>
+
+            <ul>
+              <li class="privacy-item">
+                <p>
+                  <span class="privacy-text-accent">The right to access </span>
+                  – You have the right to request Starluckyventures.com for
+                  copies of your personal data.
+                </p>
+              </li>
+              <li class="privacy-item">
+                <p>
+                  <span class="privacy-text-accent"
+                    >The right to rectification</span
+                  >
+                  – You have the right to request that Starluckyventures.com
+                  correct any information you believe is inaccurate. You also
+                  have the right to request us to complete the information you
+                  believe is incomplete.
+                </p>
+              </li>
+              <li class="privacy-item">
+                <p>
+                  <span class="privacy-text-accent">The right to erasure</span>
+                  – You have the right to request that Starluckyventures.com
+                  erase your personal data, under certain conditions.
+                </p>
+              </li>
+              <li class="privacy-item">
+                <p>
+                  <span class="privacy-text-accent"
+                    >The right to restrict processing</span
+                  >
+                  – You have the right to request that Starluckyventures.com
+                  restrict the processing of your personal data, under certain
+                  conditions.
+                </p>
+              </li>
+              <li class="privacy-item">
+                <p>
+                  <span class="privacy-text-accent"
+                    >The right to object to processing</span
+                  >
+                  – You have the right to object to Starluckyventures.com
+                  processing of your personal data, under certain conditions.
+                </p>
+              </li>
+              <li class="privacy-item">
+                <p>
+                  <span class="privacy-text-accent"
+                    >The right to data portability</span
+                  >
+                  – You have the right to request that Starluckyventures.com
+                  transfer the data that we have collected to another
+                  organization, or directly to you, under certain conditions.
+                </p>
+              </li>
+            </ul>
+          </section>
+          <section class="privacy-section">
+            <h2 class="privacy-subtitle" text="Changes to our privacy policy">
+              Changes to our privacy policy
+            </h2>
+            <p>
+              Starluckyventures.com keeps its privacy policy under regular
+              review and places any updates on this web page.
+            </p>
+          </section>
+        </div>
+      </div>
     </main>
     <footer class="container">
       <load src="./partials/footer.html" />
     </footer>
     <script type="module" src="./js/removeMainPageClass.js"></script>
+    <script type="module" src="./main.js"></script>
   </body>
 </html>
diff --git a/src/scss/common/_mixins.scss b/src/scss/common/_mixins.scss
@@ -29,3 +29,28 @@ screen types:
 
   line-height: math.div(math.round($result * 100), 100);
 }
+
+@mixin title($_fmin, $_fmax, $_ls, $_text) {
+  @include font($_fmin, $_fmax);
+
+  position: relative;
+  font-family: $second_font_family;
+  letter-spacing: #{$_ls}px;
+  background: var(
+    --orange-gradient,
+    linear-gradient(180deg, $_accent_color 0%, $_yellow_color 100%)
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  &::after {
+    content: $_text;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: -1;
+    text-shadow: -4px 4px 0px $_brown_shadow-color, 1px 1px 0 $_brown_color,
+      -1px 1px 0 $_brown_color, -1px -1px 0 $_brown_color,
+      1px -1px 0 $_brown_color;
+  }
+}
diff --git a/src/scss/common/_reset.scss b/src/scss/common/_reset.scss
@@ -8,6 +8,7 @@ html {
 *::before,
 *::after {
   box-sizing: inherit;
+  // outline: 1px solid red;
 }
 
 body {

diff --git a/src/scss/common/_vars.scss b/src/scss/common/_vars.scss
@@ -4,6 +4,7 @@ $_main_bg_color: #7554e5;
 $_accent_color: #f7cf6e;
 $_yellow_color: #f9e294;
 $_brown_color: #915518;
+$_brown_shadow-color: #7e3f20;
 
 // змінні для шрифтів
 $font_family: 'Signika Negative', sans-serif;

diff --git a/src/scss/privacy.scss b/src/scss/privacy.scss
@@ -0,0 +1,48 @@
+.privacy-wrapper {
+  padding: 36px 0 64px;
+  font-feature-settings: 'liga' off;
+  @include media(desktop) {
+    padding: 64px 0 151px;
+    @include font(24, 30);
+  }
+}
+
+.privacy-title {
+  @include title(28, 39, 1.12, attr(text));
+  margin-bottom: 36px;
+  @include media(desktop) {
+    @include title(48, 66, 1.92, attr(text));
+  }
+}
+
+.privacy-subtitle {
+  @include title(24, 33, 0.96, attr(text));
+  margin-bottom: 20px;
+  @include media(desktop) {
+    @include title(32, 44, 1.28, attr(text));
+    margin-bottom: 36px;
+  }
+}
+.privacy-description {
+  margin-bottom: 36px;
+  @include media(desktop) {
+    margin-bottom: 56px;
+  }
+}
+.privacy-section {
+  padding: 18px 0px;
+  &.marketing-section {
+    padding-top: 0px;
+  }
+  @include media(desktop) {
+    padding: 28px 0;
+  }
+}
+
+.privacy-item:not(:last-child),
+.privacy-text:not(:last-child) {
+  margin-bottom: 16px;
+}
+.privacy-text-accent {
+  color: $_yellow_color;
+}
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
@@ -8,6 +8,7 @@
 @import './benefits.scss';
 @import './gallery.scss';
 @import './footer.scss';
+@import './privacy.scss';
 
 :root {
   font-family: $font-family;
@@ -30,6 +31,10 @@
   margin: 0 auto;
   padding: 0 16px;
 
+  @include media(mobile) {
+    max-width: 320px;
+  }
+
   @include media(desktop) {
     max-width: 1440px;
     padding: 0 72px;