Radial Gradient Works in CodePen and GitHub But Not via my Desktop Editor

Radial Gradient Works in CodePen and GitHub But Not via my Desktop Editor
0

#1

Hi folks,

I’m having an issue with my radial gradient not showing up in my browser via my editor. I don’t know why this could be because I have linked to the respective script files in my header in my html sheet

It works here in my GitHub, see screenshot below:

However it is not working here in my browser, even though I have the same CSS radial gradient code!

See CSS code:

nav, main {
  font-size: 2rem;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add an active class to highlight the current page */
.active {
    background-color: #4CAF50;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}


.container{
  /*border: 1px solid red;*/
  border-radius: 20px;
  width: auto;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  padding: 15px;  
  font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  text-align: center;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "statement2 statement1";
}


/*.........metal........................*/

.metal{
  color: hsla(0,0%,20%,1);
  text-shadow: hsla(0,0%,40%,.5) 0 -1px 0, hsla(0,0%,100%,.6) 0 2px 1px;

  background-color: hsl(0,0%,90%);
  box-shadow: inset hsla(0,0%,15%,  1) 0  0px 0px 4px, /* border */
  inset hsla(0,0%,15%, .8) 0 -1px 5px 4px, /* soft SD */
  inset hsla(0,0%,0%, .25) 0 -1px 0px 7px, /* bottom SD */
  inset hsla(0,0%,100%,.7) 0  2px 1px 7px, /* top HL */

  hsla(0,0%, 0%,.15) 0 -5px 6px 4px, /* outer SD */
  hsla(0,0%,100%,.5) 0  5px 6px 4px; /* outer HL */ 
  transition: color .2s;
}

/*.........linear........................*/

.container{

    background: -webkit-repeating-radial-gradient(rgba(228, 228, 228, 0) 23px, rgba(228, 228, 228, 0.05) 25px, rgba(228, 228, 228, 0) 27px) content-box, -webkit-repeating-radial-gradient(rgba(166, 166, 166, 0) 13px, rgba(166, 166, 166, 0.05) 15px, rgba(166, 166, 166, 0) 17px) content-box, -webkit-repeating-radial-gradient(rgba(139, 139, 139, 0) 19px, rgba(139, 139, 139, 0.05) 21px, rgba(139, 139, 139, 0) 23px) content-box, url(data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="htt…/CuYvtRNzh06knwUhwJn6d+lC/pzD/P5iFMYq0dzhzAAAAAElFTkSuQmCC" /></svg></svg>) content-box, -webkit-radial-gradient(#00d7ff 53%, transparent 65%, transparent 70%, #8b8b8b 70%) padding-box, -webkit-radial-gradient(#272727 20%, transparent 25%) 0 0 / 1.25em 1.25em padding-box, -webkit-radial-gradient(#272727 20%, transparent 25%) 0.625em 0.625em / 1.25em 1.25em padding-box, -webkit-radial-gradient(#444 20%, transparent 28%) 0 0.125em / 1.25em 1.25em padding-box, -webkit-radial-gradient(#444 20%, #3d3d3d 28%) 0.625em 0.75em / 1.25em 1.25em padding-box, url(data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="htt…q5oxPNSfVy4zpqod9OmtupKRP7No//ByOAvuaEn7MmAAAAAElFTkSuQmCC" /></svg></svg>) border-box; background: -o-repeating-radial-gradient(rgba(228, 228, 228, 0) 23px, rgba(228, 228, 228, 0.05) 25px, rgba(228, 228, 228, 0) 27px) content-box, -o-repeating-radial-gradient(rgba(166, 166, 166, 0) 13px, rgba(166, 166, 166, 0.05) 15px, rgba(166, 166, 166, 0) 17px) content-box, -o-repeating-radial-gradient(rgba(139, 139, 139, 0) 19px, rgba(139, 139, 139, 0.05) 21px, rgba(139, 139, 139, 0) 23px) content-box, url(data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="htt…/CuYvtRNzh06knwUhwJn6d+lC/pzD/P5iFMYq0dzhzAAAAAElFTkSuQmCC" /></svg></svg>) content-box, -o-radial-gradient(#00d7ff 53%, transparent 65%, transparent 70%, #8b8b8b 70%) padding-box, -o-radial-gradient(#272727 20%, transparent 25%) 0 0 / 1.25em 1.25em padding-box, -o-radial-gradient(#272727 20%, transparent 25%) 0.625em 0.625em / 1.25em 1.25em padding-box, -o-radial-gradient(#444 20%, transparent 28%) 0 0.125em / 1.25em 1.25em padding-box, -o-radial-gradient(#444 20%, #3d3d3d 28%) 0.625em 0.75em / 1.25em 1.25em padding-box, url(data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="htt…q5oxPNSfVy4zpqod9OmtupKRP7No//ByOAvuaEn7MmAAAAAElFTkSuQmCC" /></svg></svg>) border-box; background: repeating-radial-gradient(rgba(228, 228, 228, 0) 23px, rgba(228, 228, 228, 0.05) 25px, rgba(228, 228, 228, 0) 27px) content-box, repeating-radial-gradient(rgba(166, 166, 166, 0) 13px, rgba(166, 166, 166, 0.05) 15px, rgba(166, 166, 166, 0) 17px) content-box, repeating-radial-gradient(rgba(139, 139, 139, 0) 19px, rgba(139, 139, 139, 0.05) 21px, rgba(139, 139, 139, 0) 23px) content-box, url(data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="htt…/CuYvtRNzh06knwUhwJn6d+lC/pzD/P5iFMYq0dzhzAAAAAElFTkSuQmCC" /></svg></svg>) content-box, radial-gradient(#00d7ff 53%, transparent 65%, transparent 70%, #8b8b8b 70%) padding-box, radial-gradient(#272727 20%, transparent 25%) 0 0 / 1.25em 1.25em padding-box, radial-gradient(#272727 20%, transparent 25%) 0.625em 0.625em / 1.25em 1.25em padding-box, radial-gradient(#444 20%, transparent 28%) 0 0.125em / 1.25em 1.25em padding-box, radial-gradient(#444 20%, #3d3d3d 28%) 0.625em 0.75em / 1.25em 1.25em padding-box, url(data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="htt…q5oxPNSfVy4zpqod9OmtupKRP7No//ByOAvuaEn7MmAAAAAElFTkSuQmCC" /></svg></svg>) border-box;
}

.statement1{
width: 306px;
height: 356px;
/*border: 1px solid blue;*/
border-radius: 20px;
grid-area: statement1;
}

.Partner{
  margin: auto; 
  width: 300px;
  height: 300px;
  /*border: 1px solid blue;*/
  border-radius: 20px;
  background-image: url(https://s15.postimg.cc/jdgsmfi63/Unknown-41-300x300.jpg);
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.statement2{
  margin: auto; 
  width: 306px;
  height: 356px;
  /*border: 1px solid blue;*/
  border-radius: 20px;
  grid-area: statement2;
}

.User{
  width: 300px;
  height: 300px;
  /*border: 1px solid blue;*/
  border-radius: 20px;
  background-color: #000;
  background-image: url(https://s15.postimg.cc/w64wm2bor/a558682b158debb6d6f49d07d854f99f-casual-male-avatar-silhouette-b.png);
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

/*......deh pon medium to large devices..........*/

@media (min-width: 500px){ /*anything above 500 pixels*/
.container {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "statement2 statement1"
  }
}


/*......deh pon small to medium mobile devices..........*/

@media (min-width: 275px) and (max-width: 320px){ /*anything between 275 and 320 pixels*/
  .container{
    top: 5rem;
    transform: translateX(-50%);
    width: auto;
    grid-gap: 15px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "statement1"
      "statement2";
  }

  #question-1{
    margin: 5px;
  }
  .statement1{
  width: 206px;
  height: 256px;
  }

  .statement2{
  width: 206px;
  height: 256px;
  }

  .Partner {
    width: 200px;
    height: 200px;
  }

  .User {
    width: 200px;
    height: 200px;
  }
}


@media (min-width: 200px) and (max-width: 502px){
  .container1{
    top: 5rem;
    transform: translateX(-50%);
    grid-template-columns: 1fr;
    grid-template-areas:
      "statement1"
      "statement2";
  }
}


See html code:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" type="text/css" href="Which One Are You2.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
	<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/conic-gradient.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript" src="Which One Are You.js"></script>
</head>
<body>
    <div class="topnav" id="myTopnav">
      <a href="file:///D:/Web%20Development/Open%20Page.html" class="active">Home</a>

      <a href="javascript:void(0);" class="icon" onclick="myFunction()">
        <i class="fa fa-bars"></i>
      </a>
    </div>
    
    <div class="container metal linear"><!--Metallic holder-->
    	<div class="statement1">
          <p id="question-1"><!--Are You a Provider/Partner? Login--><a href="#"><!--Here--></a></p>
          <div class="Partner">	
          </div>
        </div>

        <div class="statement2">
          <p id="question-2"><!--Are You a User? Login--><a href="#"> <!--Here--></a></p>
          <div class="User">	
          </div>
        </div>   
    </div>
    
  </body>
</html>