1

CSS not working within Reactjs like another project.

I am working on a project within Reactjs and for my home page I want to have a particular UI/UX and I have made it within regular HTML/CSS (see: https://replit.com/@Reverence/DistantUnconsciousFibonacci#index.html). But when I add the code to my react project (see: https://replit.com/@Reverence/MemorableExperiencedGoal#src/App.jsx) it is somewhat off and not what I had written before despite it being the same code. Is there something I'm missing?

Here is the CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Source+Sans+Pro&display=swap');

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body{
    background-color: #0d1721;
}

#box{
  margin: 0;
  padding: 0;
  position: relative;
  display: inline-block;
  width: calc(32vw - 3px);
  height: 100vh;
  text-align: center;
}

#box:hover{
    cursor: pointer;
    animation: hoverAnimation 1.5s forwards;
}

@keyframes hoverAnimation {
    0% {background-color: #009688; height: 0vh;}
    100% {background-color: #009688; height: 100vh;}
}

@keyframes fadeInDown {
    0% {opacity: 0; transform: translateY(-20px);}
    100% {opacity: 1;transform: translateY(0);}
}

.title{
    font-family: Poppins, sans-serif;
    color: #FBFCFC;
    text-align: center;
    padding-top: 35vh;
    display: inline-block;
    height: 100vh;
    font-size: 30px;
    font-weight: 600;
    text-decoration-line: none;
    animation: fadeInDown 2s;
}

.title::after {
    content: "";
    display: block;
    margin: 5px auto 0 auto;
    height: 2px;
    width: 0px;
    background-color: #FBFCFC;
}

.title:hover::after {
    width: 100%;
    transition: all 0.5s;
}

@media screen and (max-width: 820px){
    #box{width:100vw!important;padding:0!important;height:0!important;}
}

#mountains{
  margin: 0;
  padding: 0;
  position: relative;
  display: inline-block;
  width: calc(33.3% - 3px);
  height: 100vh;
  text-align: center;
  background-image: url("https://distantunconsciousfibonacci.reverence.repl.co/mountains.jpg");
}

#mountains:hover{
  cursor: pointer;
  animation: hoverAnimation 1.5s forwards;
}

#piedmont{
  margin: 0;
  padding: 0;
  position: relative;
  display: inline-block;
  width: calc(33.3% - 3px);
  height: 100vh;
  text-align: center;
  background-image: url("https://distantunconsciousfibonacci.reverence.repl.co/boat.png");
}

#piedmont:hover{
  cursor: pointer;
  animation: hoverAnimation 1.5s forwards;  
}

#coast{
  margin: 0;
  padding: 0;
  position: relative;
  display: inline-block;
  width: calc(33.3% - 3px);
  height: 100vh;
  text-align: center;
  background-image: url("https://distantunconsciousfibonacci.reverence.repl.co/coastal-waterway.jpg");
}

#coast:hover{
  cursor: pointer;
  animation: hoverAnimation 1.5s forwards;
}
Nebulous
  • 11
  • 3
  • where did you import this CSS file? – Satyam Saurabh Oct 07 '22 at 18:54
  • @SatyamSaurabh I import it for the HTML/CSS only project via the html itself ``. For the React project I am importing it within the react file. `import './App.css'` within the `App.jsx` file. – Nebulous Oct 09 '22 at 01:43
  • Is [this](https://i.gyazo.com/85b2ac3bb75cc6c3c0c55d6df6c707b4.gif) not supposed to be the rendered output? – clxrity Oct 17 '22 at 00:01
  • @clxrity No, there is supposed to be a small amount of margin in between the images and the images fully stretch across instead the React version has a small amount of extra dead space on the right side. – Nebulous Oct 22 '22 at 01:48

0 Answers0