Se connecter pour répondre
oh this is such a weird title
and this one's weird too
Title for the paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla a dolor blandit tempor. Aliquam vel elit eros. Duis congue dignissim nunc quis euismod. In nec tempor enim, a rutrum erat. Cras rhoncus dictum dolor sit amet interdum. Morbi condimentum lectus vel nisi scelerisque, at semper ante tempor. Nullam vel quam tincidunt, pulvinar libero vitae, luctus lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce odio orci, porta id bibendum sit amet, viverra a elit.
With borders Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla a dolor blandit tempor. Aliquam vel elit eros. Duis congue dignissim nunc quis euismod. In nec tempor enim, a rutrum erat. Cras rhoncus dictum dolor sit amet interdum. Morbi condimentum lectus vel nisi scelerisque, at semper ante tempor. Nullam vel quam tincidunt, pulvinar libero vitae, luctus lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce odio orci, porta id bibendum sit amet, viverra a elit.
something important to say
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla a dolor blandit tempor. Aliquam vel elit eros. Duis congue dignissim nunc quis euismod. In nec tempor enim, a rutrum erat. Cras rhoncus dictum dolor sit amet interdum. Morbi condimentum lectus vel nisi scelerisque, at semper ante tempor. Nullam vel quam tincidunt, pulvinar libero vitae, luctus lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce odio orci, porta id bibendum sit amet, viverra a elit.
- Code:
<div class="pack1">
<img src="https://i.pinimg.com/originals/e7/52/be/e752be0b96cc875c0d8100a3bfec353e.jpg" alt="describe your image" class="img_header" />
<span class="title">oh this is such a weird title</span>
<span class="subtitle">and this one's weird too</span>
<p><span class="in-title">Title for the paragraph</span> Lorem ipsum dolor sit [b]amet[/b], consectetur adipiscing elit. Curabitur fringilla a dolor blandit tempor. Aliquam vel elit eros. Duis congue dignissim nunc quis euismod. In nec tempor enim, a rutrum erat. Cras rhoncus dictum dolor sit amet interdum. Morbi condimentum lectus vel nisi [i]scelerisque[/i], at semper ante tempor. Nullam vel quam tincidunt, pulvinar libero vitae, luctus lacus. Class aptent taciti sociosqu ad litora torquent per [strike]conubia[/strike] nostra, per inceptos himenaeos. [u]Fusce odio orci[/u], porta id bibendum sit amet, viverra a elit.</p>
<p class="with-border"><span class="border-title">With borders</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla a dolor blandit tempor. Aliquam vel elit eros. Duis congue dignissim nunc quis euismod. In nec tempor enim, a rutrum erat. Cras rhoncus dictum dolor sit amet interdum. Morbi condimentum lectus vel nisi scelerisque, at semper ante tempor. Nullam vel quam tincidunt, pulvinar libero vitae, luctus lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce odio orci, porta id bibendum sit amet, viverra a elit.</p>
<span class="text-title">something important to say</span>
<p class="emphase">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla a dolor blandit tempor. Aliquam vel elit eros. Duis congue dignissim nunc quis euismod. In nec tempor enim, a rutrum erat. Cras rhoncus dictum dolor sit amet interdum. Morbi condimentum lectus vel nisi scelerisque, at semper ante tempor. Nullam vel quam tincidunt, pulvinar libero vitae, luctus lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce odio orci, porta id bibendum sit amet, viverra a elit.</p>
</div>
CSS
- Code:
/* PACK1 - CREDIT IS NOT REQUIRED */
/* COMMON PARTS */
.pack1 {
width: 500px;
max-width: 95%;
padding: 20px;
border: 1px solid #f1f1f1;
margin: auto;
background: #fff;
}
.pack1 br {
display: none;
}
.pack1 p br {
display: block;
}
img.img_header {
max-width: 100%;
padding: 2px;
border: 1px solid #f7f7f7;
}
span.title {
display: block;
font-size: 25px;
font-style: italic;
text-transform: lowercase;
font-weight: bold;
letter-spacing: -0.05em;
text-align: right;
}
span.subtitle {
display: block;
font-size: 8px;
text-transform: uppercase;
letter-spacing: 0.5em;
text-align: right;
}
span.text-title {
display: block;
font-size: 17px;
font-style: italic;
text-transform: lowercase;
font-weight: bold;
letter-spacing: -0.05em;
text-align: right;
margin: 30px 20px -20px;
}
.pack1 p {
margin: 30px 0 0;
padding:20px;
text-align: justify;
}
.pack1 p.with-border {
border: 1px solid #f7f7f7;
position: relative;
background: inherit;
}
.pack1 p.with-border span.border-title {
position: absolute;
padding: 2px 5px;
border: 1px solid #f7f7f7;
background: inherit;
top: -14px;
font-size: 15px;
font-weight: bold;
text-transform: lowercase;
font-style: italic;
letter-spacing: -0.01em;
}
p.emphase {
background: #fcfcfc;
border: 3px double #fcfcfc;
background-clip: padding-box;
}
span.in-title {
text-transform: uppercase;
font-weight: bold;
}
span.title:before, .pack1 p.with-border span.border-title:before, span.text-title:before, span.in-title:after {
color: rgb(221, 239, 249);
content: "☆ ";
font-style: normal;
}
.pack1 b, .pack1 strong, .pack1 i, .pack1 em {
color: #c0ddf2;
}
.pack1 u, .pack1 strike, .pack1 s, .pack1 del {
text-decoration-color: #c0ddf2;
text-decoration-style: dotted;
}
