cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <article>
  <br>
  <svg xmlns="http://www.w3.org/2000/svg" width="600" height="130">
    <text class = 'draw-lines' x="300" y="30" stroke = '#222' stroke-width = '3' stroke-linecap="square"
        fill = none font-family="Arial Black, Gadget, sans-serif" font-size="58" text-anchor="middle" alignment-baseline="middle">How to spot</text>
    <text class = 'draw-lines' x="300" y="100" stroke = '#222' stroke-width = '3' stroke-linecap="square"
        fill = none font-family="Arial Black, Gadget, sans-serif" font-size="58" text-anchor="middle" alignment-baseline="middle"> pseudoscience </text>
</svg>


<!--   <h1 class="underlined">What is pseudoscience?</h1> -->
  <p><strong>Pseudo</strong> =  false, pretended, unreal, not genuine, a sham</p>
  <p><strong>Science</strong> = a systematic enterprise that builds and organizes knowledge in the form of testable explanations and predictions about the universe.</p>
  <p>Pseudoscience consists of statements, beliefs, or practices that are claimed to be scientific and factual, but are not supported by evidence gathered through scientific methods.</p>
    
    <h1 class="underlined">Warning Signs</h1>
<li>A substantial reliance on anecdotal evidence
<li>Extraordinary claims in the absence of extraordinary evidence
<li>Claims which cannot be proven false
<li>Claims that counter established science
<li>Absence of adequate peer review
<li>Claims that are repeated despite being refuted
<li>Claims tied to wealth, politics, culture
<li>Words like: all natural, energy, toxins, psychic, waves, UFO


	<h1 class="underlined">Why do people believe it</h1>
<li>Poor scientific literacy
<li>Confirmation bias
<li>Popular misinformation
<li>Excitement

    <h1 class="underlined">Examples:</h1>
  <li><a href = "http://www.powerbalance.com/default/technology">Power Balance bracelet</a>
  <li><a href = "https://en.wikipedia.org/wiki/Scientology">Scientology</a>
  <li><a href = "https://i.pinimg.com/736x/5e/ea/dd/5eeaddd55770f2dd58639db26b2f2232--volleyball-funny-funny-football.jpg">Anti-Vaccination</a>
  <li><a href = "https://www.tfes.org/">Modern flat Earth beliefs</a>
  <li><a href = "https://xkcd.com/1732/">Climate change denial</a>  
  <li><a href = "https://en.wikipedia.org/wiki/Moon_landing_conspiracy_theories">Moon landing conspiracy theories </a>
  <li><a href = "https://en.wikipedia.org/wiki/Astrology">Astrology</a>
  <li><a href = "https://en.wikipedia.org/wiki/Free_energy_suppression">Free energy</a>
  <li><a href = "https://en.wikipedia.org/wiki/Acupuncture">Acupuncture</a>
  <li><a href = "https://en.wikipedia.org/wiki/Homeopathy">Homeopathy</a>
  <li><a href = "https://en.wikipedia.org/wiki/Oil_pulling">Oil pulling</a>
  <li><a href = "https://en.wikipedia.org/wiki/Conversion_therapy">Conversion therapy </a>
  <li><a href = "https://en.wikipedia.org/wiki/Myers%E2%80%93Briggs_Type_Indicator">Myers-Briggs Type Indicator</a>
  <li><a href = "https://en.wikipedia.org/wiki/Polygraph">Polygraphy</a>
  <li><a href = "https://en.wikipedia.org/wiki/Scientific_racism">Scientific racism</a>
  <li><a href = "https://en.wikipedia.org/wiki/Cryptozoology">Cryptozoology</a>
  <li><a href = "https://en.wikipedia.org/wiki/Ghost_hunting">Ghost hunting</a>
  <li><a href = "https://en.wikipedia.org/wiki/Quantum_mysticism">Quantum mysticism</a>
  <li><a href = "https://en.wikipedia.org/wiki/List_of_topics_characterized_as_pseudoscience">the full list</a>
      
  <h1 class="underlined">Keep an open mind</h1>
      <p>Keep in mind pseudoscience is a fuzzy term that not everyone agrees on. Some pseudosciences aren’t that harmful. Others, like climate change denial are pretty dangerous. Identifying pseudosciences isn't a <em>science</em>...</p>
    
<!--     <p>As <a href = "https://www.youtube.com/channel/UCEOXxzW2vU0P-0THehuIIeg">Captain Disillusion</a> says:  “Love with your heart. Use your head for everything else.”</p> -->

    <br>
    <p>“You know what they call alternative medicine that's been proved to work? ... Medicine.” <em>― Tim Minchin</em>
    </p>    
</article>
            
          
!
            
              /************Reset**************/

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body,
div,
object,
iframe,
fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

header,
footer,
nav,
section,
article,
hgroup,
figure {
  display: block;
}

legend {
  display: none;
}

svg:not(:root) {
  overflow: hidden;
}


/************End Reset**************/


/*global elements______________*/

body {
  font-family: "Arial", sans-serif;
  font-size: 110%;
  background-color: #fff;
/*   background-color: #d0f4f8; */
  color: #222;
  margin: 0;
/*   padding: 0em 1em 2em 1em; */
}

article {
/*   background-color: #fff; */
/*   border-radius: 20px; */
/*   padding: 1.0em; */
  margin: 0 auto;
  max-width: 600px;
  line-height: 1.6;
}
header {
  margin: 0 auto;
  max-width: 750px;
}

a {
  text-decoration: none;
  color: #f16;
}

a:hover {
  text-decoration: underline;
}

hr {
  border: 0;
  border-bottom: 3px solid #222;
}

h1,
h2,
h3 {
  font-weight: 400;
}

::selection {
  color: white;
  background: #f16;
}

canvas {
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
}

table {
  margin: 25px auto;
  border-collapse: collapse;
  border: 1px solid #eee;
  /*border-bottom: 2px solid #222;*/
  width: 100%;
}
table tr:hover {
  background: #f4f4f4;
}
table tr:hover td {
  color: #555;
}
table th, table td {
  color: #777;
  border: 1px solid #eee;
  padding: 12px 20px;
  border-collapse: collapse;
}
table th {
  background: #444;
  color: #fff;
  text-transform: uppercase;
  font-size: 0.85em;
}
table th.last {
  border-right: none;
}


/*classes_______________________*/

.underlined {
  /*   font-family: "Arial Black", Gadget, sans-serif; */
  border-bottom: 3px solid #222;
  font-size: 210%;
  /*   letter-spacing: 0.2em; */
  /*   text-align: center; */
}

.center{
  text-align: center;
}

.task,
.info,
.project,
.quiz {
  background-color: #fff;
  padding: 0em 1em 0em 1em;
  border-radius: 10px;
  margin: 0em 0em 1em 0em;
  border: 1px solid #bbb;
  
}

@media screen and (max-width: 600px) {
  .task,
  .info,
  .project,
  .quiz {
    padding: 0em 0em 2em 0em;
  }
  article {
    padding: 0.5em;
  }
}

#titlemain {
  font-size: 400%;
  font-weight: 600;
  text-align: center;
  letter-spacing: -0.1em;
  margin: 0em 0em 0em 0em;
}
.title2 {
/*   color: #ddd; */
  text-align: center;
  font-size: 140%;
/*   letter-spacing: 0.2em; */
  margin: -0.5em 0em 0.5em 0em;
}

.shadow{
  text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.3);
}
.listoflinks {
  line-height: 2;
}


/* navigation bar____________________________ */

.navigation {
/*   background-color: #f7f7f7; */
  margin: 0em -1em;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.navigation li a {
  font-weight: bold;
  display: block;
  padding: 0;
  margin: 1em;
  font-size: 1em;
/*   letter-spacing: 0.2em; */
}

.navigation li a:hover {
  text-decoration: none;
}


/*the element for underlines on the navbar  */

.border {
  position: relative;
}

.border:hover::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 0;
  left: 0;
  bottom: -5px;
  /*Change this to increase/decrease distance*/
  border-bottom: 5px solid #f16;
}


.draw-lines {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: dash 5s ease-in forwards;
/*   animation: dash 4s ease-in alternate infinite; */
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
            
          
!
            
              // var canvas = document.getElementById("myCanvas");
// var ctx = canvas.getContext("2d");
// (function canvasSetup(){
//   ctx.canvas.width = window.innerWidth;
//   ctx.canvas.height = window.innerHeight;
//   ctx.globalCompositeOperation = 'lighter';
// })();
// window.onresize = function() {
//   canvasSetup();
// };

// var addStar = 0;
// var stars = [];
// var totalStars = 0; // spawns stars at start
// var mousePos = {
//   x: canvas.width * 0.5,
//   y: canvas.height * 0.5
// };
// var friction = 0.996

// //adds a new star objects to array stars
// function pushStar() {
//   stars.push({
//     x: mousePos.x + 20 * (Math.random() - 0.5),
//     y: mousePos.y + 20 * (Math.random() - 0.5),
//     Vx: 0,
//     Vy: 0,
//     r: 35 * Math.random() + 3,  //random size
//     color: '#' + Math.floor(Math.random() * 16777216).toString(16) //random hexadecimal color
//   });
// }
// //spawns stars
// for (var i = 0; i < totalStars; i++) {
//   pushStar();
// }
// //push away if mouse down
// document.addEventListener("mousedown", function() {
//   addStar = 1;
//   for (var i = 0; i < stars.length; i++) {
//     stars[i].Vx += 3 * Math.cos(Math.atan2(stars[i].y - mousePos.y, stars[i].x - mousePos.x));
//     stars[i].Vy += 3 * Math.sin(Math.atan2(stars[i].y - mousePos.y, stars[i].x - mousePos.x));
//   }
// });

// // waits for mouse move and then updates position
// document.addEventListener('mousemove', function(evt) {
//   mousePos = {
//     x: evt.clientX,
//     y: evt.clientY
//   };
// }, false);

// //recursive draw function
// function draw() {
//   ctx.clearRect(0, 0, canvas.width, canvas.height);
//   for (var i = 0; i < stars.length; i++) {
//     //draw a circle
//     ctx.beginPath();
//     ctx.arc(stars[i].x, stars[i].y, stars[i].r, 0, 2 * Math.PI, true);
//     ctx.fillStyle = stars[i].color;
//     ctx.fill();
//     //bounce off walls
//     if (stars[i].x > canvas.width - stars[i].r) {
//       stars[i].Vx *= -friction;
//       stars[i].x = canvas.width - stars[i].r;
//     } else if (stars[i].x < stars[i].r) {
//       stars[i].Vx *= -friction;
//       stars[i].x = stars[i].r;
//     }
//     if (stars[i].y > canvas.height - stars[i].r) {
//       stars[i].Vy *= -friction;
//       stars[i].y = canvas.height - stars[i].r;
//     } else if (stars[i].y < stars[i].r) {
//       stars[i].Vy *= -friction;
//       stars[i].y = stars[i].r;
//     }
//     // attraction to the mouse
//     stars[i].Vx += -0.03 * Math.cos(Math.atan2(stars[i].y - mousePos.y, stars[i].x - mousePos.x));
//     stars[i].Vy += -0.03 * Math.sin(Math.atan2(stars[i].y - mousePos.y, stars[i].x - mousePos.x));
//     //change position, velocity, size of object elements for each location in array
//     stars[i].x += stars[i].Vx;
//     stars[i].y += stars[i].Vy;
//     //friction slows velocity
//     stars[i].Vx *= friction;
//     stars[i].Vy *= friction;
//   }
//   if (addStar == 1) {
//     pushStar();
//     addStar = 0;
//   } else if (addStar == -1) {
//     stars = [];
//   }
//   requestAnimationFrame(draw);
// }
// requestAnimationFrame(draw);
            
          
!
999px
Loading ..................

Console