Code from Todays HTML & CSS Demo Fri 9/11

demo-2-featured

Click here to Download a zip file of the project folder

Or just grab the HTML and CSS code bellow and add it to your project.


 

index.html

 <!DOCTYPE html>
<html>

<head>
<title>Demo Two</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>

<body> <!-- Put content after this -->
 
 <h1>Hello World</h1>
 
 <img src="img/mascot.jpg" alt="Class Mascot">
 
 <section>
 <h2>Type 3's First webpage</h2>
 
 <p>Shoreditch narwhal meggings cred. Umami mixtape readymade, Truffaut Pinterest Carles before they sold out. Selvage sriracha cray 3 wolf moon. Readymade PBR biodiesel, taxidermy sartorial Helvetica viral you probably haven't heard of them art party plaid small batch letterpress Portland. Disrupt roof party typewriter single-origin coffee 3 wolf moon, cred kitsch cronut selfies letterpress. Aesthetic Kickstarter banjo seitan Carles. Bespoke gluten-free Banksy fanny pack, plaid jean shorts sriracha kale chips hella pour-over meditation.</p>

 <p>Truffaut DIY before they sold out, American Apparel hoodie drinking vinegar gluten-free letterpress pug cray McSweeney's. Jean shorts health goth cronut, Shoreditch Helvetica retro lo-fi Thundercats listicle normcore four dollar toast. Brunch pop-up small batch butcher mixtape McSweeney's, 3 wolf moon ethical drinking vinegar Tumblr sriracha vinyl High Life Etsy craft beer. Sartorial pug trust fund VHS literally seitan, vegan Banksy Etsy occupy organic. Chia dreamcatcher deep v swag Neutra shabby chic farm-to-table Kickstarter occupy plaid. Blog keffiyeh PBR&amp;B, pop-up chia cronut Helvetica shabby chic selvage meggings YOLO. Photo booth ethical 8-bit Neutra single-origin coffee, freegan blog kale chips occupy next level dreamcatcher craft beer artisan slow-carb.</p>
 </section>

</body>

</html>

style.css

/* This is a CSS comment, I added some styling and made things less ugly */

body {
 background:#00a7e5;
 color:white;
 font-family:"Futura", "helvetica Neue", "helvetica", arial, sans-serif;
 font-weight: 300;
}

h1 {
 font-size: 60px;
 font-weight: 100;
 letter-spacing: 5px;
 text-transform: uppercase;
 margin-top: 20px;
 margin-bottom: 20px;
 text-align: center; 
}

h2 {
 margin-top:0;
 margin-bottom: 5px;
}

img {
 max-width: 100%;
}

section {
 margin-top: 10px;
 background: white;
 color: black;
 padding: 10px 20px;
}

Leave a Reply

Your email address will not be published. Required fields are marked *