The html file is not linking to the css file. Both the files are placed side by side in the same directory. It used to work fine before but suddenly it doesn't work. I have tried everything that was mentioned in the answers to similar questions here in StackOverflow but still doesn't work.
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link href="https://fonts.googleapis.com/css?family=Poppins:200,400,600&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Four card feature section</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<div class="container">
<div class="part1">
<p>Reliable, efficient delivery</p>
<h2>Powered by Technology</h2>
<p> Our Artificial Intelligence powered tools use millions of project data points to ensure that your project is successful.</p>
</div>
<div class="part2">
<div class="supervisor">
<h3>Supervisor</h3>
<p>Monitors activity to identify project roadblock.</p>
</div>
<div class="wrapper">
<div class="teambuilder">
<h3>Team Builder</h3>
<p>Scans our talent network to create the optimal team for your project.</p>
</div>
<div class="karma">
<h3>Karma</h3>
<p>Regularly evaluates our talent to ensure quality.</p>
</div>
</div>
<div class="calculator">
<h3>Calculator</h3>
<p> Uses data from past projects to provide better delivery estimates.</p>
</div>
</div>
</div>
<footer>
<p class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>.
</p>
</footer>
</body>
</html>
Css code:
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: hsl(0, 0%, 98%);
text-rendering: optimizeLegibility;
}
.container {
width: 60%;
height: 60%;
}
For the folder structure please refer to this https://github.com/swethalakshmi22/four-card-feature-section
/styles.css? Also please not that it's URL to file and not path to filehref="/style.css". In your code you provided here you typedhref="style.css"(without a slash). However, I removed the slash from your index.html and it worked fine. Please note that the background-color you set in the CSS is pretty similar to white. You may think it's not working even if it does. Try setting the body background-color to something clear likebackground-color:red;to see if the CSS is working or not.