Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Shan Quick
Courses Plus Student 3,832 PointsHey! Can someone help? I'm trying to get the title "Valiant" to the lower part of the screen but nothing works.
<!Doctype html> <html lang='en'>
<head> <meta charset='utf-8'> <title>Valiant</title> <link rel="stylesheet" href="styles.css"> </head>
<body class="main-header">
</body>
<div>
<h1>Valiant</h1>
</div>
</html>
CSS:
/* simple Valiant main page links to quotev*/
- { box-sizing: border-box; }
.main-header { padding-top: 170px; height: 850px; background: linear-gradient(#000, transparent 60%), linear-gradient(0deg, #800000, transparent), #000 url('http://ic.pics.livejournal.com/bemythugtonight/64589814/357421/357421_original.png') no-repeat center; background-size: cover; }
h1 { font-family: Helvetica, Arial, sans-serif; font-size: 100px; text-shadow: 8px 10px 5px #000; text-align: center; }
3 Answers
Shan Quick
Courses Plus Student 3,832 PointsSorry, I don't know why I can't paste the whole code in a black box.
Brandon VanCamp
Front End Web Development Techdegree Graduate 30,954 PointsHello Shan Quick,
I left comments as followed. Hopefully this helps you!
<!Doctype html> <html lang='en'>
<head> <meta charset='utf-8'> <title>Valiant</title> <link rel="stylesheet" href="styles.css"> </head>
<body class="main-header">
<div>
<h1>Valiant</h1>
</div>
</body> <!-- This needs to be at the end, just before the closing </html> tag -->
</html>
<style>
/*CSS: */
/* simple Valiant main page links to quotev*/
* { box-sizing: border-box; } /* added * to apply to everything */
.main-header { padding-top: 170px; height: 850px; background: linear-gradient(#000, transparent 60%), linear-gradient(0deg, #800000, transparent), #000 url('http://ic.pics.livejournal.com/bemythugtonight/64589814/357421/357421_original.png') no-repeat center; background-size: cover; }
h1 { font-family: Helvetica, Arial, sans-serif; font-size: 100px; text-shadow: 8px 10px 5px #000; text-align: center;
/* This is what you want to use to push it to the bottom. */
vertical-align: text-bottom; }
</style>
Let me know if this helps!
Shan Quick
Courses Plus Student 3,832 PointsThank you!!! I did this and changed the padding and height!
Brandon VanCamp
Front End Web Development Techdegree Graduate 30,954 PointsNo problem, happy to help!