i hope its the last one

WildCodeSchool · Jan 30, 2025 · bcd1d54 · bcd1d54
1 parent 3fc2516
commit bcd1d54
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/src/components/carousel.jsx b/src/components/carousel.jsx
@@ -29,7 +29,7 @@ export default function Carousel() {
       <div className='carousel-container'>
         <div className='carousel-slides'>
           <div className='slide'>
-            <h1>Most popular</h1>
+            <h1 className='title'>Most popular</h1>
             {pokemons.map((pokemon, index) => {
               return (
                 <div className={`card-carousel ${index === slideIndex ? 'card-carousel--active' : ''}`} key={index}>
@@ -39,10 +39,10 @@ export default function Carousel() {
                     className='pokemonImg'
                   />
                   <div className='info'>
-                    <p>
-                      {pokemon.name} N°{pokemon.id}
-                    </p>
-
+                    <div className='id'>
+                      <h2 className='name'>{pokemon.name.charAt(0).toUpperCase() + pokemon.name.slice(1)}</h2>
+                      <p className='number'>N°{pokemon.id}</p>
+                    </div>
                     <div className='type'>
                       {pokemon.types.map((element) => {
                         return <Badge typeName={element.type.name} key={element.type.name} href={href} />;

diff --git a/src/css/carousel.css b/src/css/carousel.css
@@ -4,10 +4,24 @@
   align-items: center;
   gap: 32px;
 }
+.title {
+  padding: 16px;
+}
+.id {
+  display: flex;
+  justify-content: space-between;
+  width: 50%;
+  align-items: flex-end;
+}
+.number {
+  color: var(--text-hint);
+  font-size: var(--fz-18);
+}
 
 .card-carousel--active {
   display: flex;
 }
+
 .dot {
   width: 10px;
   height: 10px;
@@ -30,9 +44,9 @@
   width: 409px;
   height: 409px;
   margin-right: 96px;
-  margin-top: 108px;
+  margin-top: 32px;
   margin-left: 32px;
-  margin-bottom: 112px;
+  margin-bottom: 32px;
   filter: drop-shadow(rgba(0, 0, 0, 0.25) 0 4px 4px);
 }
 .slide {
@@ -42,9 +56,10 @@
   max-width: 1074px;
   width: 100%;
   background-color: var(--grey);
-  gap: 48px;
   margin: 0 auto;
   margin-top: 108px;
+  filter: drop-shadow(rgba(0, 0, 0, 0.25) 0 4px 8px);
+  border-radius: 4px;
 }
 .info {
   display: flex;