Im starting to study and have been for some days trying to copy and paste by inspecting and using builders to see the code… and I can’t substitute the text for a logo in this header.

It would be great to have an SVG image in the place of the logo in the center of the head.

So I need to substitute “Escape Velocity” for an SVG logo.

Can anyone help, please?

Thanks in advance!

enter code here
/* Wrapper */

    .wrapper {
        position: relative;
        padding: 6em 0 9em 0;
    }

        .wrapper .title {
            position: absolute;
            top: 0;
            left: 50%;
            text-align: center;
            text-transform: uppercase;
            display: block;
            font-weight: 700;
            letter-spacing: 0.25em;
            font-size: 0.9em;
            width: 25em;
            height: 3.25em;
            top: -3.25em;
            line-height: 3.25em;
            margin-bottom: -3.25em;
            margin-left: -12.5em;
            padding-top: 0.5em;
        }

            .wrapper .title:before {
                content: '';
                position: absolute;
                bottom: -38px;
                left: -35px;
                width: 35px;
                height: 38px;
                background: url("images/shadow.png");
            }

            .wrapper .title:after {
                -moz-transform: scaleX(-1);
                -webkit-transform: scaleX(-1);
                -ms-transform: scaleX(-1);
                transform: scaleX(-1);
                content: '';
                position: absolute;
                bottom: -38px;
                right: -35px;
                width: 35px;
                height: 38px;
                background: url("images/shadow.png");
            }

        .wrapper.style1 {
            background: #e97770 url("images/overlay.png");
            color: #eee;
            color: rgba(255, 255, 255, 0.75);
        }

            .wrapper.style1 .title {
                background: #e97770 url("images/overlay.png");
                color: #fff;
            }

            .wrapper.style1 h1, .wrapper.style1 h2, .wrapper.style1 h3, .wrapper.style1 h4, .wrapper.style1 h5, .wrapper.style1 h6, .wrapper.style1 strong, .wrapper.style1 b, .wrapper.style1 a {
                color: #fff;
            }

        .wrapper.style2 {
            background: #fff;
        }

            .wrapper.style2 .title {
                background: #fff;
                color: #484d55;
            }

        .wrapper.style3 {
            background: #f3f3f3 url("images/overlay.png");
        }

            .wrapper.style3 .title {
                background: #f3f3f3 url("images/overlay.png");
                color: #484d55;
            }

            .wrapper.style3 .image {
                border: solid 10px #fff;
            }

/* Page Wrapper */

    #page-wrapper > section {
        margin-bottom: 0;
    }

/* Header */

    #header {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-align-items: center;
        -webkit-align-items: center;
        -ms-align-items: center;
        align-items: center;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        -ms-justify-content: center;
        justify-content: center;
        position: relative;
        height: 24em;
        background: url("../../images/banner.jpg") center center;
        background-size: cover;
        padding: 0;
    }

        #header:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url("images/overlay.png");
        }

        .homepage #header {
            height: 35em;
        }

/* Logo */

    #logo {
        width: 100%;
        text-align: center;
        position: relative;
        top: 1.5em;
    }

        #logo h1 {
            font-weight: 900;
            text-transform: uppercase;
            color: #fff;
            font-size: 2em;
            letter-spacing: 0.25em;
        }

        #logo p {
            color: #eee;
            color: rgba(255, 255, 255, 0.5);
            text-transform: uppercase;
            margin: 1.25em 0 0 0;
            display: block;
            letter-spacing: 0.2em;
            font-size: 0.9em;
        }

/* Nav */

    #nav {
        position: absolute;
        display: block;
        top: 2.5em;
        left: 0;
        width: 100%;
        text-align: center;
    }

        #nav > ul {
            display: inline-block;
            border-radius: 0.35em;
            box-shadow: inset 0px 0px 1px 1px rgba(255, 255, 255, 0.25);
            padding: 0 1.5em 0 1.5em;
        }

            #nav > ul > li {
                display: inline-block;
                text-align: center;
                padding: 0 1.5em 0 1.5em;
            }

                #nav > ul > li > ul {
                    display: none;
                }

                #nav > ul > li > a, #nav > ul > li > span {
                    display: block;
                    color: #eee;
                    color: rgba(255, 255, 255, 0.75);
                    text-transform: uppercase;
                    text-decoration: none;
                    font-size: 0.7em;
                    letter-spacing: 0.25em;
                    height: 5em;
                    line-height: 5em;
                    -moz-transition: all .25s ease-in-out;
                    -webkit-transition: all .25s ease-in-out;
                    -o-transition: all .25s ease-in-out;
                    -ms-transition: all .25s ease-in-out;
                    transition: all .25s ease-in-out;
                    outline: 0;
                }

                #nav > ul > li:hover > a {
                    color: #fff;
                }

                #nav > ul > li.active > a, #nav > ul > li.active > span {
                    color: #fff;
                }
<!DOCTYPE HTML>
<!--
    Escape Velocity by HTML5 UP
    html5up.net | @ajlkn
    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
    <head>
        <title>Escape Velocity by HTML5 UP</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <link rel="stylesheet" href="https://stackoverflow.com/questions/72037543/assets/css/main.css" />
    </head>
    <body class="homepage is-preload">
        <div id="page-wrapper">

            <!-- Header -->
                <section id="header" class="wrapper">

                    <!-- Logo -->
                        <div id="logo">
                            <h1><a href="index.html">Escape Velocity</a></h1>
                            <p>A free responsive site template by HTML5 UP</p>
                        </div>