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>