pagination modefied

Mirzayevsky · Apr 8, 2024 · 6853b5a · 6853b5a
1 parent c37b571
commit 6853b5a
Show file tree

Hide file tree

Showing 12 changed files with 245 additions and 118 deletions.
diff --git a/src/components/Card/index.jsx b/src/components/Card/index.jsx
@@ -12,9 +12,11 @@ const Card = ({
           <span className="title">{title}</span>
         </div>
         <p className="desc">{subtitle}</p>
-        <div className="click-btn">
+       <div className="btn-wrapper">
+       <div className="click-btn">
         <div>Read More</div>
         </div>
+       </div>
       </div>
     </Wrapper>
   );

diff --git a/src/components/Card/style.js b/src/components/Card/style.js
@@ -52,45 +52,73 @@ export const Wrapper = styled.div`
     margin-top: 20px;
     color: #000;
   }
-.click-btn{
-  padding: 10px 35px;
-  width: fit-content;
-  border: 1px solid gray;
+.btn-wrapper{
   position: absolute;
   bottom: 30px;
-  margin-left: 3px;
-  border-radius: 30px;
+  .click-btn{
+  padding: 10px 30px;
+  width: fit-content;
+  border: unset;
+  border-radius: 20px;
+  color: #fff;
+  z-index: 1;
+  background: #0080ff;
+  position: relative;
+  font-weight: 500;
+  font-size: 16px;
+  -webkit-box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
+  box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
+  overflow: hidden;
+  display: block;
+  transition: all 450ms;
+  letter-spacing: 0.5px;
+  background: #000046;
+    background: -webkit-linear-gradient(to right, #1CB5E0, #000046);
+    background: linear-gradient(to left, #1CB5E0, #000046);
+  
+  @media only screen and (max-width: 600px) {
+    margin: 0;
+    margin-bottom: 0px;
+    font-size: 16px;
+    font-weight: 500;
+  }
+  @media only screen and (max-width: 400px) {
   
+  }
+
   &:before {
-      content: "";
-      color: #fff !important;
-      position: absolute;
-      top: 0;
-      left: 0;
-      height: 100%;
-      background: #0080ff;
-      //background-color: #222222;
-      background-color: #0080ff;
-      width: 0;
-      z-index: -1;
-      -webkit-box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
-      box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
-      transition: all 0.5s;
-  border-radius: 30px;
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    background: rgb(0, 89, 255);
+    //background-color: #222222;
+    background-color: #0dc569;
 
-    }
+    width: 0;
+    border-radius: 15px;
+    z-index: -1;
+    -webkit-box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
+    box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
+    transition: all 450ms;
+  }
 
-    &:hover {
-      cursor: pointer;
-      color: #fff !important;
-    }
+  &:hover {
+    cursor: pointer;
+  }
 
-    &:hover::before {
-      width: 100%;
-    }
+  &:hover::before {
+    width: 100%;
+  }
+
+  &:hover {
+    background-color: #49cb86;
+  }
 
     
   
+}
 }
   
     

diff --git a/src/components/Nav/Navbar.jsx b/src/components/Nav/Navbar.jsx
@@ -47,24 +47,24 @@ const  Navbar = () => {
 
           <UlWrapper className="flexNullCenter">
             <li className="semiBold font15 pointer">
-              <Link activeClass="active" style={{ padding: "10px 15px" }} to="home" spy={true} smooth={true} offset={-80}>
+              <Link activeClass="active" style={{ padding: "10px 0px" }} to="home" spy={true} smooth={true} offset={-80}>
                 Главная
               </Link>
             </li>
             <li className="semiBold font15 pointer">
-              <Link activeClass="active" style={{ padding: "10px 15px" }} to="our-service" spy={true} smooth={true} offset={-80}>
+              <Link activeClass="active" style={{ padding: "10px 0px" }} to="our-service" spy={true} smooth={true} offset={-80}>
                 Услуги
               </Link>
             </li>
 
             <li className="semiBold font15 pointer">
-              <Link activeClass="active" style={{ padding: "10px 15px" }} to="pricing" spy={true} smooth={true} offset={-80}>
+              <Link activeClass="active" style={{ padding: "10px 0px" }} to="pricing" spy={true} smooth={true} offset={-80}>
                 Цены
               </Link>
             </li>
 
             <li className="semiBold font15 pointer">
-              <Link activeClass="active" style={{ padding: "10px 15px" }} to="projects" spy={true} smooth={true} offset={-80}>
+              <Link activeClass="active" style={{ padding: "10px 0px" }} to="projects" spy={true} smooth={true} offset={-80}>
                 Проекты
               </Link>
             </li>

diff --git a/src/components/Nav/styles.js b/src/components/Nav/styles.js
@@ -59,8 +59,9 @@ export const NavInner = styled.div`
 export const UlWrapper = styled.ul`
   display: flex;
   li{
-    font-size: 16px;
-    
+    font-size: 15px;
+    font-weight: 500 !important;
+    margin: 0 12px;
   }
   
   @media (max-width: 760px) {

diff --git a/src/components/Sections/Home/OurService/index.jsx b/src/components/Sections/Home/OurService/index.jsx
@@ -14,7 +14,7 @@ const OurService = () => {
     <Wrapper id={"our-service"}>
 
       <Container>
-        <h1 className="font40 extraBold">
+        <h1 className="font30 extraBold">
           —-- совместим с вашими любимыми платформами электронной коммерции.
           Начните сегодня свой онлайн магазин!
         </h1>

diff --git a/src/components/Sections/Home/OurService/style.js b/src/components/Sections/Home/OurService/style.js
@@ -25,7 +25,10 @@ export const Container = styled.div`
     text-align: center;
     margin-bottom: 70px;
     @media (max-width: 600px) {
+    font-size:21px !important;
       width: 100%;
+      font-weight: 600;
+      letter-spacing: 0;
       margin: 0 auto;
     }
     

diff --git a/src/components/Sections/Home/Pricing/Pricing.jsx b/src/components/Sections/Home/Pricing/Pricing.jsx
@@ -16,10 +16,10 @@ import PopUp from "../../../popUp";
 import { data } from "../../../../data";
 
 const Pricing = () => {
-    const [popUp, setPopUp] = useState(false);
+  const [popUp, setPopUp] = useState(false);
   return (
     <Wrapper>
-         {popUp ? <PopUp popUp={popUp} setPopUp={setPopUp} /> : ""}
+      {popUp ? <PopUp popUp={popUp} setPopUp={setPopUp} /> : ""}
 
       <HeaderInfo>
         <h1 className="font40 extraBold"> Кому нужны наши услуги?</h1>

diff --git a/src/components/Sections/Home/Pricing/styles.js b/src/components/Sections/Home/Pricing/styles.js
@@ -109,13 +109,42 @@ font-weight: 500;
 color: #fff;
 width: fit-content;
 cursor: pointer;
+z-index: 1;
+position: relative;
+overflow: hidden;
 background-color: #222;
-&:hover{
-  transition: all 0.5s;
-  background-color: #fff;
-  color: #222;
-}
+transition: all 0.5s;
+&:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    background: rgb(0, 89, 255);
+    //background-color: #222222;
+    background-color: #0dc569;
+
+    width: 0;
+    border-radius: 15px;
+    z-index: -1;
+    -webkit-box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
+    box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
+    transition: all 450ms;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:hover::before {
+    width: 100%;
+  }
+
+  &:hover {
+    background-color: #49cb86;
+  }
 
+ 
 
 `;
 

diff --git a/src/components/Sections/Home/header/styles.js b/src/components/Sections/Home/header/styles.js
@@ -79,8 +79,7 @@ export const Container = styled.div`
 `;
 
 
-export const Title = styled.div`
-  font-size: 40px;
+export const Title = styled.h1`
   font-weight: 800;
   letter-spacing: 1px;
   line-height: 140%;
@@ -92,15 +91,13 @@ export const Title = styled.div`
     color: #7000ff;
   }
   @media screen and (max-width: 600px) {
-    font-size: 20px !important;
+    font-size: 21px !important;
     font-weight: 700;
     line-height: 130%;
     letter-spacing: 0;
     margin-top: 0;
-    .br-none{
-      
-    }
   }
+  
 `;
 export const Text = styled.div`
   font-size: 16px;
@@ -118,31 +115,75 @@ export const Text = styled.div`
 export const ButtonWrapper = styled.div`
  display: flex;
  margin-top: 30px;
+ @media only screen and (max-width: 400px) {
+  flex-direction: column;
+}
 `;
 
 
 export const MobileBtn = styled.div`
-display: flex;
-align-content: center;
- color: #fff;
- font-weight: 600;
- padding: 10px 30px;
- width: fit-content;
- height: fit-content;
- background-color: #0080ff;
- border-radius: 30px;
- cursor: pointer;
- svg{
-  height: 32px;
-  width: 32px;
- }
- @media screen and (max-width: 600px) {
-   padding: 10px 15px;
-   font-size: 13px;
-   font-weight: 600;
+//background-color: ;
+padding: 11px 30px;
+  width: fit-content;
+  border: unset;
+  border-radius: 20px;
+  color: #fff;
+  z-index: 1;
+  background: #0080ff;
+  position: relative;
+  font-weight: 600;
+  font-size: 17px;
+  -webkit-box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
+  box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
+  overflow: hidden;
+  display: block;
+  transition: all 450ms;
+  letter-spacing: 0.5px;
+  background: #000046;
+    background: -webkit-linear-gradient(to right, #1CB5E0, #000046);
+    background: linear-gradient(to left, #1CB5E0, #000046);
+  
+  @media only screen and (max-width: 600px) {
+    margin: 0;
+    margin-bottom: 0px;
+    font-size: 16px;
+    font-weight: 500;
+  }
+  @media only screen and (max-width: 400px) {
+  
+  }
+
+  &:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    background: rgb(0, 89, 255);
+    //background-color: #222222;
+    background-color: #0dc569;
+
+    width: 0;
+    border-radius: 15px;
+    z-index: -1;
+    -webkit-box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
+    box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
+    transition: all 450ms;
+  }
+
+  &:hover {
+    cursor: pointer;
   }
 
+  &:hover::before {
+    width: 100%;
+  }
+
+  &:hover {
+    background-color: #49cb86;
+  }
 `;
+
 export const PlayBtn = styled.div`
 display: flex;
 align-content: center;
@@ -152,6 +193,10 @@ align-content: center;
  width: fit-content;
  height: fit-content;
  cursor: pointer;
+ @media screen and (max-width: 400px) {
+    margin-top:10px;
+    padding-left: 0;
+  }
  svg{
   height: 28px;
   width: 28px;
@@ -163,6 +208,7 @@ align-content: center;
     margin-top:0px;
     margin-left: 10px;
   }
+  
  }
  @media screen and (max-width: 600px) {
    padding: 10px 15px;