Link to home
Start Free TrialLog in
Avatar of Jazzy 1012
Jazzy 1012

asked on

Changing alignment and creating border

I have this image right now:
User generated image
How can I put this span in the middle and for it to have a border and the button border (I want it to be exactly like the second image here:
User generated image
Here is my code so far
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.home{
	background: url('3.jpg') fixed;
	padding:100px 0
}
.card{
background-color: rgba(177,56,18,0.9);
z-index: 1;
width:90%
max-width: 600px;
padding: 4.5em 4em;
box-sizing: border-box;
position: relative;
margin-top: 50px;
}
.white{
color: white;
}
.textCenter{
text-align: center;
}
.inlineBlock{
display:inline-block;
}
.card .hairline{
 border: 1px solid white;
z-index: 0;

}
.hairline{
width: calc(100%-20px);
height: calc(100%-20px);
left:10px;
top: 10px;
box-sizing: border-box;
position: absolute;
}
.verticalMiddle{
vertical-align:middle;
}
.tableCell{
display:table-cell;
}
a.get-started{
margin: 2em auto 0;
padding: 0.66em 0.66em;
z-index: 1;
background: rgba (255,255,255,0);
color:white;
border: 1px solid rgba (255,255,255,0.9);
}
.pointer{
cursor: pointer;
}
.OpenSansBold{
font-family: 'open_sansbold';
}
.block{
display:block;
}
.relative{
position:relative;
}
a{
text-decoration:none;
}
</style>
</head>
<body>
<div class="container">
<div class= "home">
<span class="tableCell textCenter" verticalMiddle" data-reactid=".0.2.0.0.0.0.0">
<span class="card white inlineBlock textCenter" data-reactid=".0.2.0.0.0.0.0">
<span class ="hairline" data-reactid=".0.2.0.0.0.0.0"></span>
<h1 class = "OldStandard">
<p> Eat Well & Be Well
</h1>
<hr data-reactid=".0.2.0.0.0.0.2">
<span class="OpenSans body" data-reactid=".0.2.0.0.0.0.3">
<p>Introducing Epicured: a prepared food delivery service that<br>
 brings exceptional low FODMAP & gluten-free meals to your <br>door.
</p>
</span>
<a href="#" class= "get-started OpenSansBold block textCenter relative pointer" data-reactid=".0.2.0.0.0.0.4"> 
Get Started </a>
</span>
</span>


</div>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Jazzy 1012
Jazzy 1012

ASKER

I put a top border line, but how do i increase the orange a little to the top? because it stop and didnt go over the line
I put a top border line, but how do i increase the orange a little to the top?
Do you still need an answer to this? If so can you post your code.
I just added this:
.info-box {
 border-left: 1px solid white;
 border-right: 1px solid white;
 border-bottom: 1px solid white;
border-top: 1px solid white; //ADDED THIS AND IT DIDNT GO OVER ORANGE
 text-align: center;
 margin: 0;
 overflow: hidden;
 color: #fff;
 padding-top: 4em;
 padding-bottom: 1em;
}
You need to add top padding to the container

.info-box-container {
 width: 50%;
 max-width: 600px;
 background: rgba(177,56,18,0.9);
 padding: .75em .75em;  // Make like this
 margin: 0 auto;
}

Open in new window


Updated sample here