I'm ultimately looking to rebuild an old website that complies to web standards, and thought I would try getting my feet wet in html5 and css3. I know neither of these are fully supported across browsers yet, but I'm willing to work within whatever limits for the time-being.
However, I'm already ramming my head against an early wall, and frankly feel pretty stupid right now. I can't seem to highlight text OR open links in the pages generated by my code.
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>The Hominis Inquiry: Reconstructing Psychology, Societies, and Human Ecosystems</title>
<link rel="stylesheet" href="HIcss3.css" />
<script src="HIjs.js"></script>
</head>
<body>
<div class="title">
<div id="search">
<form id="searcher" onclick="startSearch('sbox')">
<input type="text" id="sbox" size="15" value="Search This Site">
<input type="button" id="sbutt" value="Find">
</form>
</div>
</div>
<div class="navigation">
<div id="about"> About </div>
<div id="blog"> Blog </div>
<div id="research"> Research/ Academic Papers </div>
<div id="hypercourse"> Hypercourses </div>
<div id="links"> Links </div>
<div id="contact"> Contact </div>
</div>
<div class="download">
<a href="http://www.mozilla.com/firefox/" target="_blank">
Firefox is strongly recommended for viewing this page. Download the latest version free!<img src="firefox.jpg" />
</a>
</div>
<p>
Welcome to HI Updates!
</p>
</body>
</html>
css:
body {border:0; margin:0; padding:0; vertical-align:top; text-align:center; background-color:#FFDDAA; color:#440000}
h1 {font-size:3em; font-weight:700}
h2 {font-size:1.5em; font-weight:600}
h3 {font-size:1.25em; font-weight:500}
p {}
a {color:#000066; font-weight:600; text-decoration:none}
a:hover {background-color:#FFFFDD}
a:visited {color:#440066}
div.title {position:fixed; width:100%; height:10.5em; background-image:url(hominquiry_laeroprocni.jpg); }
div.download {text-align:left}
div.download img {border:0; float:left; width:3em; height:3em}
div.navigation {}
#about {}
#blog {}
This was not a problem with my last layout in html 4, and feel I must be overlooking something REALLY obvious... even worse, it went through the validator without a hitch :P
Thanks!
Your div.title is position: fixed so it is actually floating over your links, so they don't receive the hover or click events from your mouse. Remove it to try it out.
With: http://jsfiddle.net/LFTpB/
Without: http://jsfiddle.net/THyke/
Related
The first h1 tag I use in my code works for me with the styling I'm going for but the second and third ones don't. The second one does not become a heading at all (just plain small text) and the third is too big.
h1 {
color: #2B2B2B;
white-space: normal;
word-break: break-all;
font-family: Georgia;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="Logo.png" alt:"">
<div class="container">
<nav>
<ul>
<li>About Us</li>
<li>Services</li>
<li>Continuing Education Courses</li>
<li>Support Groups & Workshops</li>
<li>First Appointment & Fees Insurance</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<hr>
<div class="profile-box">
<img src="Group 1.png" alt="" align="center" width="300px" height="100px">
<main>
<section>
<h1>Grounding and Resourcing Technique Giveaway</h1>
<h2>
Being a mental health clinician can be such an empowering and rewarding role. You can change,
help, and nourish so many of those struggling with everyday life. Through the responsibilities
you take on while helping others, it’s so important to practice grounding and resourcing
techniques with your clients.
</h2>
</section>
<div class="child-one child" <h1>Bill Maceus, Co-Founder of XYZ is giving away a FREE handout for
grounding and resourcing methods.</h1>
<img src="Rectangle 817.png" alt="" align="left">
<h2>
Learn ways to keep your client grounded by establishing comfortability, learning breathing and
body awareness techniques, object-based resourcing, and so much more. This handout will help you
overcome some of those challenges you face daily as a mental health clinician while working with
clients.
</h2>
<hr>
<h1>Simply fill out the form below to download.</h1>
<h2>You will be sent a copy to your email.</h2>
</div>
</main>
</div>
</div>
</body>
There's a syntax error in your HTML. The following line is incomplete:
<div class="child-one child"
Anything that comes after that line may produce unexpected results. You need to complete the opening div tag (and also close it somewhere, if that is your complete code).
<div class="child-one child">
Use <style> tag to enclose the css.
<style>
h1 {
color: #999999;
white-space:normal;
word-break: break-all;
font-family: Georgia;
text-align:center;
}
</style>
You also forgot the closing tag for div, though not entirely sure where you want the placement for closing tag would be.
<div class="child-one child"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="Logo.png" alt:"">
<div class= "container">
<nav>
<ul>
<li>About Us</li>
<li>Services</li>
<li>Continuing Education Courses</li>
<li>Support Groups & Workshops</li>
<li>First Appointment & Fees Insurance</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<hr>
<div class="profile-box">
<img src="Group 1.png" alt="" align="center" width="300px" height="100px">
<main>
<h1>Grounding and Resourcing Technique Giveaway</h1>
<section>
<h2>
Being a mental health clinician can be such an empowering and rewarding role. You can change,
help, and nourish so many of those struggling with everyday life. Through the responsibilities you take on while helping others, it’s so important to practice grounding and resourcing techniques with your clients.
</h2>
</section>
<div class="child-one child">
<h1>Bill Maceus, Co-Founder of XYZ is giving away a FREE handout for grounding and resourcing methods.</h1>
<img src="Rectangle 817.png" alt="" align="left">
<h2>
Learn ways to keep your client grounded by establishing comfortability, learning breathing and body awareness techniques, object-based resourcing, and so much more. This handout will help you overcome some of those challenges you face daily as a mental health clinician while working with clients.
</h2>
<hr>
<h1>Simply fill out the form below to download.</h1>
<h2>You will be sent a copy to your email.</h2>
</div>
<style>
h1 {
color: #2B2B2B;
white-space:normal;
word-break: break-all;
font-family: Georgia;
text-align:center;
}
</style>
</body>
You had a lot of errors such as no closing body or div tags, and now all of them are the same size.
You leave a closing tag on div class
<div class="child-one child"
<h1>Bill Maceus, Co-Founder of XYZ is giving away a FREE handout for grounding and resourcing methods.</h1>
Please complete the code to be:
<div class="child-one child">
If you are using VS Code editor, install Auto Close Tag extension if you haven't yet to avoid this kind of problem and Prettier extension as well is a big help for you to looks your code organize and easy to see what is wrong.
Links:
Auto Close Tag extension - https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
Prettier extension - https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
I'm brand new to web development and I have build a little website with 3 pages. My goal is to use #media tags to make it responsive for the following: max-widths: 980px, 768px and 640px. I did the first page and it's been acting weird. How can I make the entire website responsive? Please to assist. My code for all 3 pages and the media is attached. Thanks.
/*first page */
<head>
<title>AboutMe</title>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="top">
<div class="myname">
<h4 class="firstlast">name</h4>
</div>
<div class="list">
<ul>
<li class="contact">Contact</li>
<li class="portfolio">Portfolio</li>
<li class="about">About</li>
</ul>
</div>
</div>
<div class="middle-about-me">
<div class="center">
<h3> About Me</h3>
<hr>
<p class="myinfo">Hi my name is ..... and I was born on October 9th, 1971 in ......
<img src="assets/img/author.jpg" width="150px" height="150px"><br>
To briefly introduce the... to you I would say it is a country located on the........>
shares the same borders with ....... It is the world largest<br>
producer of coacoa used for chocalate and lotions. In one word, it's the country where chocolate tastes like<br> real chocolate. Since the last discovery of petrol in the country, it's been a little agitated as France and the<br>US want to control the discovery. After obtaining my masters in Business Management, I worked as the marketing representative for an american company before moving to the US to pursue a degree in Mathematic at UNT Dallas and worked for...,...., and.... as a Math instructor. My goal in this program is to learn to build websites from scratch and later on to build apps from scratch. I've got the right instructional staff and the right TAs to help me reach that goal. All I have to do is to go to work.<br> "Impossible is nothing", Muhammad Ali.</p>
<p class="smile"><i>hover on my picture and start smiling</i></p>
</div>
</div>
<div class="footer">
<p class="footer-copyright">Copyrigtht © 2019 Portfolio "name" All rights reserved.</p>
</div>
</div>
</body>
/*second page */
<body>
<div class="container">
<div class="top">
<div class="myname">
<h4 class="firstlast">name</h4>
</div>
<div class="list">
<ul>
<li>Contact</li>
<li>Portfolio</li>
<li>About Me</li>
</ul>
</div>
</div>
<div class="middle">
<div class="center-portfolio">
<h3> Portfolio</h3>
<hr>
<div class="div1"><img src="assets/img/career1.jpg" height="120px" width="150px"></div>
<div class="div2"><img src="assets/img/chocolatour.jpg" height="120px" width="150px"></div>
<div class="div3"><img src="assets/img/guildhouse.jpg" height="120px" width="150px"></div>
<div class="div4"><img src="assets/img/career2.jpg" height="120px" width="150px"></div>
<div class="rotateIn div5"><img src="assets/img/Abidjan1.jpg" height="120px" width="150px"></div>
<div class="div6"><p><i>please to hover on the images</i></p></div>
<div class="banner1">career picture 1</div>
<div class="banner2">chocolate tour</div>
<div class="zoomIn banner5">Abidjan</div>
<div class="banner4">career picture 2</div>
<div class="banner3">Guild Brussels</div>
</div>
</div>
<div class="footer">
<p class="footer-copyright"> Copyrigtht © 2019 Portfolio "name" All rights reserved.</p>
</div>
</div>
</body>
/*third page */
<body>
<div class="container">
<div class="top">
<div class="myname">
<h4 class="firstlast">name</h4>
</div>
<div class="list">
<ul>
<li>Contact</li>
<li>Portfolio</li>
<li>About Me</li>
</ul>
</div>
</div>
<div class="middle">
<div class="center">
<h3> Contact</h3>
<hr>
<form>
Name:<br>
<input id="namebox" type="text" name="name" required="" placeholder="your name">
<br><br>
Email:<br>
<input id="emailbox" type="Email" name="email" required="" placeholder="example#yahoo.com">
<br><br>
Message:<br>
<textarea id="messagebox" style="height: 200px; " name="message" placeholder="Enter massage here" required="">
</textarea>
<br><br>
<input type="submit" value="submit" name="submit">
</form>
<br>
</div>
</div>
<div class="footer">
<p class="footer-copyright">
Copyrigtht © 2019 Portfolio "name" All rights reserved.
</p>
</div>
</div>
</body>
/* Width at 768px and below */
#media screen and (max-width: 768px) {
body {
background-color : #E9967A;
}
.container {
background-color: green;
border-style: none;
width: 50%;
}
.middle-about-me,
.footer, .top{
width: 50%;
}
.middle-about-me{
width: 50%%;
}
}
/*Width at 640px and below */
#media screen and (max-width: 640px) {
body {
background-color : #E9967A;
}
.container {
background-color: green;
border-style: none;
width: 50%;
}
.middle-about-me,
.footer, .top{
width: 50%;
}
.middle-about-me{
width: 50%%;
}
}
Start out by removing fixed width properties. I am having a hard time seeing how you need width: 50% on everything. Then start by just addressing the styles of your .container element.
A good techniques is setting the max-width to the width you have in mind for the site to be viewed on a normal desktop screen, in the demo I used 600px but you can use any value that feels right.
Then in you media query assign a new max-width value that is appropriate for the screen size in the query, here i used 80% becuase typically on small screens you want the content to mostly fill the width of the screen with a little space on the sides, but again you can configure this to your needs in a variety of ways.
The main thing here is that your container element is now responsive and the content inside can fill up the space however you like from there. Run the snippet and click the Full page link to play around with the screen width and see the behavior working.
.container {
max-width: 600px;
margin: 0 auto;
}
#media screen and (max-width: 640px;) {
.container {
max-width: 80%;
}
}
<div class="container">
<div class="top">
<div class="myname">
<h4 class="firstlast">name</h4>
</div>
<div class="list">
<ul>
<li class="contact">Contact</li>
<li class="portfolio">Portfolio</li>
<li class="about">About</li>
</ul>
</div>
</div>
<div class="middle-about-me">
<div class="center">
<h3> About Me</h3>
<hr>
<p class="myinfo">Hi my name is ..... and I was born on October 9th, 1971 in ......
<img src="assets/img/author.jpg" width="150px" height="150px"><br>
To briefly introduce the... to you I would say it is a country located on the........>
shares the same borders with ....... It is the world largest<br>
producer of coacoa used for chocalate and lotions. In one word, it's the country where chocolate tastes like<br> real chocolate. Since the last discovery of petrol in the country, it's been a little agitated as France and the<br>US want to control the discovery. After obtaining my masters in Business Management, I worked as the marketing representative for an american company before moving to the US to pursue a degree in Mathematic at UNT Dallas and worked for...,...., and.... as a Math instructor. My goal in this program is to learn to build websites from scratch and later on to build apps from scratch. I've got the right instructional staff and the right TAs to help me reach that goal. All I have to do is to go to work.<br> "Impossible is nothing", Muhammad Ali.</p>
<p class="smile"><i>hover on my picture and start smiling</i></p>
</div>
</div>
<div class="footer">
<p class="footer-copyright">Copyrigtht © 2019 Portfolio "name" All rights reserved.</p>
</div>
</div>
I wish you had a sketch of what the final product will look like it would have been very helpful. There is more to making a page responsive than writing just valid HTML tag and corresponding styles and mind typos because from your code the extra % sign will make
.middle-about-me{
width: 50%%;
}
misbehave.
There a couple of things you need to know to be able to make a page responsiveness effective and very close to what you want.
Firstly you should consider resetting the default styles that the browser naturally applies to valid HTML tags by using normalize.css or utilize the power of universal selector which is almost as good in modern browsers, something like:
*,
*::before,
*::after{
padding: 0;
margin: 0;
box-sizing: inherit; /* to inherit the value declared in the body selector */
}
html{
font-size: 62.5% /* (10/16) * 100% and this is possible because by default the value of 100% will be computed to 16px by the browser and equal to 1(r)em, with this conversion we can reduce the calculations whenever you want to convert a value from px to (r)em since the are in multiples of 10 eg 1(r)em == 10px and 10(r)em == 100px*/
}
body{
box-sizing: border-box;
}
img{
width: 100%;
min-width: 27rem; /* to make the images responsive and look good on smaller screens */
}
so with the that basic reset you can always rely on using ems or rems for fonts an percentages for images and other block element when it feels appropriate.
This little write up is not enough to teach you all you need to know about responsiveness in the web but I hope it shed light on your path. Meanwhile those were not my original ideas i took a course by 'Jonas Schmedtman', He actually thought me those.
If you have a sketch of what the final pages should look like or you are still not very clear with what i have tried to explain so far please don't hesitate to add a comment so that we tidy it up together.
Title says all basically. I want the text right next to the slideshow.
<div class="displayBorder">
<div class="displayContainer">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')"><</div>
<img src="css/img/wexford-1.jpg" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<h2 id="wexford">17 My Street - Some Town, New York</h2>
<h3>$1,249,999</h3>
</div>
</div>
H tags have a specific purpose, to act as a header under which other content will fall. To use h tags side by side goes against their intended use (and is invalid html). The span tag does what an H tag does, but is an inline element (display:inline), where a H tag is a block level element (and acts like a div)(display:block). You can change the 'display' property of an H tag's css to do what a span does.
With that in mind, I would actually use 'display:inline-block' in your situation.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
h1 {
display: inline-block;
}
h2.asCouple {
display: inline-block;
margin-left: 15px;
}
</style>
</head>
<body>
<div>
<h1>Topic - <h2 class="asCouple">Subtopic</h2></h1>
</div>
</body>
</html>
Hope this helps.
You can do it inline when declaring the HTML element, I did something like this:
<h6 style="display: inline">Posted by <h4 style="display: inline">{{.}}</h4></h6>
By doing this, you don't change the style of all <hSOMETHING> elements
<div class="displayBorder">
<div class="displayContainer">
<div class="displayTable">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')"><</div>
<img src="css/img/wexford-1.jpg" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<div class="txt-con">
<h2 id="wexford">Location</h2> <br />
<h3>$1,249,999</h3>
<p>Custom Built Home With Every Bell And Whistle !/ Ch Colonial With 6 Generous Bdrms, 2 Master Suites Or Use Lge Area For Office, 5 Full Baths, Wood Floors Thru-Out, Granite Eik W/ Center Isle, Top Appliances, Andersen Windows, Lots Of Details, Full Finished Basement W/ Ose, Full Wet Bar, Theater Tv Area, Playrm, Lots Of Storage, Custom Freeform Salt Pool, Custom Pool House</p>
</div>
</div>
<button class="learn-btn">LEARN MORE</button>
</div>
#Jared Scarito is this what you need??
CSS
.displayContainer{
display:table;
}
.photoContainer,.txt-con{
display:table-cell;
vertical-align:middle;
}
HTML
<div class="displayBorder">
<div class="displayContainer">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')">
<</div> <img src="https://i.stack.imgur.com/rhy46.png" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<div class="txt-con">
<h2 id="wexford">1234 My Street - Sometown, New York</h2>
<h3>$1,249,999</h3>
</div>
</div>
</div>
changed the image to demonstrate
Pretty much the same HTML, added extra div around h3 and h2..
I wonder why the css for the div class=iphone isn't working-you can't see a border or anything else I include in the css..however when I was writing the code on codepen it all worked just fine and once I did it on sublime, it won't show anything (but only for the div element with the class iphone). Does anyone know why? Thanks!!
Html:
<body>
<header>
<h1>Guess a Number!</h1>
<h2> - - - - - - - - - - - - -</h2>
<h3>Lets Play</h3>
<h4>Pick a number from 1-100</h4>
</header>
<section>
<div class="iphone"> ..
<div>
<input type="text" name="number" placeholder="number"
class=pickingNumber>
<button class="send"><i class="fa fa-share"></i></button>
</div>
<div class="playAgain">
<button class="buttons">
<p><b>---</b></p>
</button>
<button class="buttons">
<p><b>---</b></p>
</button>
</div>
</div>
</section>
<footer>
<div>
<p class="end">© Made by me</p>
<p class="end">Thanks for visiting!</p>
</footer>
</body>
</html>
part of css for that:
.iphone{
border: 6px solid #949599;
}
Does your HTML have a <link> to the css file?
http://www.w3schools.com/css/css_howto.asp
You have an extra div in the footer it seems. That may be a problem? There are precedential rules too, so make sure that iphone class is the last class loaded with that name.
You may need to give the iphone class some dimensions.
iphone {
height: 100px;
width: 100px;
}
I have created my first website using instructions from the old introduction to HTML and CSS on http://codecademy.com
The code works well in the special constructor page, but now when I try to take out into the wild my HTML and CSS do not seem to link up. I try to view in a browser but no joy, I think I tried to upload the files to a file server but still no joy and tried several tutorials.
Can someone please tell me where I am going wrong? is it something to do with the CSS style sheet references at the top of the HTML?
Here is my HTML and CSS code:
<!DOCTYPE html>
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home</li>
<li>About us</li>
</ul>
<ul class="pull-right">
<li>Services</li>
<li>Prices</li>
<li>FAQ</li>
<li>Contact us</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Computer repairs and upgrades.</h1>
<p>Fast and friendly services for all your computer needs. Call 07952270940 for a free consultation.</p>
<p>- PC and Laptop repair to your door</p>
<p>- Virus/Malware Removal</p>
<p>- Tune up / Speed up</p>
<p>- Computer Upgrades</p>
<p>- Internet Security</p>
<p>- No-fix / No-fee Policy</p>
<p>- 7 days a week service</p>
<p>- Guaranteed work & parts
</p>
Learn More
</div>
</div>
<div class="neighborhood-guides">
<div class="container">
<h2>Neighborhood Guides</h2>
<p>We pride ourselves on openness and fairness with accurate quotes and no hidden costs.</p>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
Laptops
<img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/photo_39726_20150729_zpsyypbc60q.jpg">
</div>
<div class="thumbnail">
Website development
<img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/photo_40106_20150820_zpsxs617yvx.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
PC's
<img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/photo_40371_20150828_zpsmabjmlys.jpg">
</div>
<div class="thumbnail">
Upgrades
<img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/photo_41306_20150916_zpsw0mykfns.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
Price promise
<img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/photo_40001_20150814_zpsk1nnnytm.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
Security and virus removal
<img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/c775776e-19e5-40f4-a651-7d73434ce9d0_zpsr59jga2j.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="learn-more">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>Laptop screen repair</h3>
<p>We are specialists in laptop screen repair. We provide screens for all laptops.</p>
<p>I dunno yet</p>
</div>
<div class="col-md-4">
<h3>No-fix / No-fee Policy</h3>
<p>Renting out your unused space could pay your bills or fund your next vacation.</p>
<p>Learn more about hosting</p>
</div>
<div class="col-md-4">
<h3>Trust and Safety</h3>
<p>From Verified ID to our worldwide customer support team, we've got your back.</p>
<p>Learn about trust at Airbnb</p>
</div>
</div>
</div>
</div>
</body>
</html>
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.jumbotron {
background-image:url('http://pcmedcenter.com/wp-content/uploads/2015/03/banner12-1920x600.jpg');
height: 470px;
background-repeat: no-repeat;
background-size: cover;
}
.jumbotron .container {
position: relative;
top:0px;
}
.jumbotron h1 {
color: #fff;
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.jumbotron p {
font-size: 15px;
color: #fff;
}
.learn-more {
background-color: #f7f7f7;
}
.learn-more h3 {
font-family: 'Shift', sans-serif;
font-size: 18px;
font-weight: bold;
}
.learn-more a {
color: #00b0ff;
}
.neighborhood-guides {
background-color: #efefef;
Border-bottom: 1px solid #dbdbdb;
}
.neighborhood-guides h2 {
color: #393c3d;
font-size: 24px;
}
.neighborhood-guides p {
font-size: 15px;
margin-bottom: 13px;
}
Since the third stylesheet's path is relative, you have to make sure the path is correct and you have a main.css file in the same folder as your html file.
Oh man, a few suggestions to help keep you on track!
First off copy your CSS code and store it locally. Create a web project folder and then a themes folder to keep your CSS in.
C:\web
C:\web\index.html
C:\web\themes\classic\style.css
Also avoid BootStrap like the plague! It's CSS done by server guys and it uses jQuery (CSS is client side, not server and client/server are two different mentalities). You don't need to over-complicate your understanding. Stick to HTML and CSS and "vanilla" (plain) JavaScript as adding dependencies makes your code weak and locks you in to things that you're not ready to understand whether it will benefit you or not (hint: those won't). Most people who use that stuff couldn't code vanilla if their lives depended on it so learn real code first and then consider third party stuff per project and only if it fits a given project.
Also understand that there are two parsers in browsers, HTML and XML parsers. You can serve code loose or strict; the HTML parser is loose while the XML parser is strict. Firefox is great for working with the XML parser (save your files as .xhtml) and you can still use HTML5 (it's just HTML5 served XML compatible) but when you make an error (with few exceptions) the whole page will break and you'll get an error message telling you what is wrong which is great because now that you're aware you can quickly fix it and move on.
One of the best resources is Mozilla Developer Network. Generally opt for that when looking things up. Beyond that focus on what you want to achieve and sites like http://caniuse.com/ will give you some (though not all) the insight in to what technologies exist that can be used. Good luck!
This
<link rel="stylesheet" href="main.css">
If your HTML document is not being styled correctly, then you need to make sure that href is pointing to the correct destination for your stylesheet.
If your stylesheet happens to the be in the same directory as your HTML file, you can use this to view it locally on your computer to make sure it is working as expected:
<link rel="stylesheet" type="text/css" href="./main.css">
Also, did you actually copy your CSS into a separate file called main.css? Make sure you do that.