Elvira Van Mook - Ultramarine

Ultramarine

a template I made with CSS and HTML. I learned how to use an SVG in this one, creating the wavy shape with it and I used a clip-path on a background image to get the text with an image inside. You can find the original code posted here: click.

the final result

the code

Of course, it doesn't just appear. I coded the style elements with CSS and then put it together in the right order with HTML. The code you can see below.

<html>

<head>

<style>

.ultramarine1 {
background-color: #E0EBF5;
width: 400px;
min-height:100px;
margin: auto;
margin-top:-10px;
margin-bottom:100px; }

.ultramarine2 {
width:300px;
min-height:1px;
color:black;
font-size:12px;
padding:20px;
padding-bottom:30px;
margin:auto;
text-align:justify;
font-family: mislab-narrow-std, serif;
font-weight: 500;
font-style: normal; }

.ultramarine2 b {
color:#000085;
font-size:12px; }

.ultramarine2 i {
color:#000085;
font-size:12px; }

.svg {
width:400px;
margin:auto;
margin-top:-100px; }

.ultramarine3 {
width:400px;
height:200px;
background-color:#E0EBb5;
margin:auto;}

.ultramarine4 {
width:400px;
height:200px;
background:url("https://images.unsplash.com/photo-1530533718754-001d2668365a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80");
background-size:400px;
background-position:bottom center;
margin-top:50px;}

.ultramarine5 {
min-height:50px;
width:400px;
margin-left:-25px;
background-image: url("https://images.unsplash.com/photo-1530533718754-001d2668365a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80");
background-repeat: repeat;
background-position: center;
background-size:500px;
line-height: 105%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-top: 0px;
font-size: 40px;
text-align: center;
font-weight: bold;
letter-spacing:1px;
text-transform: uppercase;
font-family: novecento-sans-condensed;
font-weight: 800;
-webkit-font-smoothing: antialiased;}

.ultramarine6 {
min-height:50px;
width:400px;
background-image: url("https://images.unsplash.com/photo-1530533718754-001d2668365a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80");
background-repeat: repeat;
background-position: bottom center;
background-size:500px;
line-height: 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-top: -8px;
margin-bottom: -100px;
font-size: 13px;
text-align: center;
font-weight: bold;
letter-spacing:1px;
text-transform: uppercase;
font-family: novecento-sans-condensed;
font-weight: 800;
-webkit-font-smoothing: antialiased;
margin-left:-15px;}

.credit {
color:#000085;
font-size:11px;
opacity: 0.8;
letter-spacing:5px;
font-family: times;
margin:auto;
width:300;
height:15px;
text-align:center;
margin-bottom:40px;}

</style>

</head>

<body>

<div class="ultramarine3">
<div class="ultramarine4"></div>
</div>
<div class="svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"> <path fill="#E0EBF5" fill-opacity="1" d="M0,0L48,21.3C96,43,192,85,288,128C384,171,480,213,576,202.7C672,192,768,128,864,133.3C960,139,1056,213,1152,218.7C1248,224,1344,160,1392,128L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg></div>
<div class="ultramarine1">
<div class="ultramarine2">TEXT CAN GO HERE</div>
<div class="ultramarine5">Ultramarine</div>
<div class="ultramarine6">On the open sea, without wind or tides</div>
</div>
<div class="credit"><a href="http://cttw.jcink.net/index.php?showuser=15275">El4a</a>
</div>

</body>

</html>

You may also like