HTML file not linking to CSS file - html

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 Frontend Mentor.
Coded by Your Name Here.
</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

The code you have uploaded on Github it has href="/style.css" please write
here your code in the question is fine.
<!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 Frontend Mentor.
Coded by Your Name Here.
</p>
</footer>
</body>
</html>

After checking your code-snippet , it seems that either css style.css is not on the same location where your html file is. Please check that.
Can you please check the right on the folder (IIS_USER) must have permission on this to read the style.css ?

Related

Why is google font not working with bootstrap?

Google Fonts not working with bootstrap. I'm using Google Font and Bootstrap for my website, but google fonts don't seem to work. As soon as I comment out the bootstrap CSS, Google font appears again.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World</title>
<!-- Bootstrap CSS -->
<!-- Try commenting this and font will start working -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Hello World</h1>
</header>
<!-- Bootstrap Script -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
And CSS:
/* Google Font Link */
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body {
margin: 0;
background: -webkit-gradient(linear, left top, left bottom, from(rgb(168, 168, 168)), to(#464645)) fixed;
/* Font Family Not Working */
font-family: 'Poppins', sans-serif;
}
header{
background-color: antiquewhite;
text-align: center;
padding: 10px;
}
JSFiddle Here
Tried Solution:
Google font not working with bootstrap This didn't work for me
Tried Googling around ...no solutions.
You can override the Bootstrap theme either by changing the source SASS files or by overriding the CSS variables used by the framework.
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
#import url('https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css');
:root {
--bs-font-sans-serif: Poppins;
}
<main role="main" class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</main>
This how it worked for me.
*{
font-family: 'Montserrat', sans-serif;
padding: 0;
margin: 0;
outline: none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/index-html.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;300&display=swap" rel="stylesheet">
<title>Stackoverflow Answer</title>
</head>
<body>
<h1>Google Fonts Imported </h1>
<script rel="preconnect" src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

How can I switch between elements using AJAX

I am relatively new to Ajax. I've created two <li> elements with <a> elements inside of them, both of them lead to other HTML files. What I am trying to achieve is that whenever I click on one of the links, the page automatically loads the HTML file related to it, however its not working for me. Whenever I click on one of the links, nothing happens. Thanks in advance! I am using JQuery with Ajax.
FIRST HTML FILE
$('li').find('a').on('click',function(event) {
event.preventDefault();
var href = $(this).attr('href');
$('.main-content').load(href + 'content-ajax');
});
.ajax-img {
margin-top: 8em;
float: left;
}
.ajax-img2 {
float: left;
margin-left: 10em;
margin-top: -5em;
}
.ajax-nadpis {
display: flex;
justify-content: center;
align-items: center;
height: 800px;
font-size: 2.7em;
}
.ajax-text {
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
margin-top: -13em;
}
nav {
display: flex;
}
ul li {
display: inline-block;
padding-left: 18em;
margin-top: 2em;
}
ul li:hover {
cursor: pointer;
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
//FIRST HTML PAGE
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vlastna responzivna stranka</title>
<link rel="stylesheet" href="css/styles2.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;400&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Tinos&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
</head>
<body>
<h2 class="podnadpis">Automaticke nacitanie clanku pomocou ajaxu (bez refreshu stranky)</h2>
<section class="ajax">
<div class="section-container">
<div class="img-holder">
<img src="ajax-IMGs/talltales.png" class="tall-tales-logo" alt="logo tall tales">
</div>
</div>
</section>
<article id="article">
<nav class="navigation">
<ul>
<li>Shroudbreaker</li>
<li>Skeleton Lords</li>
</ul>
</nav>
<div class="main-content">
<div class="content-ajax">
<img src="ajax-imgs/graymarrow.png" class="ajax-img" alt="">
<h3 class="ajax-nadpis">SKELETON LORDS</h3>
<p class="ajax-text">Tall Tales – Shores of Gold introduces Skeleton Lords, imposing characters clambering out of the oldest legends into the present day. Meaner than any of the bony marauders you’ve fought so far, these intimidating adversaries can only be encountered by following the story as it unfolds. Be prepared for anything when seeking out Skeleton Lords – these resourceful foes will resist any attempt to send them back to their resting place beneath the sands. They’re big, tough and full of surprises…</p>
</div>
</div>
</article>
<script src="javascript/jquery.js"></script>
<script src="javascript/jquery.parallax.js"></script>
<script src="javascript/main.js"></script>
</body>
</html>
SECOND HTML FILE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vlastna responzivna stranka</title>
<link rel="stylesheet" href="css/styles2.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;400&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Tinos&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
</head>
<body>
<article id="article">
<nav class="navigation">
<ul>
<li>Shroudbreaker</li>
<li>Skeleton Lords</li>
</ul>
</nav>
<div class="main-content">
<div class="content-ajax">
<img src="ajax-imgs/shroudbreaker.png" class="ajax-img2" width=700px height=600px alt="">
<h3 class="ajax-nadpis">SHROUDBREAKER</h3>
<p class="ajax-text">The Shroudbreaker is the first Tall Tale in the Shores of Gold Arc. The Tale Book can be voted for on the table next to the Mysterious Stranger in the Tavern of any Outpost. The Tall Tale can be voted to be cancelled at the Ship's Voyage Table. Players can unlock three Checkpoints during this Tall Tale. If they wish to continue the Tall Tale at a later time, they can vote on any acquired Checkpoints at the Voyage Table.</p>
</div>
</div>
</article>
<script src="javascript/jquery.js"></script>
<script src="javascript/jquery.parallax.js"></script>
<script src="javascript/main.js"></script>
</body>
</html>
These are the errors I am getting
Load page content using AJAX
First of, you should use a templating engine (i.e: PHP) since it makes it infinitely easier to just change a head tag in one place than in N files. Same goes for scripts in footer etc.
Every page should be accessible on its own (via URL) but give the feel of no tab refresh, here's where AJAX comes at play:
header.php :
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title><?= $page_title ?></title>
<link rel="shortcut icon" href="#!" type="image/x-icon">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav id="nav">
Home
About
Contact
</nav>
and footer.php :
<footer>
© <?= date("Y") ?> - Lorem Ipsum
<footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Create three files index.php, about.php and contact.php like the following and change the <h1> text respectively
<?php
$page_title = "Home";
include 'header.php';
?>
<div id="page">
<div id="content">
<h1>This is Home page</h1>
</div>
</div>
<?php
include "footer.php";
?>
<?php
$page_title = "About";
include 'header.php';
?>
<div id="page">
<div id="content">
<h1>This is About page</h1>
</div>
</div>
<?php
include "footer.php";
?>
<?php
$page_title = "Contact";
include 'header.php';
?>
<div id="page">
<div id="content">
<h1>This is Contact page</h1>
</div>
</div>
<?php
include "footer.php";
?>
Finally here's the JS script.js file:
jQuery(function ($) {
// Read history states
window.onpopstate = function (e) {
if (e.state) {
$("#content").html(e.state.html);
document.title = e.state.pageTitle;
}
};
$("#nav").on("click", "a", function (ev) {
ev.preventDefault(); // prevent default anchor behavior
const URL = $(this).attr("href"); // get page URL
const name = $(this).text(); // get page name
document.title = name;
// AJAX LOAD and pushState for browser history
$("#page").load(URL + " #content", function (data) {
const html = $(data).find("#content").html();
const pageTitle = $(data).find("h1").text();
// Handle history and browser's AddressBar
window.history.pushState({html, pageTitle}, "", URL);
});
});
});
Install PHP and set the php binaries paths in your Environment Variables (Windows).
Open terminal from your project folder and spin up a lightweight PHP cli-server:
php -S localhost:8080
and head to http://localhost:8080
The above is crawler friendly, meaning that a crawler visiting your page can index every other page and its contents.

How can I link a JS File from Parent Directory (Localhost)

Let me start with file management. So, there is a main.js and a main.css, both of them having the styles all the HTML Pages have. Now, there are HTML Pages inside child folders, so the directory looks like this:
/The Project
/main.js
/main.css
/Home
/index.html
/styles.css
/Study
/index.html
/styles.css
/scripts.js
When I run the HTML files as a file in the browser, it works perfectly. However, when I run it using python3 -m http.server, it does not link the CSS and JS files that are in the parent directory.
Thank you for answering in advanced!
Home/index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Plompy</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="../main.css">
<script src="../main.js"></script>
</head>
<body style="overflow-x: hidden;">
<div class="nav"><li class="options">Home</li><li class="options">Study</li><li class="options">Discussion</li><li class="options">About</li><li class="options" style="color: rgb(66, 174, 213);">Sign Up!</li></div>
<div class="content">
<h1 class="title">Pompy - The Future of Creatures</h1>
<img src="academicean.png" alt="Academicean Logo" style="float:right;width:400px;height:400px">
<h2 class="body">HAHAHA LOL</h2>
<h1 class="title">Contact Us:</h1>
</div>
<div class="footer">
<h4 class="body">Best experiences may be with a computer, or laptop. Although compatible with other devices such as the hand held phone, not that the experience won't be as smooth as with a laptop.</h4>
</div>
</body>
</html>
Study/index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Academicean</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="../main.css">
<script src="../main.js"></script>
</head>
<body style="overflow-x: hidden;">
<div class="nav"><li class="options">Home</li><li class="options">Study</li><li class="options">Discussion</li><li class="options">About</li><li class="options" style="color: rgb(66, 174, 213);">Sign Up!</li></div>
<div class="content">
<h1 class="title">Academicean - The Future of Reviewers</h1>
<img src="academicean.png" alt="Academicean Logo" style="float:right;width:400px;height:400px">
<h2 class="body">Academicean, which is the combination of Academic and Ocean, provides much resources to study or to review a topic. Whether thats Mathematics, English, Sciences or any of your academic subjects, you may review for it RIGHT HERE! There will also be a comment section, where you may gather some more opinions about a certain topic, and ask some questions if confused. So what are you waiting for? Log in or Sign up to be able to get started!</h2>
<h1 class="title">Contact Us:</h1>
</div>
<div class="footer">
<h4 class="body">Best experiences may be with a computer, or laptop. Although compatible with other devices such as the hand held phone, not that the experience won't be as smooth as with a laptop.</h4>
</div>
</body>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Study - POmpley</title>
<link rel="stylesheet" href="../main.css">
<link rel="stylesheet" href="styles.css">
<script src="../main.js"></script>
</head>
<body>
<div class="nav"><li class="options">Home</li><li class="options">Study</li><li class="options">Discussion</li><li class="options">About</li><li class="options" style="color: rgb(66, 174, 213);">Sign Up!</li></div>
<div class="container">
<h1 class="title">GOogle LOL</h1>
<div class="search">
<input type="text" id="searchbar" onfocus="change_note()">
<h2 id="note">Type something to search</h2>
</div>
</div>
</body>
<script src="scripts.js"></script>
</html>

CSS background-image not showing my image

I have a problem with background-image property in one of my sections. Here is the HTML code:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css" type="text/css">
<link rel="stylesheet" href="css/custom.css" type="text/css">
<title>Elipsis</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
</head>
<body>
<header id="intro">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>
</header>
<main>
<section id="about">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>
</section>
<section id="services">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>
</section>
</main>
<footer id="contact">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
And CSS:
#intro {
background-image: url(.../.../img/intro.png);
background-image: url(intro.png);
background-image: url(".../.../img/intro.png");
background-image: url("intro.png");
}
Index.html is in root folder, css file is in root/css/... and intro.png is in both root/img/... and root folders. Why it's not showing? I've read a couple of topics here on stack and some articles from google but nothing seems to work.
The way you wrote that CSS rule only the very last line will apply, which is
background-image: url("intro.png");
(it overwrites the other lines before it)
So you probably want to change that to
#intro {
background-image: url("../img/intro.png");
height: 300px; /*whatever value, if there is no content */
}
Plus, as someone wrote in the comments: if that element has no content and no defined height, it will have height 0, therefore the background image will not be visible.
Try this.
background-image: url('../img/intro.png');
I usually drag and drop that image to get the proper path. I hope this helps.

CSS background not showing on browser

My css background image shows on dreamweaver but not in my google chrome browser for some reason it just shows a white background can anyone understand why? This is my code:
about.php file
<?php
include 'secure/db_connect.php';
include 'secure/functions.php';
sec_session_start(); // Our custom secure way of starting a php session.
if(login_check($mysqli) == true) { ?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Referee Perception Exam</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/aboutstyle.css" rel="stylesheet" type="text/css" media="screen" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>title</h1>
<p>paragraph here</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Contact:</h3>
</div>
<div class="col-sm-4">
<h3>Social:</h3>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
</div>
</div>
</div>
</body>
</html>
<?php } else {
header( 'Location: http://localhost/project/index.php' ) ;
}
;?>
aboutstyle.css file
#charset "UTF-8";
body {
background-image: url("../img/pitch.jpeg");
background-color: #cccccc;
background-size:cover;
}
Guessing from the file structure I can see you might need to alter
background-image: url("../img/pitch.jpeg");
maybe to
background-image: url("../../img/pitch.jpeg");
or similar to correctly reach the image file from your stylesheet. But I can't be sure without seeing the structure. 404 errors in your browser should point you in the right direction.