CSS module

kingsleyokonkwo · Mar 31, 2023 · c365e85 · c365e85
1 parent 5cd91ea
commit c365e85
Show file tree

Hide file tree

Showing 72 changed files with 2,600 additions and 2,417 deletions.
diff --git a/src/components/AdSuggestion/AddSuggestions.jsx b/src/components/AdSuggestion/AddSuggestions.jsx
@@ -1,10 +1,8 @@
 import React from "react";
-import "./AddSuggestions.css";
+import classes from"./AddSuggestions.module.css";
 import { Link, NavLink } from "react-router-dom";
 import watch from "../../data/watch.png";
 import plus from "../../data/plus.png";
-import bell from "../../data/bell.png";
-import desk from "../../data/desk.png";
 import NftProjectAd from "./NftProjectAd/NftProjectAd";
 import CryptoProjectAd from "./CryptoProjectAd/CryptoProjectAd";
 import MetaverseProjects from "./MetaProjects/MetaverseProjects";
@@ -13,11 +11,11 @@ import Button from "../UI/Button/Button";
 
 export default function AddSuggestions() {
   return (
-    <div className="add-suggestion-container">
-      <div className="add-suggestion-inner">
-        <div className="featured-ads">
-          <h3 className="featured-ads-h3">Featured Ads</h3>
-          <div className="featured-ads-btns">
+    <div>
+      <div className={classes.adsuggestion__inner}>
+        <div className={classes.featured__ads}>
+          <h3 className={classes.featured__adsH3}>Featured Ads</h3>
+          <div className={classes.featured__adsBtns}>
             <NavLink to="/ad-status">
               <Button className="btn-status">
                 <img src={watch} alt="ad status" />
@@ -32,36 +30,24 @@ export default function AddSuggestions() {
             </NavLink>
           </div>
         </div>
-        <div className="ad-boxes">
+        <div className={classes.ad__boxes}>
           <div
-            className="ad-box-big"
-            style={{
-              backgroundImage: `url(${bell})`,
-              backgroundSize: "contain",
-              backgroundPosition: "right",
-              backgroundRepeat: "no-repeat",
-            }}
+            className={classes.ad__boxBig}
           >
-            <div className="big-box-content">
+            <div className={classes.big__boxContent}>
               <h3>The Right NFT At the festival</h3>
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sodales
                 mollis quisque commodo facilisis adipiscing curabitur fringilla.
                 Elit netus sed sit fermentum vel ornare sit feugiat felis.
               </p>
-              <Link to="/" className="ad-readmore-link">
+              <Link to="/" className={classes.ad__readmoreLink}>
                 Read More
               </Link>
             </div>
           </div>
           <div
-            className="ad-box-small"
-            style={{
-              backgroundImage: `url(${desk})`,
-              backgroundSize: "contain",
-              backgroundPosition: "bottom",
-              backgroundRepeat: "no-repeat",
-            }}
+            className={classes.ad__boxSmall}
           >
             <h3>The Right NFT At the festival</h3>
             <p>

diff --git a/...omponents/AdSuggestion/AddSuggestions.css → ...ts/AdSuggestion/AddSuggestions.module.css b/...omponents/AdSuggestion/AddSuggestions.css → ...ts/AdSuggestion/AddSuggestions.module.css
@@ -1,41 +1,41 @@
-/* .add-suggestion-container {
-    border: 1px solid red;
-} */
-
-.add-suggestion-inner {
+.adsuggestion__inner {
     margin: 50px 45px;
 }
 
-.featured-ads {
+.featured__ads {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 29px;
 }
 
-.featured-ads-h3 {
+.featured__adsH3 {
     font-size: 32px;
     font-weight: 800;
 }
 
-.featured-ads-btns {
+.featured__adsBtns {
     display: flex;
     align-items: center;
     gap: 1rem;
 }
 
-.ad-boxes {
+.ad__boxes {
     display: flex;
     gap: 15px;
 }
 
-.ad-box-big {
+.ad__boxBig {
     flex: 2;
     border-radius: 24px;
+    background-image: url('../../data/bell.png');
+    background-size: contain;
+    background-position: right;
+    background-repeat: no-repeat;
     background-color: #2793ff;
 }
 
-.big-box-content {
+.big__boxContent {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
@@ -44,46 +44,50 @@
     width: 50%;
 }
 
-.big-box-content h3 {
+.big__boxContent h3 {
     font-size: 1.8rem;
     font-weight: 800;
     margin-top: 40px;
     margin-bottom: 1rem;
 }
 
-.big-box-content p {
+.big__boxContent p {
     font-size: 16px;
     font-weight: normal;
     margin: 0;
     margin-bottom: 1rem;
 }
 
-.ad-readmore-link {
+.ad__readmoreLink {
     text-decoration: underline;
     font-size: 16px;
     font-weight: 800;
     color: #fff;
 }
 
-.ad-box-small {
+.ad__boxSmall {
     flex: 1;
     box-sizing: border-box;
     width: 355px;
     height: 397px;
     padding: 32.6px 30px 0 0px;
     border-radius: 24px;
     background-color: #610bef;
+    background-image: url('../../data/desk.png');
+    background-size: contain;
+    background-position: bottom;
+    background-repeat: no-repeat;
 }
 
-.ad-box-small h3 {
+.ad__boxSmall h3 {
     font-size: 24px;
     font-weight: 800;
     margin-bottom: .9rem;
     padding-left: 30px;
 
 }
 
-.ad-box-small p {
+.ad__boxSmall p {
     font-size: 14px;
     font-weight: normal;
     margin: 0;
@@ -111,26 +115,26 @@
         height: 275px;
     }
 
-    .big-box-content {
+    .big__boxContent {
         height: 0;
         width: 60%;
         margin-top: 110px;
     }
 
-    .big-box-content h3 {
+    .big__boxContent h3 {
         font-size: 24px;
 
     }
 
-    .ad-readmore-link, .big-box-content p, .ad-box-small p {
+    .ad-readmore-link, .big__boxContent p, .ad__boxSmall p {
         font-size: 14px;
     }
 
-    .ad-box-small {
+    .ad__boxSmall {
         height: 289px;
     }
 
-    .ad-box-small h3 {
+    .ad__boxSmall h3 {
         font-size: 21px;
     }
 }