Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS+HTML -> Udacity Orange MUG #3

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

CSS+HTML -> Udacity Orange MUG #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 66 additions & 0 deletions HW1/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
.largetitle {
font-family: Verdana;
color: #666666;
font-size: 40px;
text-align: center;
margin-top: 20px;
}

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for a better convention and easy to read, you can put related styles together. like margin padding border; font-family font size text-align color



.img-responsive {
width: 300px;
height: 300px;
}

.leftCol h2 {
font-family: Verdana;
color: #f07c17;
}

.leftCol ul {
font-family: Verdana;
font-size: 20px;
color: #666666;
line-height: 150%;
padding-top: 20px;
}

.leftCol section {
border-style: solid;
border-width: thin;
border-color: #666666;
margin-top: 1cm;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

don't mix the unit, why you use cm here?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can actually write *{font-family: Verdana} to set all font inside the page to Verdana instead of writing it multiple times for every unit.

padding-top: 5px;
padding-left: 30px;
padding-bottom: 20px;
height: 280px;
width: 300px;

}

.leftCol {
margin-top: 20px;
margin-left: auto;
}

.rightCol h2{
font-family: Verdana;
color: #f07c17;
font-size: 25px;
}

.rightCol p {
font-family: Verdana;
color: #666666;
line-height: 200%;
}

.rightCol {
margin-top: 20px;
margin-right: 15px;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

indention here, use space or tab, don't mix them

margin-bottom: 25px;
margin-left: auto;
}


52 changes: 52 additions & 0 deletions HW1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<title> CICI Mug</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel ="stylesheet" href="css/style.css">
</head>

<body>
<div class = 'container'>
<header>
<h1 class='largetitle'> Orange Udacity Mug </h1>
</header>

<div class="row">

<div class="col-sm-5">
<div class='leftCol'>
<img src="mug.png" class="img-responsive">
<section>
<header>
<h2>Main Features</h2>
</header>
<ul>
<li>Holds your favorite drink</li>
<li>Energizing color</li>
<li>Reminds you to learn</li>
</ul>
</section>
</div>
</div>

<div class="col-sm-7">
<div class='rightCol'>
<h2>A Good Way to Start a Day</h2>
<p>
After two hours struggling with a margin I started thinking if the idea of quitting my job was really a good decision. I told my boss that after several years I wasn't advancing in my career and that from now on I was going to be the owner of my fate. I was going to take a nanodegree! "A nano what?" She managed to say. I didn't bother to answer. I did all the paperwork and left my job. Now I'm stuck here with a magin-left...The style guide says: "Margin left? Don't use that. Forget it". But how do I align this text with the photo above? I didn't have these kinds of problems at the office. Why not continue with my previous life where I had the same problems but with the same standard solutions? I'm not built for this. I'd rather talk with my former boss and tell her I made a terrible mistake. That I had a high fever and was hallucinating... I want the security and boredom that rules in the office.
</p>

<p>
I go to the kitchen. Grab this orange mug and start pouring coffee. I stare at the mug with this big "U". Ah, Udacity. I remember this girl tossing an angry bird at her co-worker who was furiously scribbling code on his computer. I remember he said something like "if you are stuck with an issue most probably someone before had the same problem, posted it on Stackoverflow and another someone answered" I go back to my computer and start googling. Twenty minutes later...nothing. I sip some coffe from my Udacity mug and then I think "What if I put the text in the same div as the photo? Bootstrap will take care of the rest..." It's just a hunch. But, wait! It works, they perfectly align! I raise my arms and flavor victory as if I were at the stadium. The public claps and cheers. Yeah, I'm becoming a ninja at coding!
</p>

</div>
</div>

</div>
</div>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please make sure your indention here is perfect, that will increase the readability of your code, and make you a professional programmer


</body>
</html>
Binary file added HW1/mug.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.