Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
Binary file added css/fonts/Cabin-Bold/cabin/Cabin-Regular.ttf
Binary file not shown.
54 changes: 54 additions & 0 deletions css/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
body > div > .title{margin: 15px 0;box-sizing: border-box;font-family: Verdana, Geneva, Tahoma, sans-serif;font-size: 20px;width: 100%;}
body > div > div{float: left;margin: 0 15px 15px 0;box-sizing: border-box;width: 100%;}
body > div > div:nth-child(even){width: 430px;height: 390px;border: 1px solid;box-shadow: 5px 5px 5px 0px #808080b3;display: block;}

body > div:nth-child(1) > div:nth-child(2) { font-family: Verdana, Geneva, Tahoma, sans-serif;padding: 10px;background-color: #eefeff;font-size: 14px;}
body > div:nth-child(1) > div:nth-child(2) > h1:nth-child(1){margin: 0;}
body > div:nth-child(1) > div:nth-child(2) > h2:nth-child(6),body > div:nth-child(1) > ul:nth-child(7){color: red;font-weight: bold;}
body > div:nth-child(1) > div:nth-child(2) > ul:nth-child(7){color: red;font-weight: bold;}

body > div:nth-child(2) > div:nth-child(2){font-family: Georgia, 'Times New Roman', Times, serif;font-stretch: semi-condensed;font-size: 14px;padding: 5px 5px 5px 5px;background-color: #fefef8;}
body > div:nth-child(2) > div:nth-child(2) > h1:nth-child(1){margin: 0 0 20px 0;}
body > div:nth-child(2) > div:nth-child(2) > p{line-height: 1.3;}
body > div:nth-child(2) > div:nth-child(2) > p:nth-child(2){color: #600f00;font-weight: bold;font-size: 12.5px;}
body > div:nth-child(2) > div:nth-child(2) > p:nth-child(5){font-style: italic;color: #66ad63;font-size: 11px;}

@font-face {font-family: CabinBold;src: url(./fonts/Cabin-Bold/cabin/Cabin-Regular.ttf)}
body > div:nth-child(3) > div:nth-child(2){font: normal normal 16px CabinBold;font-size: 15px;padding: 5px 5px 5px 5px;background-color: #e5ebdf;}
body > div:nth-child(3) > div:nth-child(2) > h1:nth-child(1){margin: 0;background-color: #7c8b9b;color: #fff;}
body > div:nth-child(3) > div:nth-child(2)>p{line-height: 1.4;font-stretch: semi-expanded;}
body > div:nth-child(3) > div:nth-child(2) > ul:nth-child(4){line-height: 35px;list-style-type: none;}

body > div:nth-child(4) > div:nth-child(2){font-family: Verdana, Geneva, Tahoma, sans-serif;padding: 10px 0 5px 5px;background-color: #fcfaea;height: 434px;width: 340px;}
body > div:nth-child(4) > div:nth-child(2) > ul{list-style-type: none;line-height: 1.3;padding: 0px 10px 10px 40px;}
body > div:nth-child(4) > div:nth-child(2) > ul:nth-child(3){border-bottom: 1px solid;}
body > div:nth-child(4) > div:nth-child(2) > h1:nth-child(1){margin: 0;color: #442200;background-color: #c9bba0;}
body > div:nth-child(4) > div:nth-child(2)>h2{font-style: italic;color: #660f00;}
body > div:nth-child(4) > div:nth-child(2) > ul>li{margin: 7px 0px;}
body > div:nth-child(4) > div:nth-child(2) > ul:nth-child(3) > li > span{font-weight: bold;}
body > div:nth-child(4) > div:nth-child(2) > ul:nth-child(3) > li:nth-child(3) > span:nth-child(2){font-style: italic;}

body > div:nth-child(5) > div:nth-child(2){font-family: Arial, Helvetica, sans-serif;font-size: 14px;padding: 5px 5px 5px 5px;background-color: #fffdf0;height: 670px;width: 495px;}
body > div:nth-child(5) > div:nth-child(2) > h1:nth-child(1){margin: 0;background-color: #660f00;color: #fffdf0;}
body > div:nth-child(5) > div:nth-child(2) > p:nth-child(2) > span:nth-child(10){font-size: 10.5px;padding: 10px 10px 0 0;text-align: right;display: block;line-height: 1;}
body > div:nth-child(5) > div:nth-child(2) > p:nth-child(2){line-height: 2.5;}
body > div:nth-child(5) > div:nth-child(2) > p:nth-child(2) > span{font-weight: bold;}
body > div:nth-child(5) > div:nth-child(2) > p:nth-child(2) > span:last-child{font-weight: normal;}
body > div:nth-child(5) > div:nth-child(2) > p:nth-child(2) > span:nth-child(3),body > div:nth-child(5) > div:nth-child(2) > p:nth-child(2) > span:nth-child(6){color: red;}
body > div:nth-child(5) h1,body > div:nth-child(5) h2{font-weight: bolder;}
body > div:nth-child(5) h2{color: #660f00;}
body > div:nth-child(5) > div:nth-child(2) > p:last-child{line-height: 2;}

body > div:nth-child(6) > div:nth-child(2){font-family: Arial, Helvetica, sans-serif;padding: 5px;height: 226px;}
body > div:nth-child(6) > div:nth-child(2) > h1:nth-child(1){margin: 0;}
body > div:nth-child(6) > div:nth-child(2) > h2{font-weight: inherit;}

body > div:nth-child(7) > div:nth-child(2){font-family: Georgia, 'Times New Roman', Times, serif;padding: 0 10px;height: 245px;width: 241px;}
body > div:nth-child(7) > div:nth-child(2) > p:nth-child(2){text-shadow: 2px 2px 2px #0009;}
body > div:nth-child(7) > div:nth-child(2) > p:nth-child(3){text-shadow: 5px 5px 2px #0009;}
body > div:nth-child(7) > div:nth-child(2) > p:nth-child(4){text-shadow: 10px 9px 2px #0009;}
body > div:nth-child(7) > div:nth-child(2) > p:last-child{text-shadow: 18px 18px 2px #0009;}

body > div:nth-child(8) > div:nth-child(2){font-family: Arial, Helvetica, sans-serif;padding: 10px;height: 175px;width: 270px;}
body > div:nth-child(8) > div:nth-child(2) > h1:nth-child(1){margin: 0;}
body > div:nth-child(8) > div:nth-child(2) > p:nth-child(2){unicode-bidi: bidi-override;direction: rtl;text-align: end;line-height: 2;}
150 changes: 150 additions & 0 deletions css1.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/styles.css">
<title>CSS 1st</title>
</head>

<body>
<div>
<div class="title"><span>Product Description</span></div>

<div>
<h1>X-241 Dog Robot</h1>
<h2>Overview</h2>
<p>The X-241 is the perfect canine pal for the busy billonaire.</p>
<h2>Details</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam scelensque bibendum nibh, et
pellentesque elit placerat at. Proin vel enim orci, a fermentum Aenean posuere adiplscing mauris
volutpat volutpat.</p>
<h2>Warnings</h2>
<ul>
<li>Do not inmerse in water</li>
<li>Do no eat.</li>
<li>Does no exist.</li>
</ul>
</div>
</div>
<div>
<div class="title"><span>Cats and Dogs</span></div>
<div>
<h1>Cats and Dogs</h1>
<p>I have a cat, and am thinking of getting a dog. Will they fight?</p>
<p>The idea that dogs hate cats may have been born because dogs chase cats and grew because cartoons
depicted
ongoing battles between the two species. Or it may have been generated because some dog people strongly
dislike
cats and some cat people disdain dogs. However, dog and cats can live peaceably as long as owners
understand the
behaviors of each.</p>
<p>In some cases, a resident cat Will isolate itself when a puppy is added to the famüy_ In other cases,
cats and
dogs never get used to each other _ In still other cases, cat or kitten and dog or puppy play togethe
and build
a friendship that finds them curled up together in a crate or bed and drinking out of the same bowl. The
type of
relationship developed in each household depends on the personality of the and the understanding of the
owners.
</p>
<p>[From Dog Owner's Guide: Fighting furry furies? (www.canismajor.com/dog (furfury.html)]</p>
</div>
</div>
<div>
<div class="title"><span>Metaphor</span></div>
<div>
<h1>Metaphor</h1>
<p>A metaphor is a mapping from one domain to another. For example, moo is to cow as beep is to car. These
mappings get so buried in our language that we don't even notice their effects.</p>
<p>For example, take the language used to describe a debate:
<ul>
<li>"He shot down her ideas."</li>
<li>"She defended her position."</li>
<li>"She overwhelmed his arguments."</li>
<li>"He had to retreat from that position."</li>
</ul>
</p>
<p>These are all debate-as-war metaphors. It's a zero sum game. Someone wins and someone loses. The idea
that both people could learn from each other just doesn't come up.</p>
</div>
</div>
<div>
<div class="title">Bar Jokes</div>
<div>
<h1>Bar Jokes</h1>
<h2>The grasshopper</h2>
<ul>
<li>A grasshopper hopped into a bar.</li>
<li><span>Bartender:</span> Hey, we have a drink named after you. </li>
<li><span>Grasshopper:</span> You have a drink named <span>Bob?</span></li>
</ul>
<h2>Walking into a bar</h2>
<ul>
<li>Two guys are walking down the street one Saturday night.</li>
<li>One walks into a bar.</li>
<li>The other one ducks.</li>
</ul>
</div>
</div>
<div>
<div class="title">Studying advice</div>
<div>
<h1>Studying Advice</h1>
<p> Much of the advice people give about studying is wrong.</br>
Always study in the same place?</br>
<span>Wrong!</span></br>
Study one topic intensively before going on to the next?</br>
<span>Wrong!</span></br>
Here are some study tips that are based on <span>actual research.</span></br>
<span>From <i>Forget What You Know About Good Study Habits</i>, by Benedict Carey, published in the
<i>New York Times</i> on September 6, 2010.</span>
</p>
<h2>Alternate study environments</h2>
Study in the library, in the coffee shop, in your room, ... Varying the place you study helps you remember
more.
<h2>Mix content</h2>
Study a bit of this, a bit of that, some this again, some of the other. Switching content helps you remember
more.
<h2>Space study sessions</h2>
Three one-hour sessions is more effective than one three-hour session.
<h2>Self-testing</h2>
<p>Test yourself, or have a buddy do it. It helps you know how wel you know.
CoreDogs is good at this. That's what the review system is for.</p>

</div>
</div>
<div>
<div class="title">Friendly Formulas</div>
<div>
<h1>Friendly Formulas</h1>
<h2>Your friend, the parabola</h2>
<div>y = ax<sup>2</sup> + bx + c</div>
<h2>A normally distributed variable</h2>
<div>x&#126;N(&#181;, &#963;)</div>
</div>
</div>
<div>
<div class="title">Text Shadows</div>
<div>
<h1>Text shadow</h1>
<p>The Shadow knows!</p>
<p>The Shadow knows!</p>
<p>The Shadow knows!</p>
<p>The Shadow knows!</p>
</div>
</div>
<div>
<div class="title">Backwards Text</div>
<div>
<h1>Backwards text</h1>
<p>
Hey!</br>This is reversed!</br>Flip it around, willya, buddy?
</p>
</div>
</div>
</body>

</html>