Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html>

<head>
    <meta charset="utf-8">

   <title>Art As Experience</title>
  </head>
  <body>



<div class="container-fluid">
<!--Container starts here-->

    <div class="navbar">

<!--navabar starts here-->
      <ul>
        <li><a href="https://www.freecodecamp.org/llabrie" target="_blank">freeCodeCampProfile</a></li>

      </ul>
</div>

<!--navbar ends here-->
  <div class="main">
<!--main starts here-->
  <!--heading-->
    
  <h1 id="title">Tell A Story</h1>
<div class="hero" style="width:image width px; font-size:100%; text-align:center;">
<img src="https://i.guim.co.uk/img/media/a133dc71f004cbaa77c4f1e531224e2a8d9ec5ce/0_44_5616_3370/master/5616.jpg?width=1920&quality=85&auto=format&fit=max&s=49443744f13fc37cb21b3641920c34ee"/><i>LaVonne Bobongie</i></div>
<p id="description">Inspired by an article <em>IndigenousX Indigenous Australians</em> in the Guardian titled: <a href="https://www.theguardian.com/commentisfree/2018/sep/05/in-a-world-where-everyone-talks-and-no-one-listens-a-good-photo-can-make-us-stop" target="_blank"&quot;>IN A WORLD WHERE EVERYONE TALKS AND NO ONE LISTENS, A GOOD PHOTO CAN MAKE US STOP&quot;</a>.  LaVonne Bobongie, tells the story of her people who consist of the <a href="https://en.wikipedia.org/wiki/Olkola">Olkola</a> people on her dad's side as well as the people of South Sea Islands and Scottland.  Her mom is Fijian and Chinese.</p>
<p>Now, consider the meaning of the word: <a href="https://dictionary.cambridge.org/us/dictionary/english/indigenous"> INDIGENOUS </a>. For those of us living in the United States, we know the American Indians are indigenous. Below is a basic profile outlined under the tenets of those living in the US from gender to race. I start with this so as to get the wheels turning on how it influences your social and artistic experience. This is not a requirement of this survey as it is sensitive to the *GDPR requirements. Name, age and email are the only requirements to code for the freecodecamp web design project in this section.</p>
</div>
<div class="artist-profile">
  <!--survey-form here-->

  <form id="survey-form">
    <legend>Profile</legend>
    <div class="row">
  <div class="label">
    <!--label class-->
    <label id="name-label" >* Name: </label>
    <div class="rightTab"><input autofocus  name="name" id="name"  placeholder="Enter your name here" required></></div></div></div>
    <div class="row">
    <!--label class-->
    <div class="label"><label id="email-label">* Email: </label><div class="rightTab"><input type="email" id="email" text="email" placeholder="Enter your email here"required></></div></div></div>
  
   <div class="row">   
      <div class="label"><label  id="number-label">* Age: (10-100):</label>
<div class="rightTab">
<input type="number" id="number"  name="years" placeholder="Age"
       min="10" max="100" required></div>
<div class="label"><label class="gender">Gender</label>
  <div class="rightTab">
  <select id="dropdown"> 
   <option value="none"></option>
  <option value="female">Female</option>
  <option value="male">Male</option>
  <option value="trans">Transgender</option>
  <option value="other">Other</option>
     </select>
 </div>
      </div></div>
  <fieldset>
    <legend>Race</legend><input type="radio" value="1" name="radio-buttons">American Indian or Alaska</> <input type="radio" value="2" name="radio-buttons" >Native Asian</>
<input type="radio" value="3" name="radio-buttons">Black or African American</>
<input type="radio" value="4" name="radio-buttons">Native Hawaiian or Other Pacific Islander</>
 <input type="radio" value="5" name="radio-buttons">White</>
 
</fieldset>
  
   
<fieldset><legend>INTERESTS</legend>
 <input type="checkbox" value="Photography"><label for="Photography">Photography</label></input>
    <input type="checkbox" value="Education" ><label for="Art Education">Art Education</label></input>
<input type="checkbox" value="Social Awareness"><label for="Social Awareness">Social Awareness</label></input>
   
</fieldset> 

 <p>For additional comments enter below then click the Submit button: </p>

<textarea rows="4" cols="50"></textarea>
 
 <button id="submit">Submit</button>    
</form>

</div>   
    <!--end of artists profile-->
  


<!--Photography Challenge-->

<h2>The Challenge</h2>
<p class="challenge">The second part of the survey is to pass on the challenge LaVonne proposes: &quot;go and take photos of what you’re doing, of who you’re with. But more than that, take time to really pay attention.&quot;</p>
<h3>Upload Your Image</h3>
<input type="hidden" name="MAX_FILE_SIZE" value="4194304"/>
<input type="file"/> </div>

<h4>Write a short statement about your photo</h4>
<div class="inputText"><fieldset>Enter text here: <input type="text" size="100"name="word" onblur="this.value=''">
   <button id="submit">Submit</button> 
</fieldset>
  
<!--end of Challenge-->
</div>

 <!--Questions to attain awareness-->
  
  <h5>Three Questions to think about before you leave</h5>
 <p>The final part of the survey asks three questions pertaining to what you know about the Indigenous Native Americans of the United States as outlined in a short history test as provided by the <a href="http://www.nativepartnership.org/site/PageServer?pagename=swra_home"><strong>Southwest Reservation Aid</strong></a> <i>&quot;A program of Partnership With Native Americans&quot;</i>.</p>
<fieldset><legend>How 185 year old policies still affect Native American Indians Today</legend>
  <p>Question 1: Why did the United States government establish Indian reservations?</p> <p class="answer">Answer number 1: &quotBeginning in 1830 with the Indian Removal Act, the official policy of the United States was to forcibly remove Native Americans from their accestral lands and relocate us to far-away regions "reserved" for Indians. Cherokii and other tribes, this is often remembered as the "Trail of Tears." But it didn't end there. During the Navajo Long Walk beginning in 1863, thousands of Navajo were also removed from their homelands.&quot;</p><p>Question 2: How did the government decide where to locate the reservations?</p> <p class="answer">Answer number 2: &quotTypically, the govenment put reservations in areas it regarded as being unfit for white settlers - isolated and arid places unsuitable for agriculture and far from towns, transportation and the growing economy&quot;</p>
<p>Question 3: If I were to visit, what should I expect to see on an Indian reservation today?</p> <p class="answer">Answer number 3: &quotYou should see a proud people - strong in tradition and values - living in near third-world conditions. Poverty is extreme. Drive around the reservation and you'll see many people living in run down houses and trailers, many of which are without electricity, telephone, running water or a sewage system.&quot;</p> <p><strong>To See The Answers</strong><input type="button" value="Click"  class="quizShowHide" onclick="showAnsw();"></p></fieldset>



<a href="https://www.charitynavigator.org/index.cfm?bay=search.summary&orgid=6293">charity navigator</a>


</div>
<footer>
  <h5>&copy; Lori Labrie 2018</h5>
</footer>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  </body>
  </div>
</html>
              
            
!

CSS

              
                html, body {
  background-color: #f7f8f9;
  margin: 0 auto;
}
.container-fluid {
  background-color: #f0f0f0;
}
.navbar  {
    background-color: #263238;
    opacity: 0.5;
    margin-left: -15px;
    position: fixed;
    top: 0;
    width: 100%;
}

.navbar ul li {
   color: #f0f0f0;
   font-size: 1.2em;
   list-style: none;
}

.navbar ul li a {
  color: white;
  text-decoration: none;
}


.navbar a:hover {
  color: green;

}


/* unvisited link */
a:link {
    color: #FF3D00;
    font-weight: 800;
    text-decoration: none;
}

/* visited link */
a:visited {
    color: #ff6f00;
    font-weight: 800
}

/* mouse over link */
a:hover {
    color: #65cfed;
}

/* selected link */
a:active {
    color: #ff6f00;
}

.main {
  color: #263238;
  margin-top: 8%;
 padding: 12px;
}

h1 {
  text-align: center;
}

.hero img  {
   border: 10px solid #dee2e5;
   box-sizing: content-box;
   display: block;
   height: 200px;
   margin-left: auto;
   margin-right: auto;
   padding: 30px;
   width: 300px;
}


.artist_profile  {
  background-color: #ECEFF1;
  max-width:  75%;
 
}

form {
  margin: 22px;
}
p {
  margin: 22px;
}


fieldset  {
  border: 1px solid gray;
  padding: 1em;
  font-family:Arial;
  width: 100%;
  margin: 15px;
}


input placeholder {
  text-align: center
}

.label {
  display: inline-block;
  text-align: left;
  width: 90%;
  
  
}

input  {
  margin: 12px;
}



.rightTab  {
  display: inline-block;
  text-align: left;
  width: 50%;
  
}

input:invalid {
  border: 2px dashed orange;
}

input:valid {
  border: 2px solid black;
  
}



select {
  margin-right: 18%;
}

input[type="radio"] {
  margin-left: 15px;
}




.answer {
  visibility: hidden
}

h2, h3, h4, h5, .challenge, .inputText {
  margin: 20px;
}

input[type="file"] {
  margin: 12px;
}

button  {
  margin: 10px;
  height: 40px;
  border-radius: 20px;
  background-color: #a9d7d1;
  cursor: pointer;
 }



button:hover {
  background-color: lightgreen;
}

footer {
  background-color: #f0f0f0;
  text-align: center;
}

              
            
!

JS

              
                var $;

//show recipe of sandwich
function showAnsw() {
  "use strict";
  $(".answer")
    .css("visibility", "visible")
    .toggle();
}

              
            
!
999px

Console