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! While you're at it, check out some resources Treehouse students have shared here.
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
Lynda Irawaty
2,948 PointsHow can I copy paste my code from Sublime Text to ask questions here?
Everytime I do the it, won't display like if I use Treehouse workspace.
Sean T. Unwin
28,690 PointsDon't put quotes around the backticks, however.
See this thread about posting code to the forum. :)
p.s I fixed your code copy below.
2 Answers
Lynda Irawaty
2,948 PointsI want to ask why my borders length is inconsistent, also margin left on my UL eventhough I set it to 0 or minus still will not go flush to the other paragraph.
<!DOCTYPE html>
<html>
<head>
<title>Contact</title>
<link rel="stylesheet" href="css/style2.css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<header id="top" class="main-header">
<span class="title">General Information</span>
<h1>ABOUT US</h1>
</header>
<div class="primary-content">
<h2>Lake Tahoe is the largest and most beautiful <br> alpine lake in North America, and lucky for you, <br> we know everything about it.
</h2>
</div><!-- End .primary-content -->
<div class="secondary-content t-border group">
<div class="gettingthere">
<h3>Getting To Tahoe South</h3>
<p>
This site is intended to celebrate everything inspiring about Tahoe South, whether you are a resident or a visitor, we hope you will contribute to <a href="tahoesouth">www.tahoesouth.com.</a><br>
We would love to see your pictures on this website, or write a guest post for our blog. Send them to <a href="email">info@ltva.org</a>, give a shout on our Facebook page or tweet us <a href="http://twitter.com/intent/tweet?screen_name=TahoeSouth">@TahoeSouth</a>.
You can also get in touch with us the oldschool antirobot way, come see us in person from 9am to 5pm at both of our visitor centers. We only closed on Thanksgiving and Christmas Day.
</p>
<iframe src="https://www.google.com/maps/embed?pb=!1m23!1m12!1m3!1d198182.41684440308!2d-120.0449687!3d39.092802049999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m8!3e6!4m0!4m5!1s0x809978a1b91f1151%3A0x8c3f1fafeeafb520!2sLake+Tahoe%2C+United+States!3m2!1d39.096849299999995!2d-120.0323507!5e0!3m2!1sen!2sjp!4v1438161810304" width="600" height="450" frameborder="0" style="border-radius: 10px" allowfullscreen></iframe>
<div class="wrapper">
<section id="contact">
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="california">Visitor Center California</li>
<li class="address">3066 Lake Tahoe Blvd.
South Lake Tahoe, CA 96150</li>
<li class="phone"><a href="#phone">(530) 541-5255</a></li>
<li class="nevada">Visitor Center Nevada</li>
<li class="address">169 Highway 50
Stateline, NV 89449</li>
<li class="phone"><a href="#phone">(775) 588-4591</a></li>
<li class="web"><a href="tahoesouth">www.tahoesouth.com</a><br>
<li class="email"><a href="email">info@ltva.org</a>
</ul>
<ul class="links">
<li><a href="#hotels">Lake Tahoe Resort Hotel</a></li>
<li><a href="#resorts">South Lake Tahoe Resorts</a></li>
<li><a href="#lodging">Tahoe Ski Resort Lodging</a></li>
</ul>
</div>
<footer class="main-footer">
<p>All rights reserved to the state of <a href="#">California</a>.</p>
<a href="#top">Back to top »</a>
</footer>
</body>
</html>
here's the CSS
/* Web Fonts -------------------- */
@font-face {
font-family: 'Abolition Regular';
src: url('../fonts/abolition-regular-webfont.eot');
src: url('../fonts/abolition-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/abolition-regular-webfont.woff') format('woff'),
url('../fonts/abolition-regular-webfont.ttf') format('truetype');
}
/* Base Styles -------------------- */
* {
box-sizing: border-box;
}
body {
color: #878787;
margin: 0;
font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1,
h2 {
font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;
}
h1 {
font-size: 5.625rem; /* 90px/16px */
text-transform: uppercase;
font-weight: normal;
line-height: 1.3;
text-shadow: 0 1px 1px rgba(0,0,0,.8);
margin: 12px 0 0;
}
h2 {
font-size: 3em; /* 53px/16px */
font-weight: normal;
line-height: 1.1;
margin: 0 0 .5em; /* 0 0 26px */
}
h3 {
font-size: 1em; /* 20px/16px */
color: #48525c;
line-height: 1.2;
margin-bottom: 1.7em; /* 34px */
}
iframe {
max-width: 100%;
margin: 20px 0 20px 0;
}
ul,
ol {
margin: 0;
}
li {
list-style: none;
padding-left: -40px;
margin-bottom: 10px;
}
/* Pseudo-classes ------------------ */
a:link {
color: rgb(255, 169, 73);
text-decoration: none;
}
a:visited {
color: lightblue;
}
a:hover {
color: rgba(255, 169, 73, .4);
}
a:active {
color: lightcoral;
}
/* Main Styles --------------------- */
.main-header {
padding-top: 170px;
height: 375px;
background-color: white;
background-size: cover;
}
.title {
font-size: 1.625rem; /* 26px/16px */
letter-spacing: .065em;
font-weight: 200;
border-bottom: 2px solid;
}
.intro {
font-size: 1.25em; /* 20px/16px */
line-height: 1.6;
color: initial;
}
.primary-content,
.main-header,
.main-footer {
text-align: center;
}
.primary-content {
padding-top: 30px;
padding-bottom: 30px;
}
.secondary-content {
padding-top: 50px;
padding-bottom: 50px;
}
.wrapper {
padding-top: 20px;
padding-bottom: 30px;
}
.main-footer {
padding-top: 30px;
padding-bottom: 60px;
border-top: 2px solid #dfe2e6;
border-bottom: 10px solid #ffa949;
}
.t-border {
border-top: 2px solid #dfe2e6;
}
/* Layout Styles ------------------ */
.primary-content, {
width: 75%;
padding-left: 50px;
padding-right: 50px;
margin: auto;
max-width: 960px;
}
.secondary-content {
width: 75%;
padding-left: 50px;
padding-right: 50px;
margin: auto;
max-width: 960px;
}
/* Floated Columns ------------------ */
.resorts,
.gettingthere {
width: 90%;
}
/* Media Queries -------------------- */
@media (max-width: 1024px) {
.primary-content,
.secondary-content {
width: 90%;
}
}
@media (max-width: 768px) {
.primary-content,
.secondary-content {
width: 100%;
padding: 20px;
border-top: none;
}
.main-header {
max-height: 380px;
padding: 50px 25px 0;
}
.title {
font-size: 1.3rem;
border: none;
}
h1 {
font-size: 5rem;
line-height: 1.1;
}
.arrow {
display: none;
}
.intro {
font-size: 1rem;
}
.resorts,
.tips {
float: none;
width: 100%;
}
.main-footer {
padding: 20px 0;
}
}
Sean T. Unwin
28,690 PointsHi Lynda Irawaty,
why my borders length is inconsistent
This is because .secondary-content has a padding on the left and right of 50px each and .main-footer is child (nested) inside that.
This likely unintentional because there are some missing closing tags -- .secondary-content, .getting-there, and #contact. The main issue the .secondary-content should be closed before .footer-main. Once that is done you can leave footer-main to be 100% width (default) or set it to be the same as .primary-content -- width: 90%; or whatever you like.
also margin left on my UL eventhough I set it to 0 or minus still will not go flush to the other paragraph
For .contact-info UL set padding-left: 0 to remove the default padding.
orbyt
10,358 Pointsorbyt
10,358 PointsIm guessing you mean code highlighting? Try clicking on the "Markdown Cheatsheet" button for tips on using the editor. For code, try wrapping it in 3 backticks "```", and if you want syntax highlighting just specify the language after the 1st set of backticks.
so
"(3 backticks here) css .class background: blue; (3 more backticks)"
should become: