Jazzy 1012
asked on
Changing alignment and creating border
I have this image right now:
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:
Here is my code so far
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:
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Also can you check out this question https://www.experts-exchange.com/questions/28999155/Border-and-image-sizing.html
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.
ASKER
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;
}
.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
Updated sample here
.info-box-container {
width: 50%;
max-width: 600px;
background: rgba(177,56,18,0.9);
padding: .75em .75em; // Make like this
margin: 0 auto;
}
Updated sample here
ASKER