<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<h1 class="title">
Dolgopolova
</h1>
<h1 class="title">
Darya
</h1>
<blockquote class="card"><q class="quote">Working software is the primary measure of <em class="keyword">progress</em></q><a class="src" href="http://agilemanifesto.org/principles.html">Agile manifesto</a></blockquote>
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Dawning+of+a+New+Day|Poppins:300|Playfair+Display|Meddon");
html {
background: #ff8080;
}
* {
margin: 0;
padding: 0;
}
body {
width: 34em;
margin: 5vmin auto;
font-size: calc(0.8vmin + 1vmax);
}
.title,
.keyword {
color: #fdfcfc;
font-family: "Meddon", script;
font-family: "Dawning of a New Day";
font-weight: normal;
}
.title {
font-size: 9em;
text-align: center;
margin: 0;
position: relative;
margin-left: -0.3em;
line-height: 1.1;
margin-bottom: -0.5em;
z-index: -1;
}
.card {
box-shadow: 0 1em 2em rgba(0, 0, 0, 0.5), 0 0 1em rgba(0, 0, 0, 0.3);
background-image: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.2), transparent);
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2), transparent);
padding: 7em 2em 2em 12em;
border-radius: 1.3em;
text-align: right;
margin: 0 2em 0 2em;
}
.quote {
font-family: "Playfair Display", "Georgia", serif;
font-size: 1.4em;
line-height: 1.3;
display: block;
margin-bottom: 2em;
quotes: "“" "”" "‘" "’";
}
.quote::before, .quote::after {
font-size: 1.4em;
display: inline-block;
}
.quote::before {
content: open-quote;
margin-right: 0.1em;
}
.quote::after {
content: close-quote;
margin-left: 0.2em;
}
.keyword {
font-size: 3em;
display: inline-block;
margin: -1em 0 0 0;
}
.src {
color: inherit;
font-family: "Poppins", sans-serif;
font-weight: 300;
font-style: normal;
font-size: 0.8em;
}
