Sumit

src/App.js

@@ -1,25 +1,8 @@
-import logo from './logo.svg';
-import './App.css';
+import logo from "./logo.svg";
+import "./App.css";
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+  return <div></div>;
 }
 
 export default App;

src/Styled/carousel.css

@@ -0,0 +1,30 @@
+.carousel {
+  /* border: 2px solid black; */
+  margin: 30px;
+  margin-top: 50px;
+  margin-bottom: 40px;
+}
+.carousel h1{
+  font-size: 28px;
+}
+.slick-arrow.slick-prev,
+.slick-arrow.slick-next {
+  background: rgb(133, 120, 120);
+  width: 37px;
+  height: 64px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  z-index: 1;
+}
+.slick-prev{
+    left: 0;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+.slick-next{
+    right: 0;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+}

src/Styled/dansko.module.css

@@ -0,0 +1,38 @@
+.dansko {
+  border: 1px solid black;
+  height: 800px;
+  display: flex;
+  padding: 30px;
+}
+.dansko > div:first-child {
+  width: 30%;
+}
+.dansko > div:last-child {
+  width: 70%;
+  display: grid;
+  margin-left: 2%;
+  grid-template-columns: repeat(4,21%);
+  column-gap: 4%;
+}
+
+.dansko img {
+  width: 100%;
+}
+.dansko h1 {
+  font-size: 26px;
+}
+.dansko button {
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: 700;
+    background-color: #fff;
+    padding: 10px 20px;
+    cursor: pointer;
+    margin-bottom: 30px;
+    margin-top: 10px;
+}
+.dansko>div:first-child>div:first-child :hover {
+    background-color: #000;
+    color: #fff;
+    transition: all ease-in-out .3s;
+}

src/Styled/navbar.js

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+export const TopNav = styled.div`
+  height: 40px;
+  background-color: rgb(0, 118, 189);
+  display: flex;
+`;
+
+export const TopP = styled.p`
+  color: #fff;
+  font-size: 18px;
+  margin-left: 10%;
+  margin-top: 5px;
+`;

src/Styled/navbar.module.css

@@ -0,0 +1,139 @@
+.searchNav {
+  /* border: 1px solid red; */
+  height: 100px;
+  display: flex;
+  align-items: center;
+  padding: 0px 24px;
+  justify-content: space-between;
+}
+.searchNav > div {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  /* border: 1px solid red; */
+}
+.searchNav img {
+  height: 60%;
+}
+
+input {
+  background: transparent;
+  margin: 0;
+  width: 400px;
+  padding: 7px 8px;
+  font-size: 16px;
+  color: inherit;
+  border: 2px solid grey;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+input:focus {
+  border: 2px dashed #1183d6;
+  outline: none;
+}
+input::placeholder {
+  padding: 0px 10px;
+}
+input + button {
+  background-color: rgb(0, 57, 83);
+  color: #fff;
+  border: none;
+  font-weight: 500;
+  height: 42px;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+input + button:hover {
+  background-color: #1183d6;
+  transition: all ease-in-out 0.3s;
+}
+.searchNav > div:nth-child(2) {
+  margin-right: 35%;
+}
+.searchNav > div:last-child {
+  width: 12%;
+}
+.searchNav > div:last-child button {
+  background: transparent;
+  border: 2px solid lightgreen;
+  color: rgb(0, 57, 83);
+  border-radius: 4px;
+  width: 100%;
+  font-weight: 600;
+}
+.searchNav > div:last-child button:hover {
+  background-color: lightgreen;
+  transition: all ease-in-out 0.3s;
+}
+/* dropdowns */
+.dropDownPart {
+  /* border: 1px solid blue; */
+  padding: 0px 24px;
+  height: 50px;
+  display: flex;
+  gap: 15px;
+  align-items: center;
+  background-color: whitesmoke;
+  justify-content: space-between;
+}
+.dropDownPart > div {
+  font-size: 18px;
+  font-weight: 600;
+  color: rgb(0, 57, 83);
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  height: 100%;
+}
+.dropDownPart > div > div {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.dropDownPart > div > div:hover {
+  cursor: pointer;
+  border-bottom: 2px solid rgb(0, 57, 83);
+}
+.dropDownPart > div:last-child:hover {
+  cursor: pointer;
+  border-bottom: 2px solid rgb(0, 57, 83);
+}
+.dropdown {
+  position: relative;
+}
+.dropdown:hover .dropdownContent {
+  display: flex;
+}
+.dropdownContent {
+  position: absolute;
+  display: flex;
+  gap: 50px;
+  display: none;
+  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+  top: 50px;
+  background-color: #fff;
+  padding: 15px 30px ;
+}
+.dropdownContent > div {
+  width: 150px;
+}
+.dropdownContent p {
+  font-weight: normal;
+  font-size: 15px;
+}
+.dropdownContent .dropdownHead {
+  font-weight: 600;
+  font-size: 17px;
+  padding-top: 5px;
+}
+.dropdownContent p:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.movingText {
+  height: 35px;
+  background-color: lavender;
+  text-align: center;
+}

src/Styled/newArrival.module.css

@@ -0,0 +1,36 @@
+.newArrival {
+  height: 680px;
+  border: 1px solid black;
+  margin-top: 50px;
+  display: flex;
+  justify-content: space-between;
+  padding: 24px;
+}
+.newArrival > div {
+  width: 49%;
+  height: 100%;
+  /* border: 1px solid red; */
+  cursor: pointer;
+}
+.backImg {
+  background-image: url("https://m.media-amazon.com/images/G/01/2022/homepage5.02/COOP-UGG-NEW-ARRIVALS-DESKTOP-LEFT-1X-634x634_1.jpg");
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 6%;
+}
+.backImg p {
+  font-size: 18px;
+  text-align: center;
+  font-weight: 500;
+  margin-top: 2%;
+}
+.backImg button {
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 700;
+  background-color: rgb(243,247,111);
+  padding: 10px 20px;
+  cursor: pointer;
+}

src/Styled/shopPopular.module.css

@@ -0,0 +1,38 @@
+.popCate{
+    border: 1px solid black;
+    padding: 24px;
+    height: 370px;
+}
+.popCate h1{
+    font-size: 24px;
+}
+.flexBox{
+    /* border: 1px solid black; */
+    display: flex;
+    justify-content: space-between;
+}
+.flexChild{
+    /* border: 1px solid red; */
+    width: 16%;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+.longImg{
+    width: 60%;
+}
+.shortImg{
+    width: 100%;
+}
+.flexChild p{
+    font-size: 15px;
+    font-weight: 600;
+    cursor: pointer;
+}
+.flexChild :hover{
+    cursor: pointer;
+    text-decoration: underline;
+    color: #1183d6;
+}

src/Styled/singlecarousel.module.css

@@ -0,0 +1,28 @@
+.parent{
+    /* border: 1px solid red; */
+    padding: 5px;
+}
+.parent>div{
+    /* border: 1px solid red; */
+    height: 250px;
+    background-color: whitesmoke;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.type{
+    font-weight: 600;
+    font-size: 16px;
+    margin-top: -20px;
+}
+.price{
+    color: rgb(0, 57, 83) ;
+    margin-top: -20px;
+}
+.parent :hover{
+    color: #1183d6;
+    cursor: pointer;
+}
+.rating{
+    margin-bottom: 5px;
+}

src/Styled/womenDeals.module.css

@@ -0,0 +1,34 @@
+.jarvis{
+    height: 570px;
+    border: 1px solid black;
+    display: flex;
+    justify-content: space-between;
+    padding: 24px;
+    margin-top: 50px;
+}
+.jarvis>div{
+    /* border: 1px solid red; */
+    height: 100%;
+    width: 32%;
+    text-align: center;
+    cursor: pointer;
+}
+.jarvis img{
+    width: 100%;
+}
+.jarvis h2{
+    font-size: 20px;
+}
+.jarvis p{
+    font-size: 14.5px;
+}
+.jarvis p+p {
+    text-decoration: underline;
+    color: rgb(0, 57, 83);
+    font-weight: 700;
+    font-size: 15px;
+    margin-top: -10px;
+}
+.jarvis>div:hover  p+p{
+    color: #1183d6;
+}