padding problem

MediaSvcsUnlimited · January 13, 2016

Hi, I don't know why I'm having problems figuring out how to put some green color under the article element. I have played around with the margin and padding but nothing is working .

<?php
require_once('functions.php');
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://www.linkbuildingservices4sites.com/resources/slide-show.js"></script>
<link rel = "stylesheet" href = "MSU.css">
   <!--[if It IE 9]>
    <script src="http://html5shiv.googlecode-.com/svn/trunk/html5.js">
    </script>
    <![endif]-->
<style type="text/css">
#intro {
	width:100%; 
	background-color:#274e3f;
}
h1 {
	color: #FFFFFF; 
	font-family: allan;
	font-style: normal;
	font-weight: 700;
	font-size: 2em;
	text-shadow: 0px 0px;
	margin-left: 4%;
	padding-top:2%; 
}
article {
	width:80%;
	background-color:#FFFFFF;
	margin-left:auto;
	margin-right:auto;	
}
	.flip3D {
		width: 320Px;
		height:200px;
		float:left;
		margin:10px;
	}
	.flip3D > .front {
		position:absolute;
		transform:perspective(600px)
		rotateY(0deg);
		background-color: #99cc99;
		width:320px;
		height:200px;
		border-radius:7px;
		backface-visibility:hidden;
		transition:transform .5s linear 0s;
	}
.flip3D > .back {
		position:absolute;
		transform: perspective(600px)
		rotateY(180deg);
		background-color:#99CC99;  
		width:240px;
		height:300px;
		border-radius: 7px;
		backface-visibility: hidden;
		transition: transform .5s linear 0s; 
}
.flip3D:hover > .front {
	transform: perspective(600px) rotateY(-180deg);
}
.flip3D:hover > .back {
	transform: perspective(600px) rotateY(0deg);
}
#testimonies {
	height:6em;
	width:40%;
	margin-right:auto;
	margin-left:auto;
	text-align:center;
	padding-left:10%;
	padding-right:10%;
	padding-bottom:2%;
	padding-top:2%; 
	background-color:#cae7eb;
}
li {
	list-style:none; 
}
#portfolio {
	clear:both;
}
.quotes
        {
			display:none; 
		}
footer {
	clear:  both;
}
          
</style>

<link href="MSU.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.button.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.tabs.min.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script src="jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery.ui-1.10.4.button.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery.ui-1.10.4.tabs.min.js" type="text/javascript"></script>
<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/bad-script:n4:default;arbutus:n4:default;allan:n7:default.js" type="text/javascript"></script>
    <script type="text/javascript">
	      (function() {
    var quotes = $(".quotes");
    var quoteIndex = -1;
    
    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(8000)
            .delay(10000)
            .fadeOut(8000, showNextQuote);
    }
    
    showNextQuote();
    
})();
var slideArray = new Array()
slideArray[0]= "Mindy was a great employee.  She was always on-point, task driven, and greatly assisted in our sales efforts.  Our business is very challenging and competitive, but Mindy helped us to overcome obstacles and succeed whenever possible. <br /> Jon Landua EarthCoolor";
slideArray[1]= "We chose Mindy because of her creativity, professionalism and ability to \"beat the clock\". We were pleased with the finished marketing projects she completed on behalf of our fundraiser!\" Wells Community Boys & Girls Club";
slideArray[2]= "Mindy did an outstanding job working with our sales team. Her hard work and intuitive approach were valuable assets in helping us achieve our sales goals.\” Kim Price EarthColor";

function textSlideShow()
{
var total_slides;
total_slides=Math.floor(Math.random()*slideArray.length)
document.getElementById('testimonies').innerHTML=slideArray[total_slides];
setTimeout("textSlideShow()",1500);
}
</script>
  
</head>

<body>   
<?php logoMenu();?>
<div id="intro">
<h1>Meeting all your marketing needs. . .  </h1>
<article>  
Media Services Unlimited (MSU) was founded by Indiana entrepreneur Mindy Thomas
 to offer a variety of creative services to small business owners and not-for-profit organizations that cannot afford their own in-house marketing staff.  Here are just some of the services offered by our company:<br />
•	Web design <br />
•	Web content management<br />
•	Search engine optimization (SEO)<br />
•	Social media management<br />
•	Video editing<br />
•	Marketing material creation <br />
•	Creative writing<br /><br />
Let Media Services Unlimited handle your marketing so you can concentrate on the other important aspects of operating and growing your organization!
<!--Running a business, of any size, is rough, but it's especially rough for small  businesses.  as an owner of a small business, you wear so many hats!  You are the salesperson, the producer of the product, and sometime you have to do all the marketing work.  Wouldn't it be nice if there was a way to hand the marketing tasks to someone else, and not have to hire a full-time marketing staff?  Well, fortunately there is!  Media Services Unlimited is a full-service marketing company specifically geared towards small businesses.  We handle all the marketing tasks, so you can focus on producing high-quality products and your customers!  -->
</article>
</div>
 <div id="testimonies"><script type="text/javascript" language="javascript">textSlideShow();</script></div>
 <div id = "portfolio">
<div class ="flip3D">
	<div class ="front">
		Website Portfolio 
    </div> 
	<div class ="back">
		<ul> 
            	<li>Website Design </li>
                <li>Content Management </li>
                <li>SEO</li>
            </ul>
    </div>    
</div>
<div class ="flip3D">
	<div class ="front">
		Marketing Portfolio 
    </div> 
	<div class ="back">
		<ul>
            	<li>Marketing Material Creation  </li>
                <li>Social Media Management </li>
                <li>Creative Writing </li>
                <li>Video Editing </li>
            </ul>
    </div>    
</div>
</div>
<?php footer(); ?>
</body>
</html>

.

MediaSvcsUnlimited · January 14, 2016

never mind I got it.

Sign In

padding problem

Recommended Posts

MediaSvcsUnlimited

Link to comment

Share on other sites

MediaSvcsUnlimited

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information