123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Drug Abuse </title>
  </head>
<body>
	

		<div id="home">
		
				<!-- NAVIGATION -->
				<nav role="navigation">
					<ul class="vertical-list">
						<li><a href="#home">Home</a></li>
						<li><a href="#OURMISSION">OUR MISSION</a></li>
						<li><a href="#SOLUTIONS">Solutions</a></li>
						<li><a href="#AboutUs" > About us</a></li>
					</ul>
				</nav>
				<!-- END OF NAVIGATION -->

				<!-- Home Page -->
				<div id="container home">

			 <div class="container">
    	<!-- TITLE --> <h1>Live Without the Drug Abuse <br/> “Drug Abuse? No Excuse!”</h1>
    

 
   
   <div>    
       	<!-- Pictures -->
       <img
src="http://blogs.voanews.com/durand/files/2014/06/opium-pic.jpg"
alt="no drug in afganistan" style="width:250px;height450px;">
     <img
src="https://drugaddictionresults.files.wordpress.com/2014/03/drugaddiction.jpg"
alt="no drug with kids" style="width:250px;height600px;">
   <img
src="https://www.globaldrugsurvey.com/wp-content/uploads/2015/06/medical-treatment-percentage.jpg"
alt="statstic" style="width:250px;height350px;">
      <img
src="http://big.assets.huffingtonpost.com/drugalcdeaths.gif"
alt="statstic" style="width:250px;height350px;">
         </div>  
         
   
   
     <div>       
    <div class="photos">
	<img src="http://media.gettyimages.com/videos/drug-user-shooting-heroin-video-id151366565?s=640x640" />
	<img src="http://il4.picdn.net/shutterstock/videos/9717299/thumb/1.jpg?i10c=img.resize(height:160)" />
	<img src="http://il5.picdn.net/shutterstock/videos/6556361/thumb/1.jpg?i10c=img.resize(height:160)" />
	<img src="https://gmbakash.files.wordpress.com/2012/08/drug-users-9.jpg?w=774&h=520" />
	<img src="http://cdn.c.photoshelter.com/img-get2/I0000gwqO0bq7qWM/fit=1000x750/FIL5774.jpg" />
	<img src="http://www.dailystormer.com/wp-content/uploads/2014/04/Afghan-drug-addicts-smoke-heroin-on-a-street-in-Jalalabad-on-February-7-2014..jpg" />
</div>
	<!-- Mission Statement -->
       <h2 > <br>  Mission Statement </br> </h2> 
   <p >  <b>	Our mission is to make sure that drugs are the last problem that our world should face. We want to inform people about the drug world and the dangers that come with it.  With that we will try to get the federal government to look over the classification system because there are drugs in the wrong class and the more dangerous drugs are not given the right punishments. While the government is looking over the classification system we will be offering them different places to go to to get the help they need to get off their addiction .     </b></p>  ;
       	<!-- Signature -->
         <span class="signature"> AditiDam, RevAronov,
          TesfamariamGetahun</span>  
     
       
   <div class="container-fluid">
 	<!-- Statistics -->
     <h3> Statistics </h3>
  <div class="row">
    <div class="col-sm-4  col-md-4 col-xs-4 col-lg-4" style="background-color:#AFEEEE  ;">
      <p>According to the National Survey on Drug Use and Health (NSDUH), approximately 27 million Americans, which is rougly 10.2% of the American population over the age of 12 reported using illicit drugs in 2014. <br> <b>The Global Impact:</b> </br> </p>
       <img
src="https://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2009/6/24/1245863161392/World-drugs-report-graphi-001.jpg"
alt=" World Drug Use" style="width:200px;height200px;">
      
    </div>
     <h4> How Drugs Affect Us </h4>
    <div class="col-sm-4  col-md-4 col-xs-4 col-lg-4" style="background-color:#AFEEEE  ;">
      <p> Marijuana:
   increased heart rate,
  blood shot eyes,
 dry mouth and throat,
appetite increases,and
 impair short term memory
       <br> Cocaine: increased heart rate and breathing,
Increased blood pressure,decreased appetite,
dizziness, 
swelling,
blurred vision,
anxiety,
moodiness,
irregular heartbeat,
high fever,and
heart failure
        
        
        
        
      </br>
 Heroin:
Euphoria, drowsiness, nausea, vomiting, constricted pupils, watery eye, itching, slow breathing, clammy skin, convulsions, coma,and death
</p>
    </div>
        <h5> Personal Stories </h5>
    <div class="col-sm-4  col-md-4 col-xs-4 col-lg-4" style="background-color:#AFEEEE  ;">
      <a href="http://www.couragetospeak.org/aboutus/couragetospeakstories.aspx  "</a>
      <p> http://www.couragetospeak.org/aboutus/<br>couragetospeakstories.aspx</br> </p>  

         <a href="https://easyread.drugabuse.gov/content/heroin-addiction-i-needed-drug-just-get "</a>
      <p> http:https://easyread.drugabuse.gov/<br>content/heroin-addiction-i-needed-drug-just-get</br></p>  


    <a href="http://www.massmed.org/Physician_Health_Services/Helping_Yourself_and_Others/A_Personal_Story_of_Addiction/#.WITVSflViko
       "</a>
      <p> <br>http://www.massmed.org/Physician_Health_</br><br>Services/Helping_Yourself_and_Others</br>s/A_Personal_Story_of_Addiction/#.WITVSflViko </br></p>  

 <a href="
http://medicineabuseproject.org/stories/nobody-knew-how-bad-johns-addiction-was-until-it-was-too-late  "</a>
      <p>
http://medicineabuseproject.org/stories/<br>nobody-knew-how-bad-johns-addiction-was-until-it-was-too-late</br>  </p>  </a>


    </div>
      </div>
    
      <div>
 
      <p>Learn More About Individual Continents</p>

<button onclick="asiaFunction()">Asia</button>

<div id="Asia">
<p>As of late a few nations in Asia have revealed an expansion in Polydrug use among their more youthful populace. ... Voyagers, principally from the Western Hemisphere, have come to Asia to buy and expend such medications as opium, Cannabis, heroin, and enchantment mushrooms. </p>
  
     <img
src="http://www.chiangraitimes.com/wp-content/uploads/2014/01/70567.jpg"
alt="statstic" style="width:250px;height350px;">
  
</div>

      
 <div>

<script>
function asiaFunction() {
    var x = document.getElementById('Asia');
    if (x.style.display == 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>
        </div> 

      <button onclick="europeFunction()">Europe</button>

<div id="Europe">
<p> A large portion of the passings among medication clients are because of HIV, overdose, suicide and injury. 

In the European Region, illegal medication utilize was in charge of 2.4 million life-years lost because of incapacity and mortality in 2004. Unlawful medication utilize along these lines positions as the ninth most essential reason for inability balanced life-years (DALYs) lost. 

In eastern Europe, 70–90% surprisingly getting HIV disease are individuals who infuse drugs and, in the European Region overall, infusing drug utilize prompts to most new instances of hepatitis C. 

In 2004, 45 000 passings because of illegal medications were recorded in the European Region and 2.4 million DALYs were lost in light of inability and mortality.  </p>
  
  
  <img
src=" https://ichef-1.bbci.co.uk/news/624/media/images/68390000/gif/_68390629_europe_2drugs464x426.gif""
alt="statstic" style="width:250px;height350px;">
  
</div>


<div>
<script>
function europeFunction() {
    var x = document.getElementById('Europe');
    if (x.style.display == 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>
                                               
                                               
      
            <button onclick="northamericaFunction()">North America </button>

<div id="North America">
<p> Illegal medication use in the United States has been increasing.In 2013, an expected 24.6 million Americans matured 12 or more seasoned—9.4 percent of the populace—had utilized an unlawful medication in the previous month. This number is up from 8.3 percent in 2002. The expansion for the most part mirrors a late ascent being used of weed, the most generally utilized unlawful medication. Utilization of most medications other than weed has balanced out over the previous decade or has declined. In 2013, 6.5 million Americans matured 12 or more established (or 2.5 percent) had utilized physician recommended drugs non medicinally in the previous month. Physician recommended drugs incorporate torment relievers, sedatives, stimulants, and narcotics. What's more, 1.3 million Americans (0.5 percent) had utilized psychedelic drugs (a class that incorporates happiness and LSD) in the previous month.</p>
                        <img
src="https://i.dailymail.co.uk/i/pix/2015/11/30/06/2EEBB78100000578-3338976-This_graphic_drawn_up_by_the_DEA_shows_where_El_Chapo_s_criminal-a-60_1448864187993.jpg"
alt="statstic" style="width:250px;height350px;">
  
</div>



<script>
function northamericaFunction() {
    var x = document.getElementById('North America');
    if (x.style.display == 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>
      <div> 
      
            <button onclick="southamericaFunction()">South America </button>

<div id="South America">
<p>Argentina, Chile and Uruguay utilize the most unlawful substances among six South America countries studied in 2008. A similar review noticed that pot stood out in medication manhandle with 4.8 percent of the review populace matured 15 to 64 — 2.1 million individuals — utilizing cannabis that year, trailed by cocaine at 1.4 percent.</p>
       <img
src=" https://qph.ec.quoracdn.net/main-qimg-6e54acd40f0714006bbaa9c3d5637409-c?convert_to_webp=true"
alt="statstic" style="width:250px;height350px;"> 
     
</div>

<p> </p>

<script>
function southamericaFunction() {
    var x = document.getElementById('South America');
    if (x.style.display == 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>
      
            <button onclick="oceaniaFunction()">Oceania </button>

<div id="Oceania">
Oceania is a colossally differing locale that is home to 34 million individuals, with more than 1,200 dialects and tongues. While Australia and New Zealand are profoundly created countries, numerous PICT are confronted with significant difficulties identifying with destitution, political insecurity, and poor administration and specialized limit. Moreover, their nearness to real medication delivering nations in East Asia and appeal purchaser nations (i.e. Australia and New Zealand) inside the locale makes an auspicious setting for medication trafficking courses.
</div>

<p> </p>

<script>
function oceaniaFunction() {
    var x = document.getElementById('Oceania');
    if (x.style.display == 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>
      
      
      
            <button onclick="africaFunction()">Africa </button>

<div id="Africa">
The UNODC reports an expansion in heroin seizures at Kenyan ports from 2012 to the finish of 2014, a seizure of 2.2tn of cocaine in Cabo Verde in 2013 and the producing of new associations between South American and African medication traffickers in endeavors to take care of demand in Europe and North America. 

Only a couple of years back, Guinea-Bissau was being called 'the world's first narco-state'. South American merchants flew in planeloads of cocaine and speedboats arrived on this little nation's 400-mile coastline with the intrigue of the nation's administration. 

Many coups resulted, not for influence or some concealed law based longing but rather to control the medication cash rolling in from over the Atlantic. 

In 2013, Guinea-Bissau's previous naval force boss José Américo Bubo Na Tchuto was captured in a sting operation by the United States Drug Enforcement Agency. 

However, one capture of a major fish must be weighed against the a great many break addicts left in Bissau's lanes. 

Last time anyone checked, Bissau had one recovery community for a great many addicts. 

In the interim, there is no recognizable African Union strategy on the medication emergency. 

The South African government's "outline for anticipating and lessening liquor and substance manhandle", its National Drug Master Plan, is maybe the most thorough medications approach on the landmass. 

In any case, as with the onset of the AIDS pandemic, families influenced by medication enslavement are in profound disavowal and disgrace proliferates crosswise over class, race and culture. 

The nerve racking stories of tik habit leaving the Western Cape demonstrate that the medication does not separate: youthful, old, proficient and incompetent – all have been influenced. 

Make a beeline for Soweto or Eldorado Park in Johannesburg, and a medication known as nyaope – a possibly deadly blend of reefer and anything from rodent toxin to hostile to retroviral drugs – is on the scene. 

There are presently seven state-run treatment focuses to administration South Africa's three noteworthy urban communities, all woefully underfunded and needing proficient staff. 

The grass is greener in the private segment, which gloats 48 recovery focuses enrolled with South Africa's social improvement service and more than 70 outpatient focuses.
</div>

                                                                                                 

<script>
function africaFunction() {
    var x = document.getElementById('Africa');
    if (x.style.display == 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>
      
 <div class="container-fluid">
<h6> Solutions For Drug Abuse </h6>   
  <div class="row">
    <div class="col-sm-6  col-md-6 col-xs-6 col-lg-6" style="background-color:#FFDAB9   ;"> 
       <p>

<br>- Starting Petitions to reform classifications based on medicinal value and potential for addiction. The more dangerous the drug, the higher the regulated price and the harder to obtain. <br /> 
<br>- Reform drug treatment programs and discourage addiction<br />
<br>- Make the general public aware of the consequences of drugs<br />
<br>- Reducing the Demand Methods of reducing drug demand include: random drug testing; increased incarceration of users; and drug education.<br />
  </div>
       
    <div class="col-sm-6  col-md-6 col-xs-6 col-lg-6" style="background-color:#FFDAB9  ;">
<br>-  Reducing the Supply
Methods of reducing drug supply include: increased border patrols; increased enforcement against drug traffickers at home; and pressuring Latin American countries to do the same abroad. Federal ‘counterdrug interdiction’ currently focuses on five ‘High Intensity Drug Trafficking Areas’: Los Angeles, New York City, Miami, Houston, and the Southwest border with Mexico.<br />
<br>- Reducing the Effects
Methods of reducing drugs’ effects on society include: legalization; drug abuse treatment, rehab, and needle exchange programs. All of these methods will steer the addiction <br /> 
    </p> 
   </div> 
   
  
 <h7> Great Locations </h7> 
  <a href="http://www.phoenixhouse.org/"</a>
      <p> http://www.phoenixhouse.org/ </p>
    
     <a href="http://www.acacianetwork.org/ "</a>
      <p> http://www.acacianetwork.org/ </p>
    
     <a href="http://addictsrehabcenterfund.org/"</a>
      <p> http://addictsrehabcenterfund.org/</p>
    
     <a href="http://www.parallaxcenter.com/ "</a>
      <p> http://www.parallaxcenter.com/  </p>
    
     <a href="http://sunrisehouse.com/ "</a>
      <p> http://sunrisehouse.com/   </p>
    
     <a href="http://brooklynteenchallenge.org/index.html  "</a>
      <p> http://brooklynteenchallenge.org/index.html   </p>

 <h8> Get Motivated Here</h8> 
  <a href="https://www.iheart.com/show/53-The-Addictive-Podcast-Drugs/ ">
                                                                        <p> https://www.iheart.com/show/53-The-Addictive-Podcast-Drugs/   </p> </a>
  
  <div> 
    

     </div>

      <h9> About Us </h9>	
     <p> We are a non-profit organization. We are known as the DAA (Drug Abuse Awareness). We promote and encourage additional education about drugs and the consequences that come with them. 
 </p>
     
     
 <h10> Contact Us </h10>	
<a href="https://www.instagram.com/nomoredrugabuse/?hl=en"><img src="http://3835642c2693476aa717-d4b78efce91b9730bcca725cf9bb0b37.r51.cf1.rackcdn.com/Instagram_App_Large_May2016_200.png"style="width:50px;height:50px;"></a>
      
<a href="https://www.facebook.com/home.php?ref=wizard "><img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-512.png"style="width:50px;height:50px;"></a>
      
<a href="https://twitter.com/?request_context=signup  "><img src="https://www.ferryboatinn.co.uk/images/Rollover%20images/twitter%20symbol.jpg"style="width:50px;height:50px;"></a> 
    
    <a href="https://www.blogger.com/blogger.g?blogID=5812734017231743448#editor/target=post;postID=1000253351654391261;onPublishedMenu=allposts;onClosedMenu=allposts;postNum=0;src=postname">
   <img class="social-icon" src="http://i0.wp.com/eventandconference.co.uk/wp-content/uploads/2011/09/blog-icon-200.png?w=50"></a>
   </ul>

    
    
    	<br>
        	<a href="#top">Back to top »</a>
        	<p>© 2017.</p>
  	</footer>



</body>
</html>


            
          
!
            
              * {
	padding: 0;
	margin: 0;
   background-image: 
}

body {
	font-family: 'Helvetica', sans-serif;
	font-size: 20px;
 
  background-size: 100%;
  background-image:url('http://i2.cdn.cnn.com/cnnnext/dam/assets/161017153320-dea-schedule-1-drugs-heroin-super-169.jpg');
    background-repeat:no-repeat;
    background-position:topcenter; 
  
}
}

li {
	list-style: none;
}

a {
	color: black;
}


h1 {
  font-family: Times new roman;
	color: #B22222 ;
	text-align: center;
	margin-top: 4%;
	font-size: 412.5%;
  font-weight: bold;

}


h2 {
  font-family:Caudex;
  font-size: 245%;
	margin-top: 180px;
  text-align: center;
  color: #B22222;
  font-weight: bold;
}

h3 {
	font-weight: bold;
font-size: 200%;
  color: #B22222;
 
}

h4 {
  font-weight: bold;
	font-size: 200%;
  	color: #B22222;
}

h5 {
  font-weight: bold;
  font-size: 200%;
	color: #B22222;
}

h6{
   font-weight: bold;
  font-size: 200%;
	color: #B22222;
  text-align: center;
}

h7{

   font-weight: bold;
  font-size: 200%;
	color: #B22222;

 
}

h8 {  font-weight: bold;
  font-size: 200%;
	color: #B22222;
}

h9 {  font-weight: bold;
  font-size: 200%;
	color: #B22222;
 }

.signature {
	font-size: 230%;
	font-family: 'Brush Script MT', cursive;
	width: 200px;
	margin-left: -20px;
}


.vertical-list li {
	float: left;
}
.footer
font-size:0.75em;
text-align: center;
clear:both;
padding-top: 10px;
color: black

.id {
	background-image: url('http://healthcultureandsociety2013.wikispaces.com/file/view/art-drugs-generic-620x349.jpg/465517064/art-drugs-generic-620x349.jpg');
	width: 60%;
	background-size: cover;
}



#home nav {
	margin: 0 auto;
	width: 700px;
	padding-top: 80px;
}

#home nav ul {
	overflow: hidden;
}

#home nav ul li {
	width: 25%;
}

#home nav a {
	padding: 16px;
	padding-right: 30px;
	display: table-cell;
}

#home nav.fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: white;
	z-index: 999;
	padding: 0;
	transition: background-color .8s;
	
}

#home nav.fixed ul {
	width: 700px;
	margin: 0 auto;
}



}






#about .signature {
	font-family: 'Brush Script MT', cursive;
	font-size: 150%;
	float: right;
	color: #0d2435;
	opacity: .9;
}



.photos {margin: 0 auto; position: relative; width: 50%; min-width: 1000px;}

.photos img {
 position: center;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
	padding: 10px 10px 30px 10px;
	background: white;
	border: solid 1px #ccc;
	width: 25%;
}

.photos img:nth-of-type(1) {
	left: 50px;
	top: 50px;
}
 
.photos img:nth-of-type(2) {
	left: 150px;
	top: 100px;
}
 
.photos img:nth-of-type(3) {
	left: 250px;
	top: 50px;
}
 
.photos img:nth-of-type(4) {
	left: 350px;
	top: 150px;
}
 
.photos img:nth-of-type(5) {
	left: 450px;
	top: 50px;
}

.photos img:nth-of-type(1) {
	left: 50px;
	top: 50px;
	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	-o-transform: rotate(5deg);
	transform: rotate(5deg);
}
 
.photos img:nth-of-type(2) {
	left: 150px;
	top: 100px;
	-webkit-transform: d(-10deg);
	-moz-transform: rotate(-10deg);
	-o-transform: rotate(-10deg);
	transform: rotate(-10deg);
}
 
.photos img:nth-of-type(3) {
	left: 250px;
	top: 50px;
	-webkit-transform: rotate(7deg);
	-moz-transform: rotate(7deg);
	-o-transform: rotate(7deg);
	transform: rotate(7deg);
}
 
.photos img:nth-of-type(4) {
	left: 350px;
	top: 150px;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	transform: rotate(-3deg);
}
 
.photos img:nth-of-type(5) {
	left: 450px;
	top: 50px;
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-o-transform: rotate(2deg);
	transform: rotate(2deg);
}

.photos img:hover {
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	transform: scale(1.5);
	z-index: 10;
}

.photos img:hover {
	-webkit-transform: rotate(380deg) scale(1.5);
	-moz-transform: rotate(380deg) scale(1.5);
	-o-transform: rotate(380deg) scale(1.5);
	transform: rotate(380deg) scale(1.5);
	z-index: 10;
}

.photos img {
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}










            
          
!
            
              $(document).ready(function(){

	$("nav a").on("click", function(event){
		event.preventDefault();
		$("nav").addClass("fixed");
		id = ($(this).attr("href"));
		scrollVertical = $(id).offset().top;

		$("body, html").animate({scrollTop: scrollVertical});
	});

	$(document).on("scroll", function(){
		secondPage = $("nav li:nth-child(2) a").attr("href");

		if ( $("body").scrollTop() >= $("nav").height() )
		{
			$("nav").addClass("fixed");
		} else {
			$("nav").removeClass("fixed");
      
      
      
		}
	});

});

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console