HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Open Fuego</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<!--Looks like you're ready to get going on your webpage. Good luck. Let's remember a few basic things.
1. If you haven't worked through one of our Open Fuego introductory assignmnets (Electrate Fuego or I-Am-A-Project-In-Becoming), please do so. It will give you the basic skills you need to use this tool.
2. File Management. Keep your asset names simple and one word.
3. Make sure your asset names/file type match your code.
4. Describe all images for accesibility purposes.
5. Consult Mozilla Developer Network when our code is not working for you.
6. Control Z, Control Z, Control Z
7. Publish, share, spread the Fuego!-->
<!--BTW. You can leave these hidden HTML text fields be, or delete them. They are just road signs, absent from the larger design-->
<body>
<!-- Change Title and subtitle. Replace hero image on style.css page. -->
<div class="hero-image">
<div class="hero-text">
<h1>Title</h1>
<h2>Lorem Ipsum</h2>
</div>
</div>
<!--To build your Open Fuego, copy the code snippet (provided below) you need and paste it in the body section below HERE-->
<br>
<br>
<br>
<br>
<!--Welcome and good luck! -Open Fuego-->
<div class="textblock" style="text-align: left">
<h1>Welcome to Open Fuego!</h1>
<h2>This is just the beginning of what you'll create using the Open Fuego presentation tool. Open Fuego looks great whether on a mobile phone or on the large screen at your keynote. We've embedded all the tools you need in these html/css files. All you need to do is download the project code, open the html file using a text editor like Atom.io, and start coding. We recommend you start with one of our introductory tools like the <em>Electrate Fuego</em> or <em>I-AM-A-Project-In-Becoming.</em></h2> You can find all of our cool learning/template options <a href="https://open-fuego.github.io/Open-Fuego-Coding-Tools/">HERE</a>.
</div>
<br>
<br>
<br>
<br>
<div style="text-align: center">
<img src="fuego.jpg" alt="Open Fuego Flame" style="max-width:25%;max-height:25%;">
<h4>generated by <a href="https://open-fuego.github.io/Open-Fuego-Coding-Tools/">Open Fuego</a></h4>
<p><em>Why make a spark when you can light a fire?</em></p>
</div>
<br>
<br>
<br>
<br>
<!-->Add footer here-->
</body>
</html>
<!--Looking to add components? You've come to the right place. Copy and Paste Code Snippets
-------------------------------------------------------------------------------------------
***Add Text Block***
Instructions: Format textblock left, center, justify, right;
Format text: Italics:<em>Italics</em>; Bold:<b>Bold</b>; Link Website <a href="https://ex>HERE"</a>; Link Asset <a href=filename.pdf>HERE</a>; Line Breaks/Spaces: <br>;
Code:
<div class="textblock" style="text-align: left">
<h1>Header</h1>
<h2>We recommend using our mobile-ready H1 and H2 text sizing. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h2>
</div>
<br>
<br>
<br>
<br>
***Add Bulleted Points***
<div class=bulleted-points>
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
<div>
<br>
<br>
<br>
<br>
***Add an Image***
Instructions: Control image with height/width value.
*Centered Image (Any Size - adjust max width/height percentages)*
<div>
<img src="fuego.jpg" alt="describe the image HERE for accessibility purposes" class="center-image" style="max-width:30%; max-height:30%;">
</div>
<br>
<br>
<br>
<br>
*Full Width Image*
(Notice that images of 100% don't need .css class)
<div>
<img src="fuego.jpg" alt="describe the image HERE for accessibility purposes" style="width:100%;">
</div>
<br>
<br>
<br>
<br>
***Add a Photo Grid***
<div class="row">
<div class="column">
<img src="pgrid1.jpg" alt="describe the image HERE for accessibility purposes">
<img src="pgrid2.jpg" alt="describe the image HERE for accessibility purposes">
</div>
<div class="column">
<img src="pgrid3.jpg" alt="describe the image HERE for accessibility purposes">
<img src="pgrid4.jpg" alt="describe the image HERE for accessibility purposes">
</div>
<div class="column">
<img src="pgrid5.jpg" alt="describe the image HERE for accessibility purposes">
<img src="pgrid6.jpg" alt="describe the image HERE for accessibility purposes">
</div>
</div>
<br>
<br>
<br>
<br>
***Add a Button Link***
<a href="https://open-fuego.github.io/Open-Fuego-Coding-Tools/"><center><button>CLICK HERE</button></center></a>
***Embed YouTube Video***
<div style="text-align: center">
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p>Describe your image HERE</p>
</div>
<br>
<br>
<br>
<br>
***Add a Copyright Footer***
<footer>
<div class="container">
<p>Copyright Your Name, Year.</p>
</div>
</footer>
***Need something that's not here?...visit Mozilla Developer Network***
-->
<!--Looking to publish this page in GitHub? Here are your next steps:
Sign in to GitHub. Create new repository. Name it. Click upload, and select/drag and drop all of your files...all of them, index.html. style.html, readme, and your image assets. Click "commit." Now go to your repository "settings." Scroll down to "GitHub Pages." Here you will change "source" from "none" to "master branch." This will publish your Open Fuego online. Find, copy your URL from this settings page...and now it's time to spread the fire! Open Fuego! Peace and love only, Stephen Quigley, University of Pittsburgh, 2020.
-->
CSS
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.hero-image {
/* - HERO -
This code controls your "hero image." You will need to change hero.jpg to match your asset*/
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("hero.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;
}
/* - PARALLAX -
This code controls that cool parallax image and scrolling effect. Change the image "fuego.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("fuego.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 code stops the parallax image and scrolling effect for small screens--at the moment, Iphones just don't it.*/
@media screen and (max-width: 768px) {
.parallax-1 {
background-attachment: inherit;
}
}
/* Preset Image Controls
This section of css. helps organize images to position and center the image to scale nicely on all screens */
.center-image {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
/* -Preset Photo Grid -
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 grid a one column-layout instead of two or three columns */
@media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
/* - Preset Text Block Controls-
this css. element centers text elements*/
/* This css. section controls the paragraph chunks*/
@media screen and (min-width: 800px) {
.textblock {
margin: auto;
width: 50%;
padding: 100px;
font-size: 125%;
}
}
@media screen and (max-width: 800px) {
.textblock {
margin: auto;
padding: 20px;
}
}