diff --git a/Porject 1 - Foods/Final Files/images/card-img-1.png b/Porject 1 - Foods/Final Files/images/card-img-1.png deleted file mode 100644 index 2214d91..0000000 Binary files a/Porject 1 - Foods/Final Files/images/card-img-1.png and /dev/null differ diff --git a/Porject 1 - Foods/Final Files/images/card-img-2.png b/Porject 1 - Foods/Final Files/images/card-img-2.png deleted file mode 100644 index 47a9b10..0000000 Binary files a/Porject 1 - Foods/Final Files/images/card-img-2.png and /dev/null differ diff --git a/Porject 1 - Foods/Final Files/images/card-img-3.png b/Porject 1 - Foods/Final Files/images/card-img-3.png deleted file mode 100644 index f0a55ba..0000000 Binary files a/Porject 1 - Foods/Final Files/images/card-img-3.png and /dev/null differ diff --git a/Porject 1 - Foods/Final Files/images/gallery-img-1.jpg b/Porject 1 - Foods/Final Files/images/gallery-img-1.jpg deleted file mode 100644 index 7161d73..0000000 Binary files a/Porject 1 - Foods/Final Files/images/gallery-img-1.jpg and /dev/null differ diff --git a/Porject 1 - Foods/Final Files/images/gallery-img-2.jpg b/Porject 1 - Foods/Final Files/images/gallery-img-2.jpg deleted file mode 100644 index dbf1974..0000000 Binary files a/Porject 1 - Foods/Final Files/images/gallery-img-2.jpg and /dev/null differ diff --git a/Porject 1 - Foods/Final Files/images/gallery-img-3.jpg b/Porject 1 - Foods/Final Files/images/gallery-img-3.jpg deleted file mode 100644 index 7a1d378..0000000 Binary files a/Porject 1 - Foods/Final Files/images/gallery-img-3.jpg and /dev/null differ diff --git a/Porject 1 - Foods/Final Files/images/gallery-img-4.jpg b/Porject 1 - Foods/Final Files/images/gallery-img-4.jpg deleted file mode 100644 index de2e63c..0000000 Binary files a/Porject 1 - Foods/Final Files/images/gallery-img-4.jpg and /dev/null differ diff --git a/Porject 1 - Foods/Final Files/images/gallery-img-5.jpg b/Porject 1 - Foods/Final Files/images/gallery-img-5.jpg deleted file mode 100644 index c0a25ab..0000000 Binary files a/Porject 1 - Foods/Final Files/images/gallery-img-5.jpg and /dev/null differ diff --git a/Porject 1 - Foods/Final Files/images/gallery-img-6.jpg b/Porject 1 - Foods/Final Files/images/gallery-img-6.jpg deleted file mode 100644 index e8c61c3..0000000 Binary files a/Porject 1 - Foods/Final Files/images/gallery-img-6.jpg and /dev/null differ diff --git a/Porject 1 - Foods/Final Files/index.html b/Porject 1 - Foods/Final Files/index.html deleted file mode 100644 index dc694b5..0000000 --- a/Porject 1 - Foods/Final Files/index.html +++ /dev/null @@ -1,175 +0,0 @@ - - - - - - - - - - - - - - - -
- - -
- -
-

variety of foods

-
- - - - - - - - - - -
-
- - - -
-

popular meals

-
-
- -

Fish

- -
-
- -

Cake

- -
-
- -

Lobster

- -
-
-
- - - -
-

Gallery

-
- - -

Pancakes

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa - commodi possimus iure hic excepturi. Corporis! -

- - - -

Cupcakes

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa - commodi possimus iure hic excepturi. Corporis! -

- - - -

Hummus

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa - commodi possimus iure hic excepturi. Corporis! -

- - - -

Hamburger

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa - commodi possimus iure hic excepturi. Corporis! -

- - - -

Salmon

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa - commodi possimus iure hic excepturi. Corporis! -

- - - -

Vegetables

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa - commodi possimus iure hic excepturi. Corporis! -

- -
-
- - - -
-
-

Sign Me Up

-

- BE THE FIRST TO KNOW ABOUT NEW PRODUCTS -

-
- -

CodeAndCreate © All rights reserved

-
- -
- - - \ No newline at end of file diff --git a/Porject 1 - Foods/Final Files/script.js b/Porject 1 - Foods/Final Files/script.js deleted file mode 100644 index 964b670..0000000 --- a/Porject 1 - Foods/Final Files/script.js +++ /dev/null @@ -1,21 +0,0 @@ -document.querySelector('.menu').addEventListener('click', () => { - document.querySelectorAll('.target').forEach((item) => { - item.classList.toggle('change'); - }) -}) - -const icons = document.querySelectorAll('.section-1-icons i') -let i = 1 - -setInterval(() => { - i++ - const icon = document.querySelector('.section-1-icons .change') - icon.classList.remove('change') - - if (i > icons.length) { - icons[0].classList.add('change') - i = 1 - } else { - icon.nextElementSibling.classList.add('change') - } -}, 4000) \ No newline at end of file diff --git a/Porject 1 - Foods/Final Files/style.css b/Porject 1 - Foods/Final Files/style.css deleted file mode 100644 index 071171e..0000000 --- a/Porject 1 - Foods/Final Files/style.css +++ /dev/null @@ -1,536 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800;900&display=swap"); -/* Common styles */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; - text-decoration: none; - outline: none; - font-family: "Nunito", sans-serif; - font-weight: 400; -} - -html { - font-size: 62.5%; -} - -.section-heading { - font-size: 12rem; - font-weight: 900; - color: #fff; - text-align: center; - text-transform: capitalize; - letter-spacing: 0.5rem; - text-shadow: 0.3rem 0.3rem 0.3rem #000; -} -/* End of Common Styles */ - -/* Navbar */ -.navbar { - width: 100%; - height: 14rem; - background-color: #000; - position: fixed; - top: -14rem; - z-index: 150; - display: flex; - justify-content: center; - align-items: center; - box-shadow: 0.2rem 0.2rem 0.2rem #000; - /* text-align: center; */ - transition: top 0.4s; -} - -.navbar.change { - top: 0; - transition: top 0.4s 0.2s; -} - -.navbar-link { - color: #aaa; - margin: 0 4rem; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - /* position: relative; */ - opacity: 0; - transition: color 0.3, opacity, 2s; -} - -.change .navbar-link { - opacity: 1; -} - -.change .navbar-link:nth-child(1) { - transition: opacity 0.4s 0.5s, color 0.3s; -} - -.change .navbar-link:nth-child(2) { - transition: opacity 0.4s 0.6s, color 0.3s; -} - -.change .navbar-link:nth-child(3) { - transition: opacity 0.4s 0.7s, color 0.3s; -} - -.change .navbar-link:nth-child(4) { - transition: opacity 0.4s 0.8s, color 0.3s; -} - -.change .navbar-link:nth-child(5) { - transition: opacity 0.4s 0.9s, color 0.3s; -} - -.navbar-link:hover { - color: #fff; -} - -.navbar-link i { - font-size: 7rem; -} - -.navbar-link span { - font-size: 2.5rem; - font-weight: 900; - letter-spacing: 0.5rem; - margin-top: 0.5rem; -} - -.menu { - width: 4rem; - height: 6rem; - background-color: #000; - position: fixed; - top: 1rem; - left: 5rem; - border-radius: 30rem 30rem 15rem 15rem; - box-shadow: 0.1rem 0.1rem 0.1rem #000, -0.1rem -0.1rem 0.1rem #000; - cursor: pointer; - z-index: 100; - transition: top 0.4s 0.2s; -} - -.menu.change { - top: 15rem; - transition: top 0.4s; -} - -.menu::before { - content: ""; - width: 0.3rem; - height: 15rem; - background-color: #000; - position: absolute; - top: -15rem; - left: calc(50% - 0.15rem); - box-shadow: 0.1rem 0rem 0.1rem #000; - /* transition: all 0.4s; */ -} - -/* End of Navbar */ - -/* Section 1 */ -.section-1 { - width: 100%; - height: 100vh; - background-color: #333; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-evenly; -} - -.section-1-icons i { - font-size: 35rem; - color: #a79a2d; - position: absolute; - transform: translate(-50%, -50%) scale(0); - text-shadow: 0.2rem 0.2rem 0.2rem #000; - transition: transform 0.3s; -} - -.section-1-icons i.change { - transform: translate(-50%, -50%) scale(1); - transition: transform 0.3s 0.3s; -} -/* End of Section 1 */ - -/* Section 2 */ -.section-2 { - width: 100%; - height: 100vh; - background-color: #222; - display: flex; - flex-direction: column; - justify-content: space-between; - padding: 10rem 0; -} - -.cards-container { - display: flex; - justify-content: space-evenly; - /* padding: 0 5%; */ -} - -.card-wrapper { - perspective: 1000rem; -} - -.card { - width: 30rem; - background-color: #a79a2d; - padding: 4rem; - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - box-shadow: 1rem 1rem 1rem #000; - position: relative; - transform: rotateY(20deg) skewX(-2deg); - transition: transform 0.5s, box-shadow 0.5s; -} - -.card:hover { - transform: rotateY(20deg) skewX(-2deg) translateY(-3rem); - box-shadow: 2rem 2rem 2rem #000; -} - -.card::before { - content: ""; - height: 100%; - width: 1rem; - background-color: #817824; - position: absolute; - top: 0; - left: -1rem; - transform: skewY(45deg); - transform-origin: right; - box-shadow: -0.1rem -0.1rem 0.1rem #000; -} - -.card::after { - content: ""; - width: 100%; - height: 1rem; - background-color: #8f8317; - position: absolute; - top: -1rem; - left: 0; - transform: skewX(45deg); - transform-origin: bottom; - box-shadow: -0.1rem -0.1rem 0.1rem #000; -} - -.card-img { - width: 100%; -} - -.card-name { - font-size: 3rem; - font-weight: 900; - text-transform: uppercase; - letter-spacing: 0.5rem; - color: #111; - margin: 2rem 0; - text-shadow: 0.15rem 0.15rem 0.15rem #000; -} - -.card-btn { - width: 70%; - background-color: #111; - color: #888; - border-radius: 5rem; - font-size: 1.5rem; - font-weight: 800; - letter-spacing: 0.2rem; - text-transform: capitalize; - border: none; - padding: 0.5rem 0; - cursor: pointer; - box-shadow: -0.2rem -0.2rem 0.2rem #000; -} -/* End of Section 2 */ - -/* Section 3 */ -.section-3 { - background-color: #333; - padding: 5rem 0; -} - -.gallery { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-evenly; - margin-top: 10rem; -} - -.gallery-link { - position: relative; - margin: 4rem 1rem; -} - -.gallery-link::before { - content: ""; - position: absolute; - top: 2vw; - left: 80%; - width: 0.2rem; - height: 0; - background-color: #fff; - z-index: 10; - transition: height 0.5s; -} - -.gallery-link::after { - content: ""; - position: absolute; - top: 30%; - left: 2rem; - width: 0; - height: 0.2rem; - background-color: #fff; - transition: width 0.5s; -} - -.gallery-link:hover::before { - height: 80%; -} - -.gallery-link:hover::after { - width: 90%; -} - -.food-img { - width: 24vw; - height: 15vw; - object-fit: cover; - box-shadow: 0.3rem 0.3rem 0.1rem #e92929, 0.5rem 0.5rem 0.1rem #a2e946, - 0.7rem 0.7rem 0.1rem #297ce9, 0.9rem 0.9rem 0.1rem #e92999; - transition: all 0.5s; -} - -.gallery-link:hover .food-img { - box-shadow: 1rem 1rem 0.1rem #e92929, 2rem 2rem 0.1rem #a2e946, - 3rem 3rem 0.1rem #297ce9, 4rem 4rem 0.1rem #e92999; - transform: scale(1.1); - filter: blur(0.5rem); - opacity: 0.5; -} - -.food-name { - position: absolute; - top: 3rem; - left: 3rem; - font-size: 2rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.1rem; - color: #fff; - width: 0; - overflow: hidden; - transition: width 0.3s; -} - -.gallery-link:hover .food-name { - width: 100%; - transition: width 1.5s 0.5s; -} - -.food-description { - position: absolute; - bottom: 3vw; - left: 2rem; - width: 70%; - font-size: 1.5rem; - font-weight: 300; - letter-spacing: 0.1rem; - text-transform: uppercase; - color: #fff; - opacity: 0; - visibility: hidden; - transition: opacity 0.3s; -} - -.gallery-link:hover .food-description { - opacity: 1; - visibility: visible; - transition: opacity 1s 1s; -} -/* End of Section 3 */ - -/* Section 4 */ - -.section-4 { - width: 100%; - height: 30vh; - background-color: #222; - display: flex; - justify-content: space-around; - padding: 3rem 0; - position: relative; - align-items: flex-start; -} - -.section-4-text { - text-transform: uppercase; -} - -.section-4-heading { - font-size: 4rem; - font-weight: 900; - color: #a79a2d; -} - -.section-4-paragraph { - font-size: 1.5rem; - color: #888; -} - -.signup-form { - /* position: relative; */ - display: flex; - align-items: center; -} - -.signup-form-input { - width: 35rem; - height: 5rem; - padding: 1rem; - border: 0.2rem solid #a79a2d; - font-size: 1.6rem; - font-weight: 700; - letter-spacing: 0.1rem; - color: #a79a2d; -} - -.signup-form-input::placeholder { - color: #a79a2d; -} - -.signup-form-btn { - position: relative; - left: -4.5rem; - width: 4rem; - height: 4rem; - background-color: #333; - color: #a79a2d; - border: none; - font-size: 1.8rem; - cursor: pointer; -} - -.copyright { - position: absolute; - bottom: 3rem; - font-size: 1.7rem; - font-weight: 200; - color: #eee; - letter-spacing: 0.1rem; - border-top: 0.1rem solid #888; - padding-top: 6rem; - width: 100%; - text-align: center; -} -/* End of Section 4 */ - -/* Responsive */ -@media (max-width: 1400px) { - html { - font-size: 50%; - } - - .section-2 { - height: auto; - } - - .cards-container { - margin-top: 10rem; - } - - .gallery-link { - width: 40rem; - height: 25rem; - margin: 5rem; - } - - .food-img { - width: 100%; - height: 100%; - } -} - -@media (max-width: 1000px) { - .section-heading { - font-size: 9rem; - margin: 0 5rem; - } - - .section-1-icons i { - font-size: 25rem; - } - - .cards-container { - flex-wrap: wrap; - } - - .card { - margin: 5rem; - } - - .section-4 { - height: 30rem; - } -} - -@media (max-width: 900px) { - .navbar-link { - margin: 2rem; - } - - .navbar-link i { - font-size: 4rem; - } - - .navbar-link span { - font-size: 2rem; - } -} - -@media (max-width: 700px) { - .section-heading { - font-size: 7rem; - margin: 0 10rem; - } - - .section-1-icons i { - font-size: 20rem; - } - - .menu { - left: 2rem; - } - - .section-4 { - height: 40rem; - flex-direction: column; - justify-content: flex-start; - align-items: center; - } - - .section-4-text { - margin-bottom: 8rem; - } -} - -@media (max-width: 550px) { - html { - font-size: 40%; - } - - .navbar-link { - margin: 0 0.7rem; - } -} -/* End of Responsive */ diff --git a/Porject 1 - Foods/Foods.rar b/Porject 1 - Foods/Foods.rar deleted file mode 100644 index 470fb0d..0000000 Binary files a/Porject 1 - Foods/Foods.rar and /dev/null differ diff --git a/Porject 1 - Foods/Starter Files/images/card-img-1.png b/Porject 1 - Foods/Starter Files/images/card-img-1.png deleted file mode 100644 index 2214d91..0000000 Binary files a/Porject 1 - Foods/Starter Files/images/card-img-1.png and /dev/null differ diff --git a/Porject 1 - Foods/Starter Files/images/card-img-2.png b/Porject 1 - Foods/Starter Files/images/card-img-2.png deleted file mode 100644 index 47a9b10..0000000 Binary files a/Porject 1 - Foods/Starter Files/images/card-img-2.png and /dev/null differ diff --git a/Porject 1 - Foods/Starter Files/images/card-img-3.png b/Porject 1 - Foods/Starter Files/images/card-img-3.png deleted file mode 100644 index f0a55ba..0000000 Binary files a/Porject 1 - Foods/Starter Files/images/card-img-3.png and /dev/null differ diff --git a/Porject 1 - Foods/Starter Files/images/gallery-img-1.jpg b/Porject 1 - Foods/Starter Files/images/gallery-img-1.jpg deleted file mode 100644 index 7161d73..0000000 Binary files a/Porject 1 - Foods/Starter Files/images/gallery-img-1.jpg and /dev/null differ diff --git a/Porject 1 - Foods/Starter Files/images/gallery-img-2.jpg b/Porject 1 - Foods/Starter Files/images/gallery-img-2.jpg deleted file mode 100644 index dbf1974..0000000 Binary files a/Porject 1 - Foods/Starter Files/images/gallery-img-2.jpg and /dev/null differ diff --git a/Porject 1 - Foods/Starter Files/images/gallery-img-3.jpg b/Porject 1 - Foods/Starter Files/images/gallery-img-3.jpg deleted file mode 100644 index 7a1d378..0000000 Binary files a/Porject 1 - Foods/Starter Files/images/gallery-img-3.jpg and /dev/null differ diff --git a/Porject 1 - Foods/Starter Files/images/gallery-img-4.jpg b/Porject 1 - Foods/Starter Files/images/gallery-img-4.jpg deleted file mode 100644 index de2e63c..0000000 Binary files a/Porject 1 - Foods/Starter Files/images/gallery-img-4.jpg and /dev/null differ diff --git a/Porject 1 - Foods/Starter Files/images/gallery-img-5.jpg b/Porject 1 - Foods/Starter Files/images/gallery-img-5.jpg deleted file mode 100644 index c0a25ab..0000000 Binary files a/Porject 1 - Foods/Starter Files/images/gallery-img-5.jpg and /dev/null differ diff --git a/Porject 1 - Foods/Starter Files/images/gallery-img-6.jpg b/Porject 1 - Foods/Starter Files/images/gallery-img-6.jpg deleted file mode 100644 index e8c61c3..0000000 Binary files a/Porject 1 - Foods/Starter Files/images/gallery-img-6.jpg and /dev/null differ diff --git a/Porject 1 - Foods/Starter Files/index.html b/Porject 1 - Foods/Starter Files/index.html deleted file mode 100644 index 210fb7f..0000000 --- a/Porject 1 - Foods/Starter Files/index.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Porject 1 - Foods/Starter Files/script.js b/Porject 1 - Foods/Starter Files/script.js deleted file mode 100644 index e69de29..0000000 diff --git a/Porject 1 - Foods/Starter Files/style.css b/Porject 1 - Foods/Starter Files/style.css deleted file mode 100644 index e69de29..0000000 diff --git a/Project 2 - Creative Design/Creative Design.rar b/Project 2 - Creative Design/Creative Design.rar deleted file mode 100644 index b9623eb..0000000 Binary files a/Project 2 - Creative Design/Creative Design.rar and /dev/null differ diff --git a/Project 2 - Creative Design/Final Files/images/customer-img-1.jpg b/Project 2 - Creative Design/Final Files/images/customer-img-1.jpg deleted file mode 100644 index f228cf3..0000000 Binary files a/Project 2 - Creative Design/Final Files/images/customer-img-1.jpg and /dev/null differ diff --git a/Project 2 - Creative Design/Final Files/images/customer-img-2.jpg b/Project 2 - Creative Design/Final Files/images/customer-img-2.jpg deleted file mode 100644 index 79bd842..0000000 Binary files a/Project 2 - Creative Design/Final Files/images/customer-img-2.jpg and /dev/null differ diff --git a/Project 2 - Creative Design/Final Files/images/customer-img-3.jpg b/Project 2 - Creative Design/Final Files/images/customer-img-3.jpg deleted file mode 100644 index 5c0f9fb..0000000 Binary files a/Project 2 - Creative Design/Final Files/images/customer-img-3.jpg and /dev/null differ diff --git a/Project 2 - Creative Design/Final Files/images/form-img.png b/Project 2 - Creative Design/Final Files/images/form-img.png deleted file mode 100644 index 86e49ce..0000000 Binary files a/Project 2 - Creative Design/Final Files/images/form-img.png and /dev/null differ diff --git a/Project 2 - Creative Design/Final Files/images/team-member-1.jpg b/Project 2 - Creative Design/Final Files/images/team-member-1.jpg deleted file mode 100644 index c21012b..0000000 Binary files a/Project 2 - Creative Design/Final Files/images/team-member-1.jpg and /dev/null differ diff --git a/Project 2 - Creative Design/Final Files/images/team-member-2.jpg b/Project 2 - Creative Design/Final Files/images/team-member-2.jpg deleted file mode 100644 index 107bb76..0000000 Binary files a/Project 2 - Creative Design/Final Files/images/team-member-2.jpg and /dev/null differ diff --git a/Project 2 - Creative Design/Final Files/images/team-member-3.jpg b/Project 2 - Creative Design/Final Files/images/team-member-3.jpg deleted file mode 100644 index be4f1dc..0000000 Binary files a/Project 2 - Creative Design/Final Files/images/team-member-3.jpg and /dev/null differ diff --git a/Project 2 - Creative Design/Final Files/index.html b/Project 2 - Creative Design/Final Files/index.html deleted file mode 100644 index be095f5..0000000 --- a/Project 2 - Creative Design/Final Files/index.html +++ /dev/null @@ -1,181 +0,0 @@ - - - - - - - - - - - - - -
- -
- -
-

Creative Design

- -
- - - -
-

Customers

-
-
- -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora totam voluptatum accusantium pariatur, nulla quasi quibusdam ipsa quisquam repellat atque, tempore assumenda vitae. Earum fuga a accusamus, nisi ullam delectus!

-
- - - - - -
- -

Jane Lee

-
-
- -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora totam voluptatum accusantium pariatur, nulla quasi quibusdam ipsa quisquam repellat atque, tempore assumenda vitae. Earum fuga a accusamus, nisi ullam delectus!

-
- - - - - -
- -

Bob Smith

-
-
- -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora totam voluptatum accusantium pariatur, nulla quasi quibusdam ipsa quisquam repellat atque, tempore assumenda vitae. Earum fuga a accusamus, nisi ullam delectus!

-
- - - - - -
- -

Ann Brown

-
-
-
- - - -
-

Team

-
-
- -

Nick Smith (Designer)

-
    -
  • Ps
    • -
  • Figma
    • -
  • HTML5
    • -
  • CSS3
    • -
  • Ai
    • -
- Projects -
-
-
-
-

About Me

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit obcaecati blanditiis aspernatur ab doloribus optio nesciunt adipisci fugiat quia veritatis doloremque tempore ipsum sunt atque exercitationem perspiciatis, beatae aliquam voluptates perferendis. Doloribus exercitationem adipisci, quidem veritatis temporibus magni. Sunt, exercitationem?

-
-
-
- -

Bob Brown (Designer)

-
    -
  • Ae
    • -
  • Pr
    • -
  • HTML5
    • -
  • CSS3
    • -
  • Inkscape
    • -
- Projects -
-
-
-
-

About Me

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit obcaecati blanditiis aspernatur ab doloribus optio nesciunt adipisci fugiat quia veritatis doloremque tempore ipsum sunt atque exercitationem perspiciatis, beatae aliquam voluptates perferendis. Doloribus exercitationem adipisci, quidem veritatis temporibus magni. Sunt, exercitationem?

-
-
-
- -

John Doe (Developer)

-
    -
  • JavaScript
    • -
  • ReactJS
    • -
  • NodeJS
    • -
  • MongoDB
    • -
  • Python
    • -
- Projects -
-
-
-
-

About Me

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit obcaecati blanditiis aspernatur ab doloribus optio nesciunt adipisci fugiat quia veritatis doloremque tempore ipsum sunt atque exercitationem perspiciatis, beatae aliquam voluptates perferendis. Doloribus exercitationem adipisci, quidem veritatis temporibus magni. Sunt, exercitationem?

-
-
-
-
- - - -
-

Contact

-
- -
- - - - -
-
-

- Copyright © CodeAndCreate All Rights Reserved -

-
- - - - - -
- - - - \ No newline at end of file diff --git a/Project 2 - Creative Design/Final Files/script.js b/Project 2 - Creative Design/Final Files/script.js deleted file mode 100644 index 5473d61..0000000 --- a/Project 2 - Creative Design/Final Files/script.js +++ /dev/null @@ -1,6 +0,0 @@ -document.querySelectorAll('.story-btn').forEach(btn => { - btn.addEventListener('click', () => { - btn.classList.toggle('change') - btn.nextElementSibling.classList.toggle('change') - }) -}) \ No newline at end of file diff --git a/Project 2 - Creative Design/Final Files/style.css b/Project 2 - Creative Design/Final Files/style.css deleted file mode 100644 index 385a564..0000000 --- a/Project 2 - Creative Design/Final Files/style.css +++ /dev/null @@ -1,639 +0,0 @@ -/* Common Styles */ -@import url("https://fonts.googleapis.com/css2?family=Bellota+Text:wght@300;400;700&family=Monoton&display=swap"); - -* { - margin: 0; - padding: 0; - box-sizing: border-box; - text-decoration: none; - list-style-type: none; - outline: none; - font-family: "Bellota Text", cursive; - font-weight: 400; -} - -html { - font-size: 62.5%; - scroll-behavior: smooth; -} - -.container { - width: 100%; - overflow-x: hidden; -} - -.section-heading { - font-size: 10rem; - font-weight: bold; - text-transform: uppercase; - color: #999; - text-align: center; - opacity: 0.1; - text-shadow: 2rem 2rem 4rem #aaa; -} -/* End of Common Styles */ - -/* Section 1 */ -.section-1 { - width: 100%; - height: 100vh; - background-color: #fff; - position: relative; -} - -.floating-bg { - width: 150vw; - height: 150vw; - background-color: rgba(50, 231, 255, 0.8); - position: absolute; - top: -125vw; - left: calc(50% - 75vw); - border-radius: 45%; - animation: rotate 30s infinite; -} - -.floating-bg::before { - content: ""; - width: 100%; - height: 100%; - background-color: rgba(50, 231, 255, 0.1); - position: absolute; - top: 0; - left: 0; - border-radius: 40%; - animation: rotate 30s infinite; -} - -@keyframes rotate { - 0% { - transform: rotate(0); - } - - 100% { - transform: rotate(360deg); - } -} - -.navbar { - position: relative; - z-index: 20; - top: 4rem; - display: flex; - justify-content: space-evenly; -} - -.navbar-link { - font-size: 2.2rem; - font-weight: 700; - letter-spacing: 0.2rem; - color: #fff; - width: 1.5rem; - word-wrap: break-word; - text-align: center; - transition: all 0.5s; -} - -.navbar-link:hover { - width: 15rem; - background-color: rgba(255, 255, 255, 0.2); - transition: all 2.5s; -} - -.section-1-heading { - font-size: 8rem; - font-family: "Monoton", cursive; - position: absolute; - top: 18vw; - left: 50%; - transform: translateX(-50%); - text-shadow: 0.3rem 0.3rem 0.3rem #888; - color: #fff; - background-color: #fff; - width: 85rem; - text-align: center; - padding: 0.8rem 1.6rem; - border-radius: 0.8rem; - opacity: 0.9; -} - -.logo { - position: absolute; - top: 70%; - left: 50%; - transform: translateX(-50%); -} - -.logo i { - font-size: 15rem; - color: rgba(50, 231, 255, 0.8); - text-shadow: 0.1rem 0.1rem 0.2rem #ddd, -0.1rem -0.1rem 0.2rem #ddd; -} -/* End of Section 1 */ - -/* Section 2 */ -.section-2 { - width: 100%; - height: 100vh; - display: flex; - flex-direction: column; - justify-content: space-around; -} - -.customers-wrapper { - display: flex; - justify-content: space-evenly; - align-items: center; - height: 70%; -} - -.customer { - width: 35rem; - height: 50rem; - background-color: #eee; - display: flex; - flex-direction: column; - align-items: center; - border-radius: 0.5rem; - padding: 2rem; - box-shadow: 1rem 1rem 2rem #ddd, -1rem -1rem 2rem #eee; - transition: box-shadow 0.5s; -} - -.customer:hover { - box-shadow: 2rem 2rem 3rem #ddd, -2rem -2rem 3rem #eee; -} - -.customer:first-child { - align-self: flex-end; -} - -.customer:last-child { - align-self: flex-start; -} - -.fa-quote-left { - font-size: 4rem; - color: #f08e0f; -} - -.customer-text { - font-size: 1.8rem; - margin: 2.5rem 0; - text-align: justify; -} - -.customer-text::first-letter { - margin-left: 1rem; -} - -.customer-rating i { - font-size: 2rem; - color: #f08e0f; -} - -.customer-img { - width: 10rem; - height: 10rem; - object-fit: cover; - margin: 2rem 0; - border-radius: 50%; -} - -.customer-name { - font-size: 2rem; - font-weight: 700; -} -/* End of Section 2 */ - -/* Section 3 */ -.section-3 { - width: 100%; - height: 100vh; - display: flex; - flex-direction: column; - justify-content: space-between; - padding: 5rem 0; -} - -.team-wrapper { - display: flex; - justify-content: space-evenly; - align-items: center; - height: 70%; -} - -.team-member { - width: 35rem; - background-color: #fffeee; - padding: 1rem 1rem 2rem 1rem; - box-shadow: 1rem 1rem 2rem #ddd, -1rem -1rem 2rem #eee; - position: relative; - opacity: 0.7; - transition: opacity 0.5s; -} - -.team-member:hover { - opacity: 1; -} - -.team-member:first-child { - align-self: flex-start; -} - -.team-member:last-child { - align-self: flex-end; -} - -.team-member-img { - width: 100%; - border-radius: 0.5rem; -} - -.team-member-name { - font-size: 2.3rem; - font-weight: 700; - color: #796717; - margin-top: 2rem; -} - -.team-member-name span { - font-size: 1.7rem; -} - -.team-member-skills { - display: flex; - justify-content: space-between; - margin: 1rem 0 2rem 0; -} - -.team-member-skills li { - font-size: 1.5rem; - color: #505050; -} - -.projects-btn { - background-color: #fab34a; - color: #fff; - padding: 0.5rem 1.5rem; - border-radius: 5rem; - font-size: 1.5rem; - letter-spacing: 0.2rem; -} - -.story-btn { - width: 4rem; - height: 4rem; - background-color: #222; - position: absolute; - top: -1rem; - right: -1rem; - border-radius: 5rem; - display: flex; - align-items: center; - padding: 0.5rem; - cursor: pointer; - z-index: 50; - transition: transform 0.5s; -} - -.change.story-btn { - transform: rotate(405deg); -} - -.story-btn-line { - width: 100%; - height: 0.1rem; - background-color: #fff; -} - -.story { - width: 100%; - height: 100%; - background-color: rgba(253, 69, 69, 0.9); - position: absolute; - top: 0; - left: 0; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: 2rem; - transform: scale(0); - transform-origin: top right; - border-radius: 50rem 0 50rem 50rem; - transition: all 0.5s; -} - -.change.story { - transform: scale(1); - border-radius: 0; -} - -.story-heading { - font-size: 4rem; - font-weight: 700; - color: #fff; - margin-bottom: 2rem; -} - -.story-paragraph { - font-size: 1.8rem; - color: #eee; - text-align: justify; - letter-spacing: 0.1rem; - text-indent: 2rem; -} -/* End of Section 3 */ - -/* Section 4 */ -.section-4 { - width: 100%; - height: 130vh; - display: flex; - flex-direction: column; - justify-content: space-around; - align-items: center; -} - -.form-container { - width: 80%; - height: 40%; - background-color: #e5e9ff; - display: flex; - align-items: center; - justify-content: space-evenly; - box-shadow: 0.3rem 0.3rem 0.4rem #ccc, -0.1rem -0.1rem 0.4rem #ccc; - border-radius: 0.5rem; - perspective: 100rem; -} - -.form-img { - width: 55rem; - background-color: rgba(50, 231, 255, 0.8); - padding: 5rem; - opacity: 0.8; - box-shadow: -3rem 3rem 4rem #aaa; - border-radius: 0.5rem; - transform: rotateY(20deg); - transition: all 0.5s; -} - -.form-img:hover { - transform: translateY(-2rem) rotateY(20deg); - box-shadow: -5rem 5rem 7rem #aaa; -} - -.contact-form { - width: 45rem; - background-color: #fff; - display: flex; - flex-direction: column; - padding: 3rem; - border-radius: 0.5rem; - box-shadow: 3rem 3rem 4rem #aaa; - transform: rotateY(-20deg); - transition: all 0.5s; -} - -.contact-form:hover { - transform: translateY(-2rem) rotateY(-20deg); - box-shadow: 5rem 5rem 7rem #aaa; -} - -.contact-form input, -.contact-form textarea { - margin: 1rem; - padding: 1rem; - font-size: 1.3rem; - letter-spacing: 0.1rem; - border: none; - border-radius: 2rem; - box-shadow: inset 0.1rem 0.1rem 0.2rem #ddd, inset -0.1rem -0.1rem 0.2rem #ddd; -} - -.contact-form textarea { - max-height: 15rem; - min-height: 10rem; - max-width: 100%; - min-width: 70%; -} - -.contact-form input[type="submit"] { - background-color: rgba(50, 231, 255, 0.8); - color: #fff; - font-weight: bolder; - letter-spacing: 0.5rem; - cursor: pointer; - transition: background-color 0.5s; -} - -.contact-form input[type="submit"]:hover { - background-color: #32e7ff; -} - -.copyright { - font-size: 2rem; - letter-spacing: 0.2rem; - color: #444; - margin-top: 5rem; -} -/* End of Section 4 */ - -.scroll-up-btn { - width: 5rem; - height: 5rem; - background-color: rgba(50, 231, 255, 0.8); - position: fixed; - bottom: 5rem; - right: 5rem; - border-radius: 50%; - font-size: 1.6rem; - color: #fff; - display: flex; - justify-content: center; - align-items: center; - transition: background-color 0.5s; -} - -.scroll-up-btn:hover { - background-color: #32e7ff; -} - -/* Responsive */ -@media (max-width: 1400px) { - .floating-bg { - top: -120vw; - } - - .section-1-heading { - font-size: 6rem; - top: 25vw; - width: 70rem; - } - - .navbar-link { - font-size: 2rem; - } - - .logo { - top: 75%; - } - - .logo i { - font-size: 10rem; - } - - .section-heading { - font-size: 8rem; - margin-bottom: 10rem; - } - - .section-2 { - height: auto; - } - - .customers-wrapper { - flex-wrap: wrap; - } - - .customer { - margin: 5rem 10rem; - } - - .section-3 { - height: auto; - } - - .team-wrapper { - flex-wrap: wrap; - } - - .team-member { - margin: 5rem 10rem; - } - - .form-container { - height: 60%; - } - - .form-img { - display: none; - } - - .contact-form { - transform: translateY(0); - } - - .contact-form:hover { - transform: translateY(-1rem); - } - - .copyright { - margin: 5rem 0 4rem 0; - } -} - -@media (max-width: 1150px) { - .floating-bg { - top: -110vw; - } - - .section-1-heading { - font-size: 5rem; - top: 30vw; - width: 60rem; - } - - .logo i { - font-size: 9rem; - } -} - -@media (max-width: 950px) { - .floating-bg { - top: -100vw; - } - - .section-1-heading { - top: 40vw; - } - - .navbar { - justify-content: space-around; - } -} - -@media (max-width: 750px) { - html { - font-size: 50%; - } - - .floating-bg { - top: -90vw; - } - - .section-1-heading { - top: 48vw; - } - - .section-heading { - margin-bottom: 5rem; - } -} - -@media (max-width: 550px) { - html { - font-size: 45%; - } - - .floating-bg { - top: -70vw; - } - - .section-1-heading { - top: 65vw; - width: 42rem; - font-size: 3.5rem; - } - - .section-heading { - font-size: 6rem; - } - - .customer { - margin: 5rem 0; - } - - .team-member { - margin: 5rem 0; - } - - .section-4 { - height: auto; - } - - .form-container { - background-color: transparent; - box-shadow: none; - } - - .contact-form { - box-shadow: 1rem 1rem 2rem #aaa; - } - - .contact-form:hover { - box-shadow: 2rem 2rem 3rem #aaa; - } - - .copyright { - font-size: 1.8rem; - margin: 5rem; - text-align: center; - } - - .scroll-up-btn { - bottom: 2rem; - right: 2rem; - } -} -/* End of Responsive */ diff --git a/Project 2 - Creative Design/Starter Files/images/customer-img-1.jpg b/Project 2 - Creative Design/Starter Files/images/customer-img-1.jpg deleted file mode 100644 index f228cf3..0000000 Binary files a/Project 2 - Creative Design/Starter Files/images/customer-img-1.jpg and /dev/null differ diff --git a/Project 2 - Creative Design/Starter Files/images/customer-img-2.jpg b/Project 2 - Creative Design/Starter Files/images/customer-img-2.jpg deleted file mode 100644 index 79bd842..0000000 Binary files a/Project 2 - Creative Design/Starter Files/images/customer-img-2.jpg and /dev/null differ diff --git a/Project 2 - Creative Design/Starter Files/images/customer-img-3.jpg b/Project 2 - Creative Design/Starter Files/images/customer-img-3.jpg deleted file mode 100644 index 5c0f9fb..0000000 Binary files a/Project 2 - Creative Design/Starter Files/images/customer-img-3.jpg and /dev/null differ diff --git a/Project 2 - Creative Design/Starter Files/images/form-img.png b/Project 2 - Creative Design/Starter Files/images/form-img.png deleted file mode 100644 index 86e49ce..0000000 Binary files a/Project 2 - Creative Design/Starter Files/images/form-img.png and /dev/null differ diff --git a/Project 2 - Creative Design/Starter Files/images/team-member-1.jpg b/Project 2 - Creative Design/Starter Files/images/team-member-1.jpg deleted file mode 100644 index c21012b..0000000 Binary files a/Project 2 - Creative Design/Starter Files/images/team-member-1.jpg and /dev/null differ diff --git a/Project 2 - Creative Design/Starter Files/images/team-member-2.jpg b/Project 2 - Creative Design/Starter Files/images/team-member-2.jpg deleted file mode 100644 index 107bb76..0000000 Binary files a/Project 2 - Creative Design/Starter Files/images/team-member-2.jpg and /dev/null differ diff --git a/Project 2 - Creative Design/Starter Files/images/team-member-3.jpg b/Project 2 - Creative Design/Starter Files/images/team-member-3.jpg deleted file mode 100644 index be4f1dc..0000000 Binary files a/Project 2 - Creative Design/Starter Files/images/team-member-3.jpg and /dev/null differ diff --git a/Project 2 - Creative Design/Starter Files/index.html b/Project 2 - Creative Design/Starter Files/index.html deleted file mode 100644 index 748a7aa..0000000 --- a/Project 2 - Creative Design/Starter Files/index.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Project 2 - Creative Design/Starter Files/script.js b/Project 2 - Creative Design/Starter Files/script.js deleted file mode 100644 index e69de29..0000000 diff --git a/Project 2 - Creative Design/Starter Files/style.css b/Project 2 - Creative Design/Starter Files/style.css deleted file mode 100644 index e69de29..0000000 diff --git a/Project 3 - Personal Portfolio/Final Files/Links.txt b/Project 3 - Personal Portfolio/Final Files/Links.txt deleted file mode 100644 index 6146b8a..0000000 --- a/Project 3 - Personal Portfolio/Final Files/Links.txt +++ /dev/null @@ -1,26 +0,0 @@ -1. Architect Website -https://www.youtube.com/watch?v=3J-EFMzz94g - -2. Budget App -https://www.youtube.com/watch?v=fDffQYs2WB0 - -3. Wine House -https://www.youtube.com/watch?v=jtmuopTpzGE - -4. Task Manager -https://www.youtube.com/watch?v=fqup-BL3VjI - -5. The Road -https://www.youtube.com/watch?v=qmyN7lYY_xo - -6. Food Recipe App -https://www.youtube.com/watch?v=d1vT4kkTCaw - -7. Slideshow -https://www.youtube.com/watch?v=1qhSSp2q7n4 - -8. Hamburger Menu -https://www.youtube.com/watch?v=9Q7wy8r3i8w - -9. CSS Grid Menu -https://www.youtube.com/watch?v=HScySfeSmWc diff --git a/Project 3 - Personal Portfolio/Final Files/images/bg.jpg b/Project 3 - Personal Portfolio/Final Files/images/bg.jpg deleted file mode 100644 index b22cfce..0000000 Binary files a/Project 3 - Personal Portfolio/Final Files/images/bg.jpg and /dev/null differ diff --git a/Project 3 - Personal Portfolio/Final Files/images/john-smith.jpg b/Project 3 - Personal Portfolio/Final Files/images/john-smith.jpg deleted file mode 100644 index 7e297a4..0000000 Binary files a/Project 3 - Personal Portfolio/Final Files/images/john-smith.jpg and /dev/null differ diff --git a/Project 3 - Personal Portfolio/Final Files/images/project-1.jpg b/Project 3 - Personal Portfolio/Final Files/images/project-1.jpg deleted file mode 100644 index dd7e70a..0000000 Binary files a/Project 3 - Personal Portfolio/Final Files/images/project-1.jpg and /dev/null differ diff --git a/Project 3 - Personal Portfolio/Final Files/images/project-2.jpg b/Project 3 - Personal Portfolio/Final Files/images/project-2.jpg deleted file mode 100644 index fa2b79a..0000000 Binary files a/Project 3 - Personal Portfolio/Final Files/images/project-2.jpg and /dev/null differ diff --git a/Project 3 - Personal Portfolio/Final Files/images/project-3.jpg b/Project 3 - Personal Portfolio/Final Files/images/project-3.jpg deleted file mode 100644 index ac7948d..0000000 Binary files a/Project 3 - Personal Portfolio/Final Files/images/project-3.jpg and /dev/null differ diff --git a/Project 3 - Personal Portfolio/Final Files/images/project-4.jpg b/Project 3 - Personal Portfolio/Final Files/images/project-4.jpg deleted file mode 100644 index aebb1c2..0000000 Binary files a/Project 3 - Personal Portfolio/Final Files/images/project-4.jpg and /dev/null differ diff --git a/Project 3 - Personal Portfolio/Final Files/images/project-5.jpg b/Project 3 - Personal Portfolio/Final Files/images/project-5.jpg deleted file mode 100644 index 8004d39..0000000 Binary files a/Project 3 - Personal Portfolio/Final Files/images/project-5.jpg and /dev/null differ diff --git a/Project 3 - Personal Portfolio/Final Files/images/project-6.jpg b/Project 3 - Personal Portfolio/Final Files/images/project-6.jpg deleted file mode 100644 index 56d2060..0000000 Binary files a/Project 3 - Personal Portfolio/Final Files/images/project-6.jpg and /dev/null differ diff --git a/Project 3 - Personal Portfolio/Final Files/images/project-7.jpg b/Project 3 - Personal Portfolio/Final Files/images/project-7.jpg deleted file mode 100644 index 0d54b4f..0000000 Binary files a/Project 3 - Personal Portfolio/Final Files/images/project-7.jpg and /dev/null differ diff --git a/Project 3 - Personal Portfolio/Final Files/images/project-8.jpg b/Project 3 - Personal Portfolio/Final Files/images/project-8.jpg deleted file mode 100644 index fa77b50..0000000 Binary files a/Project 3 - Personal Portfolio/Final Files/images/project-8.jpg and /dev/null differ diff --git a/Project 3 - Personal Portfolio/Final Files/images/project-9.jpg b/Project 3 - Personal Portfolio/Final Files/images/project-9.jpg deleted file mode 100644 index 72eb786..0000000 Binary files a/Project 3 - Personal Portfolio/Final Files/images/project-9.jpg and /dev/null differ diff --git a/Project 3 - Personal Portfolio/Final Files/index.html b/Project 3 - Personal Portfolio/Final Files/index.html deleted file mode 100644 index f94ee00..0000000 --- a/Project 3 - Personal Portfolio/Final Files/index.html +++ /dev/null @@ -1,287 +0,0 @@ - - - - - - - - - - - - - -
- -
-

- Web Developer -

- John Smith -

John Smith

- Projects -
- - - - - - - - -
-

About Me

-
-
-

- HTML - % -

-
-
-
-

- CSS - % -

-
-
-
-

- JavaScript - % -

-
-
-
-

- SASS - % -

-
-
-
-

- ReactJS - % -

-
-
-
-

- NodeJS - % -

-
-
-
-

- MongoDB - % -

-
-
-
-
-
- -

Creative

-
-
- -

Problem Solving

-
-
- -

Fast

-
-
- -

Dynamic

-
-
-
- - - -
-

My Projects

-
-
-
-

architect website

-

HTML / CSS / JS

-
- - Go to Video -
-
-
-

Budget App

-

ReactJS

-
- - Go to Video -
-
-
-

wine house

-

HTML / CSS / JS

-
- - Go to Video -
-
-
-

task manager

-

ReactJS

-
- - Go to Video -
-
-
-

The Road

-

HTML / CSS / JS

-
- - Go to Video -
-
-
-

food recipe app

-

ReactJS

-
- - Go to Video -
-
-
-

slideshow

-

HTML / CSS / JS

-
- - Go to Video -
-
-
-

Hamburger menu

-

HTML / CSS / JS

-
- - Go to Video -
-
-
-

CSS grid menu

-

HTML / CSS / JS

-
- - Go to Video -
-
-
- - - -
-

Contact Me

-
- - - - -
-
- - - - - -
- - - - diff --git a/Project 3 - Personal Portfolio/Final Files/script.js b/Project 3 - Personal Portfolio/Final Files/script.js deleted file mode 100644 index 3fbdce0..0000000 --- a/Project 3 - Personal Portfolio/Final Files/script.js +++ /dev/null @@ -1,41 +0,0 @@ -const navbar = document.querySelector(".navbar"); -const navbarOffsetTop = navbar.offsetTop; -const sections = document.querySelectorAll("section"); -const navbarLinks = document.querySelectorAll(".navbar-link"); -const progress = document.querySelector(".progress-bars-wrapper"); -const progressBarPercents = [97, 89, 85, 87, 80, 70, 50]; - -window.addEventListener("scroll", () => { - mainFn(); -}); - -const mainFn = () => { - if (window.pageYOffset >= navbarOffsetTop) { - navbar.classList.add("sticky"); - } else { - navbar.classList.remove("sticky"); - } - - sections.forEach((section, i) => { - if (window.pageYOffset >= section.offsetTop - 10) { - navbarLinks.forEach((navbarLink) => { - navbarLink.classList.remove("change"); - }); - navbarLinks[i].classList.add("change"); - } - }); - - if (window.pageYOffset + window.innerHeight >= progress.offsetTop) { - document.querySelectorAll(".progress-percent").forEach((el, i) => { - el.style.width = `${progressBarPercents[i]}%`; - el.previousElementSibling.firstElementChild.textContent = - progressBarPercents[i]; - }); - } -}; - -mainFn(); - -window.addEventListener("resize", () => { - window.location.reload(); -}); diff --git a/Project 3 - Personal Portfolio/Final Files/style.css b/Project 3 - Personal Portfolio/Final Files/style.css deleted file mode 100644 index 9eb6b3a..0000000 --- a/Project 3 - Personal Portfolio/Final Files/style.css +++ /dev/null @@ -1,488 +0,0 @@ -/* Reset and Common Styles */ -* { - margin: 0; - padding: 0; - outline: none; - box-sizing: border-box; - text-decoration: none; - list-style-type: none; - font-family: "Jost", sans-serif; - font-weight: 400; -} - -html { - font-size: 62.5%; - scroll-behavior: smooth; -} - -.center { - display: flex; - justify-content: center; - align-items: center; -} - -.section-heading { - font-size: 5rem; - color: #333; - text-transform: uppercase; - letter-spacing: 0.5rem; - margin-bottom: 15rem; - border-bottom: 0.3rem solid #333; - text-shadow: 0.2rem 0.2rem 0.5rem #555; -} -/* End of Reset and Common Styles */ - -/* Section 1 */ -.section-1 { - width: 100%; - height: 100vh; - background: linear-gradient( - rgba(255, 255, 255, 0.2), - rgba(255, 255, 255, 0.3) - ), - url(images/bg.jpg) center no-repeat; - background-size: cover; - flex-direction: column; -} - -.section-1-heading { - font-size: 6rem; - font-weight: 700; - color: #fff; - background-color: #e41c6f; - padding: 0 3rem; - margin-bottom: 5rem; - text-transform: uppercase; - letter-spacing: 1rem; - border-bottom: 0.3rem solid #fff; - text-shadow: 0.2rem 0.2rem 1rem #555; - transform: skew(-10deg); -} - -.person-img { - width: 25rem; - height: 25rem; - object-fit: cover; - border-radius: 50%; - border: 0.7rem dotted #e41c6f; - background-color: rgba(255, 255, 255, 0.7); - padding: 0.5rem; - opacity: 0.9; -} - -.person-name { - font-size: 2rem; - color: #fff; - background-color: #e41c6f; - margin: 5rem 0; - padding: 0.5rem 3rem; - letter-spacing: 0.3rem; - transform: skew(-10deg); -} - -.section-1-btn { - font-size: 1.7rem; - font-weight: 700; - color: #333; - background-color: #fff; - border: 0.3rem solid #333; - padding: 0.5rem 1rem; - text-transform: uppercase; - letter-spacing: 0.3rem; -} -/* End of Section 1 */ - -/* Navbar */ -.navbar { - width: 100%; - height: 4rem; - background-color: #e41c6f; - box-shadow: 0.2rem 0.2rem 0.5rem #555; - position: absolute; - z-index: 300; -} - -.sticky { - position: fixed; - top: 0; -} - -.navbar-link { - font-size: 1.7rem; - font-weight: 600; - color: #333; - margin: 0 3rem; - letter-spacing: 0.3rem; - text-transform: uppercase; - position: relative; - transition: color 0.2s; -} - -.change.navbar-link { - color: #fff; -} - -.navbar-link:hover { - color: #fff; -} - -.navbar-link::before { - content: ""; - width: 0; - height: 0.2rem; - background-color: #fff; - position: absolute; - right: -15%; - bottom: -0.3rem; - transition: width 0.2s; -} - -.change.navbar-link::before { - width: 130%; -} - -.navbar-link:hover::before { - width: 130%; -} -/* End of Navbar */ - -/* Section 2 */ -.section-2 { - width: 100%; - height: 100%; - padding: 15rem 0 10rem 0; - background-color: #fff; - display: flex; - flex-direction: column; - align-items: center; -} - -.progress-bars-wrapper { - margin-bottom: 10rem; -} - -.progress-bar { - width: 60rem; - height: 3rem; - background-color: #ccc; - margin: 1.5rem 0; - border-radius: 0.3rem; - box-shadow: 0.2rem 0.2rem 1rem #555; - position: relative; -} - -.progress-text { - position: absolute; - left: 1rem; - font-size: 1.5rem; - color: #fff; -} - -.progress-text span { - margin: 0 0.5rem; - font-size: 1.8rem; - font-weight: 700; -} - -.progress-percent { - width: 0; - height: 100%; - background-color: #e41c6f; - border-radius: 0.3rem; - transition: width 0.5s 0.5s ease-in-out; -} - -.services { - width: 100%; - height: 30vh; - display: flex; - justify-content: space-evenly; - align-items: center; -} - -.service { - text-align: center; -} - -.service:first-child, -.service:last-child { - align-self: flex-start; -} - -.service i { - font-size: 10rem; - color: #888; - margin-bottom: 2rem; - text-shadow: 0.1rem 0.1rem 0.5rem #555; -} - -.service h2 { - font-size: 2rem; - color: #fff; - background-color: #777; - width: 25rem; - letter-spacing: 0.3rem; - transform: skew(-10deg); - box-shadow: 0.2rem 0.2rem 0.5rem #555; -} -/* End of Section 2 */ - -/* Section 3 */ -.section-3 { - width: 100%; - height: 100%; - padding: 10rem 0; - background-color: #eef; - display: flex; - flex-direction: column; - align-items: center; -} - -.projects-wrapper { - width: 80%; - flex-wrap: wrap; -} - -.project { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin: 1rem; - background-color: #fff; - box-shadow: 0.3rem 0.3rem 0.5rem #777; - position: relative; - overflow: hidden; - transition: box-shadow 0.5s; -} - -.project:hover { - box-shadow: 1rem 1rem 1rem #777; -} - -.project-text { - text-align: center; - letter-spacing: 0.1rem; - position: absolute; - top: -10rem; - z-index: 10; - transition: top 0.3s; -} - -.project:hover .project-text { - top: 5rem; - transition: top 0.3s 0.3s; -} - -.project-name { - font-size: 3rem; - font-weight: 700; - color: #333; - text-transform: capitalize; -} - -.project-technologies { - font-size: 1.8rem; - color: #e41c6f; -} - -.project-img { - width: 40rem; - transition: opacity 0.3s; -} - -.project:hover .project-img { - opacity: 0.2; -} - -.project-link { - font-size: 2rem; - font-weight: 500; - color: #333; - letter-spacing: 0.1rem; - border: 0.3rem solid #e41c6f; - padding: 0 1rem; - background-color: #fff; - position: absolute; - bottom: -5rem; - transition: bottom 0.3s; -} - -.project:hover .project-link { - bottom: 5rem; - transition: bottom 0.3s 0.3s; -} -/* End of Section 3 */ - -/* Section 4 */ -.section-4 { - width: 100%; - height: 70vh; - background-color: #333; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-evenly; -} - -.section-4-heading { - color: #fff; - box-shadow: none; - border-color: #fff; - margin-bottom: 5rem; -} - -.contact-form { - width: 50rem; - flex-direction: column; -} - -.contact-form input, -.contact-form textarea { - width: 100%; - padding: 0.5rem; - margin: 0.5rem 0; - background-color: #eef; - font-size: 1.5rem; - border: 0.2rem solid #e41c6f; - color: #555; -} - -.contact-form textarea { - height: 10rem; - max-height: 15rem; - max-width: 100%; -} - -.contact-form .contact-form-btn { - background-color: #e41c6f; - color: #fff; - text-transform: uppercase; - letter-spacing: 1rem; - cursor: pointer; -} -/* End of Section 4 */ - -/* Section 5 */ -.section-5 { - width: 100%; - height: 30vh; - background-color: #222; - flex-direction: column; -} - -.social-media { - margin-bottom: 5rem; -} - -.social-media-link { - margin: 0 2rem; - padding: 0.7rem; - background-color: #e41c6f; - border-radius: 0.5rem; - display: inline-block; -} - -.social-media-link i { - font-size: 3rem; - color: #fff; -} - -.copyright { - color: #aaa; - font-size: 2rem; - letter-spacing: 0.2rem; - font-weight: 300; - text-align: center; -} -/* End of Section 5 */ - -/* Responsive */ -@media (max-width: 1200px) { - .services { - height: auto; - flex-wrap: wrap; - } - - .service { - margin: 3rem 2rem; - } - - .section-4 { - height: 80vh; - } -} - -@media (max-width: 800px) { - .section-1-heading { - font-size: 4rem; - } - - .progress-bar { - width: 50rem; - } -} - -@media (max-width: 600px) { - .section-1-heading { - font-size: 3rem; - } - - .navbar-link { - margin: 0 2rem; - font-size: 1.5rem; - } - - .section-2 { - padding: 10rem; - } - - .section-2-heading { - margin-bottom: 10rem; - } - - .progress-bar { - width: 45rem; - } - - .project-img { - width: 100%; - } - - .contact-form { - width: 40rem; - } - - .copyright { - width: 70%; - } -} - -@media (max-width: 500px) { - html { - font-size: 55%; - } -} - -@media (max-width: 450px) { - html { - font-size: 45%; - } - - .section-1-heading { - font-size: 2.5rem; - } - - .navbar-link { - margin: 0 1.5rem; - } - - .section-2-heading { - text-align: center; - } - - .progress-bar { - width: 40rem; - } -} -/* End of Responsive */ diff --git a/Project 3 - Personal Portfolio/Personal Portfolio.rar b/Project 3 - Personal Portfolio/Personal Portfolio.rar deleted file mode 100644 index 2a7981d..0000000 Binary files a/Project 3 - Personal Portfolio/Personal Portfolio.rar and /dev/null differ diff --git a/Project 3 - Personal Portfolio/Starter Files/Links.txt b/Project 3 - Personal Portfolio/Starter Files/Links.txt deleted file mode 100644 index 6146b8a..0000000 --- a/Project 3 - Personal Portfolio/Starter Files/Links.txt +++ /dev/null @@ -1,26 +0,0 @@ -1. Architect Website -https://www.youtube.com/watch?v=3J-EFMzz94g - -2. Budget App -https://www.youtube.com/watch?v=fDffQYs2WB0 - -3. Wine House -https://www.youtube.com/watch?v=jtmuopTpzGE - -4. Task Manager -https://www.youtube.com/watch?v=fqup-BL3VjI - -5. The Road -https://www.youtube.com/watch?v=qmyN7lYY_xo - -6. Food Recipe App -https://www.youtube.com/watch?v=d1vT4kkTCaw - -7. Slideshow -https://www.youtube.com/watch?v=1qhSSp2q7n4 - -8. Hamburger Menu -https://www.youtube.com/watch?v=9Q7wy8r3i8w - -9. CSS Grid Menu -https://www.youtube.com/watch?v=HScySfeSmWc diff --git a/Project 3 - Personal Portfolio/Starter Files/images/bg.jpg b/Project 3 - Personal Portfolio/Starter Files/images/bg.jpg deleted file mode 100644 index b22cfce..0000000 Binary files a/Project 3 - Personal Portfolio/Starter Files/images/bg.jpg and /dev/null differ diff --git a/Project 3 - Personal Portfolio/Starter Files/images/john-smith.jpg b/Project 3 - Personal Portfolio/Starter Files/images/john-smith.jpg deleted file mode 100644 index 7e297a4..0000000 Binary files a/Project 3 - Personal Portfolio/Starter Files/images/john-smith.jpg and /dev/null differ diff --git a/Project 3 - Personal Portfolio/Starter Files/images/project-1.jpg b/Project 3 - Personal Portfolio/Starter Files/images/project-1.jpg deleted file mode 100644 index dd7e70a..0000000 Binary files a/Project 3 - Personal Portfolio/Starter Files/images/project-1.jpg and /dev/null differ diff --git a/Project 3 - Personal Portfolio/Starter Files/images/project-2.jpg b/Project 3 - Personal Portfolio/Starter Files/images/project-2.jpg deleted file mode 100644 index fa2b79a..0000000 Binary files a/Project 3 - Personal Portfolio/Starter Files/images/project-2.jpg and /dev/null differ diff --git a/Project 3 - Personal Portfolio/Starter Files/images/project-3.jpg b/Project 3 - Personal Portfolio/Starter Files/images/project-3.jpg deleted file mode 100644 index ac7948d..0000000 Binary files a/Project 3 - Personal Portfolio/Starter Files/images/project-3.jpg and /dev/null differ diff --git a/Project 3 - Personal Portfolio/Starter Files/images/project-4.jpg b/Project 3 - Personal Portfolio/Starter Files/images/project-4.jpg deleted file mode 100644 index aebb1c2..0000000 Binary files a/Project 3 - Personal Portfolio/Starter Files/images/project-4.jpg and /dev/null differ diff --git a/Project 3 - Personal Portfolio/Starter Files/images/project-5.jpg b/Project 3 - Personal Portfolio/Starter Files/images/project-5.jpg deleted file mode 100644 index 8004d39..0000000 Binary files a/Project 3 - Personal Portfolio/Starter Files/images/project-5.jpg and /dev/null differ diff --git a/Project 3 - Personal Portfolio/Starter Files/images/project-6.jpg b/Project 3 - Personal Portfolio/Starter Files/images/project-6.jpg deleted file mode 100644 index 56d2060..0000000 Binary files a/Project 3 - Personal Portfolio/Starter Files/images/project-6.jpg and /dev/null differ diff --git a/Project 3 - Personal Portfolio/Starter Files/images/project-7.jpg b/Project 3 - Personal Portfolio/Starter Files/images/project-7.jpg deleted file mode 100644 index 0d54b4f..0000000 Binary files a/Project 3 - Personal Portfolio/Starter Files/images/project-7.jpg and /dev/null differ diff --git a/Project 3 - Personal Portfolio/Starter Files/images/project-8.jpg b/Project 3 - Personal Portfolio/Starter Files/images/project-8.jpg deleted file mode 100644 index fa77b50..0000000 Binary files a/Project 3 - Personal Portfolio/Starter Files/images/project-8.jpg and /dev/null differ diff --git a/Project 3 - Personal Portfolio/Starter Files/images/project-9.jpg b/Project 3 - Personal Portfolio/Starter Files/images/project-9.jpg deleted file mode 100644 index 72eb786..0000000 Binary files a/Project 3 - Personal Portfolio/Starter Files/images/project-9.jpg and /dev/null differ diff --git a/Project 3 - Personal Portfolio/Starter Files/index.html b/Project 3 - Personal Portfolio/Starter Files/index.html deleted file mode 100644 index ec7ad2b..0000000 --- a/Project 3 - Personal Portfolio/Starter Files/index.html +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/Project 3 - Personal Portfolio/Starter Files/script.js b/Project 3 - Personal Portfolio/Starter Files/script.js deleted file mode 100644 index e69de29..0000000 diff --git a/Project 3 - Personal Portfolio/Starter Files/style.css b/Project 3 - Personal Portfolio/Starter Files/style.css deleted file mode 100644 index e69de29..0000000 diff --git a/Project 4 - Classic Cars/Classic Cars - Final Files.rar b/Project 4 - Classic Cars/Classic Cars - Final Files.rar deleted file mode 100644 index ef12cbf..0000000 Binary files a/Project 4 - Classic Cars/Classic Cars - Final Files.rar and /dev/null differ diff --git a/Project 4 - Classic Cars/Classic Cars - Starter Files.rar b/Project 4 - Classic Cars/Classic Cars - Starter Files.rar deleted file mode 100644 index 8d0c81b..0000000 Binary files a/Project 4 - Classic Cars/Classic Cars - Starter Files.rar and /dev/null differ diff --git a/Project 4 - Classic Cars/Classic Cars.rar b/Project 4 - Classic Cars/Classic Cars.rar deleted file mode 100644 index e930a1b..0000000 Binary files a/Project 4 - Classic Cars/Classic Cars.rar and /dev/null differ diff --git a/Project 4 - Classic Cars/Final Files/images/bg-section1.jpg b/Project 4 - Classic Cars/Final Files/images/bg-section1.jpg deleted file mode 100644 index 74ccce3..0000000 Binary files a/Project 4 - Classic Cars/Final Files/images/bg-section1.jpg and /dev/null differ diff --git a/Project 4 - Classic Cars/Final Files/images/bg-section5.jpg b/Project 4 - Classic Cars/Final Files/images/bg-section5.jpg deleted file mode 100644 index 4edc007..0000000 Binary files a/Project 4 - Classic Cars/Final Files/images/bg-section5.jpg and /dev/null differ diff --git a/Project 4 - Classic Cars/Final Files/images/car-1.jpg b/Project 4 - Classic Cars/Final Files/images/car-1.jpg deleted file mode 100644 index daa813f..0000000 Binary files a/Project 4 - Classic Cars/Final Files/images/car-1.jpg and /dev/null differ diff --git a/Project 4 - Classic Cars/Final Files/images/car-2.jpg b/Project 4 - Classic Cars/Final Files/images/car-2.jpg deleted file mode 100644 index 626f9c1..0000000 Binary files a/Project 4 - Classic Cars/Final Files/images/car-2.jpg and /dev/null differ diff --git a/Project 4 - Classic Cars/Final Files/images/car-3.jpg b/Project 4 - Classic Cars/Final Files/images/car-3.jpg deleted file mode 100644 index ce79582..0000000 Binary files a/Project 4 - Classic Cars/Final Files/images/car-3.jpg and /dev/null differ diff --git a/Project 4 - Classic Cars/Final Files/images/car-section1.png b/Project 4 - Classic Cars/Final Files/images/car-section1.png deleted file mode 100644 index 67b2fa2..0000000 Binary files a/Project 4 - Classic Cars/Final Files/images/car-section1.png and /dev/null differ diff --git a/Project 4 - Classic Cars/Final Files/images/car-video-1.mp4 b/Project 4 - Classic Cars/Final Files/images/car-video-1.mp4 deleted file mode 100644 index 9204a0c..0000000 Binary files a/Project 4 - Classic Cars/Final Files/images/car-video-1.mp4 and /dev/null differ diff --git a/Project 4 - Classic Cars/Final Files/images/car-video-2.mp4 b/Project 4 - Classic Cars/Final Files/images/car-video-2.mp4 deleted file mode 100644 index 3a8a1b9..0000000 Binary files a/Project 4 - Classic Cars/Final Files/images/car-video-2.mp4 and /dev/null differ diff --git a/Project 4 - Classic Cars/Final Files/images/car-video-3.mp4 b/Project 4 - Classic Cars/Final Files/images/car-video-3.mp4 deleted file mode 100644 index c26fd8a..0000000 Binary files a/Project 4 - Classic Cars/Final Files/images/car-video-3.mp4 and /dev/null differ diff --git a/Project 4 - Classic Cars/Final Files/images/car-video-4.mp4 b/Project 4 - Classic Cars/Final Files/images/car-video-4.mp4 deleted file mode 100644 index a6e1e1a..0000000 Binary files a/Project 4 - Classic Cars/Final Files/images/car-video-4.mp4 and /dev/null differ diff --git a/Project 4 - Classic Cars/Final Files/images/car-video-5.mp4 b/Project 4 - Classic Cars/Final Files/images/car-video-5.mp4 deleted file mode 100644 index bb6e341..0000000 Binary files a/Project 4 - Classic Cars/Final Files/images/car-video-5.mp4 and /dev/null differ diff --git a/Project 4 - Classic Cars/Final Files/images/car-video-6.mp4 b/Project 4 - Classic Cars/Final Files/images/car-video-6.mp4 deleted file mode 100644 index bd2eb0b..0000000 Binary files a/Project 4 - Classic Cars/Final Files/images/car-video-6.mp4 and /dev/null differ diff --git a/Project 4 - Classic Cars/Final Files/images/gallery-car-1.jpg b/Project 4 - Classic Cars/Final Files/images/gallery-car-1.jpg deleted file mode 100644 index ccf430f..0000000 Binary files a/Project 4 - Classic Cars/Final Files/images/gallery-car-1.jpg and /dev/null differ diff --git a/Project 4 - Classic Cars/Final Files/images/gallery-car-2.jpg b/Project 4 - Classic Cars/Final Files/images/gallery-car-2.jpg deleted file mode 100644 index b4a3ab3..0000000 Binary files a/Project 4 - Classic Cars/Final Files/images/gallery-car-2.jpg and /dev/null differ diff --git a/Project 4 - Classic Cars/Final Files/images/gallery-car-3.jpg b/Project 4 - Classic Cars/Final Files/images/gallery-car-3.jpg deleted file mode 100644 index 97944ca..0000000 Binary files a/Project 4 - Classic Cars/Final Files/images/gallery-car-3.jpg and /dev/null differ diff --git a/Project 4 - Classic Cars/Final Files/images/gallery-car-4.jpg b/Project 4 - Classic Cars/Final Files/images/gallery-car-4.jpg deleted file mode 100644 index 5e6d9ee..0000000 Binary files a/Project 4 - Classic Cars/Final Files/images/gallery-car-4.jpg and /dev/null differ diff --git a/Project 4 - Classic Cars/Final Files/images/gallery-car-5.jpg b/Project 4 - Classic Cars/Final Files/images/gallery-car-5.jpg deleted file mode 100644 index c4d9c7f..0000000 Binary files a/Project 4 - Classic Cars/Final Files/images/gallery-car-5.jpg and /dev/null differ diff --git a/Project 4 - Classic Cars/Final Files/images/gallery-car-6.jpg b/Project 4 - Classic Cars/Final Files/images/gallery-car-6.jpg deleted file mode 100644 index 7a6b6c6..0000000 Binary files a/Project 4 - Classic Cars/Final Files/images/gallery-car-6.jpg and /dev/null differ diff --git a/Project 4 - Classic Cars/Final Files/index.html b/Project 4 - Classic Cars/Final Files/index.html deleted file mode 100644 index 94b5f2c..0000000 --- a/Project 4 - Classic Cars/Final Files/index.html +++ /dev/null @@ -1,139 +0,0 @@ - - - - - - - - - - - - - -
-
-
-
- - - - - - - -
-
-

Classic Cars

- -
-
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
-
-

Contact Us

-
- - - - -
-

- Copyright © CodeAndCreate All Rights Reserved -

-
-
- - - - diff --git a/Project 4 - Classic Cars/Final Files/script.js b/Project 4 - Classic Cars/Final Files/script.js deleted file mode 100644 index c6789d4..0000000 --- a/Project 4 - Classic Cars/Final Files/script.js +++ /dev/null @@ -1,24 +0,0 @@ -document.querySelector(".menu").addEventListener("click", () => { - document.querySelectorAll(".target").forEach((item) => { - item.classList.toggle("change"); - }); -}); - -document.querySelectorAll(".wrapper").forEach((item) => { - item.addEventListener("click", () => { - document.querySelectorAll(".target").forEach((item) => { - item.classList.remove("change"); - }); - }); -}); - -const videos = document.querySelectorAll(".video"); - -videos.forEach((video) => { - video.addEventListener("mouseover", () => { - video.play(); - }); - video.addEventListener("mouseout", () => { - video.pause(); - }); -}); diff --git a/Project 4 - Classic Cars/Final Files/style.css b/Project 4 - Classic Cars/Final Files/style.css deleted file mode 100644 index 5214b2e..0000000 --- a/Project 4 - Classic Cars/Final Files/style.css +++ /dev/null @@ -1,586 +0,0 @@ -/* Common Styles */ -* { - margin: 0; - padding: 0; - outline: none; - box-sizing: border-box; - text-decoration: none; - list-style-type: none; - font-family: "Special Elite", cursive; - font-weight: 400; -} - -html { - font-size: 62.5%; - scroll-behavior: smooth; -} - -body { - background-color: #ccc; - padding-right: 3rem; -} - -.center { - display: flex; - justify-content: center; - align-items: center; -} -/* End of Common Styles */ - -/* Menu */ -.menu { - width: 4rem; - height: 4rem; - position: fixed; - top: 2rem; - left: 2rem; - z-index: 10; - flex-direction: column; - cursor: pointer; - transition: all 0.5s; -} - -.menu.change { - transform: rotate(45deg); - left: 15vw; -} - -.menu-line { - width: 100%; - height: 0.2rem; - background-color: #fff; - margin: 0.3rem 0; - box-shadow: 0.1rem 0.1rem 0.3rem #222; - transition: transform 0.5s; -} - -.change .menu-line-1 { - transform: rotate(270deg) translateX(-0.4rem); -} - -.change .menu-line-2 { - transform: rotate(360deg) translateY(-0.4rem); -} -/* End of Menu */ - -/* Navbar */ -.navbar { - width: 15vw; - height: 100vh; - background-color: #fff; - position: fixed; - top: 0; - left: -15vw; - display: flex; - flex-direction: column; - padding: 4rem 0 0 4rem; - z-index: 10; - transition: left 0.5s; -} - -.navbar.change { - left: 0; -} - -.navbar-link { - font-size: 1.5rem; - font-weight: 600; - margin: 2rem 0; - color: #777; - letter-spacing: 0.3rem; - text-transform: uppercase; - transition: color 0.3s; -} - -.navbar-link:hover { - color: #111; -} -/* End of Navbar */ - -/* Common Section Styles */ -.wrapper { - width: 100%; - perspective: 50rem; -} - -section { - width: 100%; - height: 100vh; - background-color: #efefef; - position: relative; - left: 0; - margin-bottom: 3rem; - transform-origin: left; - box-shadow: 0.5rem 0.5rem 1rem #aaa; - padding: 5rem 0; - transition: left 0.5s, transform 0.5s; -} - -section.change { - left: 15vw; - transform: rotateY(10deg); -} - -.section-heading { - font-size: 10rem; - font-weight: bolder; - color: #fff; - margin-bottom: 10rem; - letter-spacing: 1rem; - text-align: center; - text-shadow: 0.3rem 0.3rem 0.5rem #555; -} -/* End of Common Section Styles */ - -/* Section-1 */ -.section-1 { - flex-direction: column; - background: url(images/bg-section1.jpg) center no-repeat; - background-size: cover; -} - -.section-1 .section-1-heading { - margin-bottom: 3rem; - text-transform: uppercase; - text-shadow: 1rem 1rem 1rem #000, 2rem 2rem 2rem #111, 3rem 3rem 3rem #222; -} - -.section-1-img { - width: 70%; -} -/* End of Section-1 */ - -/* Section 2 */ -.section-2 { - display: flex; - flex-direction: column; - justify-content: space-around; -} - -.card { - width: 50rem; - margin: 0 3rem; - background-color: #fff; - padding: 1rem; - box-shadow: 0.6rem 0.6rem 0.6rem #bbb; - position: relative; - transition: box-shadow 0.5s; -} - -.card:hover { - box-shadow: 0.8rem 0.8rem 0.8rem #bbb; -} - -.car-name { - font-size: 2rem; - font-weight: 600; - text-transform: uppercase; - color: #fff; - position: absolute; - top: 2rem; - left: 2rem; - z-index: 10; -} - -.card-img { - width: 100%; - opacity: 0.8; - transition: opacity 0.5s; -} - -.card:hover .card-img { - opacity: 1; -} - -.car-price { - font-size: 1.8rem; - color: #777; - margin: 0.5rem 0; -} - -.card-btn { - width: 100%; - background-color: #fff; - font-size: 1.7rem; - letter-spacing: 0.3rem; - text-transform: uppercase; - border: none; - margin-top: 1rem; - padding: 0.5rem; - color: #fff; - text-shadow: 0.1rem 0.1rem 0.3rem #000; - box-shadow: 0.1rem 0.1rem 0.5rem #bbb; - cursor: pointer; -} -/* End of Section 2 */ - -/* Section 3 */ -.section-3 { - display: flex; - flex-direction: column; - justify-content: space-around; - background-color: #222; -} - -.video { - width: 25%; - margin: 0 2rem; - border-radius: 0.5rem; - opacity: 0.8; - box-shadow: 0.3rem 0.3rem 0.5rem #111; - transition: all 0.5s; -} - -.video:hover { - opacity: 1; - box-shadow: 0.5rem 0.5rem 1rem #111; -} -/* End of Section 3 */ - -/* Section 4 */ -.section-4 { - display: flex; - flex-direction: column; - justify-content: space-between; -} - -.gallery { - margin: 10rem 0; - perspective: 10rem; -} - -.gallery-shelf { - width: 80%; - height: 3rem; - background-color: rgba(38, 126, 199, 0.8); - margin: auto; - position: relative; - box-shadow: 1rem 1rem 5rem #444; -} - -.gallery-shelf::before { - content: ""; - position: absolute; - width: 100%; - height: 10rem; - background-color: rgba(34, 152, 248, 0.7); - top: -10rem; - transform: rotateX(20deg); - transform-origin: bottom; -} - -.gallery img { - width: 15%; - position: absolute; - bottom: 6rem; - transform: translateX(-50%) rotateX(0.5deg); - box-shadow: 0.2rem -0.2rem 0.5rem #888; - border-radius: 0.5rem; - transform-origin: bottom; - transition: all 0.3s; -} - -.gallery img:hover { - transform: translateX(-50%) rotateX(0); - box-shadow: 0 0.2rem 0.3rem #888; -} - -.gallery-img-1 { - left: 50%; -} - -.gallery-img-2 { - left: 30%; -} - -.gallery-img-3 { - left: 70%; -} -/* End of Section 4 */ - -/* Section 5 */ -.section-5 { - background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)), - url(images/bg-section5.jpg) center no-repeat; - background-size: cover; - display: flex; - flex-direction: column; - justify-content: space-around; - align-items: center; - margin-bottom: 0; -} - -.contact-form { - width: 60rem; - height: 45rem; - background-color: rgba(255, 255, 255, 0.2); - border: 2rem solid rgba(255, 255, 255, 0.8); - display: flex; - flex-direction: column; - justify-content: center; - padding: 5rem; -} - -.contact-form input, -.contact-form textarea { - width: 100%; - height: 4rem; - margin: 2rem 0; - background-color: transparent; - padding: 0.5rem; - border: 0.1rem solid #fff; - font-size: 1.5rem; - letter-spacing: 0.1rem; - color: #fff; - flex-shrink: 0; - transition: background-color 0.5s; -} - -.contact-form textarea { - max-width: 100%; - min-height: 8rem; -} - -.form-input:focus { - background-color: rgba(255, 255, 255, 0.5); -} - -.contact-form .form-btn { - background-color: rgba(255, 255, 255, 0.8); - font-weight: 600; - letter-spacing: 0.3rem; - color: #444; - cursor: pointer; -} - -.copyright { - font-size: 2rem; - font-weight: 300; - color: #fff; - text-align: center; -} -/* End of Section 5 */ - -/* Responsive */ -@media (max-width: 1500px) { - .navbar { - width: 20vw; - padding: 2rem 0 0 2rem; - left: -20vw; - } - - .menu.change { - left: 20vw; - } - - section.change { - left: 20vw; - transform: rotateY(15deg); - } - - .section-heading { - font-size: 7rem; - } - - .section-1 { - justify-content: space-evenly; - } - - .section-2 { - height: auto; - padding: 5rem 0 10rem 0; - } - - .cards-wrapper { - flex-wrap: wrap; - } - - .card { - width: 40rem; - margin: 3rem; - } - - .section-3 { - padding: 5rem 3rem; - } - - .video { - width: 30%; - margin: 2rem; - } - - .section-4 { - height: auto; - } - - .gallery { - margin: 12rem 0; - } - - .gallery-shelf { - width: 90%; - } - - .gallery img { - width: 20%; - } - - .gallery-img-2 { - left: 25%; - } - - .gallery-img-3 { - left: 75%; - } - - .section-5 { - height: auto; - } - - .contact-form { - width: 55rem; - height: 40rem; - padding: 2rem; - } - - .copyright { - margin-top: 5rem; - } -} - -@media (max-width: 1000px) { - body { - padding-right: 0; - } - - .navbar { - width: 25vw; - left: -25vw; - } - - .menu.change { - left: 25vw; - } - - section.change { - left: 25vw; - transform: rotateY(20deg); - } - - .section-1-img { - width: 90%; - } - - .section-3 { - height: auto; - } - - .videos-wrapper { - flex-direction: column; - } - - .video { - width: 70%; - margin: 3rem 0; - } -} - -@media (max-width: 750px) { - .navbar { - width: 30vw; - left: -30vw; - } - - .menu.change { - left: 30vw; - } - - section.change { - left: 30vw; - transform: rotateY(25deg); - } - - .section-heading { - font-size: 5.5rem; - } - - .section-4 { - padding: 6rem 0 1rem 0; - } - - .gallery-shelf { - height: 1.5rem; - width: 95%; - } - - .gallery-shelf::before { - height: 5rem; - top: -5rem; - } - - .gallery img { - width: 25%; - bottom: 4rem; - } - - .gallery-img-2 { - left: 22%; - } - - .gallery-img-3 { - left: 78%; - } -} - -@media (max-width: 600px) { - html { - font-size: 55.5%; - } - - .navbar { - width: 40vw; - left: -40vw; - } - - .menu.change { - left: 40vw; - } - - section.change { - left: 0; - transform: rotateY(0); - } - - .section-heading { - font-size: 4.5rem; - } - - .section-1-img { - width: 100%; - } - - .video { - width: 100%; - margin: 2rem 0; - } - - .gallery { - margin: 9rem 0; - } - - .contact-form { - width: 40rem; - border: 1rem solid rgba(255, 255, 255, 0.8); - } -} - -@media (max-width: 400px) { - html { - font-size: 40%; - } - - .copyright { - width: 80%; - } -} -/* End of Responsive */ diff --git a/Project 4 - Classic Cars/Starter Files/images/bg-section1.jpg b/Project 4 - Classic Cars/Starter Files/images/bg-section1.jpg deleted file mode 100644 index 74ccce3..0000000 Binary files a/Project 4 - Classic Cars/Starter Files/images/bg-section1.jpg and /dev/null differ diff --git a/Project 4 - Classic Cars/Starter Files/images/bg-section5.jpg b/Project 4 - Classic Cars/Starter Files/images/bg-section5.jpg deleted file mode 100644 index 4edc007..0000000 Binary files a/Project 4 - Classic Cars/Starter Files/images/bg-section5.jpg and /dev/null differ diff --git a/Project 4 - Classic Cars/Starter Files/images/car-1.jpg b/Project 4 - Classic Cars/Starter Files/images/car-1.jpg deleted file mode 100644 index daa813f..0000000 Binary files a/Project 4 - Classic Cars/Starter Files/images/car-1.jpg and /dev/null differ diff --git a/Project 4 - Classic Cars/Starter Files/images/car-2.jpg b/Project 4 - Classic Cars/Starter Files/images/car-2.jpg deleted file mode 100644 index 626f9c1..0000000 Binary files a/Project 4 - Classic Cars/Starter Files/images/car-2.jpg and /dev/null differ diff --git a/Project 4 - Classic Cars/Starter Files/images/car-3.jpg b/Project 4 - Classic Cars/Starter Files/images/car-3.jpg deleted file mode 100644 index ce79582..0000000 Binary files a/Project 4 - Classic Cars/Starter Files/images/car-3.jpg and /dev/null differ diff --git a/Project 4 - Classic Cars/Starter Files/images/car-section1.png b/Project 4 - Classic Cars/Starter Files/images/car-section1.png deleted file mode 100644 index 67b2fa2..0000000 Binary files a/Project 4 - Classic Cars/Starter Files/images/car-section1.png and /dev/null differ diff --git a/Project 4 - Classic Cars/Starter Files/images/car-video-1.mp4 b/Project 4 - Classic Cars/Starter Files/images/car-video-1.mp4 deleted file mode 100644 index 9204a0c..0000000 Binary files a/Project 4 - Classic Cars/Starter Files/images/car-video-1.mp4 and /dev/null differ diff --git a/Project 4 - Classic Cars/Starter Files/images/car-video-2.mp4 b/Project 4 - Classic Cars/Starter Files/images/car-video-2.mp4 deleted file mode 100644 index 3a8a1b9..0000000 Binary files a/Project 4 - Classic Cars/Starter Files/images/car-video-2.mp4 and /dev/null differ diff --git a/Project 4 - Classic Cars/Starter Files/images/car-video-3.mp4 b/Project 4 - Classic Cars/Starter Files/images/car-video-3.mp4 deleted file mode 100644 index c26fd8a..0000000 Binary files a/Project 4 - Classic Cars/Starter Files/images/car-video-3.mp4 and /dev/null differ diff --git a/Project 4 - Classic Cars/Starter Files/images/car-video-4.mp4 b/Project 4 - Classic Cars/Starter Files/images/car-video-4.mp4 deleted file mode 100644 index a6e1e1a..0000000 Binary files a/Project 4 - Classic Cars/Starter Files/images/car-video-4.mp4 and /dev/null differ diff --git a/Project 4 - Classic Cars/Starter Files/images/car-video-5.mp4 b/Project 4 - Classic Cars/Starter Files/images/car-video-5.mp4 deleted file mode 100644 index bb6e341..0000000 Binary files a/Project 4 - Classic Cars/Starter Files/images/car-video-5.mp4 and /dev/null differ diff --git a/Project 4 - Classic Cars/Starter Files/images/car-video-6.mp4 b/Project 4 - Classic Cars/Starter Files/images/car-video-6.mp4 deleted file mode 100644 index bd2eb0b..0000000 Binary files a/Project 4 - Classic Cars/Starter Files/images/car-video-6.mp4 and /dev/null differ diff --git a/Project 4 - Classic Cars/Starter Files/images/gallery-car-1.jpg b/Project 4 - Classic Cars/Starter Files/images/gallery-car-1.jpg deleted file mode 100644 index ccf430f..0000000 Binary files a/Project 4 - Classic Cars/Starter Files/images/gallery-car-1.jpg and /dev/null differ diff --git a/Project 4 - Classic Cars/Starter Files/images/gallery-car-2.jpg b/Project 4 - Classic Cars/Starter Files/images/gallery-car-2.jpg deleted file mode 100644 index b4a3ab3..0000000 Binary files a/Project 4 - Classic Cars/Starter Files/images/gallery-car-2.jpg and /dev/null differ diff --git a/Project 4 - Classic Cars/Starter Files/images/gallery-car-3.jpg b/Project 4 - Classic Cars/Starter Files/images/gallery-car-3.jpg deleted file mode 100644 index 97944ca..0000000 Binary files a/Project 4 - Classic Cars/Starter Files/images/gallery-car-3.jpg and /dev/null differ diff --git a/Project 4 - Classic Cars/Starter Files/images/gallery-car-4.jpg b/Project 4 - Classic Cars/Starter Files/images/gallery-car-4.jpg deleted file mode 100644 index 5e6d9ee..0000000 Binary files a/Project 4 - Classic Cars/Starter Files/images/gallery-car-4.jpg and /dev/null differ diff --git a/Project 4 - Classic Cars/Starter Files/images/gallery-car-5.jpg b/Project 4 - Classic Cars/Starter Files/images/gallery-car-5.jpg deleted file mode 100644 index c4d9c7f..0000000 Binary files a/Project 4 - Classic Cars/Starter Files/images/gallery-car-5.jpg and /dev/null differ diff --git a/Project 4 - Classic Cars/Starter Files/images/gallery-car-6.jpg b/Project 4 - Classic Cars/Starter Files/images/gallery-car-6.jpg deleted file mode 100644 index 7a6b6c6..0000000 Binary files a/Project 4 - Classic Cars/Starter Files/images/gallery-car-6.jpg and /dev/null differ diff --git a/Project 4 - Classic Cars/Starter Files/index.html b/Project 4 - Classic Cars/Starter Files/index.html deleted file mode 100644 index b943aa9..0000000 --- a/Project 4 - Classic Cars/Starter Files/index.html +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/Project 4 - Classic Cars/Starter Files/script.js b/Project 4 - Classic Cars/Starter Files/script.js deleted file mode 100644 index e69de29..0000000 diff --git a/Project 4 - Classic Cars/Starter Files/style.css b/Project 4 - Classic Cars/Starter Files/style.css deleted file mode 100644 index e69de29..0000000 diff --git a/Project 5 - Architect Website/Architect Website.rar b/Project 5 - Architect Website/Architect Website.rar deleted file mode 100644 index 1e910e8..0000000 Binary files a/Project 5 - Architect Website/Architect Website.rar and /dev/null differ diff --git a/Project 5 - Architect Website/Final Files/images/bg.jpg b/Project 5 - Architect Website/Final Files/images/bg.jpg deleted file mode 100644 index fbb7f35..0000000 Binary files a/Project 5 - Architect Website/Final Files/images/bg.jpg and /dev/null differ diff --git a/Project 5 - Architect Website/Final Files/images/contact-bg.jpg b/Project 5 - Architect Website/Final Files/images/contact-bg.jpg deleted file mode 100644 index 89920ae..0000000 Binary files a/Project 5 - Architect Website/Final Files/images/contact-bg.jpg and /dev/null differ diff --git a/Project 5 - Architect Website/Final Files/images/house.png b/Project 5 - Architect Website/Final Files/images/house.png deleted file mode 100644 index f9e6fd4..0000000 Binary files a/Project 5 - Architect Website/Final Files/images/house.png and /dev/null differ diff --git a/Project 5 - Architect Website/Final Files/images/person-1.jpg b/Project 5 - Architect Website/Final Files/images/person-1.jpg deleted file mode 100644 index 3d95599..0000000 Binary files a/Project 5 - Architect Website/Final Files/images/person-1.jpg and /dev/null differ diff --git a/Project 5 - Architect Website/Final Files/images/person-2.jpg b/Project 5 - Architect Website/Final Files/images/person-2.jpg deleted file mode 100644 index 51145e8..0000000 Binary files a/Project 5 - Architect Website/Final Files/images/person-2.jpg and /dev/null differ diff --git a/Project 5 - Architect Website/Final Files/images/person-3.jpg b/Project 5 - Architect Website/Final Files/images/person-3.jpg deleted file mode 100644 index aa4364b..0000000 Binary files a/Project 5 - Architect Website/Final Files/images/person-3.jpg and /dev/null differ diff --git a/Project 5 - Architect Website/Final Files/index.html b/Project 5 - Architect Website/Final Files/index.html deleted file mode 100644 index 99759e9..0000000 --- a/Project 5 - Architect Website/Final Files/index.html +++ /dev/null @@ -1,267 +0,0 @@ - - - - - - - - - - - - - - - -
-
-
-
-
- Close -
-
-
- -
- -
- -
- - -
- -
-
-

About Us

-
-
-
-
-
- -

Interior

-
-

- Lorem ipsum dolor, sit amet consectetur adipisicing elit. - Doloremque, officia! Necessitatibus delectus sed dicta corrupti - voluptatibus, omnis eius vel ab magni nemo, incidunt esse! Quod! -

-
-
-
- -

Exterior

-
-

- Lorem ipsum dolor, sit amet consectetur adipisicing elit. - Doloremque, officia! Necessitatibus delectus sed dicta corrupti - voluptatibus, omnis eius vel ab magni nemo, incidunt esse! Quod! -

-
-
-
- -

Design

-
-

- Lorem ipsum dolor, sit amet consectetur adipisicing elit. - Doloremque, officia! Necessitatibus delectus sed dicta corrupti - voluptatibus, omnis eius vel ab magni nemo, incidunt esse! Quod! -

-
-
-
- -

Decoration

-
-

- Lorem ipsum dolor, sit amet consectetur adipisicing elit. - Doloremque, officia! Necessitatibus delectus sed dicta corrupti - voluptatibus, omnis eius vel ab magni nemo, incidunt esse! Quod! -

-
-
-
- -

Planning

-
-

- Lorem ipsum dolor, sit amet consectetur adipisicing elit. - Doloremque, officia! Necessitatibus delectus sed dicta corrupti - voluptatibus, omnis eius vel ab magni nemo, incidunt esse! Quod! -

-
-
-
- -

Execution

-
-

- Lorem ipsum dolor, sit amet consectetur adipisicing elit. - Doloremque, officia! Necessitatibus delectus sed dicta corrupti - voluptatibus, omnis eius vel ab magni nemo, incidunt esse! Quod! -

-
-
- -
-
-
- -
-
-

Our Team

-
-
-
-
-
- CEO -
-
-

John Smith

-

CEO

-

- "Lorem ipsum dolor sit amet consectetur adipisicing elit. - Asperiores, impedit!" -

- -
-
-
-
- Designer -
-
-

Ann Brown

-

Designer

-

- "Lorem ipsum dolor sit amet consectetur adipisicing elit. - Asperiores, impedit!" -

- -
-
-
-
- Architect -
-
-

Mary Doe

-

Architect

-

- "Lorem ipsum dolor sit amet consectetur adipisicing elit. - Asperiores, impedit!" -

- -
-
-
-
- -
-
-
-
-

Contact

-
-
- - -
-
- - -
-
- - -
- -
-
-
-
- - - - - -
- - - - - - diff --git a/Project 5 - Architect Website/Final Files/script.js b/Project 5 - Architect Website/Final Files/script.js deleted file mode 100644 index aa78148..0000000 --- a/Project 5 - Architect Website/Final Files/script.js +++ /dev/null @@ -1,16 +0,0 @@ -window.onload = () => { - setTimeout(() => { - document.querySelector("body").classList.add("display"); - }, 4000); -}; - -document.querySelector(".hamburger-menu").addEventListener("click", () => { - document.querySelector(".container").classList.toggle("change"); -}); - -document.querySelector(".scroll-btn").addEventListener("click", () => { - document.querySelector("html").style.scrollBehavior = "smooth"; - setTimeout(() => { - document.querySelector("html").style.scrollBehavior = "unset"; - }, 1000); -}); diff --git a/Project 5 - Architect Website/Final Files/style.css b/Project 5 - Architect Website/Final Files/style.css deleted file mode 100644 index 5eb5fee..0000000 --- a/Project 5 - Architect Website/Final Files/style.css +++ /dev/null @@ -1,979 +0,0 @@ -* { - margin: 0; - padding: 0; - outline: none; - box-sizing: border-box; - list-style: none; - text-decoration: none; -} - -html { - font-size: 62.5%; -} - -.spinner-container { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100vh; - background-color: #262626; - display: flex; - justify-content: center; - align-items: center; - transition: all 1s; - z-index: 300; -} - -.display .spinner-container { - opacity: 0; - visibility: hidden; -} - -.circles { - width: 8rem; - height: 8rem; - position: relative; - opacity: 0; - visibility: hidden; - animation: displayCircles 4s; -} - -@keyframes displayCircles { - 0% { - opacity: 0; - visibility: hidden; - } - 25% { - opacity: 1; - visibility: visible; - } - 90% { - opacity: 1; - visibility: visible; - } - 100% { - opacity: 0; - visibility: hidden; - } -} - -.circles div { - animation: circles 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; - transform-origin: 4rem 4rem; -} - -.circles div::after { - content: ""; - position: absolute; - width: 0.7rem; - height: 0.7rem; - border-radius: 50%; - background-color: #c29525; - margin: -0.4rem 0 0 -0.4rem; -} - -.circles div:nth-child(1) { - animation-delay: -0.036s; -} - -.circles div:nth-child(1)::after { - top: 6.3rem; - left: 6.3rem; -} - -.circles div:nth-child(2) { - animation-delay: -0.072s; -} - -.circles div:nth-child(2)::after { - top: 6.8rem; - left: 5.6rem; -} - -.circles div:nth-child(3) { - animation-delay: -0.108s; -} - -.circles div:nth-child(3)::after { - top: 7.1rem; - left: 4.8rem; -} - -.circles div:nth-child(4) { - animation-delay: -0.144s; -} - -.circles div:nth-child(4)::after { - top: 7.2rem; - left: 4rem; -} - -.circles div:nth-child(5) { - animation-delay: -0.18s; -} - -.circles div:nth-child(5)::after { - top: 7.1rem; - left: 3.2rem; -} - -.circles div:nth-child(6) { - animation-delay: -0.216s; -} - -.circles div:nth-child(6)::after { - top: 6.8rem; - left: 2.4rem; -} - -.circles div:nth-child(7) { - animation-delay: -0.252s; -} - -.circles div:nth-child(7)::after { - top: 6.3rem; - left: 1.7rem; -} - -.circles div:nth-child(8) { - animation-delay: -0.288s; -} - -.circles div:nth-child(8)::after { - top: 5.6rem; - left: 1.2rem; -} - -@keyframes circles { - 0% { - transform: rotate(0); - } - 100% { - transform: rotate(360deg); - } -} - -.container { - display: none; -} - -.display .container { - display: block; -} - -.hamburger-menu { - width: 3rem; - height: 3rem; - position: fixed; - top: 5rem; - right: 5rem; - z-index: 200; - display: flex; - flex-direction: column; - justify-content: space-evenly; - cursor: pointer; - transition: right 0.7s; -} - -.change .hamburger-menu { - right: 33rem; -} - -.line { - width: 100%; - height: 0.2rem; - background-color: #fff; - box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2); -} - -.change .line { - background-color: rgba(0, 0, 0, 0.8); -} - -.change .line-1 { - transform: rotate(45deg) translate(0.3rem, 0.8rem); -} - -.change .line-2 { - opacity: 0; - visibility: hidden; -} - -.change .line-3 { - transform: rotate(-45deg) translate(0.3rem, -0.8rem); -} - -.hamburger-menu span { - position: absolute; - left: 5rem; - width: 10rem; - height: 4rem; - background-color: #e2b646; - display: flex; - justify-content: center; - align-items: center; - color: #fff; - font-family: "Baloo Da 2", serif; - font-size: 1.6rem; - letter-spacing: 0.1rem; - opacity: 0; - visibility: hidden; - transition: all 0.2s; -} - -.change .hamburger-menu:hover span { - opacity: 1; - visibility: visible; -} - -.hamburger-menu span::before { - content: ""; - position: absolute; - border-left: 1rem solid transparent; - border-right: 1rem solid #e2b646; - border-bottom: 1rem solid transparent; - border-top: 1rem solid transparent; - top: 50%; - left: -2rem; - transform: translateY(-50%); -} - -.header { - width: 100%; - height: 100vh; - position: relative; - perspective: 100rem; - overflow: hidden; -} - -.img-wrapper { - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.8); - overflow: hidden; -} - -.img-wrapper img { - width: 100%; - height: 100%; - object-fit: cover; - opacity: 0.5; - animation: scale 25s; -} - -@keyframes scale { - 0% { - transform: scale(1.3); - } - 100% { - transform: scale(1); - } -} - -.banner { - position: absolute; - top: 30%; - left: 15%; -} - -.banner h1 { - font-family: "Baloo Da 2", serif; - font-size: 8rem; - font-weight: 300; - color: #fff; - width: 50%; - line-height: 9rem; - letter-spacing: 0.2rem; - text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.4); - opacity: 0; - animation: moveBanner 1s 0.5s forwards; -} - -.banner p { - font-family: "Josefin Slab", serif; - font-size: 4rem; - color: #fff; - width: 70%; - letter-spacing: 0.1rem; - margin-bottom: 3rem; - text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.4); - opacity: 0; - animation: moveBanner 1s 0.7s forwards; -} - -.banner button { - width: 25rem; - height: 7rem; - background-color: #c29525; - border: none; - font-family: "Muli", serif; - font-size: 2rem; - text-transform: uppercase; - color: #fff; - text-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2); - box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.4); - cursor: pointer; - opacity: 0; - animation: moveBanner 1s 0.9s forwards; -} - -@keyframes moveBanner { - 0% { - transform: translateY(40rem) rotateY(-20deg); - } - 100% { - transform: translateY(0) rotateY(0); - opacity: 1; - } -} - -.sidebar { - width: 40rem; - height: 100vh; - position: fixed; - top: 0; - right: -40rem; - background-color: #fff; - transition: right 0.5s; - z-index: 100; -} - -.change .sidebar { - right: 0; -} - -.menu { - position: absolute; - top: 40%; - left: 50%; - transform: translate(-50%, -50%); -} - -.menu-item { - text-align: center; -} - -.menu-link { - font-family: "Baloo Da 2", serif; - font-size: 4rem; - color: #555; - position: relative; -} - -.menu-link::before { - content: attr(data-content); - position: absolute; - top: 0; - left: 0; - color: #c29525; - width: 0; - overflow: hidden; - white-space: nowrap; - transition: width 0.3s ease-in-out; -} - -.menu-link:hover::before { - width: 100%; -} - -.social-media { - position: absolute; - bottom: 3rem; - width: 100%; - display: flex; - justify-content: center; -} - -.social-media i { - font-size: 2.2rem; - margin: 3rem; - width: 4.5rem; - height: 4.5rem; - background-color: #777; - color: #fff; - display: flex; - justify-content: center; - align-items: center; - border-radius: 50%; - transition: background-color 0.3s; -} - -.social-media i:hover { - background-color: #c29525; -} - -.about-us { - width: 100%; - background-color: #f5f5f5; - padding-bottom: 15rem; -} - -.section-header { - display: flex; - flex-direction: column; - align-items: center; - padding: 7rem 0 10rem 0; -} - -.section-heading { - font-family: "Muli", serif; - font-size: 5rem; - font-weight: 300; - color: #4b4b4b; - margin-bottom: 6rem; -} - -.underline { - width: 12rem; - height: 0.3rem; - background-color: #c29525; -} - -.services { - width: 100%; - height: 100%; - display: grid; - grid-template-columns: repeat(16, 1fr); - grid-template-rows: repeat(6, 6rem); - grid-row-gap: 4rem; -} - -.service { - width: 100%; - margin-bottom: 2rem; -} - -.service:nth-child(1) { - grid-column: 4 / 7; - grid-row: 1 / 3; -} - -.service:nth-child(2) { - grid-column: 3 / 6; - grid-row: 3 / 5; -} - -.service:nth-child(3) { - grid-column: 4 / 7; - grid-row: 5 / -1; -} - -.service:nth-child(4) { - grid-column: 11 / 14; - grid-row: 1 / 3; -} - -.service:nth-child(5) { - grid-column: 12 / 15; - grid-row: 3 / 5; -} - -.service:nth-child(6) { - grid-column: 11 / 14; - grid-row: 5 / -1; -} - -.service-header { - display: flex; - align-items: center; - margin-bottom: 1rem; -} - -.service-header i { - font-size: 4rem; - color: #4b4b4b; - margin-right: 2rem; -} - -.service-header h3 { - font-family: "Baloo Da 2", serif; - font-size: 2.6rem; - line-height: 2.6rem; - font-weight: 400; - margin-bottom: 2rem; -} - -.service-text { - font-family: "Josefin Slab", serif; - font-size: 1.6rem; - text-align: justify; -} - -.about-us-img-wrapper { - grid-column: 7 / 11; - grid-row: 2 / 6; - width: 100%; -} - -.about-us-img-wrapper img { - width: 100%; - object-fit: cover; - opacity: 0.8; -} - -.team { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: 0 5rem 20rem 5rem; -} - -.cards-wrapper { - display: flex; - justify-content: space-evenly; - margin-top: 8rem; - width: 100%; -} - -.card { - width: 37rem; - height: 45rem; - box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.4); - border-radius: 0.5rem; - position: relative; -} - -.card-img-wrapper { - width: 100%; - height: 100%; - background-color: #262626; - border-radius: 0.5rem; -} - -.card-img-wrapper img { - width: 100%; - height: 100%; - object-fit: cover; - opacity: 0.8; - border-radius: 0.5rem; - transition: opacity 0.3s; -} - -.card:hover .card-img-wrapper img { - opacity: 0.5; -} - -.card-info { - position: absolute; - bottom: 0; - padding: 2rem; - text-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.4); - opacity: 0; - visibility: hidden; - transition: all 0.3s; -} - -.card:hover .card-info { - bottom: 2rem; - opacity: 1; - visibility: visible; -} - -.card-info h2 { - font-family: "Baloo Da 2", serif; - font-size: 2.5rem; - line-height: 2.5rem; - font-weight: 300; - color: #eee; -} - -.card-info h3 { - font-family: "Muli", serif; - font-size: 2rem; - font-weight: 500; - color: #a52a2a; - margin-bottom: 1rem; -} - -.card-info p { - font-family: "Baloo da 2", serif; - font-size: 1.4rem; - line-height: 1.6rem; - font-weight: 300; - color: #eee; - width: 80%; - margin-bottom: 2rem; -} - -.card-info button { - width: 10rem; - height: 3rem; - background-color: #c29525; - border: none; - font-family: "Baloo Da 2", serif; - font-size: 1.4rem; - line-height: 1.5rem; - color: #eee; - border-radius: 0.3rem; - box-shadow: 0 0.1rem 0.8rem rgba(0, 0, 0, 0.4); -} - -.contact { - width: 100%; - height: 100vh; - background-color: #272727; - display: flex; - justify-content: center; - align-items: center; -} - -.contact-wrapper { - width: 60%; - height: 75rem; - display: flex; - box-shadow: 0 3rem 7rem rgba(0, 0, 0, 0.5); -} - -.contact-left { - width: 35%; - background: linear-gradient(rgba(15, 15, 15, 0.6), rgba(22, 22, 22, 0.9)), - url(images/contact-bg.jpg) center no-repeat; - background-size: cover; -} - -.contact-right { - width: 65%; - background-color: #eee; - padding: 3rem 10rem 10rem 10rem; -} - -.contact-heading { - font-family: "Baloo Da 2", serif; - font-size: 6rem; - font-weight: 300; - color: #272727; - margin-bottom: 5rem; - text-align: center; -} - -.contact-right form { - width: 100%; - display: flex; - flex-direction: column; - align-items: center; -} - -.input-group { - position: relative; -} - -.field { - width: 45rem; - background-color: transparent; - border: none; - border-bottom: 0.2rem dashed #636363; - margin: 3rem 0; - padding: 1rem 1rem 1rem 0; - font-family: "Muli", serif; - font-size: 1.6rem; - color: #4b4b4b; -} - -.input-group input { - height: 4rem; -} - -.input-group textarea { - max-height: 7rem; - max-width: 45rem; -} - -.field:focus { - border-bottom-style: solid; -} - -.input-group label { - position: absolute; - left: 0; - font-family: "Baloo Da 2", serif; - font-size: 1.8rem; - color: #4b4b4b; - text-transform: uppercase; - pointer-events: none; - transition: all 0.3s; -} - -.input-label { - bottom: 3rem; -} - -.message { - bottom: 6rem; -} - -.field:focus ~ label { - transform: translateY(-3rem); - font-size: 1.2rem; -} - -.submit-btn { - width: 45rem; - height: 5rem; - background-color: #c29525; - color: #fff; - border: none; - margin-top: 2rem; - font-family: "Muli", serif; - font-size: 2rem; - font-weight: 300; - text-transform: uppercase; - letter-spacing: 0.2rem; - cursor: pointer; - text-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.5); - box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.3); -} - -.footer { - width: 100%; - height: 15rem; - background-color: #17181b; - display: flex; - justify-content: center; - align-items: center; -} - -.footer-content { - width: 60%; - display: flex; - justify-content: space-between; -} - -.copyright { - font-family: "Baloo Da 2", serif; - font-size: 1.6rem; - color: #a7a7a7; -} - -.social-list a { - margin: 0 2rem; -} - -.social-list i { - font-size: 2rem; - color: #a7a7a7; -} - -.scroll-btn { - position: fixed; - right: 5rem; - bottom: 5rem; - width: 4.5rem; - height: 4.5rem; - background-color: #e2b646; - display: flex; - justify-content: center; - align-items: center; - font-size: 2rem; - color: #fff; - box-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.2); - border-radius: 0.3rem; -} - -@media (max-width: 1500px) { - .about-us-img-wrapper { - grid-row: 3 / -1; - } - - .card { - width: 34rem; - } - - .contact-wrapper { - width: 80%; - height: 65rem; - } - - .footer-content { - width: 80%; - } -} - -@media (max-width: 1400px) { - .banner h1 { - font-size: 6rem; - line-height: 7rem; - } - - .banner p { - font-size: 3rem; - } - - .banner button { - width: 20rem; - height: 5rem; - font-size: 1.6rem; - } - - .menu-link { - font-size: 3rem; - } - - .service:nth-child(1) { - grid-column: 3 / 7; - } - - .service:nth-child(2) { - grid-column: 2 / 6; - } - - .service:nth-child(3) { - grid-column: 3 / 7; - } - - .service:nth-child(4) { - grid-column: 11 / 15; - } - - .service:nth-child(5) { - grid-column: 12 / 16; - } - - .service:nth-child(6) { - grid-column: 11 / 15; - } -} - -@media (max-width: 1300px) { - .team { - padding-bottom: 5rem; - } - - .cards-wrapper { - flex-direction: column; - align-items: center; - margin-top: 4rem; - } - - .card { - margin-bottom: 8rem; - } - - .contact-wrapper { - width: 90%; - height: 55rem; - } - - .contact-heading { - margin-bottom: 2rem; - } - - .field { - margin: 2rem 0; - } -} - -@media (max-width: 1000px) { - .banner h1 { - font-size: 5rem; - line-height: 6rem; - } - - .banner p { - font-size: 2.5rem; - } - - .banner button { - width: 18rem; - height: 4rem; - font-size: 1.5rem; - } - - .services { - display: flex; - flex-direction: column; - align-items: center; - } - - .service { - width: 40rem; - margin-bottom: 6rem; - } - - .about-us-img-wrapper { - width: 40rem; - } - - .about-us-img-wrapper img { - width: 100%; - } - - .contact-left { - width: 0; - } - - .contact-right { - width: 100%; - } - - .field { - width: 55rem; - } - - .input-group textarea { - max-width: 55rem; - } - - .submit-btn { - width: 55rem; - } - - .footer-content { - flex-direction: column; - align-items: center; - text-align: center; - width: 50%; - } - - .copyright { - order: 1; - margin-top: 3rem; - } -} - -@media (max-width: 700px) { - .banner h1 { - font-size: 4rem; - line-height: 5rem; - } - - .banner p { - font-size: 2rem; - } - - .field { - width: 35rem; - } - - .input-group textarea { - max-width: 35rem; - } - - .submit-btn { - width: 35rem; - } -} - -@media (max-width: 500px) { - html { - font-size: 45%; - } - - .sidebar { - width: 100%; - right: -100%; - } - - .change .hamburger-menu { - right: 38rem; - } - - .service { - width: 30rem; - } - - .footer { - height: 18rem; - } -} diff --git a/Project 5 - Architect Website/Final Files/tilt.js b/Project 5 - Architect Website/Final Files/tilt.js deleted file mode 100644 index 34d95ae..0000000 --- a/Project 5 - Architect Website/Final Files/tilt.js +++ /dev/null @@ -1,373 +0,0 @@ -(function (factory) { - if (typeof define === "function" && define.amd) { - // AMD. Register as an anonymous module. - define(["jquery"], factory); - } else if (typeof module === "object" && module.exports) { - // Node/CommonJS - module.exports = function (root, jQuery) { - if (jQuery === undefined) { - // require('jQuery') returns a factory that requires window to - // build a jQuery instance, we normalize how we use modules - // that require this pattern but the window provided is a noop - // if it's defined (how jquery works) - if (typeof window !== "undefined") { - jQuery = require("jquery"); - } else { - jQuery = require("jquery")(root); - } - } - factory(jQuery); - return jQuery; - }; - } else { - // Browser globals - factory(jQuery); - } -})(function ($) { - $.fn.tilt = function (options) { - /** - * RequestAnimationFrame - */ - const requestTick = function () { - if (this.ticking) return; - requestAnimationFrame(updateTransforms.bind(this)); - this.ticking = true; - }; - - /** - * Bind mouse movement evens on instance - */ - const bindEvents = function () { - const _this = this; - $(this).on("mousemove", mouseMove); - $(this).on("mouseenter", mouseEnter); - if (this.settings.reset) $(this).on("mouseleave", mouseLeave); - if (this.settings.glare) - $(window).on("resize", updateGlareSize.bind(_this)); - }; - - /** - * Set transition only on mouse leave and mouse enter so it doesn't influence mouse move transforms - */ - const setTransition = function () { - if (this.timeout !== undefined) clearTimeout(this.timeout); - $(this).css({ - transition: `${this.settings.speed}ms ${this.settings.easing}`, - }); - if (this.settings.glare) - this.glareElement.css({ - transition: `opacity ${this.settings.speed}ms ${this.settings.easing}`, - }); - this.timeout = setTimeout(() => { - $(this).css({ transition: "" }); - if (this.settings.glare) this.glareElement.css({ transition: "" }); - }, this.settings.speed); - }; - - /** - * When user mouse enters tilt element - */ - const mouseEnter = function (event) { - this.ticking = false; - $(this).css({ "will-change": "transform" }); - setTransition.call(this); - - // Trigger change event - $(this).trigger("tilt.mouseEnter"); - }; - - /** - * Return the x,y position of the mouse on the tilt element - * @returns {{x: *, y: *}} - */ - const getMousePositions = function (event) { - if (typeof event === "undefined") { - event = { - pageX: $(this).offset().left + $(this).outerWidth() / 2, - pageY: $(this).offset().top + $(this).outerHeight() / 2, - }; - } - return { x: event.pageX, y: event.pageY }; - }; - - /** - * When user mouse moves over the tilt element - */ - const mouseMove = function (event) { - this.mousePositions = getMousePositions(event); - requestTick.call(this); - }; - - /** - * When user mouse leaves tilt element - */ - const mouseLeave = function () { - setTransition.call(this); - this.reset = true; - requestTick.call(this); - - // Trigger change event - $(this).trigger("tilt.mouseLeave"); - }; - - /** - * Get tilt values - * - * @returns {{x: tilt value, y: tilt value}} - */ - const getValues = function () { - const width = $(this).outerWidth(); - const height = $(this).outerHeight(); - const left = $(this).offset().left; - const top = $(this).offset().top; - const percentageX = (this.mousePositions.x - left) / width; - const percentageY = (this.mousePositions.y - top) / height; - // x or y position inside instance / width of instance = percentage of position inside instance * the max tilt value - const tiltX = ( - this.settings.maxTilt / 2 - - percentageX * this.settings.maxTilt - ).toFixed(2); - const tiltY = ( - percentageY * this.settings.maxTilt - - this.settings.maxTilt / 2 - ).toFixed(2); - // angle - const angle = - Math.atan2( - this.mousePositions.x - (left + width / 2), - -(this.mousePositions.y - (top + height / 2)) - ) * - (180 / Math.PI); - // Return x & y tilt values - return { - tiltX, - tiltY, - percentageX: percentageX * 100, - percentageY: percentageY * 100, - angle, - }; - }; - - /** - * Update tilt transforms on mousemove - */ - const updateTransforms = function () { - this.transforms = getValues.call(this); - - if (this.reset) { - this.reset = false; - $(this).css( - "transform", - `perspective(${this.settings.perspective}px) rotateX(0deg) rotateY(0deg)` - ); - - // Rotate glare if enabled - if (this.settings.glare) { - this.glareElement.css( - "transform", - `rotate(180deg) translate(-50%, -50%)` - ); - this.glareElement.css("opacity", `0`); - } - - return; - } else { - $(this).css( - "transform", - `perspective(${this.settings.perspective}px) rotateX(${ - this.settings.disableAxis === "x" ? 0 : this.transforms.tiltY - }deg) rotateY(${ - this.settings.disableAxis === "y" ? 0 : this.transforms.tiltX - }deg) scale3d(${this.settings.scale},${this.settings.scale},${ - this.settings.scale - })` - ); - - // Rotate glare if enabled - if (this.settings.glare) { - this.glareElement.css( - "transform", - `rotate(${this.transforms.angle}deg) translate(-50%, -50%)` - ); - this.glareElement.css( - "opacity", - `${(this.transforms.percentageY * this.settings.maxGlare) / 100}` - ); - } - } - - // Trigger change event - $(this).trigger("change", [this.transforms]); - - this.ticking = false; - }; - - /** - * Prepare elements - */ - const prepareGlare = function () { - const glarePrerender = this.settings.glarePrerender; - - // If option pre-render is enabled we assume all html/css is present for an optimal glare effect. - if (!glarePrerender) - // Create glare element - $(this).append( - '
' - ); - - // Store glare selector if glare is enabled - this.glareElementWrapper = $(this).find(".js-tilt-glare"); - this.glareElement = $(this).find(".js-tilt-glare-inner"); - - // Remember? We assume all css is already set, so just return - if (glarePrerender) return; - - // Abstracted re-usable glare styles - const stretch = { - position: "absolute", - top: "0", - left: "0", - width: "100%", - height: "100%", - }; - - // Style glare wrapper - this.glareElementWrapper.css(stretch).css({ - overflow: "hidden", - "pointer-events": "none", - }); - - // Style glare element - this.glareElement.css({ - position: "absolute", - top: "50%", - left: "50%", - "background-image": `linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)`, - width: `${$(this).outerWidth() * 2}`, - height: `${$(this).outerWidth() * 2}`, - transform: "rotate(180deg) translate(-50%, -50%)", - "transform-origin": "0% 0%", - opacity: "0", - }); - }; - - /** - * Update glare on resize - */ - const updateGlareSize = function () { - this.glareElement.css({ - width: `${$(this).outerWidth() * 2}`, - height: `${$(this).outerWidth() * 2}`, - }); - }; - - /** - * Public methods - */ - $.fn.tilt.destroy = function () { - $(this).each(function () { - $(this).find(".js-tilt-glare").remove(); - $(this).css({ "will-change": "", transform: "" }); - $(this).off("mousemove mouseenter mouseleave"); - }); - }; - - $.fn.tilt.getValues = function () { - const results = []; - $(this).each(function () { - this.mousePositions = getMousePositions.call(this); - results.push(getValues.call(this)); - }); - return results; - }; - - $.fn.tilt.reset = function () { - $(this).each(function () { - this.mousePositions = getMousePositions.call(this); - this.settings = $(this).data("settings"); - mouseLeave.call(this); - setTimeout(() => { - this.reset = false; - }, this.settings.transition); - }); - }; - - /** - * Loop every instance - */ - return this.each(function () { - /** - * Default settings merged with user settings - * Can be set trough data attributes or as parameter. - * @type {*} - */ - this.settings = $.extend( - { - maxTilt: $(this).is("[data-tilt-max]") - ? $(this).data("tilt-max") - : 20, - perspective: $(this).is("[data-tilt-perspective]") - ? $(this).data("tilt-perspective") - : 300, - easing: $(this).is("[data-tilt-easing]") - ? $(this).data("tilt-easing") - : "cubic-bezier(.03,.98,.52,.99)", - scale: $(this).is("[data-tilt-scale]") - ? $(this).data("tilt-scale") - : "1", - speed: $(this).is("[data-tilt-speed]") - ? $(this).data("tilt-speed") - : "400", - transition: $(this).is("[data-tilt-transition]") - ? $(this).data("tilt-transition") - : true, - disableAxis: $(this).is("[data-tilt-disable-axis]") - ? $(this).data("tilt-disable-axis") - : null, - axis: $(this).is("[data-tilt-axis]") - ? $(this).data("tilt-axis") - : null, - reset: $(this).is("[data-tilt-reset]") - ? $(this).data("tilt-reset") - : true, - glare: $(this).is("[data-tilt-glare]") - ? $(this).data("tilt-glare") - : false, - maxGlare: $(this).is("[data-tilt-maxglare]") - ? $(this).data("tilt-maxglare") - : 1, - }, - options - ); - - // Add deprecation warning & set disableAxis to deprecated axis setting - if (this.settings.axis !== null) { - console.warn( - "Tilt.js: the axis setting has been renamed to disableAxis. See https://github.com/gijsroge/tilt.js/pull/26 for more information" - ); - this.settings.disableAxis = this.settings.axis; - } - - this.init = () => { - // Store settings - $(this).data("settings", this.settings); - - // Prepare element - if (this.settings.glare) prepareGlare.call(this); - - // Bind events - bindEvents.call(this); - }; - - // Init - this.init(); - }); - }; - - /** - * Auto load - */ - $("[data-tilt]").tilt(); - - return true; -}); diff --git a/Project 5 - Architect Website/Starter Files/images/bg.jpg b/Project 5 - Architect Website/Starter Files/images/bg.jpg deleted file mode 100644 index fbb7f35..0000000 Binary files a/Project 5 - Architect Website/Starter Files/images/bg.jpg and /dev/null differ diff --git a/Project 5 - Architect Website/Starter Files/images/contact-bg.jpg b/Project 5 - Architect Website/Starter Files/images/contact-bg.jpg deleted file mode 100644 index 89920ae..0000000 Binary files a/Project 5 - Architect Website/Starter Files/images/contact-bg.jpg and /dev/null differ diff --git a/Project 5 - Architect Website/Starter Files/images/house.png b/Project 5 - Architect Website/Starter Files/images/house.png deleted file mode 100644 index f9e6fd4..0000000 Binary files a/Project 5 - Architect Website/Starter Files/images/house.png and /dev/null differ diff --git a/Project 5 - Architect Website/Starter Files/images/person-1.jpg b/Project 5 - Architect Website/Starter Files/images/person-1.jpg deleted file mode 100644 index 3d95599..0000000 Binary files a/Project 5 - Architect Website/Starter Files/images/person-1.jpg and /dev/null differ diff --git a/Project 5 - Architect Website/Starter Files/images/person-2.jpg b/Project 5 - Architect Website/Starter Files/images/person-2.jpg deleted file mode 100644 index 51145e8..0000000 Binary files a/Project 5 - Architect Website/Starter Files/images/person-2.jpg and /dev/null differ diff --git a/Project 5 - Architect Website/Starter Files/images/person-3.jpg b/Project 5 - Architect Website/Starter Files/images/person-3.jpg deleted file mode 100644 index aa4364b..0000000 Binary files a/Project 5 - Architect Website/Starter Files/images/person-3.jpg and /dev/null differ diff --git a/Project 5 - Architect Website/Starter Files/index.html b/Project 5 - Architect Website/Starter Files/index.html deleted file mode 100644 index 43212b5..0000000 --- a/Project 5 - Architect Website/Starter Files/index.html +++ /dev/null @@ -1,42 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/Project 5 - Architect Website/Starter Files/script.js b/Project 5 - Architect Website/Starter Files/script.js deleted file mode 100644 index e69de29..0000000 diff --git a/Project 5 - Architect Website/Starter Files/style.css b/Project 5 - Architect Website/Starter Files/style.css deleted file mode 100644 index e69de29..0000000 diff --git a/Project 5 - Architect Website/Starter Files/tilt.js b/Project 5 - Architect Website/Starter Files/tilt.js deleted file mode 100644 index 34d95ae..0000000 --- a/Project 5 - Architect Website/Starter Files/tilt.js +++ /dev/null @@ -1,373 +0,0 @@ -(function (factory) { - if (typeof define === "function" && define.amd) { - // AMD. Register as an anonymous module. - define(["jquery"], factory); - } else if (typeof module === "object" && module.exports) { - // Node/CommonJS - module.exports = function (root, jQuery) { - if (jQuery === undefined) { - // require('jQuery') returns a factory that requires window to - // build a jQuery instance, we normalize how we use modules - // that require this pattern but the window provided is a noop - // if it's defined (how jquery works) - if (typeof window !== "undefined") { - jQuery = require("jquery"); - } else { - jQuery = require("jquery")(root); - } - } - factory(jQuery); - return jQuery; - }; - } else { - // Browser globals - factory(jQuery); - } -})(function ($) { - $.fn.tilt = function (options) { - /** - * RequestAnimationFrame - */ - const requestTick = function () { - if (this.ticking) return; - requestAnimationFrame(updateTransforms.bind(this)); - this.ticking = true; - }; - - /** - * Bind mouse movement evens on instance - */ - const bindEvents = function () { - const _this = this; - $(this).on("mousemove", mouseMove); - $(this).on("mouseenter", mouseEnter); - if (this.settings.reset) $(this).on("mouseleave", mouseLeave); - if (this.settings.glare) - $(window).on("resize", updateGlareSize.bind(_this)); - }; - - /** - * Set transition only on mouse leave and mouse enter so it doesn't influence mouse move transforms - */ - const setTransition = function () { - if (this.timeout !== undefined) clearTimeout(this.timeout); - $(this).css({ - transition: `${this.settings.speed}ms ${this.settings.easing}`, - }); - if (this.settings.glare) - this.glareElement.css({ - transition: `opacity ${this.settings.speed}ms ${this.settings.easing}`, - }); - this.timeout = setTimeout(() => { - $(this).css({ transition: "" }); - if (this.settings.glare) this.glareElement.css({ transition: "" }); - }, this.settings.speed); - }; - - /** - * When user mouse enters tilt element - */ - const mouseEnter = function (event) { - this.ticking = false; - $(this).css({ "will-change": "transform" }); - setTransition.call(this); - - // Trigger change event - $(this).trigger("tilt.mouseEnter"); - }; - - /** - * Return the x,y position of the mouse on the tilt element - * @returns {{x: *, y: *}} - */ - const getMousePositions = function (event) { - if (typeof event === "undefined") { - event = { - pageX: $(this).offset().left + $(this).outerWidth() / 2, - pageY: $(this).offset().top + $(this).outerHeight() / 2, - }; - } - return { x: event.pageX, y: event.pageY }; - }; - - /** - * When user mouse moves over the tilt element - */ - const mouseMove = function (event) { - this.mousePositions = getMousePositions(event); - requestTick.call(this); - }; - - /** - * When user mouse leaves tilt element - */ - const mouseLeave = function () { - setTransition.call(this); - this.reset = true; - requestTick.call(this); - - // Trigger change event - $(this).trigger("tilt.mouseLeave"); - }; - - /** - * Get tilt values - * - * @returns {{x: tilt value, y: tilt value}} - */ - const getValues = function () { - const width = $(this).outerWidth(); - const height = $(this).outerHeight(); - const left = $(this).offset().left; - const top = $(this).offset().top; - const percentageX = (this.mousePositions.x - left) / width; - const percentageY = (this.mousePositions.y - top) / height; - // x or y position inside instance / width of instance = percentage of position inside instance * the max tilt value - const tiltX = ( - this.settings.maxTilt / 2 - - percentageX * this.settings.maxTilt - ).toFixed(2); - const tiltY = ( - percentageY * this.settings.maxTilt - - this.settings.maxTilt / 2 - ).toFixed(2); - // angle - const angle = - Math.atan2( - this.mousePositions.x - (left + width / 2), - -(this.mousePositions.y - (top + height / 2)) - ) * - (180 / Math.PI); - // Return x & y tilt values - return { - tiltX, - tiltY, - percentageX: percentageX * 100, - percentageY: percentageY * 100, - angle, - }; - }; - - /** - * Update tilt transforms on mousemove - */ - const updateTransforms = function () { - this.transforms = getValues.call(this); - - if (this.reset) { - this.reset = false; - $(this).css( - "transform", - `perspective(${this.settings.perspective}px) rotateX(0deg) rotateY(0deg)` - ); - - // Rotate glare if enabled - if (this.settings.glare) { - this.glareElement.css( - "transform", - `rotate(180deg) translate(-50%, -50%)` - ); - this.glareElement.css("opacity", `0`); - } - - return; - } else { - $(this).css( - "transform", - `perspective(${this.settings.perspective}px) rotateX(${ - this.settings.disableAxis === "x" ? 0 : this.transforms.tiltY - }deg) rotateY(${ - this.settings.disableAxis === "y" ? 0 : this.transforms.tiltX - }deg) scale3d(${this.settings.scale},${this.settings.scale},${ - this.settings.scale - })` - ); - - // Rotate glare if enabled - if (this.settings.glare) { - this.glareElement.css( - "transform", - `rotate(${this.transforms.angle}deg) translate(-50%, -50%)` - ); - this.glareElement.css( - "opacity", - `${(this.transforms.percentageY * this.settings.maxGlare) / 100}` - ); - } - } - - // Trigger change event - $(this).trigger("change", [this.transforms]); - - this.ticking = false; - }; - - /** - * Prepare elements - */ - const prepareGlare = function () { - const glarePrerender = this.settings.glarePrerender; - - // If option pre-render is enabled we assume all html/css is present for an optimal glare effect. - if (!glarePrerender) - // Create glare element - $(this).append( - '
' - ); - - // Store glare selector if glare is enabled - this.glareElementWrapper = $(this).find(".js-tilt-glare"); - this.glareElement = $(this).find(".js-tilt-glare-inner"); - - // Remember? We assume all css is already set, so just return - if (glarePrerender) return; - - // Abstracted re-usable glare styles - const stretch = { - position: "absolute", - top: "0", - left: "0", - width: "100%", - height: "100%", - }; - - // Style glare wrapper - this.glareElementWrapper.css(stretch).css({ - overflow: "hidden", - "pointer-events": "none", - }); - - // Style glare element - this.glareElement.css({ - position: "absolute", - top: "50%", - left: "50%", - "background-image": `linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)`, - width: `${$(this).outerWidth() * 2}`, - height: `${$(this).outerWidth() * 2}`, - transform: "rotate(180deg) translate(-50%, -50%)", - "transform-origin": "0% 0%", - opacity: "0", - }); - }; - - /** - * Update glare on resize - */ - const updateGlareSize = function () { - this.glareElement.css({ - width: `${$(this).outerWidth() * 2}`, - height: `${$(this).outerWidth() * 2}`, - }); - }; - - /** - * Public methods - */ - $.fn.tilt.destroy = function () { - $(this).each(function () { - $(this).find(".js-tilt-glare").remove(); - $(this).css({ "will-change": "", transform: "" }); - $(this).off("mousemove mouseenter mouseleave"); - }); - }; - - $.fn.tilt.getValues = function () { - const results = []; - $(this).each(function () { - this.mousePositions = getMousePositions.call(this); - results.push(getValues.call(this)); - }); - return results; - }; - - $.fn.tilt.reset = function () { - $(this).each(function () { - this.mousePositions = getMousePositions.call(this); - this.settings = $(this).data("settings"); - mouseLeave.call(this); - setTimeout(() => { - this.reset = false; - }, this.settings.transition); - }); - }; - - /** - * Loop every instance - */ - return this.each(function () { - /** - * Default settings merged with user settings - * Can be set trough data attributes or as parameter. - * @type {*} - */ - this.settings = $.extend( - { - maxTilt: $(this).is("[data-tilt-max]") - ? $(this).data("tilt-max") - : 20, - perspective: $(this).is("[data-tilt-perspective]") - ? $(this).data("tilt-perspective") - : 300, - easing: $(this).is("[data-tilt-easing]") - ? $(this).data("tilt-easing") - : "cubic-bezier(.03,.98,.52,.99)", - scale: $(this).is("[data-tilt-scale]") - ? $(this).data("tilt-scale") - : "1", - speed: $(this).is("[data-tilt-speed]") - ? $(this).data("tilt-speed") - : "400", - transition: $(this).is("[data-tilt-transition]") - ? $(this).data("tilt-transition") - : true, - disableAxis: $(this).is("[data-tilt-disable-axis]") - ? $(this).data("tilt-disable-axis") - : null, - axis: $(this).is("[data-tilt-axis]") - ? $(this).data("tilt-axis") - : null, - reset: $(this).is("[data-tilt-reset]") - ? $(this).data("tilt-reset") - : true, - glare: $(this).is("[data-tilt-glare]") - ? $(this).data("tilt-glare") - : false, - maxGlare: $(this).is("[data-tilt-maxglare]") - ? $(this).data("tilt-maxglare") - : 1, - }, - options - ); - - // Add deprecation warning & set disableAxis to deprecated axis setting - if (this.settings.axis !== null) { - console.warn( - "Tilt.js: the axis setting has been renamed to disableAxis. See https://github.com/gijsroge/tilt.js/pull/26 for more information" - ); - this.settings.disableAxis = this.settings.axis; - } - - this.init = () => { - // Store settings - $(this).data("settings", this.settings); - - // Prepare element - if (this.settings.glare) prepareGlare.call(this); - - // Bind events - bindEvents.call(this); - }; - - // Init - this.init(); - }); - }; - - /** - * Auto load - */ - $("[data-tilt]").tilt(); - - return true; -}); diff --git a/Project 6 - The Road/Final Files/images/air-balloon.png b/Project 6 - The Road/Final Files/images/air-balloon.png deleted file mode 100644 index df60da6..0000000 Binary files a/Project 6 - The Road/Final Files/images/air-balloon.png and /dev/null differ diff --git a/Project 6 - The Road/Final Files/images/bg-1.jpg b/Project 6 - The Road/Final Files/images/bg-1.jpg deleted file mode 100644 index f51c16c..0000000 Binary files a/Project 6 - The Road/Final Files/images/bg-1.jpg and /dev/null differ diff --git a/Project 6 - The Road/Final Files/images/contact-us-bg.png b/Project 6 - The Road/Final Files/images/contact-us-bg.png deleted file mode 100644 index 679a583..0000000 Binary files a/Project 6 - The Road/Final Files/images/contact-us-bg.png and /dev/null differ diff --git a/Project 6 - The Road/Final Files/images/forest.jpg b/Project 6 - The Road/Final Files/images/forest.jpg deleted file mode 100644 index 710cace..0000000 Binary files a/Project 6 - The Road/Final Files/images/forest.jpg and /dev/null differ diff --git a/Project 6 - The Road/Final Files/images/header-bg.jpg b/Project 6 - The Road/Final Files/images/header-bg.jpg deleted file mode 100644 index fb28b07..0000000 Binary files a/Project 6 - The Road/Final Files/images/header-bg.jpg and /dev/null differ diff --git a/Project 6 - The Road/Final Files/images/navbar-bg.jpg b/Project 6 - The Road/Final Files/images/navbar-bg.jpg deleted file mode 100644 index 694854d..0000000 Binary files a/Project 6 - The Road/Final Files/images/navbar-bg.jpg and /dev/null differ diff --git a/Project 6 - The Road/Final Files/images/river.jpg b/Project 6 - The Road/Final Files/images/river.jpg deleted file mode 100644 index bb6f4d8..0000000 Binary files a/Project 6 - The Road/Final Files/images/river.jpg and /dev/null differ diff --git a/Project 6 - The Road/Final Files/images/sea.jpg b/Project 6 - The Road/Final Files/images/sea.jpg deleted file mode 100644 index 72924f6..0000000 Binary files a/Project 6 - The Road/Final Files/images/sea.jpg and /dev/null differ diff --git a/Project 6 - The Road/Final Files/images/story-img-1.jpg b/Project 6 - The Road/Final Files/images/story-img-1.jpg deleted file mode 100644 index de26e21..0000000 Binary files a/Project 6 - The Road/Final Files/images/story-img-1.jpg and /dev/null differ diff --git a/Project 6 - The Road/Final Files/images/story-img-2.jpg b/Project 6 - The Road/Final Files/images/story-img-2.jpg deleted file mode 100644 index b2be090..0000000 Binary files a/Project 6 - The Road/Final Files/images/story-img-2.jpg and /dev/null differ diff --git a/Project 6 - The Road/Final Files/images/video.mp4 b/Project 6 - The Road/Final Files/images/video.mp4 deleted file mode 100644 index f50ca93..0000000 Binary files a/Project 6 - The Road/Final Files/images/video.mp4 and /dev/null differ diff --git a/Project 6 - The Road/Final Files/index.html b/Project 6 - The Road/Final Files/index.html deleted file mode 100644 index 394c699..0000000 --- a/Project 6 - The Road/Final Files/index.html +++ /dev/null @@ -1,274 +0,0 @@ - - - - - - - - - - - - - -
- -
-
-
-
-
-
- -
- - - -
-
-

Around the world

-

- "Traveling - it leaves you speechless, then turns you into a - storyteller" -

-
- Header Image - -
- - - -
-

The Most Popular Tours

-
-
-
- Forest -

The wild forest

-
    -
  • 7 days tour
    • -
  • Up to 20 people
    • -
  • 4 tour guides
    • -
  • Sleep in private tents
    • -
  • Difficulty: medium
    • -
- -
-
- -

$399

- -
-
-
-
- River -

Along the river

-
    -
  • 9 days tour
    • -
  • Up to 30 people
    • -
  • 7 tour guides
    • -
  • Sleep in private tents
    • -
  • Difficulty: hard
    • -
- -
-
- -

$499

- -
-
-
-
- Sea -

The island beach

-
    -
  • 5 days tour
    • -
  • Up to 40 people
    • -
  • 8 tour guides
    • -
  • Sleep in hotel
    • -
  • Difficulty: easy
    • -
- -
-
- -

$599

- -
-
-
-
- - - -
-
- -
-
-
-
- Customer image -
-

- These were the best days of this year -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. - Architecto quas, repudiandae veritatis nam mollitia cumque - distinctio, quia aperiam aliquid at consequuntur libero - quisquam facilis laborum inventore repellat perspiciatis vel - fugiat molestias recusandae eum necessitatibus quo possimus - aspernatur? Nobis, architecto eaque. -

-
-
-
-
-
- Customer image -
-

- I enjoyed this great tour -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. - Architecto quas, repudiandae veritatis nam mollitia cumque - distinctio, quia aperiam aliquid at consequuntur libero - quisquam facilis laborum inventore repellat perspiciatis vel - fugiat molestias recusandae eum necessitatibus quo possimus - aspernatur? Nobis, architecto eaque. -

-
-
-
-
-
- - - -
-

Contact Us

-
-
- - -
-
-
- - -
-
- - -
-
-
- - -
- -
-
- - - - - -
- - - diff --git a/Project 6 - The Road/Final Files/script.js b/Project 6 - The Road/Final Files/script.js deleted file mode 100644 index 1ea72b0..0000000 --- a/Project 6 - The Road/Final Files/script.js +++ /dev/null @@ -1,23 +0,0 @@ -const container = document.querySelector(".container"); - -document.querySelector(".open-navbar-icon").addEventListener("click", () => { - container.classList.add("change"); -}); - -document.querySelector(".close-navbar-icon").addEventListener("click", () => { - container.classList.remove("change"); -}); - -const colors = ["#6495ed", "#7fffd4", "#ffa07a", "#f08080", "#afeeee"]; - -let i = 0; - -Array.from(document.querySelectorAll(".nav-link")).forEach(item => { - item.style.cssText = `background-color: ${colors[i++]}`; -}); - -Array.from(document.querySelectorAll(".navigation-button")).forEach(item => { - item.onclick = () => { - item.parentElement.parentElement.classList.toggle("change"); - }; -}); diff --git a/Project 6 - The Road/Final Files/style.css b/Project 6 - The Road/Final Files/style.css deleted file mode 100644 index 187106d..0000000 --- a/Project 6 - The Road/Final Files/style.css +++ /dev/null @@ -1,762 +0,0 @@ -/* Common Styles */ -* { - margin: 0; - padding: 0; - font-family: "Vollkorn", serif; - list-style-type: none; - text-decoration: none; - box-sizing: border-box; - outline: none; -} - -html { - font-size: 62.5%; -} - -:root { - --primary-color: #2b81e4; - --secondary-color: #eee; - --white-color: #fff; - --grey-color: #555; - --light-grey-color: #777; -} - -.center { - display: flex; - justify-content: center; - align-items: center; -} - -.container { - background-color: var(--secondary-color); - margin: 3.5rem; - box-shadow: 0 1rem 3rem var(--grey-color); - overflow: hidden; -} - -/* End of Common styles */ - -/* Navbar */ -.navbar-icon { - width: 5.5rem; - height: 5.5rem; - background-color: var(--white-color); - border-radius: 50%; - cursor: pointer; - flex-direction: column; -} - -.open-navbar-icon { - position: fixed; - top: 6.5rem; - left: 6.5rem; - z-index: 200; -} - -.navbar-icon .line { - height: 0.2rem; - width: 3.5rem; - background-color: var(--light-grey-color); -} - -.open-navbar-icon .line { - margin: 0.3rem 0; -} - -.navbar-wrapper { - width: 100vw; - height: 100vh; - background-color: rgba(255, 255, 255, 0.7); - position: fixed; - left: 0; - bottom: -100%; - opacity: 0; - z-index: 300; - padding: 3.5rem 5.5rem 3.5rem 3.5rem; - transition: bottom 0.5s, opacity 0.2s; -} - -.change .navbar-wrapper { - bottom: 0; - opacity: 1; - transition: bottom 0.5s, opacity 0.2s 0.25s; -} - -.navbar { - width: 100%; - height: 100%; - background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)), - url(images/navbar-bg.jpg) center no-repeat; - background-size: cover; - position: relative; - overflow-y: hidden; -} - -.close-navbar-icon { - position: absolute; - top: 2.5rem; - right: 3rem; - z-index: 300; -} - -.close-navbar-icon .line { - position: absolute; -} - -.line-1 { - transform: rotate(40deg); -} - -.line-2 { - transform: rotate(-40deg); -} - -.nav-list { - height: 100%; - display: flex; -} - -.nav-link { - font-size: 3rem; - font-weight: 700; - color: var(--white-color); - text-transform: uppercase; - width: 100%; - opacity: 0.8; - position: relative; - top: -100%; - transition: all 0.3s; -} - -.change .nav-link { - top: 0; -} - -.nav-link:hover { - opacity: 1; - color: var(--primary-color); -} - -.change .nav-link:nth-child(1) { - transition: top 1s 0.4s, opacity 0.3s, color 0.3s; -} - -.change .nav-link:nth-child(2) { - transition: top 1s 0.6s, opacity 0.3s, color 0.3s; -} - -.change .nav-link:nth-child(3) { - transition: top 1s 0.8s, opacity 0.3s, color 0.3s; -} - -.change .nav-link:nth-child(4) { - transition: top 1s 1s, opacity 0.3s, color 0.3s; -} - -.change .nav-link:nth-child(5) { - transition: top 1s 1.2s, opacity 0.3s, color 0.3s; -} -/* End of Navbar */ - -/* Header */ -.header { - width: 100%; - height: calc(100vh - 7rem); - background: linear-gradient(rgba(18, 113, 255, 0.5), rgba(18, 113, 255, 0.3)), - url(images/header-bg.jpg) center no-repeat; - background-size: cover; - position: relative; - perspective: 100rem; -} - -.header-text { - text-align: center; - text-transform: uppercase; - letter-spacing: 0.1rem; - text-shadow: 0 0.3rem 0.5rem var(--grey-color); -} - -.heading { - font-size: 8rem; - color: var(--white-color); -} - -.header-paragraph { - font-size: 3rem; - font-weight: 500; - color: var(--secondary-color); - max-width: 70rem; - margin: auto; -} - -.logo { - position: absolute; - top: 4rem; - right: 4rem; -} - -.logo h1 { - display: flex; -} - -.logo h1 span { - font-size: 2rem; - font-weight: 900; - color: var(--primary-color); - text-transform: uppercase; - background-color: var(--white-color); - width: 3.5rem; - height: 3.5rem; - margin: 0.5rem; - border-radius: 50%; -} - -.logo h1 span:nth-child(1) { - animation: drop-letters 5s 0.1s infinite; -} - -.logo h1 span:nth-child(2) { - animation: drop-letters 5s 0.2s infinite; -} - -.logo h1 span:nth-child(3) { - animation: drop-letters 5s 0.3s infinite; -} - -.logo h1 span:nth-child(4) { - animation: drop-letters 5s 0.4s infinite; -} - -.logo h1 span:nth-child(5) { - animation: drop-letters 5s 0.5s infinite; -} - -.logo h1 span:nth-child(6) { - animation: drop-letters 5s 0.6s infinite; -} - -.logo h1 span:nth-child(7) { - animation: drop-letters 5s 0.7s infinite; -} - -@keyframes drop-letters { - 0% { - transform: translateY(0); - } - 10% { - transform: translateY(0); - } - 15% { - transform: translateY(-100%); - } - 20% { - transform: translateY(0); - } - 100% { - transform: translateY(0); - } -} - -.header-image { - width: 35%; - animation: image-float 150s infinite; -} - -@keyframes image-float { - 0% { - transform: translateZ(40rem); - opacity: 1; - } - 40% { - transform: translateZ(-500rem) translateX(150rem); - opacity: 0.8; - } - 70% { - transform: translateZ(-1500rem) translateX(800rem); - opacity: 0.6; - } - 80% { - transform: translateZ(-50rem) translateX(100rem); - opacity: 0.8; - } - 100% { - transform: translateZ(40rem); - opacity: 1; - } -} -/* End of Header */ - -/* Popular tours */ -.popular-tours { - padding: 5rem 0 10rem 0; -} - -.popular-tours-heading { - font-size: 8rem; - text-align: center; - margin-bottom: 8rem; - color: var(--primary-color); - text-shadow: 0 0.1rem 0.2rem var(--primary-color); -} - -.cards-wrapper { - display: flex; - justify-content: space-evenly; -} - -.card { - width: 35rem; - position: relative; - perspective: 150rem; -} - -.card-image { - width: 100%; - border-radius: 0.3rem 0.3rem 0 0; -} - -.front-side { - text-align: center; - background-color: var(--white-color); - border-radius: 0.3rem; - position: relative; - z-index: 10; - opacity: 0.9; - transition: opacity 0.4s, transform 0.4s, box-shadow 0.4s; -} - -.change > .front-side { - transform: translateZ(-5rem) translateX(3rem); - box-shadow: 0 2rem 4rem #777; - opacity: 0.5; - z-index: 0; -} - -.tour-name { - font-size: 2.5rem; - font-weight: 700; - text-transform: uppercase; - position: absolute; - top: 30%; - right: 1.5rem; - color: var(--white-color); - text-shadow: 0 0 1rem #000; -} - -.card-list { - width: 80%; - margin: auto; - padding: 2rem 0 3rem 0; -} - -.card-list-item { - font-size: 1.6rem; - font-weight: 500; - color: var(--light-grey-color); - margin: 2rem 0; - border-bottom: 0.1rem solid var(--primary-color); - padding-bottom: 1.5rem; -} - -.back-side { - position: absolute; - top: 0; - background-color: var(--primary-color); - width: 100%; - height: 100%; - border-radius: 0.3rem; - box-shadow: 0 2rem 4rem #777; - flex-direction: column; - transform: translateZ(-5rem) translateX(3rem); - opacity: 0.5; - transition: opacity 0.4s, transform 0.4s, box-shadow 0.4s; -} - -.change > .back-side { - transform: translateZ(0) translateX(0); - box-shadow: 0 0.5rem 2rem #aaa; - opacity: 0.9; -} - -.tour-price { - font-size: 5rem; - font-weight: 300; - color: var(--white-color); - margin-bottom: 3rem; -} - -.card-button { - color: var(--primary-color); - background-color: var(--white-color); - border: none; - font-size: 2.5rem; - padding: 1rem 2rem; - letter-spacing: 0.2rem; - border-radius: 5rem; - cursor: pointer; -} - -.navigation-button { - position: absolute; - top: 0.5rem; - left: 0.5rem; - padding: 0.5rem; - background-color: rgba(255, 255, 255, 0.8); - color: var(--light-grey-color); - border-radius: 0.3rem; - border: none; - font-size: 1.5rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.2rem; - cursor: pointer; -} -/* End of Popular tours */ - -/* Stories */ -.stories { - padding: 10rem 0; - position: relative; -} - -.video-container { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 0.4; -} - -.bg-video { - width: 100%; - height: 100%; - object-fit: cover; -} - -.stories-wrapper { - display: flex; - flex-direction: column; - align-items: center; -} - -.story-bg { - background-color: rgba(238, 238, 238, 0.85); - padding: 5rem; - margin: 5rem; - width: 70%; - box-shadow: 0 2rem 5rem rgba(51, 51, 51, 0.4); - transform: skewX(20deg); -} - -.story { - transform: skewX(-20deg); - display: flex; -} - -.story-image { - width: 20rem; - height: 20rem; - border-radius: 50%; - object-fit: cover; - margin-right: 5rem; -} - -.story-text { - letter-spacing: 0.1rem; -} - -.story-heading { - font-size: 2.5rem; - text-transform: uppercase; - color: var(--grey-color); - margin-bottom: 1rem; -} - -.story-paragraph { - font-size: 1.8rem; - color: var(--light-grey-color); -} - -.story-paragraph::first-letter { - margin-left: 1rem; -} -/* End of Stories */ - -/* Contact */ -.contact { - padding: 15rem 0 20rem 0; - text-align: center; - background: url(images/contact-us-bg.png) center no-repeat; - background-size: cover; - animation: contact-bg 35s infinite; -} - -.contact-heading { - font-size: 7rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.5rem; - color: var(--white-color); - text-shadow: 0 1rem 2rem #000; - margin-bottom: 8rem; -} - -.contact-form { - width: 70rem; - height: 50rem; - background-color: rgba(255, 255, 255, 0.95); - margin: auto; - flex-direction: column; - border-radius: 0.5rem; - box-shadow: 0 1rem 3rem #000; - padding: 5rem; -} - -.input-group { - width: 100%; - display: flex; - flex-direction: column; - margin: 1rem 0; - position: relative; -} - -.input-groups { - width: 100%; - display: flex; - justify-content: space-between; -} - -.input-groups .input-group { - width: 48.5%; -} - -.input-group input, -.input-group textarea { - padding: 3rem 1rem 1rem 1rem; - background-color: var(--secondary-color); - border: 0.1rem solid var(--secondary-color); - font-size: 1.4rem; - color: var(--light-grey-color); - letter-spacing: 0.1rem; - border-radius: 0.5rem; - transition: border 0.3s; -} - -.input-group input:focus, -.input-group textarea:focus { - border: 0.1rem solid #ccc; -} - -.input-group label { - font-size: 1.2rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.1rem; - color: var(--grey-color); - position: absolute; - top: 1rem; - left: 1rem; -} - -.form-btn { - width: 100%; - padding: 1rem; - font-size: 1.6rem; - letter-spacing: 0.1rem; - margin-top: 1rem; - background-color: var(--light-grey-color); - color: var(--white-color); - border-radius: 0.5rem; - border: none; - cursor: pointer; - transition: background-color 0.4s; -} - -.form-btn:hover { - background-color: var(--grey-color); -} - -.input-group textarea { - max-height: 15rem; - max-width: 100%; -} - -@keyframes contact-bg { - 0% { - background-color: #3d3d3d; - } - 25% { - background-color: #ced8e4; - } - 50% { - background-color: #1e81f3; - } - 75% { - background-color: #ff7842; - } - 100% { - background-color: #3d3d3d; - } -} -/* End of Contact */ - -/* Footer */ -.footer { - background-color: var(--grey-color); - padding: 4rem 0 2rem 0; -} - -.footer-list { - display: flex; - justify-content: center; -} - -.footer-link { - font-size: 2rem; - color: var(--white-color); - margin: 0 2rem; - background-color: var(--grey-color); - padding: 0.3rem 3rem; - letter-spacing: 0.3rem; - transition: all 0.2s; -} - -.footer-link:hover { - transform: rotate(-10deg); - box-shadow: 0 2rem 3rem #000; -} - -.footer-paragraph { - text-align: center; - font-size: 1.5rem; - color: var(--secondary-color); - letter-spacing: 0.2rem; - margin-top: 5rem; -} -/* End of Footer */ - -@media (max-width: 1200px) { - .cards-wrapper { - flex-direction: column; - align-items: center; - } - - .card { - margin: 3rem 0; - } - - .story-bg { - width: 85%; - } -} - -@media (max-width: 1000px) { - .nav-list { - flex-direction: column; - } - - .nav-link { - flex-grow: 1; - } - - .header-text { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - z-index: 10; - } - - .heading { - font-size: 6rem; - } - - .header-paragraph { - font-size: 2.5rem; - } - - .popular-tours-heading { - font-size: 6rem; - } - - .story-bg { - transform: skewX(0); - } - - .story { - transform: skewX(0); - flex-direction: column; - align-items: center; - } - - .story-image { - margin-bottom: 3rem; - } - - .footer-link { - padding: 0.3rem 2rem; - margin: 0 1rem; - } -} - -@media (max-width: 800px) { - .header-paragraph { - display: none; - } - - .popular-tours-heading { - font-size: 5rem; - } - - .contact-form { - width: 90%; - } - - .footer-list { - flex-direction: column; - align-items: center; - } - - .footer-link { - margin: 1rem 0; - } -} - -@media (max-width: 650px) { - .container { - margin: 0; - } - - .open-navbar-icon { - top: 2.5rem; - left: 2.5rem; - } - - .navbar-wrapper { - padding: 0; - } - - .close-navbar-icon { - right: 4rem; - } - - .header { - height: 100vh; - } - - .contact-heading { - font-size: 6rem; - } - - .contact-form { - padding: 2rem; - height: 40rem; - } -} - -@media (max-width: 500px) { - html { - font-size: 45%; - } -} diff --git a/Project 6 - The Road/Starter Files/images/air-balloon.png b/Project 6 - The Road/Starter Files/images/air-balloon.png deleted file mode 100644 index df60da6..0000000 Binary files a/Project 6 - The Road/Starter Files/images/air-balloon.png and /dev/null differ diff --git a/Project 6 - The Road/Starter Files/images/bg-1.jpg b/Project 6 - The Road/Starter Files/images/bg-1.jpg deleted file mode 100644 index f51c16c..0000000 Binary files a/Project 6 - The Road/Starter Files/images/bg-1.jpg and /dev/null differ diff --git a/Project 6 - The Road/Starter Files/images/contact-us-bg.png b/Project 6 - The Road/Starter Files/images/contact-us-bg.png deleted file mode 100644 index 679a583..0000000 Binary files a/Project 6 - The Road/Starter Files/images/contact-us-bg.png and /dev/null differ diff --git a/Project 6 - The Road/Starter Files/images/forest.jpg b/Project 6 - The Road/Starter Files/images/forest.jpg deleted file mode 100644 index 710cace..0000000 Binary files a/Project 6 - The Road/Starter Files/images/forest.jpg and /dev/null differ diff --git a/Project 6 - The Road/Starter Files/images/header-bg.jpg b/Project 6 - The Road/Starter Files/images/header-bg.jpg deleted file mode 100644 index fb28b07..0000000 Binary files a/Project 6 - The Road/Starter Files/images/header-bg.jpg and /dev/null differ diff --git a/Project 6 - The Road/Starter Files/images/navbar-bg.jpg b/Project 6 - The Road/Starter Files/images/navbar-bg.jpg deleted file mode 100644 index 694854d..0000000 Binary files a/Project 6 - The Road/Starter Files/images/navbar-bg.jpg and /dev/null differ diff --git a/Project 6 - The Road/Starter Files/images/river.jpg b/Project 6 - The Road/Starter Files/images/river.jpg deleted file mode 100644 index bb6f4d8..0000000 Binary files a/Project 6 - The Road/Starter Files/images/river.jpg and /dev/null differ diff --git a/Project 6 - The Road/Starter Files/images/sea.jpg b/Project 6 - The Road/Starter Files/images/sea.jpg deleted file mode 100644 index 72924f6..0000000 Binary files a/Project 6 - The Road/Starter Files/images/sea.jpg and /dev/null differ diff --git a/Project 6 - The Road/Starter Files/images/story-img-1.jpg b/Project 6 - The Road/Starter Files/images/story-img-1.jpg deleted file mode 100644 index de26e21..0000000 Binary files a/Project 6 - The Road/Starter Files/images/story-img-1.jpg and /dev/null differ diff --git a/Project 6 - The Road/Starter Files/images/story-img-2.jpg b/Project 6 - The Road/Starter Files/images/story-img-2.jpg deleted file mode 100644 index b2be090..0000000 Binary files a/Project 6 - The Road/Starter Files/images/story-img-2.jpg and /dev/null differ diff --git a/Project 6 - The Road/Starter Files/images/video.mp4 b/Project 6 - The Road/Starter Files/images/video.mp4 deleted file mode 100644 index f50ca93..0000000 Binary files a/Project 6 - The Road/Starter Files/images/video.mp4 and /dev/null differ diff --git a/Project 6 - The Road/Starter Files/index.html b/Project 6 - The Road/Starter Files/index.html deleted file mode 100644 index b8e0332..0000000 --- a/Project 6 - The Road/Starter Files/index.html +++ /dev/null @@ -1,34 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/Project 6 - The Road/Starter Files/script.js b/Project 6 - The Road/Starter Files/script.js deleted file mode 100644 index e69de29..0000000 diff --git a/Project 6 - The Road/Starter Files/style.css b/Project 6 - The Road/Starter Files/style.css deleted file mode 100644 index e69de29..0000000 diff --git a/Project 6 - The Road/The Road.rar b/Project 6 - The Road/The Road.rar deleted file mode 100644 index a653c00..0000000 Binary files a/Project 6 - The Road/The Road.rar and /dev/null differ diff --git a/Project 7 - The Wine House/Final Files/images/arrow.png b/Project 7 - The Wine House/Final Files/images/arrow.png deleted file mode 100644 index edcdff4..0000000 Binary files a/Project 7 - The Wine House/Final Files/images/arrow.png and /dev/null differ diff --git a/Project 7 - The Wine House/Final Files/images/bag.png b/Project 7 - The Wine House/Final Files/images/bag.png deleted file mode 100644 index 097b44b..0000000 Binary files a/Project 7 - The Wine House/Final Files/images/bag.png and /dev/null differ diff --git a/Project 7 - The Wine House/Final Files/images/footer-img.png b/Project 7 - The Wine House/Final Files/images/footer-img.png deleted file mode 100644 index da4fc22..0000000 Binary files a/Project 7 - The Wine House/Final Files/images/footer-img.png and /dev/null differ diff --git a/Project 7 - The Wine House/Final Files/images/frame.png b/Project 7 - The Wine House/Final Files/images/frame.png deleted file mode 100644 index 3ab4d77..0000000 Binary files a/Project 7 - The Wine House/Final Files/images/frame.png and /dev/null differ diff --git a/Project 7 - The Wine House/Final Files/images/grapes.png b/Project 7 - The Wine House/Final Files/images/grapes.png deleted file mode 100644 index 540bf87..0000000 Binary files a/Project 7 - The Wine House/Final Files/images/grapes.png and /dev/null differ diff --git a/Project 7 - The Wine House/Final Files/images/logo.png b/Project 7 - The Wine House/Final Files/images/logo.png deleted file mode 100644 index 70beea8..0000000 Binary files a/Project 7 - The Wine House/Final Files/images/logo.png and /dev/null differ diff --git a/Project 7 - The Wine House/Final Files/images/section-1-bg.jpg b/Project 7 - The Wine House/Final Files/images/section-1-bg.jpg deleted file mode 100644 index 6197c17..0000000 Binary files a/Project 7 - The Wine House/Final Files/images/section-1-bg.jpg and /dev/null differ diff --git a/Project 7 - The Wine House/Final Files/images/section-2-bg.jpg b/Project 7 - The Wine House/Final Files/images/section-2-bg.jpg deleted file mode 100644 index 1902faf..0000000 Binary files a/Project 7 - The Wine House/Final Files/images/section-2-bg.jpg and /dev/null differ diff --git a/Project 7 - The Wine House/Final Files/images/section-3-bg.jpg b/Project 7 - The Wine House/Final Files/images/section-3-bg.jpg deleted file mode 100644 index 5dd7874..0000000 Binary files a/Project 7 - The Wine House/Final Files/images/section-3-bg.jpg and /dev/null differ diff --git a/Project 7 - The Wine House/Final Files/images/section-4-bg.jpg b/Project 7 - The Wine House/Final Files/images/section-4-bg.jpg deleted file mode 100644 index 2631481..0000000 Binary files a/Project 7 - The Wine House/Final Files/images/section-4-bg.jpg and /dev/null differ diff --git a/Project 7 - The Wine House/Final Files/images/section-5-bg.jpg b/Project 7 - The Wine House/Final Files/images/section-5-bg.jpg deleted file mode 100644 index 36bbdc0..0000000 Binary files a/Project 7 - The Wine House/Final Files/images/section-5-bg.jpg and /dev/null differ diff --git a/Project 7 - The Wine House/Final Files/images/wine-bottle.png b/Project 7 - The Wine House/Final Files/images/wine-bottle.png deleted file mode 100644 index 643fb29..0000000 Binary files a/Project 7 - The Wine House/Final Files/images/wine-bottle.png and /dev/null differ diff --git a/Project 7 - The Wine House/Final Files/index.html b/Project 7 - The Wine House/Final Files/index.html deleted file mode 100644 index 74c5639..0000000 --- a/Project 7 - The Wine House/Final Files/index.html +++ /dev/null @@ -1,137 +0,0 @@ - - - - - - - - - - - - - -
-
- - - - - -
-
-
- - - -
- - - - -
-
-

1/5

-
-
-
-
-
-
-
-
-
- -
-
-
-
-

The best wines around the world

-
-
-
-
-
-
- Sale Bag - -
- Wine Bottle -
-
-
-
-

the best quality

- Grapes Frame - Grapes -
-
-
-
-
-

Newly Released Wines

- New Wines -
-
-
-
-
    -
  • Contact
    • -
  • NY
    • -
  • 1039 Stanley Avenue
    • -
  • Open Daily
    • -
  • By appointment only
    • -
- -
    -
  • Connect
    • -
  • PN: 516-448-2763
    • -
  • MN: 631-742-8400
    • -
  • example@winehouse.com
    • -
  • Join our mailing list
    • -
-

- Copyright © CodeAndCreate. All Rights Reserved -

-
-
-
-
- - - - diff --git a/Project 7 - The Wine House/Final Files/script.js b/Project 7 - The Wine House/Final Files/script.js deleted file mode 100644 index 3cc8f7a..0000000 --- a/Project 7 - The Wine House/Final Files/script.js +++ /dev/null @@ -1,123 +0,0 @@ -let counter1 = 0; -let counter2 = 1; -let bool = true; - -const sections = document.querySelectorAll("section"); -const progress = document.querySelector(".progress h2"); -const circles = document.querySelectorAll(".circle"); -const menu = document.querySelector(".menu"); -const section1wrapper = document.querySelector(".section-1-wrapper"); -const section5wrapper = document.querySelector(".section-5-wrapper"); - -section1wrapper.style.transform = "scale(1)"; - -const progressCounter = () => { - progress.textContent = `${counter2}/${sections.length}`; - - Array.from(circles).forEach((circle) => { - circle.style.backgroundColor = "transparent"; - }); - document.querySelector(`.circle-${counter2}`).style.backgroundColor = "#ddd"; -}; - -const pageController = () => { - bool = true; - if (counter1 === 5) { - Array.from(sections).forEach((section) => { - section.style.left = "0"; - }); - counter1 = 0; - counter2 = 1; - section1wrapper.style.transform = "scale(1)"; - section5wrapper.style.transform = "scale(1.5)"; - progressCounter(); - bool = false; - } - - if (counter1 === -1) { - Array.from(sections).forEach((section) => { - if (section.classList[0] === "section-5") { - return; - } - section.style.left = "-100vw"; - }); - counter1 = 4; - counter2 = 5; - section1wrapper.style.transform = "scale(1.5)"; - section5wrapper.style.transform = "scale(1)"; - progressCounter(); - bool = false; - } - progressCounter(); - return bool; -}; - -window.addEventListener("wheel", (e) => { - const deltaY = e.deltaY > 0; - - if (deltaY) { - counter1++; - counter2++; - } else { - counter1--; - counter2--; - } - - pageController(); - progressCounter(); - console.log(counter1, counter2); - - if (bool) { - document.querySelector( - `.section-${deltaY ? counter1 : counter2}` - ).style.left = `${deltaY ? "-100vw" : "0"}`; - - document.querySelector( - `.section-${deltaY ? counter1 : counter2}-wrapper` - ).style.transform = `scale(${deltaY ? "1.5" : "1"})`; - - document.querySelector( - `.section-${deltaY ? counter1 + 1 : counter2 + 1}-wrapper` - ).style.transform = `scale(${deltaY ? "1" : "1.5"})`; - } -}); - -document.querySelector(".left-btn").addEventListener("click", () => { - counter1--; - counter2--; - pageController() && - (document.querySelector(`.section-${counter2}`).style.left = "0"); - - if (bool) { - document.querySelector(`.section-${counter2}-wrapper`).style.transform = - "scale(1)"; - document.querySelector(`.section-${counter2 + 1}-wrapper`).style.transform = - "scale(1.5)"; - } -}); - -document.querySelector(".right-btn").addEventListener("click", () => { - counter1++; - counter2++; - pageController() && - (document.querySelector(`.section-${counter1}`).style.left = "-100vw"); - - if (bool) { - document.querySelector(`.section-${counter2}-wrapper`).style.transform = - "scale(1)"; - document.querySelector(`.section-${counter1}-wrapper`).style.transform = - "scale(1.5)"; - } -}); - -document.querySelector(".grapes-img").addEventListener("mouseover", () => { - document.querySelector(".section-3-wrapper").style.opacity = ".5"; -}); - -document.querySelector(".grapes-img").addEventListener("mouseout", () => { - document.querySelector(".section-3-wrapper").style.opacity = "1"; -}); - -menu.addEventListener("click", () => { - document.querySelector(".navbar").classList.toggle("change"); -}); diff --git a/Project 7 - The Wine House/Final Files/style.css b/Project 7 - The Wine House/Final Files/style.css deleted file mode 100644 index ce38783..0000000 --- a/Project 7 - The Wine House/Final Files/style.css +++ /dev/null @@ -1,630 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; - outline: none; - text-decoration: none; - list-style-type: none; - font-family: "Cormorant Garamond", serif; -} - -html { - font-size: 62.5%; -} - -.navbar { - position: fixed; - z-index: 100; - width: 100%; - top: 1rem; - display: flex; - justify-content: space-evenly; - align-items: center; -} - -.menu { - display: none; -} - -.logo { - height: 6rem; -} - -.nav-list { - display: flex; - justify-content: center; -} - -.nav-link { - font-size: 1.5rem; - color: #fff; - width: 15rem; - margin: 0 3rem; - text-transform: uppercase; - border: 0.1rem solid #fff; - text-align: center; - padding: 0.2rem 0; - letter-spacing: 0.1rem; - position: relative; - overflow: hidden; -} - -.nav-link::before { - content: ""; - position: absolute; - width: 150%; - height: 5rem; - background-color: #d50000; - left: -20%; - transform: rotate(-40deg) translateX(-4rem); - transform-origin: left bottom; - opacity: 0.8; - transition: left 0.3s; -} - -.nav-link:hover::before { - left: 110%; -} - -.page-btn { - position: fixed; - z-index: 100; - top: 50%; - transform: translateY(-50%); - background-color: transparent; - border: none; -} - -.left-btn { - left: 4rem; -} - -.left-btn img { - transform: rotate(-90deg); -} - -.right-btn { - right: 4rem; -} - -.right-btn img { - transform: rotate(90deg); -} - -.page-btn img { - width: 4rem; - opacity: 0.4; - cursor: pointer; - transition: opacity 0.2s; -} - -.page-btn img:hover { - opacity: 1; -} - -.progress-wrapper { - position: fixed; - z-index: 100; - bottom: 2rem; - left: 3rem; -} - -.progress { - margin: 1rem 0; - text-align: center; -} - -.progress h2 { - font-size: 2.5rem; - font-weight: 300; - color: #fff; -} - -.circle-wrapper { - display: flex; -} - -.circle { - width: 1rem; - height: 1rem; - border: 0.1rem solid #fff; - border-radius: 50%; - margin: 0 0.3rem; - transition: background-color 0.3s; -} - -.circle-1 { - background-color: #ddd; -} - -.wrapper { - width: 100vw; - height: 100vh; - position: relative; - overflow: hidden; -} - -section { - width: 100%; - height: 100%; - position: absolute; - left: 0; - overflow: hidden; - transition: left 1.5s; -} - -.section-1 { - z-index: 50; -} - -.section-wrapper { - width: inherit; - height: inherit; - transform: scale(1.5); - transition: all 2s; -} - -.section-1-wrapper { - background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.4)), - url(images/section-1-bg.jpg) center no-repeat; - background-size: cover; -} - -.section-1-heading-wrapper { - position: absolute; - top: 70%; - left: 50%; - transform: translate(-50%, -50%); -} - -.section-1-heading { - font-size: 10rem; - font-weight: 300; - color: #fff; - text-transform: capitalize; - letter-spacing: 0.1rem; - border-bottom: 0.2rem solid #d50000; - text-align: right; - user-select: none; -} - -.section-2 { - z-index: 40; -} - -.section-2-wrapper { - background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)), - url(images/section-2-bg.jpg) center no-repeat; - background-size: cover; - display: flex; - align-items: center; - justify-content: space-evenly; -} - -.sale { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; -} - -.sale-bag { - opacity: 0.9; - width: 45rem; -} - -.sale-btn { - width: 20rem; - height: 5rem; - font-size: 2rem; - font-weight: 300; - text-transform: uppercase; - letter-spacing: 0.1rem; - background-color: transparent; - color: #fff; - margin-top: 4rem; - border: 0.1rem solid #fff; - transition: background-color 0.2s; -} - -.sale-btn:hover { - background-color: #d50000; -} - -.wine-bottle { - opacity: 0.6; - width: 80rem; -} - -.section-3 { - z-index: 30; - background-color: #000; -} - -.section-3-wrapper { - background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9)), - url(images/section-3-bg.jpg) center no-repeat; - background-size: cover; - display: flex; - align-items: center; - justify-content: center; -} - -.section-3-heading { - font-size: 20rem; - color: #ccc; - text-transform: uppercase; - transform: rotate(-20deg); - text-align: center; - text-shadow: 0 0.5rem 1.5rem #000; - user-select: none; -} - -.frame-img { - width: 100rem; - position: absolute; - opacity: 0.5; -} - -.grapes-img { - width: 40rem; - position: absolute; - opacity: 0.7; - transition: all 1.5s; -} - -.grapes-img:hover { - opacity: 1; - transform: scale(2); -} - -.section-4 { - z-index: 20; -} - -.section-4-wrapper { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.section-4-bg { - width: 110%; - height: 110%; - position: absolute; - background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7)), - url(images/section-4-bg.jpg) center no-repeat; - background-size: cover; - z-index: -1; - filter: blur(0.5rem); -} - -.section-4-heading { - font-size: 10rem; - font-weight: 300; - text-align: center; - margin-bottom: 7rem; - color: #d50000; - user-select: none; -} - -.new-wines-img { - width: 70rem; - border: 0.1rem solid #fff; - padding: 1rem; - opacity: 0.7; -} - -.section-5 { - z-index: 10; -} - -.section-5-wrapper { - background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), - url(images/section-5-bg.jpg) center no-repeat; - background-size: cover; - display: flex; - align-items: center; - justify-content: center; -} - -.footer-list li { - font-size: 2rem; - font-weight: 700; - letter-spacing: 0.1rem; - color: #ddd; - margin: 1rem 0; -} - -.footer-list li:first-child { - text-transform: uppercase; - color: #fff; -} - -.footer-img { - width: 60rem; - margin: 0 20rem; - opacity: 0.9; -} - -.copyright { - position: absolute; - bottom: 2rem; - font-size: 2rem; - font-weight: 600; - text-align: center; - color: #eee; - letter-spacing: 0.2rem; -} - -@media (max-width: 1600px) { - .sale-bag { - width: 35rem; - } - - .wine-bottle { - width: 65rem; - } - - .footer-img { - width: 45rem; - margin: 0 12rem; - } -} - -@media (max-width: 1300px) { - .sale-bag { - width: 30rem; - } - - .wine-bottle { - width: 60rem; - } - - .footer-img { - width: 35rem; - margin: 0 10rem; - } -} - -@media (max-width: 1200px) { - .nav-link { - margin: 0 1.5rem; - } - - .section-1-heading-wrapper { - width: 80%; - } - - .section-1-heading { - font-size: 8rem; - } - - .sale-bag { - width: 25rem; - } - - .sale-btn { - width: 15rem; - height: 4rem; - font-size: 1.7rem; - } - - .wine-bottle { - width: 50rem; - } - - .footer-img { - width: 25rem; - margin: 0 7rem; - } -} - -@media (max-width: 1000px) { - .navbar { - justify-content: start; - padding-left: 2rem; - } - - .menu { - display: block; - width: 4rem; - height: 2.5rem; - position: absolute; - top: 1rem; - right: 2rem; - display: flex; - flex-direction: column; - justify-content: space-between; - } - - .menu-line { - width: 100%; - height: 0.3rem; - background-color: #d50000; - transition: transform 0.5s; - } - - .change .menu-line-1 { - transform: rotate(40deg) translate(0.5rem, 1rem); - } - - .change .menu-line-2 { - transform: translate(-0.2rem, 2rem); - } - - .change .menu-line-3 { - transform: rotate(-40deg) translate(0.5rem, -1rem); - } - - .nav-list { - position: absolute; - top: 5rem; - right: -21rem; - flex-direction: column; - height: calc(100vh - 5rem); - background-color: #333; - justify-content: start; - padding: 2rem; - border-radius: 0.5rem 0 0 0; - transition: right 0.5s; - } - - .change .nav-list { - right: 0; - } - - .nav-link { - margin: 1rem; - } - - .section-2-wrapper { - flex-direction: column; - } - - .sale { - order: 1; - } - - .section-3-heading { - font-size: 12rem; - } - - .frame-img { - width: 70rem; - } - - .grapes-img { - width: 25rem; - } - - .section-4-heading { - font-size: 8rem; - } - - .new-wines-img { - width: 60rem; - } - - .section-5-wrapper { - flex-direction: column; - } - - .footer-img { - width: 20rem; - order: 1; - } - - .footer-list { - width: 20rem; - margin: 2rem auto; - } -} - -@media (max-width: 800px) { - .left-btn { - left: 2rem; - } - - .right-btn { - right: 2rem; - } - - .section-1-heading { - font-size: 6rem; - } - - .sale-bag { - width: 20rem; - } - - .wine-bottle { - width: 40rem; - } - - .section-3-heading { - font-size: 11rem; - opacity: 0.7; - } - - .frame-img { - width: 60rem; - } - - .new-wines-img { - width: 45rem; - } - - .progress-wrapper { - top: 0; - left: 50%; - transform: translateX(-50%); - } -} - -@media (max-width: 600px) { - .section-1-heading { - font-size: 4rem; - } - - .sale-bag { - width: 15rem; - } - - .wine-bottle { - width: 30rem; - } - - .sale-btn { - width: 12rem; - height: 3rem; - font-size: 1.4rem; - } - - .section-3-heading { - font-size: 10rem; - } - - .frame-img { - width: 35rem; - } - - .section-4-heading { - font-size: 6rem; - } - - .new-wines-img { - width: 35rem; - } -} - -@media (max-width: 500px) { - html { - font-size: 45%; - } - - .left-btn { - left: 0.5rem; - } - - .right-btn { - right: 0.5rem; - } - - .nav-list { - top: 6.5rem; - } - - .section-3-heading { - font-size: 8rem; - } - - .grapes-img { - width: 15rem; - } - - .grapes-img:hover { - width: 25rem; - } -} diff --git a/Project 7 - The Wine House/Starter Files/images/arrow.png b/Project 7 - The Wine House/Starter Files/images/arrow.png deleted file mode 100644 index edcdff4..0000000 Binary files a/Project 7 - The Wine House/Starter Files/images/arrow.png and /dev/null differ diff --git a/Project 7 - The Wine House/Starter Files/images/bag.png b/Project 7 - The Wine House/Starter Files/images/bag.png deleted file mode 100644 index 097b44b..0000000 Binary files a/Project 7 - The Wine House/Starter Files/images/bag.png and /dev/null differ diff --git a/Project 7 - The Wine House/Starter Files/images/footer-img.png b/Project 7 - The Wine House/Starter Files/images/footer-img.png deleted file mode 100644 index da4fc22..0000000 Binary files a/Project 7 - The Wine House/Starter Files/images/footer-img.png and /dev/null differ diff --git a/Project 7 - The Wine House/Starter Files/images/frame.png b/Project 7 - The Wine House/Starter Files/images/frame.png deleted file mode 100644 index 3ab4d77..0000000 Binary files a/Project 7 - The Wine House/Starter Files/images/frame.png and /dev/null differ diff --git a/Project 7 - The Wine House/Starter Files/images/grapes.png b/Project 7 - The Wine House/Starter Files/images/grapes.png deleted file mode 100644 index 540bf87..0000000 Binary files a/Project 7 - The Wine House/Starter Files/images/grapes.png and /dev/null differ diff --git a/Project 7 - The Wine House/Starter Files/images/logo.png b/Project 7 - The Wine House/Starter Files/images/logo.png deleted file mode 100644 index 70beea8..0000000 Binary files a/Project 7 - The Wine House/Starter Files/images/logo.png and /dev/null differ diff --git a/Project 7 - The Wine House/Starter Files/images/section-1-bg.jpg b/Project 7 - The Wine House/Starter Files/images/section-1-bg.jpg deleted file mode 100644 index 6197c17..0000000 Binary files a/Project 7 - The Wine House/Starter Files/images/section-1-bg.jpg and /dev/null differ diff --git a/Project 7 - The Wine House/Starter Files/images/section-2-bg.jpg b/Project 7 - The Wine House/Starter Files/images/section-2-bg.jpg deleted file mode 100644 index 1902faf..0000000 Binary files a/Project 7 - The Wine House/Starter Files/images/section-2-bg.jpg and /dev/null differ diff --git a/Project 7 - The Wine House/Starter Files/images/section-3-bg.jpg b/Project 7 - The Wine House/Starter Files/images/section-3-bg.jpg deleted file mode 100644 index 5dd7874..0000000 Binary files a/Project 7 - The Wine House/Starter Files/images/section-3-bg.jpg and /dev/null differ diff --git a/Project 7 - The Wine House/Starter Files/images/section-4-bg.jpg b/Project 7 - The Wine House/Starter Files/images/section-4-bg.jpg deleted file mode 100644 index 2631481..0000000 Binary files a/Project 7 - The Wine House/Starter Files/images/section-4-bg.jpg and /dev/null differ diff --git a/Project 7 - The Wine House/Starter Files/images/section-5-bg.jpg b/Project 7 - The Wine House/Starter Files/images/section-5-bg.jpg deleted file mode 100644 index 36bbdc0..0000000 Binary files a/Project 7 - The Wine House/Starter Files/images/section-5-bg.jpg and /dev/null differ diff --git a/Project 7 - The Wine House/Starter Files/images/wine-bottle.png b/Project 7 - The Wine House/Starter Files/images/wine-bottle.png deleted file mode 100644 index 643fb29..0000000 Binary files a/Project 7 - The Wine House/Starter Files/images/wine-bottle.png and /dev/null differ diff --git a/Project 7 - The Wine House/Starter Files/index.html b/Project 7 - The Wine House/Starter Files/index.html deleted file mode 100644 index ebed022..0000000 --- a/Project 7 - The Wine House/Starter Files/index.html +++ /dev/null @@ -1,34 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/Project 7 - The Wine House/Starter Files/script.js b/Project 7 - The Wine House/Starter Files/script.js deleted file mode 100644 index e69de29..0000000 diff --git a/Project 7 - The Wine House/Starter Files/style.css b/Project 7 - The Wine House/Starter Files/style.css deleted file mode 100644 index e69de29..0000000 diff --git a/Project 7 - The Wine House/The Wine House.rar b/Project 7 - The Wine House/The Wine House.rar deleted file mode 100644 index 0787430..0000000 Binary files a/Project 7 - The Wine House/The Wine House.rar and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/AirPods/airpods-1.png b/Project 8 - Apple eCommerce/Final Files/images/AirPods/airpods-1.png deleted file mode 100644 index e19c839..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/AirPods/airpods-1.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/AirPods/airpods-2.png b/Project 8 - Apple eCommerce/Final Files/images/AirPods/airpods-2.png deleted file mode 100644 index 3e0ec7a..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/AirPods/airpods-2.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/Icons/airpods-icon.png b/Project 8 - Apple eCommerce/Final Files/images/Icons/airpods-icon.png deleted file mode 100644 index ba9e50d..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/Icons/airpods-icon.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/Icons/home-icon.png b/Project 8 - Apple eCommerce/Final Files/images/Icons/home-icon.png deleted file mode 100644 index d8b7068..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/Icons/home-icon.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/Icons/iphone-icon.png b/Project 8 - Apple eCommerce/Final Files/images/Icons/iphone-icon.png deleted file mode 100644 index 24e5a01..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/Icons/iphone-icon.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/Icons/macbook-icon.png b/Project 8 - Apple eCommerce/Final Files/images/Icons/macbook-icon.png deleted file mode 100644 index d296fbd..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/Icons/macbook-icon.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/Icons/watch-icon.png b/Project 8 - Apple eCommerce/Final Files/images/Icons/watch-icon.png deleted file mode 100644 index 74d17ba..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/Icons/watch-icon.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/MacBook/macbook-1-desktop.png b/Project 8 - Apple eCommerce/Final Files/images/MacBook/macbook-1-desktop.png deleted file mode 100644 index 087f00d..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/MacBook/macbook-1-desktop.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/MacBook/macbook-keyboard.png b/Project 8 - Apple eCommerce/Final Files/images/MacBook/macbook-keyboard.png deleted file mode 100644 index 56db34e..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/MacBook/macbook-keyboard.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/MacBook/macbook-screen.png b/Project 8 - Apple eCommerce/Final Files/images/MacBook/macbook-screen.png deleted file mode 100644 index 981dc66..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/MacBook/macbook-screen.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/iPhones/iphones-1-img.png b/Project 8 - Apple eCommerce/Final Files/images/iPhones/iphones-1-img.png deleted file mode 100644 index b21bffe..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/iPhones/iphones-1-img.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/iPhones/iphones-2-img.png b/Project 8 - Apple eCommerce/Final Files/images/iPhones/iphones-2-img.png deleted file mode 100644 index b9354af..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/iPhones/iphones-2-img.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/iphone.png b/Project 8 - Apple eCommerce/Final Files/images/iphone.png deleted file mode 100644 index 29cc3ea..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/iphone.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/slideshow/section-1-bg-1.jpg b/Project 8 - Apple eCommerce/Final Files/images/slideshow/section-1-bg-1.jpg deleted file mode 100644 index 125793f..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/slideshow/section-1-bg-1.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/slideshow/section-1-bg-2.jpg b/Project 8 - Apple eCommerce/Final Files/images/slideshow/section-1-bg-2.jpg deleted file mode 100644 index fca6aa5..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/slideshow/section-1-bg-2.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/slideshow/section-1-bg-3.jpg b/Project 8 - Apple eCommerce/Final Files/images/slideshow/section-1-bg-3.jpg deleted file mode 100644 index 38eabac..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/slideshow/section-1-bg-3.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/slideshow/section-1-bg-4.jpg b/Project 8 - Apple eCommerce/Final Files/images/slideshow/section-1-bg-4.jpg deleted file mode 100644 index 9dfb199..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/slideshow/section-1-bg-4.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/slideshow/section-1-bg-5.jpg b/Project 8 - Apple eCommerce/Final Files/images/slideshow/section-1-bg-5.jpg deleted file mode 100644 index f37876f..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/slideshow/section-1-bg-5.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-1.jpg b/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-1.jpg deleted file mode 100644 index fa34164..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-1.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-10.jpg b/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-10.jpg deleted file mode 100644 index 1f0b541..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-10.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-2.jpg b/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-2.jpg deleted file mode 100644 index 3386b87..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-2.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-3.jpg b/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-3.jpg deleted file mode 100644 index 780031c..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-3.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-4.jpg b/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-4.jpg deleted file mode 100644 index 83a2e70..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-4.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-5.jpg b/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-5.jpg deleted file mode 100644 index 2c9401d..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-5.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-6.jpg b/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-6.jpg deleted file mode 100644 index 5131025..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-6.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-7.jpg b/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-7.jpg deleted file mode 100644 index ab9cf12..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-7.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-8.jpg b/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-8.jpg deleted file mode 100644 index 952c29c..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-8.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-9.jpg b/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-9.jpg deleted file mode 100644 index fc29f20..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-band-9.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-1.png b/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-1.png deleted file mode 100644 index ae040f8..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-1.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-10.png b/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-10.png deleted file mode 100644 index 6e4706c..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-10.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-2.png b/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-2.png deleted file mode 100644 index fd09eb7..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-2.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-3.png b/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-3.png deleted file mode 100644 index b202e9c..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-3.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-4.png b/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-4.png deleted file mode 100644 index 5af3ef9..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-4.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-5.png b/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-5.png deleted file mode 100644 index 857b14b..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-5.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-6.png b/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-6.png deleted file mode 100644 index d023ceb..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-6.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-7.png b/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-7.png deleted file mode 100644 index 6ae987d..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-7.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-8.png b/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-8.png deleted file mode 100644 index 7204e80..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-8.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-9.png b/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-9.png deleted file mode 100644 index 2fa993a..0000000 Binary files a/Project 8 - Apple eCommerce/Final Files/images/watches/watch-case-9.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Final Files/index.html b/Project 8 - Apple eCommerce/Final Files/index.html deleted file mode 100644 index dd28c7b..0000000 --- a/Project 8 - Apple eCommerce/Final Files/index.html +++ /dev/null @@ -1,256 +0,0 @@ - - - - - - - - - - - - - -
- -
- - - - - - - - - -
-
-
- -
-
- -
-
- - -
- - - - - - - - - - - - - - - - - - -
- -
- - - -
-

← Best Gift

-

"Creativity is just connecting things."

- - Steve Jobs - -
- - - -
- -
- - - -
- -

iPhone 12

- - - -
- - -
- - - -
- Learn More - Shop -
- -
- - - -
- -

MacBook Air

- - - -
- - - - - - -
-
- -
-
-
- - - -
-

Light. Speed.

-

Starting at $999

- -
- -
- -
- - - -
- -
- -
- - - - - - - - - -
- - - -
- - - - - - - - - -
- -
- - - - - - - - - - - - - - - - - - - - -
- - - -
- -
- -

AirPods

- - - - - - - - -
- - -
- -
- -
- - - -
-
- - - - - - - - - - - - - - - -
-

Copyright © CodeAndCreate All Rights Reserved

-
- -
- - - \ No newline at end of file diff --git a/Project 8 - Apple eCommerce/Final Files/script.js b/Project 8 - Apple eCommerce/Final Files/script.js deleted file mode 100644 index d17f38f..0000000 --- a/Project 8 - Apple eCommerce/Final Files/script.js +++ /dev/null @@ -1,172 +0,0 @@ -// Common JS -document.querySelectorAll('.watch-control, .controls a, .iphone-btn').forEach(control => { - control.addEventListener('click', e => { - e.preventDefault() - }) -}) -// End of Common JS - -// Cube -let x = 0 -let y = 20 -let z = 0 -let bool = true -let interval; - -const cube = document.querySelector('.cube') - -document.querySelector('.top-x-control').addEventListener('click', () => { - cube.style.transform = `rotateX(${x += 20}deg) rotateY(${y}deg) rotateZ(${z}deg)` -}) - -document.querySelector('.bottom-x-control').addEventListener('click', () => { - cube.style.transform = `rotateX(${x -= 20}deg) rotateY(${y}deg) rotateZ(${z}deg)` -}) - -document.querySelector('.left-y-control').addEventListener('click', () => { - cube.style.transform = `rotateX(${x}deg) rotateY(${y -= 20}deg) rotateZ(${z}deg) ` -}) - -document.querySelector('.right-y-control').addEventListener('click', () => { - cube.style.transform = `rotateX(${x}deg) rotateY(${y += 20}deg) rotateZ(${z}deg) ` -}) - -document.querySelector('.top-z-control').addEventListener('click', () => { - cube.style.transform = `rotateX(${x}deg) rotateY(${y}deg) rotateZ(${z -= 20}deg) ` -}) - -document.querySelector('.bottom-z-control').addEventListener('click', () => { - cube.style.transform = `rotateX(${x}deg) rotateY(${y}deg) rotateZ(${z += 20}deg) ` -}) - -const playPause = () => { - if(bool) { - interval = setInterval(() => { - cube.style.transform = `rotateX(${x}deg) rotateY(${y++}deg) rotateZ(${z}deg)` - }, 100) - } else { - clearInterval(interval) - } -} - -playPause() - -document.querySelector('.controls').addEventListener('mouseover', () => { - bool = false - playPause() -}) - -document.querySelector('.controls').addEventListener('mouseout', () => { - bool = true - playPause() -}) - -// End of Cube - -// Slideshow -const slideshowDivs = () => { - for(let i = 1; i <= 5; i++) { - const div = document.createElement('div') - - div.style.backgroundImage = `url(images/slideshow/section-1-bg-${i}.jpg)` - - i === 1 && div.classList.add('change') - - document.querySelector('.slideshow').appendChild(div) - } -} - -slideshowDivs() - -const divs = document.querySelectorAll('.slideshow div') - -let a = 1 - -const slideshow = () => { - setInterval(() => { - a++ - - const div = document.querySelector('.slideshow .change') - - div.classList.remove('change') - - if(a < divs.length) { - div.nextElementSibling.classList.add('change') - } else { - divs[0].classList.add('change') - a = 1 - } - }, 20000) -} - -slideshow() -// End of Slideshow - -// Section 3 -const section3Content = document.querySelector('.section-3-content') - -window.addEventListener('scroll', () => { - if(window.pageYOffset + window.innerHeight >= section3Content.offsetTop + section3Content.offsetHeight / 2) { - section3Content.classList.add('change') - } -}) -// End of Section 3 - -// Section 4 -const watchBands = document.querySelector('.watch-bands') -const watchCases = document.querySelector('.watch-cases') - -const watchTopControl = document.querySelector('.watch-top-control') -const watchRightControl = document.querySelector('.watch-right-control') -const watchBottomControl = document.querySelector('.watch-bottom-control') -const watchLeftControl = document.querySelector('.watch-left-control') - -let axisY = 0 -let axisX = 0 - -const hideControl = () => { - if(axisY === -280) { - watchTopControl.classList.add('hideControl') - } else { - watchTopControl.classList.remove('hideControl') - } - - if(axisY === 280) { - watchBottomControl.classList.add('hideControl') - } else { - watchBottomControl.classList.remove('hideControl') - } - - if(axisX === 280) { - watchRightControl.classList.add('hideControl') - } else { - watchRightControl.classList.remove('hideControl') - } - - if(axisX === -280) { - watchLeftControl.classList.add('hideControl') - } else { - watchLeftControl.classList.remove('hideControl') - } -} - -watchTopControl.addEventListener('click', () => { - watchCases.style.marginTop = `${axisY -= 70}rem` - hideControl() -}) - -watchBottomControl.addEventListener('click', () => { - watchCases.style.marginTop = `${axisY += 70}rem` - hideControl() -}) - -watchRightControl.addEventListener('click', () => { - watchBands.style.marginRight = `${axisX += 70}rem` - hideControl() -}) - -watchLeftControl.addEventListener('click', () => { - watchBands.style.marginRight = `${axisX -= 70}rem` - hideControl() -}) -// End of Section 4 diff --git a/Project 8 - Apple eCommerce/Final Files/style.css b/Project 8 - Apple eCommerce/Final Files/style.css deleted file mode 100644 index bd5e2b6..0000000 --- a/Project 8 - Apple eCommerce/Final Files/style.css +++ /dev/null @@ -1,1002 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap"); - -/* Common Styles */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; - list-style-type: none; - outline: none; - text-decoration: none; - font-family: "Work Sans", sans-serif; -} - -html { - font-size: 62.5%; - scroll-behavior: smooth; -} - -:root { - --primary-color: #6edae6; - --white-color: #fff; - --black-color: #000; -} - -.center { - display: flex; - justify-content: center; - align-items: center; -} -/* End of Common Styles */ - -/* Section 1 */ -.section-1 { - width: 100%; - height: 100vh; - background-color: var(--primary-color); - display: flex; - align-items: center; - justify-content: space-evenly; - clip-path: polygon(100% 0, 100% 95%, 38% 100%, 0 100%, 0 0); - position: relative; -} - -/* Logo */ -.logo { - position: absolute; - top: 3rem; - left: 3rem; -} - -.logo i { - font-size: 10rem; - color: rgba(0, 0, 0, 0.8); -} -/* End of Logo */ - -/* Navbar */ -.navbar { - position: absolute; - top: 3rem; - right: 10%; -} - -.navbar-link { - font-size: 2rem; - display: inline-block; - margin: 0 3rem; - color: var(--black-color); - transition: transform 0.5s; -} - -.navbar-link:hover { - transform: scale(1.5); -} -/* End of Navbar */ - -/* Cube */ -.cube-wrapper { - perspective: 100rem; -} - -.cube { - width: 30rem; - height: 55rem; - transform-style: preserve-3d; - transform: rotateX(0) rotateY(20deg) rotateZ(0); - position: relative; - top: -2rem; - transition: transform 0.5s; -} - -.front-side, -.back-side { - width: 100%; - height: 100%; - background-color: #fee; - position: absolute; - transform-style: preserve-3d; - box-shadow: inset 0.1rem 0.1rem 0.1rem #ddd, inset -0.1rem -0.1rem 0.1rem #ddd; -} - -.front-side { - padding: 2.5rem; - transform: translateZ(5rem); -} - -.front-side::before, -.front-side::after { - content: ""; - width: 100%; - height: 10rem; - background-color: #fee; - position: absolute; - box-shadow: inset 0.1rem 0.1rem 0.1rem #ddd, inset -0.1rem -0.1rem 0.1rem #ddd; -} - -.front-side::before { - top: 0; - left: 0; - transform: rotateX(-90deg); - transform-origin: top; -} - -.front-side::after { - bottom: 0; - left: 0; - transform: rotateX(90deg); - transform-origin: bottom; -} - -.front-side img { - width: 100%; - height: 100%; - object-fit: contain; -} - -.back-side { - transform: translateZ(-5rem); -} - -.back-side::before, -.back-side::after { - content: "iPhone"; - width: 10rem; - height: 100%; - background-color: #fee; - position: absolute; - display: flex; - justify-content: center; - align-items: center; - font-size: 2rem; - font-weight: 300; - color: #ec1919; - box-shadow: inset 0.1rem 0.1rem 0.1rem #ddd, inset -0.1rem -0.1rem 0.1rem #ddd; -} - -.back-side::before { - top: 0; - left: 0; - transform: rotateY(-90deg); - transform-origin: left; -} - -.back-side::after { - top: 0; - right: 0; - transform: rotateY(90deg); - transform-origin: right; -} - -.back-side i { - font-size: 12rem; - color: var(--primary-color); - text-shadow: 0.1rem 0.1rem 0.2rem #aaa, -0.1rem -0.1rem 0.2rem #aaa; - transform: rotateY(180deg); -} - -/* Controls */ -.controls { - position: absolute; - bottom: -15rem; - left: 50%; - transform: translateX(-50%); - width: 10rem; - height: 10rem; - background-color: rgba(0, 0, 0, 0.9); - border-radius: 50%; - border: 1rem solid rgba(0, 0, 0, 0.8); -} - -.controls a { - position: absolute; -} - -.controls a:nth-child(1) { - top: 0; - left: 50%; - transform: translateX(-50%); -} - -.controls a:nth-child(2) { - bottom: 0; - left: 50%; - transform: translateX(-50%); -} - -.controls a:nth-child(3) { - top: 50%; - left: 0; - transform: translateY(-50%); -} - -.controls a:nth-child(4) { - top: 50%; - right: 0; - transform: translateY(-50%); -} - -.controls a:nth-child(5) { - top: 10%; - right: 10%; - transform: rotate(45deg); -} - -.controls a:nth-child(6) { - bottom: 10%; - left: 10%; - transform: rotate(45deg); -} - -.controls i { - font-size: 1.5rem; - color: var(--primary-color); - opacity: 0.5; - transition: opacity 0.5s; -} - -.controls a:hover i { - opacity: 1; -} -/* End of Controls */ -/* End of Cube */ - -/* Banner */ -.section-1-banner { - flex-direction: column; -} - -.section-1-banner h1 { - font-size: 13rem; - font-weight: 300; - text-transform: uppercase; - letter-spacing: 0.5rem; -} - -.section-1-banner p { - font-size: 4rem; - font-weight: 400; - letter-spacing: 0.1rem; - margin: 6rem 0 4rem 0; -} - -.section-1-banner span { - font-size: 3rem; - margin-bottom: 5rem; -} - -.section-1-banner button { - padding: 2rem 4rem; - font-size: 2rem; - background-color: var(--black-color); - color: var(--primary-color); - font-weight: 400; - letter-spacing: 0.1rem; - border: none; - border-radius: 0.5rem; - cursor: pointer; - clip-path: polygon( - 50% 0%, - 81% 5%, - 100% 0, - 100% 100%, - 80% 95%, - 50% 100%, - 20% 95%, - 0 100%, - 0 0, - 23% 5% - ); - transition: clip-path 0.5s; -} - -.section-1-banner button:hover { - clip-path: polygon( - 40% 15%, - 77% 15%, - 100% 10%, - 100% 90%, - 75% 85%, - 40% 85%, - 30% 100%, - 0 50%, - 0 50%, - 30% 0 - ); -} -/* End of Banner */ - -/* Slideshow */ -.slideshow { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -.slideshow div { - width: 100%; - height: 100%; - position: absolute; - background-size: cover; - background-position: center; - background-repeat: no-repeat; - opacity: 0; - transition: opacity 5s; -} - -.slideshow div.change { - opacity: 1; -} -/* End of Slideshow */ -/* End of Section 1 */ - -/* Section 2 */ -.section-2 { - width: 100%; - height: 120vh; - padding: 10vh 0; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-around; -} - -/* Section 2 Heading */ -.section-2-heading { - font-size: 10rem; - font-weight: 200; - color: var(--black-color); - position: relative; - margin-bottom: 5rem; -} - -.section-2-heading::before { - content: ""; - width: 130%; - height: 30vw; - background-image: linear-gradient(var(--primary-color), var(--white-color)); - position: absolute; - top: 0; - left: 0; - transform: skewX(-50deg); - transform-origin: left top; - z-index: -1; - border-radius: 1rem; -} -/* End of Section 2 Heading */ - -/* Section 2 Images */ -.iphones { - height: 60vh; - width: 50vw; - background-image: linear-gradient(var(--primary-color), var(--white-color)); - border-radius: 0.5rem; -} - -.iphones img { - width: inherit; - height: inherit; - object-fit: contain; - position: absolute; - transition: opacity 3s; -} - -.iphone-img-2 { - opacity: 0; -} - -.iphones:hover .iphone-img-1 { - opacity: 0; -} - -.iphones:hover .iphone-img-2 { - opacity: 1; -} -/* End of Section 2 Images */ - -/* Section 2 Buttons */ -.iphone-btns { - display: flex; -} - -.iphone-btn { - width: 6rem; - height: 6rem; - background-image: linear-gradient( - to right, - rgb(51, 51, 51) 60%, - rgb(82, 82, 82) - ); - margin: 0 3rem; - border-radius: 50%; - position: relative; -} - -.iphone-btn::after { - content: ""; - width: 50%; - height: 50%; - display: block; - border: 0.1rem solid #6edae6; - border-radius: 1rem; -} - -.iphone-btn span { - position: absolute; - top: -3rem; - font-size: 1.6rem; - font-weight: 400; - text-transform: uppercase; - letter-spacing: 0.1rem; - color: var(--primary-color); - width: max-content; - transform: scale(0); - transition: transform 0.5s; -} - -.iphone-btn:hover span { - transform: scale(1); -} -/* End of Section 2 Buttons */ -/* End of Section 2 */ - -/* Section 3 */ -.section-3 { - width: 100%; - height: 100%; - background-color: var(--black-color); - flex-direction: column; - padding: 15rem 0; - clip-path: polygon(68% 0, 100% 0, 100% 97%, 38% 100%, 0 100%, 0 3%); -} - -/* Section 3 Heading */ -.section-3-heading { - font-size: 10rem; - font-weight: 200; - color: var(--primary-color); - margin-bottom: 15rem; -} -/* End of Section 3 Heading */ - -/* Section 3 Content */ -.section-3-content { - width: 80%; - flex-direction: column; - perspective: 1000rem; - position: relative; -} - -/* Section 3 Images */ -.section-3-content img { - width: inherit; -} - -.macbook-img-1 { - transform: rotateX(-80deg); - transform-origin: bottom; -} - -.change .macbook-img-1 { - transform: rotateX(0); - transition: transform 3s; -} -/* End of Section 3 Images */ - -/* Section 3 Loading */ -.loading-wrapper { - position: absolute; - top: 6%; - width: 60%; - height: 85%; - background: linear-gradient( - rgba(255, 255, 255, 0.6), - rgba(255, 255, 255, 0.6) - ), - url(images/MacBook/macbook-1-desktop.png) center no-repeat; - z-index: -1; - opacity: 0; -} - -.change .loading-wrapper { - opacity: 1; - transition: opacity 1s 2s; -} - -.loading { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - background-color: var(--black-color); - flex-direction: column; -} - -.change .loading { - opacity: 0; - transition: 1s 5s; -} - -.loading i { - font-size: 10rem; - color: var(--white-color); - margin-bottom: 2rem; -} - -.progress-bar { - width: 22rem; - height: 0.3rem; - background-color: #888; - border-radius: 5rem; - position: relative; -} - -.progress-bar::after { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 0; - height: 100%; - background-color: var(--white-color); -} - -.change .progress-bar::after { - width: 100%; - transition: width 1s 3s; -} -/* End of Section 3 Loading */ - -/* Section 3 Info */ -.macbook-info { - position: absolute; - width: 70rem; - text-align: center; - opacity: 0; -} - -.change .macbook-info { - opacity: 1; - transition: opacity 1s 6s; -} - -.macbook-info-heading { - font-size: 6rem; - font-weight: 400; - color: var(--primary-color); -} - -.macbook-price { - font-size: 2.5rem; - font-weight: 200; - margin: 3rem 0; -} - -.macbook-btn { - width: 25rem; - height: 5rem; - background-image: linear-gradient(#ddd, #fff); - border: none; - border-radius: 0.5rem; - box-shadow: 0.1rem 0.1rem 0.1rem #fff, -0.1rem -0.1rem 0.1rem #fff; - font-size: 1.5rem; - font-weight: 500; - letter-spacing: 0.2rem; - color: var(--primary-color); - cursor: pointer; -} -/* End of Section 3 Info */ -/* End of Section 3 Content */ -/*End of Section 3 */ - -/* Section 4 */ -.section-4 { - height: 140vh; - padding: 20vh 0; - flex-direction: column; - position: relative; -} - -/* Section 4 Watches */ -.watches { - position: relative; - width: 100%; - height: 100%; - overflow: hidden; -} - -.watches > div { - position: absolute; -} -/* Watch Bands */ -.watch-bands { - transition: margin-right 1s; -} - -.watch-band-img { - width: 35rem; - height: 35rem; - object-fit: contain; -} -/* End of Watch Bands */ - -/* Watch Cases */ -.watch-cases { - flex-direction: column; - transition: margin-top 1s; -} - -.watch-case-img { - width: 35rem; - height: 35rem; - object-fit: contain; -} -/* End of Watch Cases */ -/* End of Section 4 Watches */ - -/* Watch Controls */ -.watch-control { - position: absolute; - width: 4rem; - height: 4rem; - background-color: rgba(221, 221, 221, 0.4); - border-radius: 5rem; -} - -.hideControl { - opacity: 0; - visibility: hidden; -} - -.watch-control i { - font-size: 3rem; - color: var(--primary-color); -} - -.watch-top-control { - top: 22vh; - left: 50%; - transform: translateX(-50%); -} - -.watch-right-control { - top: 50%; - right: 2rem; - transform: translateY(-50%); -} - -.watch-bottom-control { - left: 50%; - bottom: 20vh; - transform: translateX(-50%); -} - -.watch-left-control { - top: 50%; - left: 2rem; - transform: translateY(-50%); -} -/* End of Watch Controls */ - -/* Watch Button */ -.watch-btn { - position: absolute; - bottom: 30vh; - right: 35%; - width: 13rem; - height: 5rem; - background-color: var(--black-color); - color: var(--primary-color); - border: 0.1rem dashed var(--white-color); - border-radius: 4rem; - font-size: 1.6rem; - font-weight: 200; - cursor: pointer; -} -/* End of Watch Button */ -/* End of Section 4 */ - -/* Section 5 */ -.section-5 { - width: 100%; - height: 100vh; -} - -/* Section 5 Content */ -.airpods { - width: 90%; - height: 80%; - display: flex; - position: relative; -} - -/* Section 5 Heading */ -.section-5-heading { - position: absolute; - top: 0; - left: 50%; - transform: translateX(-50%); - font-size: 15rem; - font-weight: 300; - color: var(--white-color); - text-shadow: 0.1rem 0.1rem 0 #999; -} -/* End of Section 5 Heading */ - -/* Section 5 Images */ -.airpods img { - width: 50%; - height: 100%; - object-fit: contain; -} - -.airpods-img-2 { - background-color: var(--primary-color); -} -/* End of Section 5 Images */ - -/* Section 5 Buttons */ -.airpods-buttons { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - margin-top: 5rem; -} - -.airpods-btn { - width: 15rem; - height: 4rem; - background-color: var(--primary-color); - margin: 0 2rem; - border: none; - border-radius: 0.5rem; - color: var(--white-color); - cursor: pointer; -} - -.airpods-btn:last-child { - background-color: var(--white-color); - color: var(--primary-color); -} -/* End of Section 5 Buttons */ -/* End of Section 5 Content */ -/* End of Section 5 */ - -/* Section 6 */ -.section-6 { - width: 100%; - height: 40vh; - position: relative; -} - -.icon-link { - margin: 0 5rem; -} - -.icon-link img { - width: 10rem; -} - -.copyright { - position: absolute; - bottom: 5rem; - font-size: 1.5rem; - letter-spacing: 0.1rem; -} -/* End of Section 6 */ - -/* Responsive */ -@media (max-width: 1500px) { - html { - font-size: 45%; - } -} - -@media (max-width: 1100px) { - html { - font-size: 40%; - } - - .navbar-link { - font-weight: 700; - } - - .section-1-banner h1 { - font-size: 8rem; - } - - .section-1-banner p { - font-size: 3rem; - } - - .watch-btn { - right: 25%; - } -} - -@media (max-width: 900px) { - .section-3-content { - width: 90%; - } - - .loading-wrapper { - width: 70%; - } - - .loading i { - font-size: 6rem; - } - - .section-5-heading { - font-size: 12rem; - } -} - -@media (max-width: 700px) { - .logo { - top: 0; - left: 2rem; - } - - .logo i { - font-size: 8rem; - } - - .controls { - display: none; - } - - .cube-wrapper { - opacity: 0.7; - } - - .cube { - top: 3rem; - } - - .section-1-banner { - position: absolute; - } - - .section-1-banner h1 { - position: relative; - left: -5rem; - } - - .section-1-banner h1::first-letter { - visibility: hidden; - opacity: 0; - } - - .section-1-banner button:hover { - clip-path: polygon( - 50% 0%, - 81% 5%, - 100% 0, - 100% 100%, - 80% 95%, - 50% 100%, - 20% 95%, - 0 100%, - 0 0, - 23% 5% - ); - } - - .iphones { - height: 70vh; - width: 70vw; - } - - .watch-btn { - right: 15%; - } - - .airpods-img-1 { - display: none; - } - - .airpods .airpods-img-2 { - width: 100%; - } - - .airpods-btn { - background-color: var(--white-color); - color: var(--primary-color); - box-shadow: 0.1rem 0.1rem 0.1rem #ddd; - } - - .icon-link { - margin: 0 2rem; - } -} - -@media (max-width: 550px) { - .navbar-link { - margin: 0 1.5rem; - } - - .section-2-heading { - font-size: 8rem; - } - - .section-3-heading { - font-size: 8rem; - } - - .macbook-info-heading { - font-size: 5rem; - } - - .macbook-btn { - width: 15rem; - height: 3rem; - font-size: 1.3rem; - } - - .airpods-buttons { - width: 50rem; - text-align: center; - } - - .icon-link img { - width: 8rem; - } -} - -@media (max-width: 450px) { - html { - font-size: 35%; - } - - .logo { - top: 10rem; - left: 50%; - transform: translateX(-50%); - } - - .navbar { - left: 50%; - transform: translateX(-50%); - width: max-content; - } - - .section-1-banner p { - text-align: center; - } - - .iphones { - width: 75vw; - } - - .section-3-heading { - font-size: 6rem; - } - - .macbook-info { - width: 40rem; - } - - .macbook-info-heading { - font-size: 3rem; - } - - .macbook-price { - font-size: 2rem; - font-weight: 300; - } - - .watch-btn { - right: 5%; - } - - .icon-link img { - width: 6rem; - } -} -/* End of Responsive */ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/AirPods/airpods-1.png b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/AirPods/airpods-1.png deleted file mode 100644 index e19c839..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/AirPods/airpods-1.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/AirPods/airpods-2.png b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/AirPods/airpods-2.png deleted file mode 100644 index 3e0ec7a..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/AirPods/airpods-2.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/MacBook/macbook-1-desktop.png b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/MacBook/macbook-1-desktop.png deleted file mode 100644 index 087f00d..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/MacBook/macbook-1-desktop.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/MacBook/macbook-keyboard.png b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/MacBook/macbook-keyboard.png deleted file mode 100644 index 56db34e..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/MacBook/macbook-keyboard.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/MacBook/macbook-screen.png b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/MacBook/macbook-screen.png deleted file mode 100644 index 981dc66..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/MacBook/macbook-screen.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/iPhone 12/iphones-1-img.png b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/iPhone 12/iphones-1-img.png deleted file mode 100644 index b21bffe..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/iPhone 12/iphones-1-img.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/iPhone 12/iphones-2-img.png b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/iPhone 12/iphones-2-img.png deleted file mode 100644 index b9354af..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/iPhone 12/iphones-2-img.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/icons/airpods-icon.png b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/icons/airpods-icon.png deleted file mode 100644 index ba9e50d..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/icons/airpods-icon.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/icons/home-icon.png b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/icons/home-icon.png deleted file mode 100644 index d8b7068..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/icons/home-icon.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/icons/iphone -icon.png b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/icons/iphone -icon.png deleted file mode 100644 index 24e5a01..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/icons/iphone -icon.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/icons/macbook-icon.png b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/icons/macbook-icon.png deleted file mode 100644 index d296fbd..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/icons/macbook-icon.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/icons/watch-icon.png b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/icons/watch-icon.png deleted file mode 100644 index 74d17ba..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/icons/watch-icon.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/iphone.png b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/iphone.png deleted file mode 100644 index 29cc3ea..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/iphone.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/slideshow/section-1-bg-1.jpg b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/slideshow/section-1-bg-1.jpg deleted file mode 100644 index fca6aa5..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/slideshow/section-1-bg-1.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/slideshow/section-1-bg-2.jpg b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/slideshow/section-1-bg-2.jpg deleted file mode 100644 index 38eabac..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/slideshow/section-1-bg-2.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/slideshow/section-1-bg-3.jpg b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/slideshow/section-1-bg-3.jpg deleted file mode 100644 index 125793f..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/slideshow/section-1-bg-3.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/slideshow/section-1-bg-4.jpg b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/slideshow/section-1-bg-4.jpg deleted file mode 100644 index f37876f..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/slideshow/section-1-bg-4.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/slideshow/section-1-bg-5.jpg b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/slideshow/section-1-bg-5.jpg deleted file mode 100644 index 9dfb199..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/slideshow/section-1-bg-5.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-1.jpg b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-1.jpg deleted file mode 100644 index fa34164..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-1.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-10.jpg b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-10.jpg deleted file mode 100644 index 1f0b541..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-10.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-2.jpg b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-2.jpg deleted file mode 100644 index 3386b87..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-2.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-3.jpg b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-3.jpg deleted file mode 100644 index 780031c..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-3.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-4.jpg b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-4.jpg deleted file mode 100644 index 83a2e70..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-4.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-5.jpg b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-5.jpg deleted file mode 100644 index 2c9401d..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-5.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-6.jpg b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-6.jpg deleted file mode 100644 index 5131025..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-6.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-7.jpg b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-7.jpg deleted file mode 100644 index ab9cf12..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-7.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-8.jpg b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-8.jpg deleted file mode 100644 index 952c29c..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-8.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-9.jpg b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-9.jpg deleted file mode 100644 index fc29f20..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-band-9.jpg and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-1.png b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-1.png deleted file mode 100644 index ae040f8..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-1.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-10.png b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-10.png deleted file mode 100644 index 6e4706c..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-10.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-2.png b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-2.png deleted file mode 100644 index fd09eb7..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-2.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-3.png b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-3.png deleted file mode 100644 index b202e9c..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-3.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-4.png b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-4.png deleted file mode 100644 index 5af3ef9..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-4.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-5.png b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-5.png deleted file mode 100644 index 857b14b..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-5.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-6.png b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-6.png deleted file mode 100644 index d023ceb..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-6.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-7.png b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-7.png deleted file mode 100644 index 6ae987d..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-7.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-8.png b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-8.png deleted file mode 100644 index 7204e80..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-8.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-9.png b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-9.png deleted file mode 100644 index 2fa993a..0000000 Binary files a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/images/watches/watch-case-9.png and /dev/null differ diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/index.html b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/index.html deleted file mode 100644 index 001c7a6..0000000 --- a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/index.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/script.js b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/script.js deleted file mode 100644 index e69de29..0000000 diff --git a/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/style.css b/Project 8 - Apple eCommerce/Starter Files/Apple eCommerce/style.css deleted file mode 100644 index e69de29..0000000 diff --git a/Project 8 - Apple eCommerce/Starter Files/Clip-path.txt b/Project 8 - Apple eCommerce/Starter Files/Clip-path.txt deleted file mode 100644 index 493b1e9..0000000 --- a/Project 8 - Apple eCommerce/Starter Files/Clip-path.txt +++ /dev/null @@ -1,26 +0,0 @@ -clip-path: polygon( - 50% 0%, - 81% 5%, - 100% 0, - 100% 100%, - 80% 95%, - 50% 100%, - 20% 95%, - 0 100%, - 0 0, - 23% 5% - ); - -hover: - clip-path: polygon( - 40% 15%, - 77% 15%, - 100% 10%, - 100% 90%, - 75% 85%, - 40% 85%, - 30% 100%, - 0 50%, - 0 50%, - 30% 0 - ); \ No newline at end of file diff --git a/Project 9 - Business Agency/Final Files/images/about-us-video.mp4 b/Project 9 - Business Agency/Final Files/images/about-us-video.mp4 deleted file mode 100644 index e609b66..0000000 Binary files a/Project 9 - Business Agency/Final Files/images/about-us-video.mp4 and /dev/null differ diff --git a/Project 9 - Business Agency/Final Files/images/dark-bg.jpeg b/Project 9 - Business Agency/Final Files/images/dark-bg.jpeg deleted file mode 100644 index 6b807bb..0000000 Binary files a/Project 9 - Business Agency/Final Files/images/dark-bg.jpeg and /dev/null differ diff --git a/Project 9 - Business Agency/Final Files/index.html b/Project 9 - Business Agency/Final Files/index.html deleted file mode 100644 index 59b8f62..0000000 --- a/Project 9 - Business Agency/Final Files/index.html +++ /dev/null @@ -1,293 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - -
-
-
-
-
- - -
- -
- -
- - - -
-

About Us

-
-
- -
-
-
-
-
- -
-
-
-

- - Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto nihil voluptatibus perferendis consectetur cum beatae, possimus deleniti maxime impedit distinctio veritatis ad laboriosam quis dolores adipisci nesciunt voluptate recusandae neque expedita cupiditate. Id, nemo quia enim quaerat natus dicta libero! - -

-
- - - -
-

Pricing

-
-
-
-
-
-

FREE

-

$0

-
    -
  • - - Pricing Card Item -
    • -
  • - - Pricing Card Item -
    • -
  • - - Pricing Card Item -
    • -
  • - - Pricing Card Item -
    • -
  • - - Pricing Card Item -
    • -
- -
-
- Order Now -
-
-
-
-

BASIC

-

$299

-
    -
  • - - Pricing Card Item -
    • -
  • - - Pricing Card Item -
    • -
  • - - Pricing Card Item -
    • -
  • - - Pricing Card Item -
    • -
  • - - Pricing Card Item -
    • -
- -
-
- Order Now -
-
-
-
-

STANDARD

-

$699

-
    -
  • - - Pricing Card Item -
    • -
  • - - Pricing Card Item -
    • -
  • - - Pricing Card Item -
    • -
  • - - Pricing Card Item -
    • -
  • - - Pricing Card Item -
    • -
- -
-
- Order Now -
-
-
-
-

PREMIUM

-

$999

-
    -
  • - - Pricing Card Item -
    • -
  • - - Pricing Card Item -
    • -
  • - - Pricing Card Item -
    • -
  • - - Pricing Card Item -
    • -
  • - - Pricing Card Item -
    • -
  • - - Pricing Card Item -
    • -
- -
-
- Order Now -
-
-
-
-
- - - -
-

Contact

-
-
-
-
- -

Phone

-

+123 456 789

-

+987 654 321

-
-
- -

Address

-

Main Street #123

-

Wall Street #123

-
- -
-

Get in Touch

-
- - - - -
-
-
- - - - - -
- - - - - \ No newline at end of file diff --git a/Project 9 - Business Agency/Final Files/script.js b/Project 9 - Business Agency/Final Files/script.js deleted file mode 100644 index 0751e17..0000000 --- a/Project 9 - Business Agency/Final Files/script.js +++ /dev/null @@ -1,56 +0,0 @@ -// Navbar -const menu = document.querySelector('.menu') -const navbar = document.querySelector('.navbar') - -menu.addEventListener('click', () => { - navbar.classList.toggle('change') - menu.classList.toggle('change') -}) -// End of Navbar - -// Section 2 Video -const video = document.querySelector('.video') -const btn = document.querySelector('.buttons i') -const bar = document.querySelector('.video-bar') - -const playPause = () => { - if(video.paused) { - video.play() - btn.className = 'far fa-pause-circle' - video.style.opacity = '.7' - } else { - video.pause() - btn.className = 'far fa-play-circle' - video.style.opacity = '.3' - } -} - -btn.addEventListener('click', () => { - playPause() -}) - -video.addEventListener('timeupdate', () => { - const barWidth = video.currentTime / video.duration - bar.style.width = `${barWidth * 100}%` - if(video.ended) { - btn.className = 'far fa-play-circle' - video.style.opacity = '.3' - } -}) -// End of Section 2 Video - -// Section 3 Pricing Cards -var swiper = new Swiper('.swiper-container', { - effect: 'coverflow', - grabCursor: true, - centeredSlides: true, - slidesPerView: 'auto', - coverflowEffect: { - rotate: 70, - stretch: 0, - depth: 100, - modifier: 1, - slideShadows: true, - }, - }); -// End of Section 3 Pricing Cards \ No newline at end of file diff --git a/Project 9 - Business Agency/Final Files/style.css b/Project 9 - Business Agency/Final Files/style.css deleted file mode 100644 index b2ae1ad..0000000 --- a/Project 9 - Business Agency/Final Files/style.css +++ /dev/null @@ -1,890 +0,0 @@ -/* Common Styles */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; - outline: none; - text-decoration: none; - list-style-type: none; - font-family: "Baloo Da 2", cursive; -} - -html { - font-size: 62.5%; - scroll-behavior: smooth; -} - -.section-heading { - font-family: "Oswald", sans-serif; - font-size: 10rem; - font-weight: 300; - color: #ddd; - margin-right: 4rem; -} - -.section-heading-line { - width: 15rem; - height: 0.2rem; - background-color: #ddd; -} - -/* End of Common Styles */ - -/* Navbar */ -.navbar { - width: 100%; - height: 8rem; - background-color: rgba(0, 0, 0, 0.9); - position: fixed; - top: -8rem; - z-index: 10; - padding: 3rem; - transition: height 0.5s; - animation: animateNavbar 1s 0.5s forwards; -} - -@keyframes animateNavbar { - 0% { - top: -8rem; - } - 100% { - top: 0; - } -} - -.navbar.change { - height: 100vh; -} - -.logo { - position: absolute; - top: 1.5rem; - left: 4rem; -} - -.logo a { - font-family: "MADE Soulmaze", sans-serif; - font-size: 2.5rem; - color: #eee; - letter-spacing: 0.1rem; -} - -.logo span { - font-family: "MADE Soulmaze", sans-serif; - font-size: 3.5rem; - font-weight: bold; - color: #9e0e09; -} - -.nav-list { - position: absolute; - top: 25%; - left: 50%; - transform: translateX(-50%); - display: flex; - flex-direction: column; - align-items: center; - opacity: 0; - visibility: hidden; - transition: all 0.2s; -} - -.change .nav-list { - opacity: 1; - visibility: visible; - transition: all 0.7s 0.5s; -} - -.nav-link { - font-family: "MADE Soulmaze", sans-serif; - font-size: 4rem; - letter-spacing: 0.3rem; - color: #fff; - margin: 2rem 0; - transition: color 0.4s; -} - -.nav-link:hover { - color: #9e0e09; -} -/* End of Navbar */ - -/* Menu */ -.menu { - width: 4rem; - height: 4rem; - position: fixed; - top: 2rem; - right: 4rem; - z-index: 100; - display: flex; - flex-direction: column; - justify-content: space-evenly; - cursor: pointer; -} - -.line { - width: 100%; - height: 0.2rem; - background-color: #eee; - transition: transform 0.3s; -} - -.line-1 { - width: 50%; -} - -.change .line-1 { - transform: translate(100%, 1rem) rotate(-35deg); - transform-origin: right; -} - -.line-3 { - width: 50%; - margin-left: auto; -} - -.change .line-3 { - transform: translateY(-1rem) rotate(35deg); - transform-origin: right; -} -/*End of Menu */ - -/* Section 1 */ -.section-1 { - width: 100%; - height: 100vh; - background: url(images/dark-bg.jpeg) no-repeat; - background-size: cover; - position: relative; -} - -.banner { - width: 100%; - position: absolute; - top: 20%; - left: 50%; - transform: translateX(-50%); - text-align: center; -} - -.banner-heading { - margin-bottom: 4rem; - height: 20rem; - perspective: 50rem; - overflow: hidden; -} - -.banner-heading span { - font-family: "Oswald", sans-serif; - font-size: 12rem; - font-weight: 400; - text-transform: uppercase; - color: #fff; - text-shadow: 0.3rem 0.3rem 0.6rem rgba(0, 0, 0, 0.5); - position: absolute; - width: 100%; - display: flex; - justify-content: center; - transform: translateZ(8rem); - opacity: 0; - letter-spacing: 3rem; -} - -.heading-1 { - animation: animateHeading 12s 3s infinite; -} - -.heading-2 { - animation: animateHeading 12s 6s infinite; -} - -.heading-3 { - animation: animateHeading 12s 9s infinite; -} - -.heading-4 { - animation: animateHeading 12s 12s infinite; -} - -@keyframes animateHeading { - 0% { - transform: translateZ(8rem); - opacity: 0; - letter-spacing: 3rem; - } - 3% { - transform: translateZ(0); - opacity: 1; - letter-spacing: 1.5rem; - } - 25% { - transform: translateZ(0); - opacity: 1; - letter-spacing: 1.5rem; - } - 28% { - transform: translateZ(8rem); - opacity: 0; - letter-spacing: 3rem; - } - 100% { - transform: translateZ(8rem); - opacity: 0; - letter-spacing: 3rem; - } -} - -.banner-paragraph { - font-size: 4rem; - font-weight: 400; - text-transform: uppercase; - color: #fff; - background-color: rgba(0, 0, 0, 0.6); - width: 30%; - margin: 0 auto 4rem auto; - padding: 1rem 0; - box-shadow: 1rem 1rem 5rem rgba(0, 0, 0, 0.5); - opacity: 0; - visibility: hidden; - animation: fadeAnimation 1s 1.5s forwards; -} - -.banner-btn { - width: 30rem; - height: 6rem; - background: linear-gradient(to right, #9b0e0e, #7a1010); - color: #fff; - font-size: 2rem; - text-transform: uppercase; - border-radius: 3rem; - border: 0.1rem solid #800505; - box-shadow: 1rem 2rem 3rem rgba(0, 0, 0, 0.5); - text-shadow: 0.6rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4); - cursor: pointer; - opacity: 0; - visibility: hidden; - animation: fadeAnimation 1s 2s forwards; - position: relative; - overflow: hidden; -} - -.banner-btn::before { - content: ""; - width: 100%; - height: 100%; - background: linear-gradient(to right, transparent, #fff, transparent); - position: absolute; - top: 0; - left: -100%; - transform: skewX(-30deg); - transition: left 0.5s; -} - -.banner-btn:hover::before { - left: 100%; -} - -@keyframes fadeAnimation { - 0% { - opacity: 0; - visibility: hidden; - } - 100% { - opacity: 1; - visibility: visible; - } -} -/* End of Section 1 */ - -/* Section 2 */ -.section-2 { - width: 100%; - height: 100vh; - background-color: #222020; - display: flex; - align-items: center; - padding: 0 10rem; - position: relative; -} - -.video-wrapper { - width: 100rem; - height: 50rem; - position: absolute; - top: 5rem; - right: 15rem; - box-shadow: 3rem 3rem 3rem rgba(0, 0, 0, 0.7); - overflow: hidden; -} - -.video { - width: 100%; - height: 100%; - object-fit: cover; - opacity: 0.3; - transition: opacity 0.3s; -} - -.controls { - width: 100%; - position: absolute; - bottom: 0; - background-color: rgba(0, 0, 0, 0.7); - transform: translateY(calc(100% - 0.4rem)); - transition: transform 0.4s; -} - -.video-wrapper:hover .controls { - transform: translateY(0); -} - -.video-bar-wrapper { - width: 100%; - height: 0.7rem; - background-color: #000; - position: absolute; - top: 0; - left: 0; -} - -.video-bar { - height: 100%; - width: 0; - background-color: #d30819; - transition: width 0.2s linear; -} - -.buttons { - padding: 2rem 1rem 1rem 1rem; -} - -.buttons button { - background: none; - border: none; - cursor: pointer; -} - -.buttons i { - font-size: 2.8rem; - color: #fff; -} - -.section-2-paragraph { - width: 100rem; - position: absolute; - bottom: 8rem; - right: 15rem; - font-size: 2rem; - color: #ddd; - border-top: 0.3rem double #aaa; - border-bottom: 0.3rem double #aaa; - padding: 2rem; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: justify; - text-shadow: 1rem 1rem 2rem rgba(0, 0, 0, 0.7); - line-height: 1.5; -} - -.fa-quote-left { - align-self: flex-start; - font-size: 5rem; - margin-bottom: 2rem; -} - -.fa-quote-right { - align-self: flex-end; - font-size: 5rem; -} -/* End of Section 2 */ - -/* Section 3 */ -.section-3 { - width: 100%; - height: 100vh; - background-color: #03070e; - display: flex; - align-items: center; - padding-left: 10rem; -} - -.pricing-cards-wrapper { - width: 100%; - display: flex; - justify-content: space-evenly; - padding: 5rem; -} - -.pricing-card { - width: 28rem !important; - height: 45rem !important; - background-color: #181b1d; - border-radius: 1rem; - box-shadow: 2rem 2rem 6rem rgba(0, 0, 0, 0.7); -} - -.pricing-card-front { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-between; -} - -.pricing-card-heading { - font-size: 2rem; - font-weight: 300; - color: #fff; - width: 100%; - height: 5rem; - display: flex; - align-items: center; - padding-left: 2rem; -} - -.heading-free { - background: linear-gradient(to right, #087285, #0da5d3); - border-radius: 1rem 1rem 0 0; -} - -.heading-basic { - background: linear-gradient(to right, #946809, #bdba0e); - border-radius: 1rem 1rem 0 0; -} - -.heading-standard { - background: linear-gradient(to right, #a10c14, #e23b3b); - border-radius: 1rem 1rem 0 0; -} - -.heading-premium { - background: linear-gradient(to right, #0b7e48, #3be286); - border-radius: 1rem 1rem 0 0; -} - -.pricing-card-price { - font-family: "MADE Soulmaze", sans-serif; - font-size: 7rem; - font-weight: 300; - color: #fff; -} - -.pricing-card-list li { - margin-bottom: 0.5rem; -} - -.list-free li { - color: #0da5d3; -} - -.list-basic li { - color: #bdba0e; -} - -.list-standard li { - color: #e23b3b; -} - -.list-premium li { - color: #3be286; -} - -.pricing-card-list i { - font-size: 1.8rem; - width: 3rem; -} - -.pricing-card-list span { - font-size: 1.8rem; - font-weight: 300; - letter-spacing: 0.1rem; -} - -.pricing-card-btn { - width: 18rem; - height: 5rem; - margin-bottom: 3rem; - border-radius: 3rem; - border: none; - font-size: 1.6rem; - text-transform: uppercase; - color: #fff; - text-shadow: 0.3rem 0.3rem 0.6rem rgba(0, 0, 0, 0.5); -} - -.btn-free { - background-color: #0da5d3; -} - -.btn-basic { - background-color: #bdba0e; -} - -.btn-standard { - background-color: #e23b3b; -} - -.btn-premium { - background-color: #3be286; -} - -.pricing-card-back { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - transform: rotateY(180deg); - border-radius: 1rem; -} - -.back-free { - background: linear-gradient(to right, #087285, #0da5d3); -} - -.back-basic { - background: linear-gradient(to right, #946809, #bdba0e); -} - -.back-standard { - background: linear-gradient(to right, #a10c14, #e23b3b); -} - -.back-premium { - background: linear-gradient(to right, #0b7e48, #3be286); -} - -.pricing-card-back a { - font-size: 2.5rem; - color: #fff; -} -/* End of Section 3 */ - -/* Section 4 */ -.section-4 { - width: 100%; - height: 100vh; - background-color: #171718; - display: flex; - align-items: center; - padding: 0 10rem; -} - -.contact-wrapper { - width: 80%; - display: flex; - flex-direction: column; - align-items: center; -} - -.contact-details { - display: flex; - margin-bottom: 8rem; -} - -.contact-details div { - width: 25rem; - text-align: center; - margin: 4rem; -} - -.contact-details i { - font-size: 5rem; - color: #7a1010; -} - -.contact-details h3 { - font-family: "MADE Soulmaze", sans-serif; - font-size: 2.5rem; - margin: 2rem 0; - color: #ccc; -} - -.contact-details p { - font-size: 1.6rem; - color: #aaa; -} - -.contact-wrapper h1 { - font-size: 4rem; - color: #ccc; - text-transform: uppercase; - margin-bottom: 3rem; -} - -.contact-form { - width: 70rem; - display: flex; - flex-direction: column; -} - -.contact-form input, -.contact-form textarea { - padding: 1.5rem; - background-color: #444; - color: #eee; - border: none; - margin-bottom: 2rem; - font-family: "Oswald", sans-serif; - font-size: 1.8rem; - font-weight: 300; - letter-spacing: 0.1rem; -} - -.contact-form textarea { - max-width: 100%; - max-height: 15rem; - min-height: 5.5rem; -} - -.contact-form input[type="submit"] { - background-color: #7a1010; - text-transform: uppercase; - cursor: pointer; - transition: background-color 0.3s; -} - -.contact-form input[type="submit"]:hover { - background-color: #5f0303; -} -/* End of Section 4 */ - -/* Footer */ -.footer { - width: 100%; - height: 12rem; - background-color: #202122; - display: flex; - justify-content: space-between; - align-items: center; - padding: 0 10rem; -} - -.footer-nav a { - font-family: "MADE Soulmaze", sans-serif; - font-size: 2rem; - color: #ccc; - margin-right: 3rem; - letter-spacing: 0.1rem; - transition: color 0.3s; -} - -.footer-nav a:hover { - color: #862323; -} - -.copyright { - font-size: 2rem; - color: #ddd; -} -/* End of Footer */ - -/* Responsive */ -@media (max-width: 1800px) { - .video-wrapper { - width: 90rem; - height: 45rem; - right: 10rem; - } - - .section-2-paragraph { - width: 90rem; - right: 10rem; - } - - .section-3 .section-heading-line { - margin-right: 3rem; - } -} - -@media (max-width: 1650px) { - html { - font-size: 57%; - } - - .video-wrapper { - width: 85rem; - height: 40rem; - right: 5rem; - } - - .section-2-paragraph { - width: 85rem; - right: 5rem; - bottom: 10rem; - } -} - -@media (max-width: 1500px) { - .section-heading-line { - display: none; - } -} - -@media (max-width: 1400px) { - html { - font-size: 45%; - } - - .banner-heading span { - font-size: 10rem; - } - - .banner-paragraph { - width: 45rem; - font-size: 3rem; - } - - .section-2, - .section-3, - .section-4 { - flex-direction: column; - } - - .section-2 { - height: 120vh; - } - - .video-wrapper { - top: 20%; - left: 50%; - transform: translateX(-50%); - width: 80rem; - } - - .section-2-paragraph { - left: 50%; - transform: translateX(-50%); - width: 80rem; - } - - .section-3 { - height: auto; - padding: 5rem 0 10rem 0; - } - - .section-3 .section-heading { - margin-bottom: 7rem; - } - .swiper-container { - width: 100%; - } - - .section-4 { - height: auto; - padding: 5rem 0; - } -} - -@media (max-width: 900px) { - html { - font-size: 40%; - } - - .banner { - top: 25%; - } - - .banner-heading { - height: 15rem; - } - - .banner-heading span { - font-size: 8rem; - } - - .footer { - padding: 0 5rem; - } - - .footer-nav a { - font-size: 1.8rem; - } -} - -@media (max-width: 700px) { - html { - font-size: 35%; - } - - .section-2 { - height: 100vh; - } - - .contact-details div { - margin: 3rem 2rem; - } - - .footer { - flex-direction: column; - justify-content: center; - } - - .footer-nav { - margin-bottom: 2rem; - } -} - -@media (max-width: 500px) { - html { - font-size: 30%; - } - - .banner-heading span { - font-size: 4.5rem; - letter-spacing: 2rem; - } - - @keyframes animateHeading { - 0% { - transform: translateZ(8rem); - opacity: 0; - letter-spacing: 2rem; - } - 3% { - transform: translateZ(0); - opacity: 1; - letter-spacing: 1rem; - } - 25% { - transform: translateZ(0); - opacity: 1; - letter-spacing: 1rem; - } - 28% { - transform: translateZ(8rem); - opacity: 0; - letter-spacing: 2rem; - } - 100% { - transform: translateZ(8rem); - opacity: 0; - letter-spacing: 2rem; - } - } - - .video-wrapper { - width: 60rem; - } - - .section-2-paragraph { - width: 60rem; - } - - .contact-details div { - width: 18rem; - margin: 3rem 1rem; - } - - .contact-form { - width: 60rem; - } -} -/* End of Responsive */ diff --git a/Project 9 - Business Agency/Starter Files/images/about-us-video.mp4 b/Project 9 - Business Agency/Starter Files/images/about-us-video.mp4 deleted file mode 100644 index e609b66..0000000 Binary files a/Project 9 - Business Agency/Starter Files/images/about-us-video.mp4 and /dev/null differ diff --git a/Project 9 - Business Agency/Starter Files/images/dark-bg.jpeg b/Project 9 - Business Agency/Starter Files/images/dark-bg.jpeg deleted file mode 100644 index 6b807bb..0000000 Binary files a/Project 9 - Business Agency/Starter Files/images/dark-bg.jpeg and /dev/null differ diff --git a/Project 9 - Business Agency/Starter Files/index.html b/Project 9 - Business Agency/Starter Files/index.html deleted file mode 100644 index e69de29..0000000 diff --git a/Project 9 - Business Agency/Starter Files/script.js b/Project 9 - Business Agency/Starter Files/script.js deleted file mode 100644 index e69de29..0000000 diff --git a/Project 9 - Business Agency/Starter Files/style.css b/Project 9 - Business Agency/Starter Files/style.css deleted file mode 100644 index e69de29..0000000