Combining Content on a GitHub Page

Within the <head> section of my index.html, I have successfully utilized these links on localhost:

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>

However, when viewing the GitHub page, I encountered errors for all these links in the console and the content was not displayed:

Mixed Content: The page at 'https://mypage.net/' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Noto+Sans:400,700'. This request has been blocked; the content must be served over HTTPS.

If I instead use:

<footer id="footer"> 
  <div class="container">
    <div class="row">
      <div class="col-xs-12 text-center">
        <p class="social">           
          <a target="_blank" href="https://www.youtube.com/channel/MyChannelID?view_as=subscriber">
            <span class="fa-stack fa-lg">
              <i class="fa fa-circle fa-stack-2x"></i>
              <i class="fa fa-youtube fa-stack-1x fa-inverse"></i>
            </span> 
          </a> 
          <a target="_blank" href="https://github.com/myGitHub">
            <span class="fa-stack fa-lg">
              <i class="fa fa-circle fa-stack-2x"></i>
              <i class="fa fa-github fa-stack-1x fa-inverse"></i>
            </span>
          </a>    
          <a target="_blank" href="https://www.facebook.com/myFacebook">
            <span class="fa-stack fa-lg">
              <i class="fa fa-circle fa-stack-2x"></i>
              <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
            </span>
          </a>
        </p>
      </div>
    </div>
  </div> 
</footer>
htmlcssgithub-pages

Answer №1

The letter "s" in https actually stands for "secure". This indicates that your webpage and its content are encrypted when transmitted over the internet. The issue at hand is that you are linking to a non-secure url (http) to load your fonts. To resolve this, simply change the url from "http" to "https":

https://fonts.googleapis.com/css?family=Noto+Sans:400,700

Answer №2

Make sure to switch all http links to https

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>


<footer id="footer"> 
  <div class="container">
    <div class="row">
      <div class="col-xs-12 text-center">
        <p class="social">           
          <a target="_blank" href="https://www.youtube.com/channel/MyChannelID?view_as=subscriber">
            <span class="fa-stack fa-lg">
              <i class="fa fa-circle fa-stack-2x"></i>
              <i class="fa fa-youtube fa-stack-1x fa-inverse"></i>
            </span> 
          </a> 
          <a target="_blank" href="https://github.com/myGitHub">
            <span class="fa-stack fa-lg">
              <i class="fa fa-circle fa-stack-2x"></i>
              <i class="fa fa-github fa-stack-1x fa-inverse"></i>
            </span>
          </a>    
          <a target="_blank" href="https://www.facebook.com/myFacebook">
            <span class="fa-stack fa-lg">
              <i class="fa fa-circle fa-stack-2x"></i>
              <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
            </span>
          </a>
        </p>
      </div>
    </div>
  </div> 
</footer>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is the width set to fill the entire partial screen?

I'm facing a dilemma: I want the darkest-gray bar at the bottom right (visible after running the code below) to stretch as far as the browser window allows without encroaching on the light-gray section on the left. Here's the code snippet: <d ...

csswidth

Tips for updating multiple divs after submitting content with jQuery

My screen contains various widgets, each enclosed with different divs. Currently, I have a form that updates using AJAX when posted through jQuery. However, I am looking to refresh two additional divs located outside the form upon a single jQuery AJAX pos ...

jqueryasp.net-mvcposthtml

Spinning divs using JavaScript when the mouse hovers over them, and then returning them to their original position when the mouse moves

I am looking to create a functionality where a div rotates when the mouse enters it and returns to its original position when the mouse leaves. Everything works fine when interacting with one div, but as soon as I try hovering over other divs, it starts gl ...

javascriptjqueryhtmlcss

PHP and MySQL combination for efficient removal of multiple dropdown choices

I'm struggling to figure this out. Essentially, it's a form with multiple dropdown menus where users can select one or more items to filter MySQL data results. I want to dynamically update the other dropdown menus as the user makes selections. Fo ...

javascriptphpjqueryhtmlmysql

Incorporating random images into diverse div containers every time

I previously asked this question, but it was too long and not specific enough. So here is a revised version of my query. For fun, I am creating a game based on instructions I found online. The game involves 12 cards with images face down. You click on two ...

jqueryhtml

What is the best way to create a JQuery function that fills a div based on the selected option from an HTML select

Check out this simple JavaScript function below. <html> <head> <script> $(document).ready(function() { $.get('getImage.php', function(data) { $('#imageSelector').html("<select>" + d ...

phpjqueryhtml

Having trouble sending data to an API through jQuery: the function is not functioning properly

Currently, I am in the process of developing an HTML form that allows users to input values into text fields and submit them to an external API called ThingSpeak. This API then uses the received values to generate a plot displayed within an iframe. Althoug ...

javascripthtmljqueryajax

Printing specific div content from an HTML page using a print button

I have a situation where I need to control the printing functionality of my HTML page. Currently, I have two div tags in my code with a single print button at the top of the page. When I click on this button, it prints the content from both divs. However ...

htmlcss

Retrieve the content of the 'div' element, but exclude certain text

I have a task to copy the content from a div into a textarea, allow for editing within the textarea, and ensure that any changes made are saved back to the original div. I also need to filter out an attribute, such as data-bind: "some stuff;", set for the ...

javascriptjqueryhtmlcss

How to insert text into a text input using onKeyPress in react.js

I am looking to simulate a typing effect where the phrase 'Surveillance Capitalism' is inputted letter by letter into a text input field as a user types. However, I encounter an issue when trying to add each individual letter into the input; I re ...

javascripthtmlreactjs

Ways to customize background color for a particular date?

I have been using the fullcalendar npm package to display a calendar on my website. I am trying to figure out how to set a background color for a specific selected date. I tried looking into this issue on GitHub at this link. However, it seems that dayRe ...

javascripthtmlcssangularfullcalendar

Problem with Bootstrap container-fluid overlapping with floated element

I am struggling with the layout of my card body, which includes a floating logo and rows enclosed in a container-fluid. While everything looks great in Chrome, I am facing alignment issues in Edge and Firefox. I have considered using absolute positioning ...

cssfirefoxbootstrap-4microsoft-edge

What is the most efficient way to retrieve key pair values of separate elements in an array with just one API request?

The API I am working with returns an array of elements, each containing multiple key-value pairs. An example of a similar API response can be seen here: , where an array of poems is returned. [ { "title": "...." "content": "..." "url" : "..." } ...

javascripthtml

strange JSON structure

I am puzzled by the json output and its relation with jquery. Below is the json data, but the syntax seems quite peculiar: {"ResC": { "@attributes": { "ver": "1.1", "prod": "HAFAS 5.31.VBB.4.8.9", "lang": "DE" }, "STBRes": { "@attributes": {"plan_ ...

jqueryhtmljson

Automatically reloading POST request when browser back button is pressed

Our web application is built on Spring MVC and Thymeleaf. When a user lands on the home page with a GET request, they enter 2 parameters and submit a POST request. After successful submission, they are directed to another page (let's call it page2) wi ...

javascripthtmlbrowser

Issues with JQuery OnClick Function Detected

I am struggling with an issue related to the scripts in the <head> section of my website: <script src="scripts/jquery-1.11.0.min.js" type="text/javascript"></script> <script> $('#submit').click(function() { $('#submi ...

jquerycssbackground-image

Creating responsive images in Bootstrap columns

I've found a solution to my issue with large images, but I am still struggling with smaller images not fitting well into larger spaces. Essentially, I created a CMS for a user who required templates with various bootstrap columns as content areas. Cu ...

htmlcssbootstrap-4responsive

JavaScript not functioning on Express-powered HTML document

I have set up an express server to render my payj.html file, which includes a script tag for the clyint.js file. However, I am encountering an error in the browser's console: GET net::ERR_ABORTED 404 I also attempted to include all the JavaScript ...

javascripthtmlnode.jsexpress

What is the best way to ensure that all of my images are the same size?

I've been working on making my pictures of varying resolutions the same size here, but no matter what I try, it just doesn't seem to work. Here is what I'm getting: . When I change the state to 1, 2, 3, or 4, I want it to look like this: her ...

javascripthtmlcssreactjs

Creating a unique-looking visual representation of progress with arcs

Looking to create a circular progress bar (see image below), with loading starting from the left bottom side up to the right bottom side. The empty state should be light-blue (#E8F6FD) and the progress color strong blue (#1CADEB). I've experimented w ...

javascriptcsssvgcss-shapes