updated css

Decibels-UTC · Feb 24, 2024 · f5632bb · f5632bb
1 parent ccc1cb4
commit f5632bb
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 24 deletions.
diff --git a/public/index.html b/public/index.html
@@ -27,7 +27,9 @@
     <title>dBs</title>
     <link rel=”preconnect” href=”https://fonts.googleapis.com”>
     <link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Robotto">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Robotto">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
+
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/Desc.jsx b/src/components/Desc.jsx
@@ -10,7 +10,7 @@ function Desc() {
   return (
       <>
           <div className="page-desc">
-              <h1 className={"title desc-title"}>Décibels c'est : </h1>
+              <h1 className={"title desc-title"}><span className="highlightdbs">Décibels</span> c'est : </h1>
           </div>
           <div className={"grid-desc"}>
 
@@ -40,7 +40,7 @@ function Desc() {
                   <motion.div className={"container first-container-desc"}
                               whileHover={{scale: 1.1}}
                   >
-                      <h2>Tout au long de l'année...</h2>
+                      <h2>Tout au long de l'<span className="highlight">année</span>...</h2>
                       <h5>Décibels c'est 12 évènnements en A23</h5>
                   </motion.div>
               </div>
@@ -50,7 +50,7 @@ function Desc() {
                   <motion.div className={"container second-container-desc"}
                               whileHover={{scale: 1.1}}
                   >
-                      <h2>Une grande famille</h2>
+                      <h2>Une grande <span className="highlight">famille</span></h2>
                       <h5>Une équipe de plus de 20 personnes ! </h5>
                   </motion.div>
 
@@ -61,7 +61,7 @@ function Desc() {
                   <motion.div className={"container third-container-desc"}
                               whileHover={{scale: 1.1}}
                   >
-                      <h2>Matériel</h2>
+                      <h2><span className="highlight">Matériel</span></h2>
                       <h5>Décibels a amassé au fur et à mesure de son avancement 100 000 euros de matériel son & lumières !</h5>
                   </motion.div>
               </div>

diff --git a/src/components/Lights.jsx b/src/components/Lights.jsx
@@ -26,7 +26,7 @@ function Lights(){
                     <motion.div className={"container container-light"}
                     whileHover={{scale : 1.1}}
                     >
-                    <h1>Une expérience lumineuse</h1>
+                    <h1>Une expérience <span className="highlight">lumineuse</span></h1>
                     <h5>Décibels s'occupe également des lumières ...</h5>
                   </motion.div>
 

diff --git a/src/components/Son.jsx b/src/components/Son.jsx
@@ -17,7 +17,7 @@ function Son(){
                     <motion.div className={"container text-son"}
                     whileHover={{scale : 1.1}}
                     >
-                    <h1>Une expérience du son</h1>
+                    <h1>Une expérience du <span className="highlight">son</span></h1>
                     <h5>Depuis de nombreuses années, dBs est une chance donnée aux étudiants d'avoir un apperçu du monde de la sonorisation.<br/>
 
                     </h5>

diff --git a/src/style/App.css b/src/style/App.css
@@ -1,5 +1,5 @@
 body{
-  font-family: "Robotto", sans-serif;
+  font-family: "Inter", sans-serif;
   color: beige;
   overflow-x: hidden;
   opacity: 1;
@@ -32,7 +32,11 @@ display: none;
   text-align: center;
 }
 
-
+.highlightdbs{
+  background: linear-gradient(to right, red , rgb(178, 121, 151) , red);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
 
 
 .title{
@@ -41,6 +45,9 @@ display: none;
   margin-left: 2%;
 }
 
+
+
+
 @media only screen and (min-device-width : 0px) and (max-device-width : 1024px) {
   .title{
     font-size: x-large;

diff --git a/src/style/Lights.css b/src/style/Lights.css
@@ -6,6 +6,7 @@
     justify-content: space-around;
 }
 
+
 .title-lights-container{
     display: flex;
     justify-content: center;

diff --git a/src/style/index.css b/src/style/index.css
@@ -1,20 +1,15 @@
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  margin:  0;
+  font-family: 'Inter', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: black;
-
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  background-image:   
+  radial-gradient(circle at center, rgba(255,  255,  255,  0.005)  0,
+   0 rgba(255,255,  255,  0.005)  1px,
+  transparent  1px),
+  linear-gradient(to right, rgba(255,255,  255,  0.01)  1px, transparent  1px),
+  linear-gradient(to bottom, rgba(255,  255,  255,  0.01)
+   1px, transparent  1px);
+  background-color: rgb(17,  17,  17);
 }
 
-@media only screen and (min-device-width : 0px) and (max-device-width : 1024px) {
-
-
-}