Div BLock Inside An SVG

HTML & CSS
4

I would have just made the pull quote in svg and the gold borders could simply be css borders on a div. In that way the div will adapt to the content automatically.

Just absolutely place the pull quote in the middle of the left edge and rub out the borders with a white background.

Something like this but of course substitute the quote marks for your svg.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>

.box {
	position:relative;
	border: 13px solid #c69214;
	max-width:960px;
	min-width:300px;
	padding:25px 50px;
	font-style:normal;
	margin:25px auto;
    color: #0d277e;
	box-sizing:border-box;
}
.box:after {
	content:"\201C";
	color:#c69214;
	font-size:200px;
	position:absolute;
	top:0;
	bottom:0;
	left:-50px;
	bottom:0;
	line-height:1;
	background:#fff;
	height:100px;
	width:100px;
	margin:auto;
}
.box cite{font-size:1rem;font-style:normal;}
.box p{
	margin:0 0 25px;
    font-size: 2rem;
    font-style: oblique;
}
@media screen and (max-width:1060px){
	.box{margin:0 50px}	
}
</style>
</head>

<body>
<blockquote class="box">
  <p>Typically, 96 percent of fourth- and eight-gradesudents and 85 percent of twelfth-grade studentsselected agree to participate.</p>
  <footer><cite>Source: U.S. Department of Education, Institute of Education Science, National Center forEducation Statistics, National Assessment of Educational Progress [NAEP] 2015 Mathmaticsand Reading Assessments</cite> </footer>
</blockquote>
</body>
</html>
2 Likes