goitacademy · CioabaValentin · Aug 25, 2024 · Aug 25, 2024 · Sep 1, 2024 · Sep 1, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,10 +2,10 @@
   "name": "parcel-project-template",
   "version": "2.0.0",
   "description": "",
-  "homepage": "https://goitacademy.github.io/parcel-project-template",
+  "homepage": "https://DutuGabriel.github.io/Team-3-project",
   "scripts": {
     "start": "parcel src/*.html",
-    "build": "parcel build src/*.html --public-url /parcel-project-template/"
+    "build": "parcel build src/*.html --public-url /Team-3-project/"
   },
   "repository": {
     "type": "git",

diff --git a/src/images/rectangle8.jpg b/src/images/rectangle8.jpg
diff --git a/src/images/rectangle9.jpg b/src/images/rectangle9.jpg
diff --git a/src/index.html b/src/index.html
@@ -1,15 +1,22 @@
 <!DOCTYPE html>
-<html lang="ru">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Page title</title>
+    <title>Team 3 Project</title>
     <link rel="stylesheet" href="./sass/index.scss" />
+    <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=Epilogue:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
     <script type="module" src="./index.js"></script>
   </head>
   <body>
-    <h1>Example title</h1>
     <!-- ❗️❗️❗️ Add partials like so for every page -->
-    <include src="./partials/example.html"></include>
+    <include src="./partials/header.html"></include>
+    <include src="./partials/hero.html"></include>
+    <include src="./partials/watches.html"></include>
   </body>
 </html>
diff --git a/src/partials/header.html b/src/partials/header.html
@@ -0,0 +1 @@
+
diff --git a/src/partials/hero.html b/src/partials/hero.html
diff --git a/src/partials/watches.html b/src/partials/watches.html
@@ -0,0 +1,10 @@
+<section class="new-watches">
+  <h6 class="mini-title">New Watches</h6>
+  <div class="paragraph">
+    <h2 class="section-title">Green And Bronze—The Match Made In Heaven</h2>
+    <div class="images">
+      <img class="watches-img" src="/src/images/Rectangle9.jpg" alt="GoIT" />
+      <img class="watches-img" src="/src/images/Rectangle8.jpg" alt="GoIt" />
+    </div>
+  </div>
+</section>
diff --git a/src/sass/header.scss b/src/sass/header.scss
diff --git a/src/sass/hero.scss b/src/sass/hero.scss
@@ -0,0 +1 @@
+
diff --git a/src/sass/index.scss b/src/sass/index.scss
@@ -1,2 +1,48 @@
+/*Project style reset */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  margin: 0;
+}
+
+ul {
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: inherit;
+}
+
+body {
+  font-family: 'Epilogue', sans-serif;
+  background-color: var(--white);
+}
+
+img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+:root {
+  --white: #ffffff;
+  --darkgreen: #1e2827;
+  --black: #141414;
+}
+
+/* End style reset */
+
 @import './common';
 @import './example';
+@import './header.scss';
+@import './hero.scss';
+@import './watches.scss';
diff --git a/src/sass/styles.scss b/src/sass/styles.scss
@@ -0,0 +1,71 @@
+/*Project style reset */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+    margin: 0;
+}
+
+ul {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+}
+
+a {
+    text-decoration: none;
+    font-style: normal;
+}
+
+body {
+    font-family: 'Epilogue', sans-serif;
+    background-color: var(--white);
+}
+
+img {
+    display: block;
+    width: 100%;
+    height: auto;
+}
+
+:root {
+    --white: #ffffff;
+    --darkgreen: #1e2827;
+    --black: #141414;
+}
+
+.section {
+    min-width: 375px;
+    width: 100%;
+}
+
+.container {
+    max-width: 335px;
+    margin: 0 auto;
+}
+
+@media screen and (min-width: 768px) {
+    .section {
+        min-width: 768px;
+    }
+
+    .container {
+        max-width: 704px;
+    }
+}
+
+@media screen and (min-width: 1280px) {
+    .section {
+        min-width: 1280px;
+    }
+
+    .container {
+        max-width: 1176px;
+    }
+}
+
+/* End style reset */
diff --git a/src/sass/watches.scss b/src/sass/watches.scss
@@ -0,0 +1,122 @@
+@import url(styles.scss);
+
+.new-watches{
+    width: 1440px;
+    height: 772px;
+    top: 3230px;
+    left: -1px;
+    padding: 80px 132px 80px 132px;
+    gap: 8px;
+    box-sizing: border-box;
+}
+
+.mini-title{
+    width: 85px;
+    height: 14px;
+    gap: 0px;
+    font-family:Epilogue sans-serif;
+    font-size: 12px;
+    font-weight: 300;
+    line-height: 14px;
+    letter-spacing: 0.06em;
+    text-align: left;
+    color: rgba(20, 20, 20, 0.4);
+    opacity: 40%;
+    display: inline-block;
+}
+
+.section-title{
+    width: 448px;
+    height: 88px;
+    opacity: 0px;
+    font-family: Epilogue sans-serif;
+    font-size: 40px;
+    font-weight: 600;
+    line-height: 44px;
+    letter-spacing: -0.02em;
+    text-align: left;
+    color: #1E2827;
+    display: flex;
+    margin-bottom: 50px;
+}
+
+.images{
+    width: 1176px;
+    height: 422px;
+    //gap: 24px;
+    opacity: 0px;
+}
+.paragraph{
+    width: 1176px;
+    height: 590px;
+    gap: 80px;
+    opacity: 0px;
+    flex-wrap: wrap;
+}
+
+.watches-img{
+    width: 576px;
+    max-height: 422px;
+    gap:24px;
+    display: inline;
+    justify-content: space-around;
+    align-items: center;
+    padding-right :20px;
+}
+
+@media (max-width: 600px) {
+    .section-title {
+        font-size: 32px;
+        font-weight: 600;
+        line-height: 40px;
+        letter-spacing: -0.02em;
+        text-align: left;
+    }
+
+    .watches-img {
+        width: 85%;
+        max-width: 85%;
+        margin-bottom: 10px;
+    }
+
+    .paragraph {
+        flex-direction: column;
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .section-title {
+        font-size: 40px;
+    }
+
+    .new-watches {
+        padding: 60px 40px;
+    }
+
+    .paragraph {
+        justify-content: space-around;
+    }
+
+    .watches-img {
+        max-width: 48%;
+    }
+}
+
+@media screen and (min-width: 1280px) {
+    .section-title {
+        font-size: 40px;
+    }
+
+    .new-watches {
+        padding: 80px 132px;
+    }
+
+    .paragraph {
+        justify-content: center;
+    }
+
+    .watches-img {
+        max-width: 45%;
+    }
+}
+