Need help with CSS styling please

Hi all i am working in wordpress and i am not to bad with that at all i do it for a living but i need some external css for a mail page, its been a really long time since i have done any css so any help would be grate

This is the code i have so far, ( i was given by the client who wants it on the site


Main Page

<!---start-content----->
	 <div class="banner-bottom-grids">
		 <div class="container">
			 <div class="col-md-6 banner-text-info clr1">
				 <i class="icon1"></i>
				 <div class="bnr-text">	
						 <!--S change heding here REPEAT FOR OTHERS-->
					 <h3>Their Stories</h3>
					 	 <!--Change text here-->
					 <p>Vestibulum malesuada nisi sit amet justo ullamcorper, non convallis justo consequat Integer et urna bibendum elit accumsan interdum.</p>
				 </div>
			 </div>
			 <div class="col-md-6 banner-text-info clr2">	
				 <i class="icon2"></i>
				 <div class="bnr-text">
					 <h3>Read Our Blog</h3>
					 <p>Vestibulum malesuada nisi sit amet justo ullamcorper, non convallis justo consequat Integer et urna bibendum elit accumsan interdum.</p>
				 </div>
			 </div>
			 <div class="clearfix"></div>
			 
			 <div class="col-md-6 banner-text-info clr3 btm">	
				 <i class="icon3"></i>
				 <div class="bnr-text">
					 <h3>About Us</h3>
					 <p>Vestibulum malesuada nisi sit amet justo ullamcorper, non convallis justo consequat Integer et urna bibendum elit accumsan interdum.</p>
				 </div>
			 </div>
			 <div class="col-md-6 banner-text-info clr4 btm">	
				 <i class="icon4"></i>
				 <div class="bnr-text">
					 <h3>Where Have We Donated</h3>
					 <p>Vestibulum malesuada nisi sit amet justo ullamcorper, non convallis justo consequat Integer et urna bibendum elit accumsan interdum.</p>
				 </div>
			 </div>
			 <div class="clearfix"></div>
		 </div>
	 </div>
</div>
<!-- //banner -->

Open in new window



and attached it what i need it to look like normal i would do the research and with some luck get it done but i am at a loss at the moment i tihnk it is the lack of sleep and the dead line

thanks in advance
Capture.PNG
adbyitsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
Everything looks in place mate.
You're probably only missing the inclusion of Bootstrap and the CSS file that should have come with that HTML.

Bootstrap will be used from the responsive grid system that it's being used there. Just dlonload Bootstrap and iclude the css file, you don't need anything else.

After that you should have received an CSS file from the client that must have:
> the clr1,clr2,clr3,clr4 classes that assign the bachground colors
> the images icon1,icon2,icon3,icon4
> the fonts? That font is not default so either you already have it or they should have given you the font files and the css that applies it.

With this you should be pretty close to the final result.
0
adbyitsAuthor Commented:
Hi mate sorry for the late reply and thanks for getting back to me, no i didnt get a css files i wish i had it would have made things easy as i could just strip the data from it and put in wordpress if its ok can you please help me out
0
Alexandre SimõesManager / Technology SpecialistCommented:
Hi mate, sorry for the delay.
I added some styling but there are a couple of missing pieces that you need to fill.
Basically I don't have neither the icons (probably they come from a font file), neither the actual used font for the text.

Apart from that, here's the live example, pick the CSS and apply it to your site.
.banner-text-info {
  padding: 10px;
  box-sizing: border-box;
}
.bnr-text {
  padding: 10px;
  box-sizing: border-box;
}

.clr1 .bnr-text{
  background-color: #EC9882;
}
.clr2 .bnr-text{
  background-color: #3779A9;
}
.clr3 .bnr-text{
  background-color: #EB6560;
}
.clr4 .bnr-text{
  background-color: #96BAB4;
}

Open in new window

And don't forget to add the reference to Bootstrap CSS!!
1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

adbyitsAuthor Commented:
Hi mate thanks for that its givne me the colors but now the layout :(
0
Alexandre SimõesManager / Technology SpecialistCommented:
Are you looking at my example?
The layout you want is there, it's just that it's responsive which means that if the available horizontal space is not enough the block will break into a new line. This way they fit better in smaller screens and was how and why Bootstrap was built.

So, to see a layout similar to your image, just make the display square wider or click the top right green small green button to make it full screen.

Let me know :)
0
adbyitsAuthor Commented:
HI mate thanks so much for that it worked saved my life
0
Alexandre SimõesManager / Technology SpecialistCommented:
You're welcome mate :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.