Не подтягивает логотип и не накладывается текст на фото

Question

body {
    background-color: #1B1A1B;
    color: #FFFFFF;
}

ul.menu{
    float: right;
}

ul.menu li {
    float: left;
    padding: 0 0 0 9px;
    list-style: none;
    margin: 1px 2px 0 0;
    }

ul.menu li.selected a {
        color:#ffb822;
    }

ul.menu li a{
    font: normal 100% 'trebuchet ms', sans-serif;
    display: block;
    height: 20px;
    padding: 6px 35px 5px 28px;
    color: white;
    text-decoration: none;
    }

.image {
    position: relative;
    width: 100%;
}


h1 {
    position: absolute;
    top : 200px;
    left: 0;
    width: 100%;
}

h2 span{
    font-family: "Roboto";
    color:#ffb822;
    line-height: 55px;
    padding: 10px;
    font-size: 100px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <img src="./img/Rectangle 29 (Stroke).svg" alt="логотип">
        <nav>
            <ul class="menu">
                <li class="selected"><a href="#">HOME</a></li>
                <li><a href="#">ABOUT US</a></li>
                <li><a href="#">OTHER</a></li>
                <li><a href="#">BLOG</a></li>
                <li><a href="#">CONTACT</a></li>
                <li><a href="#">Search</a></li>
            </ul>
        </nav>
    </header>
    <section class="image">
        <h1><span>Kate Leo</span></h1>
        <img src="./img/kate leo.jpg" alt="фото девушки">
        <p>Freelance Web Developer in New York</p>
    </section>
</body>
</html>

Выглядеть должно как на макете только первая секция. И как добавить рамку и лупу к записи search

Answer 1

Часть вопроса по картинке

Если ваш путь к картинке такой:

/site
--/img
----/Rectangle 29 (Stroke).svg
--/index.html

То ссылка на картинку должны быть

<img src="img/Rectangle 29 (Stroke).svg" alt="Логотип">

Часть вопроса по поиску

Если элемент Search является ссылкой, то можно так сделать:

body {background: #000;}

.search {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  min-width: 200px;
  border-radius: 6px;
  border: 2px solid #70419a;
  color: #fff;
  padding: .5rem;
  text-decoration: none;
  text-transform: uppercase;
}

.search span {
  display: inline-block;
  margin-top: -.1em;
  margin-right: 1em;
}

.search svg {
  display: inline-block;
  margin-top: -2px;
}

<a href="#" class="search">
  <span>Search</span>
  <svg width="1em" height="1em" viewbox="0 0 6 6">
    <path d="M5.5 5.5 4 4A1 1 0 001 1 1 1 0 004 4" fill="none" stroke="#70419a" stroke-width=".75" stroke-linecap="round"/>
  </svg>
</a>

Либо использовать background-image

body {background: #000;}

.search {
  display: inline-block;
  min-width: 200px;
  border-radius: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewbox='0 0 6 6'%3E%3Cpath d='M5.5 5.5 4 4A1 1 0 001 1 1 1 0 004 4' fill='none' stroke='%2370419a' stroke-width='.75' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat calc(100% - .5em) center / 1.25em auto;
  border: 2px solid #70419a;
  color: #fff;
  padding: .5rem;
  padding-right: 2em;
  text-decoration: none;
  text-transform: uppercase;
}

<a href="#" class="search">Search</a>

А если элемент не ссылка, а <input>, то так:

body {background: #000;}

.search {
  display: inline-block;
  min-width: 200px;
  border-radius: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewbox='0 0 6 6'%3E%3Cpath d='M5.5 5.5 4 4A1 1 0 001 1 1 1 0 004 4' fill='none' stroke='%2370419a' stroke-width='.75' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat calc(100% - .5em) center / 1.25em auto;
  border: 2px solid #70419a;
  color: #fff;
  padding: .5rem;
  padding-right: 2em;
  outline: none;
}

.search::placeholder {
  text-transform: uppercase;
  opacity: 1;
}

/* 
  ::placeholder лучше прогнать через **autoprefixer**
  https://autoprefixer.github.io/ru/
*/

<input type="search" class="search" placeholder="Search">

БЛОГ НА HUSL

Не подтягивает логотип и не накладывается текст на фото

Ответы (1 шт):