chalenge_02 folder added

7ceba204 · Voislav Stojkoski · 3669424b · 7ceba204 · 7ceba204 · 7ceba204
Commit 7ceba204 authored 1 year ago by Voislav Stojkoski
Hide whitespace changes
Inline Side-by-side

Showing

with 697 additions and 0 deletions
+697 -0
--- a/cha- 2 cars/Cars/index.html
+++ b/cha- 2 cars/Cars/index.html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="resources/css/style.css" type="text/css" />
+  <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+    integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <title>Cars</title>
+</head>
+
+<body>
+  <!-- Header -->
+  <header>
+    <nav>
+      <div class="row">
+        <div class="logo__box">
+          <a href="#" class="logo__text">Landed</a>
+        </div>
+        <ul class="main__nav">
+          <li><a href="#">Home</a></li>
+          <li><a href="#">Layouts</a></li>
+          <li><a href="#">Elements</a></li>
+          <li><a href="#">Sign Up</a></li>
+        </ul>
+      </div>
+    </nav>
+    <div class="primary__text-box">
+      <h1 class="primary__heading">
+        <span class="primary__heading--main">The future has landed</span>
+        <span class="primary__heading--sub">And there are no hoverboards or flying cars.</span>
+        <span class="primary__heading--sub">Just apps.Lots of mother flipping apps.</span>
+      </h1>
+    </div>
+
+    <div class="header__icon-box">
+      <i class="fas fa-chevron-down header-down"></i>
+    </div>
+  </header>
+
+  <main>
+    <!-- CARS -section -->
+    <section class="blue__car">
+      <div class="overlay">
+        <div class="blue__car-wrapper">
+          <div class="blue__car-content">
+            <div class="col-1-of-blue">
+              <h2>Lorem ipsum dolor sit amet amet amet uhuhu.</h2>
+              <p>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. At,
+                necessitatibus.
+              </p>
+            </div>
+            <div class="col-2-of-blue">
+              <p>
+                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+                Quos, fugiat totam quam omnis aperiam tenetur, labore autem
+                doloremque dolore, praesentium maiores dolores. Laborum
+                dolorem itaque quibusdam, sapiente maiores ad dolorsapiente
+                maiores ad dolor.sapiente maiores ad dolor
+              </p>
+            </div>
+            <div class="col-3-of-blue">
+              <p>
+                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nisi
+                quaerat veritatis beatae blanditiis est ut neque fuga
+                repellat, reprehenderit ad officiis maiores, ex voluptatibus
+                cumque quibusdam ab voluptatem odio quae sapiente maiores ad
+                dolor sapiente maiores ad dolor!
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="red__car">
+      <div class="overlay">
+        <div class="red__car-wrapper">
+          <div class="red__car-content">
+            <h2>Lorem ipsum dolor sit amet amet amet uhuhu.</h2>
+            <h3>Lorem ipsum dolor,</h3>
+            <p>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nisi
+              quaerat veritatis beatae blanditiis est ut neque fuga repellat,
+              reprehenderit ad officiis maiores, ex voluptatibus cumque
+              quibusdam ab voluptatem odio quae sapiente maiores ad dolor
+              sapiente maiores ad dolor!
+            </p>
+            <buton class="btn__outline">Learn More</buton>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="pink__car">
+      <div class="overlay">
+        <div class="pink__car-wrapper">
+          <div class="pink__car-content">
+            <h2>Lorem ipsum dolor sit amet amet amet uhuhu.</h2>
+            <h3>Lorem ipsum dolor,</h3>
+            <p>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nisi
+              quaerat veritatis beatae blanditiis est ut neque fuga repellat,
+              reprehenderit ad officiis maiores, ex voluptatibus cumque
+              quibusdam ab voluptatem odio quae sapiente maiores ad dolor
+              sapiente maiores ad dolor!
+            </p>
+            <buton class="btn__outline">Learn More</buton>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Icon section -->
+    <section class="section__icons">
+      <div class="secondary__heading">
+        <h2 class="text_center">
+          Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+        </h2>
+        <h3 class="text_center">
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error
+          laudantium temporibus commodi!
+        </h3>
+      </div>
+
+      <div class="row">
+        <div class="col col-1-of-3">
+          <div class="round-wrap">
+            <i class="fas fa-chalkboard-teacher round__icon"></i>
+          </div>
+          <h3 class="text_center">Lorem ipsum dolor,</h3>
+          <p class="text_center">
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo
+            earum laborue.
+          </p>
+        </div>
+        <div class="col col-1-of-3">
+          <div class="round-wrap">
+            <i class="fas fa-chalkboard-teacher round__icon"></i>
+          </div>
+          <h3 class="text_center">Lorem ipsum dolor,</h3>
+          <p class="text_center">
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo
+            earum laborum.
+          </p>
+        </div>
+        <div class="col col-1-of-3">
+          <div class="round-wrap">
+            <i class="fas fa-chalkboard-teacher round__icon"></i>
+          </div>
+          <h3 class="text_center">Lorem ipsum dolor,</h3>
+          <p class="text_center">
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo
+            earum laborum
+          </p>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col col-1-of-3">
+          <div class="round-wrap">
+            <i class="fas fa-chalkboard-teacher round__icon"></i>
+          </div>
+          <h3 class="text_center">Lorem ipsum dolor,</h3>
+          <p class="text_center">
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo
+            earum laborue.
+          </p>
+        </div>
+        <div class="col col-1-of-3">
+          <div class="round-wrap">
+            <i class="fas fa-chalkboard-teacher round__icon"></i>
+          </div>
+          <h3 class="text_center">Lorem ipsum dolor,</h3>
+          <p class="text_center">
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo
+            earum laborum.
+          </p>
+        </div>
+        <div class="col col-1-of-3">
+          <div class="round-wrap">
+            <i class="fas fa-chalkboard-teacher round__icon"></i>
+          </div>
+          <h3 class="text_center">Lorem ipsum dolor,</h3>
+          <p class="text_center">
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo
+            earum laborum
+          </p>
+        </div>
+      </div>
+      <div class="text_center">
+        <buton class="btn__outline">Learn More</buton>
+      </div>
+    </section>
+
+    <section class="section__started">
+      <div class="tertiary__heading">
+        <h2 class="text_center">
+          Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+        </h2>
+        <h3 class="text_center">
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error
+          laudantium temporibus commodi!
+        </h3>
+      </div>
+
+      <form class="text_center">
+        <input type="email" name="email" id="email" placeholder="Your Email Address" required />
+        <input type="submit" id="submit" value="Get Started" />
+      </form>
+    </section>
+  </main>
+
+  <footer>
+    <div class="text_center">
+      <ul class="social__icons--all">
+        <li>
+          <a href="facebook.com"><i class="fab fa-facebook"></i></a>
+        </li>
+        <li>
+          <a href="facebook.com"><i class="fab fa-facebook"></i></a>
+        </li>
+        <li>
+          <a href="facebook.com"><i class="fab fa-facebook"></i></a>
+        </li>
+        <li>
+          <a href="facebook.com"><i class="fab fa-facebook"></i></a>
+        </li>
+        <li>
+          <a href="facebook.com"><i class="fab fa-facebook"></i></a>
+        </li>
+        <li>
+          <a href="facebook.com"><i class="fab fa-facebook"></i></a>
+        </li>
+      </ul>
+    </div>
+
+    <p class="text_center">
+      &copy; Untitled. All rights reserved &nbsp&nbsp|&nbsp&nbsp Design: &nbsp<abbr
+        title="Hypertext Markup Language">&nbspHTML5 UP</abbr>
+    </p>
+  </footer>
+</body>
+
+</html>
\ No newline at end of file
--- a/cha- 2 cars/Cars/resources/css/img/picture1.jpg
+++ b/cha- 2 cars/Cars/resources/css/img/picture1.jpg
--- a/cha- 2 cars/Cars/resources/css/img/picture2.jpg
+++ b/cha- 2 cars/Cars/resources/css/img/picture2.jpg
--- a/cha- 2 cars/Cars/resources/css/img/picture3.jpg
+++ b/cha- 2 cars/Cars/resources/css/img/picture3.jpg
--- a/cha- 2 cars/Cars/resources/css/style.css
+++ b/cha- 2 cars/Cars/resources/css/style.css
+/* ----------------------------------------------- */
+/* BASIC SETUP */
+/* ----------------------------------------------- */
+:root {
+  --color-grey-light: rgba(255, 255, 255, 0.5);
+  --color-grey-dark: rgba(0, 0, 0, 0.9);
+  --color-white: #ffffff;
+  --color-secondary: #e44c65;
+}
+/* 
+
+darkblue - rgba(39, 40, 51, 1)
+darkblue opacity (за дивовите со контент) - rgba(39, 40, 51, .85)
+red - #e44c65
+blue - rgb(93, 93, 238)
+green - rgb(45, 212, 81)
+lightwhite (позадинска боја за кружните иконки) - rgba(255, 255, 255, .1) */
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+ol {
+  margin-top: 0;
+}
+
+html {
+  font-size: 62.5%;
+}
+
+body {
+  font-family: "Lato", sans-serif;
+  font-weight: 300;
+  color: var(--color-white);
+  line-height: 1.7;
+  text-rendering: optimizeLegibility;
+  background-color: rgba(39, 40, 51, 1);
+}
+
+/* ----------------------------------------------- */
+/* REUSABLE COMPONENTS */
+/* ----------------------------------------------- */
+.row {
+  width: 100%;
+  margin: 0 auto;
+  zoom: 1;
+  overflow: hidden;
+}
+
+.row::after,
+.row::before {
+  content: "";
+  display: table;
+}
+
+.row::after {
+  clear: both;
+}
+
+.col {
+  display: block;
+  float: left;
+  margin: 0px auto;
+  text-align: center;
+}
+
+.text_center {
+  text-align: center;
+}
+
+.overlay {
+  background-color: rgba(0, 0, 0, 0.2);
+  height: 100%;
+}
+
+/* ----------------------------------------------- */
+/* HEADER */
+/* ----------------------------------------------- */
+
+header {
+  position: relative;
+  height: 100vh;
+}
+
+.logo__box {
+  position: absolute;
+  top: 1.5rem;
+  left: 2rem;
+}
+
+.logo__text {
+  font-size: 1.8rem;
+  font-weight: 500;
+  text-decoration: none;
+  color: var(--color-white);
+}
+
+.main__nav {
+  list-style: none;
+  float: right;
+  margin-top: 1rem;
+}
+
+.main__nav li {
+  display: inline-block;
+  margin-right: 2rem;
+  font-size: 1.8rem;
+  font-weight: 500;
+}
+
+.main__nav li a:link,
+.main__nav li a:visited {
+  padding: 1rem 0;
+  color: var(--color-white);
+  text-decoration: none;
+  border-bottom: 2px solid transparent;
+}
+
+.main__nav li a:hover,
+.main__nav li a:active {
+  color: #dbdbdb;
+}
+
+.main__nav li:last-child {
+  padding: 0.5rem 2.5rem;
+  background-color: var(--color-secondary);
+  border-radius: 3px;
+}
+
+.primary__text-box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* ----------------------------------------------- */
+/* HEADINGS */
+/* ----------------------------------------------- */
+
+.primary__heading {
+  margin-bottom: 2rem;
+  word-spacing: 4px;
+  letter-spacing: 1px;
+  text-align: center;
+}
+
+.primary__heading--main {
+  font-size: 3.5rem;
+  font-weight: 500;
+  display: block;
+}
+
+.primary__heading--sub {
+  font-size: 2rem;
+  font-weight: 300;
+  display: block;
+}
+
+.header__icon-box {
+  position: absolute;
+  bottom: 1%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.header-down {
+  font-size: 3rem;
+}
+
+h2 {
+  margin-bottom: 2rem;
+  margin-top: 2rem;
+  word-spacing: 4px;
+  letter-spacing: 1px;
+  font-weight: 300;
+  font-size: 3rem;
+  display: block;
+}
+
+h3 {
+  margin-bottom: 2rem;
+  word-spacing: 3px;
+  letter-spacing: 1px;
+  font-weight: 300;
+  font-size: 2rem;
+  display: block;
+}
+
+/* ----------------------------------------------- */
+/* PARAGRAPHS */
+/* ----------------------------------------------- */
+p {
+  font-size: 1.7rem;
+}
+
+/* ----------------------------------------------- */
+/* SECTION BLUE CAR*/
+/* ----------------------------------------------- */
+
+.blue__car {
+  background-image: url(img/picture1.jpg);
+}
+
+.blue__car,
+.red__car,
+.pink__car {
+  height: 100vh;
+  background-attachment: fixed;
+  background-position: center;
+  background-size: cover;
+  position: relative;
+}
+
+.blue__car-wrapper {
+  background-color: var(--color-grey-dark);
+  border-top: 5px solid var(--color-secondary);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.blue__car-content {
+  width: 124rem;
+  margin: 0 auto;
+  padding: 6rem 0;
+  position: relative;
+}
+
+.blue__car-content div:not(:last-child) {
+  margin-right: 3%;
+}
+
+.col-1-of-blue {
+  width: 31.33%;
+  display: block;
+}
+
+.col-2-of-blue {
+  position: absolute;
+  width: 31.33%;
+  display: block;
+  top: 55%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.col-3-of-blue {
+  position: absolute;
+  width: 31.33%;
+  display: block;
+  right: 0;
+  top: 28%;
+}
+
+/* ----------------------------------------------- */
+/* SECTION RED CAR*/
+/* ----------------------------------------------- */
+
+.red__car {
+  background-image: url(img/picture2.jpg);
+}
+
+.red__car-wrapper {
+  background-color: var(--color-grey-dark);
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: 0;
+  border-left: 5px solid #5480f1;
+}
+
+.red__car-content,
+.pink__car-content {
+  width: 33.33vw;
+  padding: 10rem 5rem;
+}
+
+.btn__outline {
+  border: 1px solid var(--color-white);
+  padding: 0.8rem 2rem;
+  margin-top: 2rem;
+  display: inline-block;
+  font-size: 1.8rem;
+  cursor: pointer;
+}
+
+.btn__outline:hover {
+  border: 1px solid rgb(45, 212, 81);
+}
+
+/* ----------------------------------------------- */
+/* SECTION PINK CAR*/
+/* ----------------------------------------------- */
+
+.pink__car {
+  background-image: url(img/picture3.jpg);
+}
+
+.pink__car-wrapper {
+  background-color: var(--color-grey-dark);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  top: 0;
+  border-right: 5px solid rgb(45, 212, 81);
+}
+
+/* ----------------------------------------------- */
+/* SECTION ICONS*/
+/* ----------------------------------------------- */
+
+.section__icons {
+  padding: 10rem;
+}
+
+.secondary__heading h3::after {
+  content: "";
+  height: 5px;
+  background-color: var(--color-secondary);
+  display: block;
+  width: 35rem;
+  margin: 5rem auto 7rem auto;
+}
+
+.col-1-of-3 {
+  width: 30%;
+}
+
+.col-1-of-3:not(:last-child) {
+  margin-right: 5%;
+}
+
+.round__icon {
+  font-size: 3.7rem;
+  padding-bottom: 3rem;
+  transform: translateY(1.4rem);
+}
+
+.section__icons .row {
+  margin-bottom: 8rem;
+}
+
+.round-wrap {
+  border: 1px solid transparent;
+  border-radius: 50%;
+  width: 10rem;
+  height: 10rem;
+  padding: 1.4rem;
+  margin: 3rem auto;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+/* ----------------------------------------------- */
+/* SECTION STARTED*/
+/* ----------------------------------------------- */
+
+.section__started {
+  background-color: var(--color-secondary);
+  padding: 10rem;
+}
+
+.tertiary__heading h3 {
+  margin-bottom: 5rem;
+}
+
+input[type="email"] {
+  padding: 1.6rem;
+  width: 45%;
+  background-color: var(--color-secondary);
+  border: 1px solid var(--color-grey-light);
+  border-radius: 5px;
+  margin-right: 1.5rem;
+  font-family: "Lato";
+  font-weight: 300;
+  font-size: 1.8rem;
+  color: var(--color-grey-light);
+}
+
+input[type="submit"] {
+  padding: 1.5rem 6rem;
+  font-size: 1.8rem;
+  font-family: "Lato";
+  font-weight: 400;
+  color: var(--color-secondary);
+  background-color: white;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+input[type="submit"]:hover {
+  color: #d47e8d;
+}
+
+::placeholder {
+  font-size: 1.8rem;
+  color: var(--color-grey-light);
+  font-weight: 300;
+  font-family: "Lato";
+}
+
+/* ----------------------------------------------- */
+/* SECTION FOOTER*/
+/* ----------------------------------------------- */
+
+footer {
+  background-color: #272833;
+  padding: 10rem;
+}
+
+.social__icons--all {
+  margin-bottom: 3rem;
+  list-style: none;
+}
+
+.social__icons--all li {
+  display: inline-block;
+}
+
+.social__icons--all li:not(:last-child) {
+  margin-right: 2rem;
+}
+
+.social__icons--all li a:link,
+.social__icons--all li a:visited {
+  padding: 1rem 0;
+  font-size: 3.5rem;
+  color: var(--color-white);
+  text-decoration: none;
+}
+
+.social__icons--all li a:hover,
+.social__icons--all li a:active {
+  color: #3b5998;
+}