boxen

Created Sunday 03 December 2017




The html

<!doctype HTML>
<head>
<title> Boxen </title>
<link href="./boxen.css" rel="stylesheet" type="text/css" />
</head>
<body>


<div id="container"> 

<h1> CSS Boxes and things </h1>

 	
 	<div class="menu">
		<b> this is our menu </b>
		<ul>
			<li> thing one </li>
			<li> thing two </li>
			<li> thing three </li>
		</ul>
	</div> 	
 	


	<div id="content">
		<p> a thing to talk about <p>
		<article>

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. FOUR SCORE AND 

<div class="randombox"> "THIS IS THE RANDOM BOX, with a clever quote." </div>

 SEVEN YEARS AGO... Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est. 
 
 
 
 </article>
	

 	</div>

</div>

</body>
</html>

The CSS


h1 { 
	background-color:hsl(0, 50%, 50%);
}

#container {
	max-height: 500px;
}


#content {
	margin-right: 220px;
	padding: 0px 10px 0px 0x;
}

.randombox {
	float:right;
	font-style:italic;
	width: 30%;
	color:purple;	
	border: 1px solid black;
	padding: 10px 10px 10px 10px; 
}

.menu {
		position:relative;
		float:right;
		width: 200px;
		height: 1000px;
		max-height: 100%;
		border: 1px solid blue;
		
}


Backlinks: FSU Courses:LIS5362