Add files via upload

Author: bmk777

README.md

@@ -0,0 +1,44 @@
+# Electrate Fuego
+
+Abstract: This repository will allow the user to mix and match div. blocks to build a quick website similar to an Adobe Spark. https://spark.adobe.com, but with an electrate twist...
+
+Hello, maker! Welcome to my Electrate Fuego web design tutorial. I'm glad you found it – for this might be a real intersection on your way to becoming. I (S.J. Quigley) use this document in my Technical Communications classes at the University of Pittsburgh to teach my students a little bit about computer science and something called "electracy." Just follow along with comments like this one, and you'll make a really cool web documemt that not only introduces you to the other people in our classes, but will help you process how different discourse communities in your life have contributed to your arrival in this space, virtual and actual, and also contribute to where you might be going. 
+
+In this doc, you will work through Gregory Ulmer's discourses of career, family, entertainment, community, and schooling (_Internet Invention From Literacy to Electracy_, 2002.) In Ulmer's text, he elides community and schooling into one category, but for our puposes I have separated them. Ulmer's theory of electracy helps makes sense of how we find/construct meaning and connect with others rhetorically in a media rich ecology. Ulmer uses analogy to define electracy, explaining that "electracy is to digital media what literacy is to print." 
+
+You could make this document the easy way--like I once did by using a program called Adobe Spark: https://spark.adobe.com/page/umUY5ROHgANCl/, or you can do a little more work to unconceal, opening up these tools that you use every day, but might not know how they function, yet prove so necessary to how you (re)present yourself and connect with others in virtual spaces. And this last bit is an important point! If we really want to be makers, if we really want to be creative, then we need to understand what our digital tools do, how they work, and consider the implications of their use. Through this process you will alos learn a little bit about computer literacy and computer science. Enough to allow you to build web texts and understand file management. 
+
+So let's cut this thing open – using "tmesis" as the Ancient Greeks would call it – lets "cut" and arrange, tweak, take away and augment...that's how we create! I hope you're excited to use this tool to create a document that will simultaneously help you process your journey and help orient you along the path on which you are headed in your becoming. Before we get going I would like to give a shout-out to my research buddy Shauna Chung, who helped me develop the original Ulmerian framework we will be following in this document. Are you ready to get started?--> 
+    
+    
+## Get started!
+
+Video: : https://sjquigley.github.io/Steve-Electrate-Fuego/
+
+Sample: https://sjquigley.github.io/Steve-Electrate-Fuego/
+
+
+1. Create a GitHub account. 
+
+2. Go to repository Electrate Fuego repository: https://github.com/sjquigley/Electrate-Fuego 
+
+3. Click "Code": Download ZIP to local computer. 
+
+4. Download and/or open a text editor like [brackets.io](https://brackets.io), [atom.io](https://atom.io), or [notepad-plus-plus.org](notepad-plus-plus.org). 
+
+5. Open the index file from the downloaded files using brackets.
+
+6. Add/replace/test content. 
+
+7. Return to GitHub. Click: Create New Repository called "Your Name"
+
+8. Upload/commit changes to your repository called "Your Name". 
+
+9. Go to repository settings, change Github pages to "publish master branch."  
+
+10. This will provide you with a published GitHub URL. 
+
+
+
+
+

feet.jpg

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [2020] [Stephen J. Quigley]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

feet2.jpg

@@ -0,0 +1,133 @@
+body, html {
+  height: 100%;
+  margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.hero-image {
+  /* This is your "hero image" or "wide image." You will need to change feet.jpg to match your asset*/
+  
+background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("feet.jpg");
+  height: 100%;
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  position: relative;      
+}
+
+/* Places text in the middle of the image */
+
+.hero-text {
+  text-align: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  font-size: 250%;
+
+
+}
+
+.hero-text h2 {   /* This section adds the text stylings for your hero block */
+  display: block;
+    font-size: 0.67em;
+    margin-block-start: 2.33em;
+    margin-block-end: 2.33em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: bold;
+}
+
+/* This code controls that cool parallax image and scrolling effect. Change the image "feet4.jpg" below to match your asset.*/
+/*You can always add more parllax assets on your web document, just follow the directions at the bottom of the index.html.*/
+.parallax-1 { 
+  background-image: url("feet4.jpg");
+
+  /* Set a specific height */
+  height: 500px; 
+
+  /* control the parallax scrolling effect */
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+
+/* This section of css. helps organize images to position and center the image to scale nicely on all screens */
+
+.center-small-image {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 50%;
+}
+    
+.center-large-image {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+}
+
+
+/*this css. element centers text elements*/
+
+.centertext {
+  text-align: center;
+    
+}
+
+/* This css. section controls the paragraph chunks*/
+
+.par-centertext {
+  margin: auto;
+  width: 50%;
+  padding: 100px;
+    font-size: 125%; 
+
+}
+
+
+/*The following .css is responsible for your photo grid .row, .column, .column img and @ media all work together to create your responsive image displays. Change the images on index.html. Remember, the images need to be in your project file folder */
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 4px;
+    justify-content: center;
+}
+
+/* Create 3 equal columns that sit next to each other */
+.column {
+  flex: 25%;
+  max-width: 25%;
+  padding: 0 4px;
+}
+
+.column img {
+  margin-top: 8px;
+  vertical-align: middle;
+  width: 100%;
+}
+
+/* Responsive layout - makes a one column-layout instead of two or three columns */
+@media screen and (max-width: 800px) {
+  .column {
+    flex: 50%;
+    max-width: 50%;
+}
+
+
+
+
+
+    
+
+
+    
+
+
+