Вопрос Как вставить картинку около текста?

Adrenochrome · 8 Ноя 2020

Всем привет.
Вопрос следующий - как вставить данную картинку в положение, которое показано на скриншоте.

Сам скриншот:

У меня получается так, что картинка сьезжает, а текст уходит вниз. Мне кажется, путаница в index по поводу div и что-то с css
Идея в том, что картинка должна быть слева от текста, а сам текст чуть выше.
Далее исходники:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>INVITE SHOP</title>
    <meta name='description' content='shit'>
    <meta name="keywords" content='pornhub' >
    <link rel="stylesheet" href="assets/css/style.css">
    <script src='script.js'></script>

</head>
<body>
    <div class='main'>
        <div class='header'>
            <div class='logo'>
                <img src="https://sun9-73.userapi.com/PHlABb5YVD-5zolYVkjok8KAuuoXvTRZu7jp7Q/QZS4Noih0OQ.jpg">
                <div class='logo_text'>
                    <h1>Invite shop</h1>
                    <h2>Get good - get invite</h2>
                </div>
            </div>
        </div>


    </div>
</body>
</html>

CSS:

.main, .logo, .menubar, .site_content, .footer {
    margin-left: auto;
    margin-right: auto;
}

.logo {
    width: 880px;
    
    
}

.logo h1, .logo h2 {
    font: normal 300% 'century gothic', arial, sans-serif;
    margin: 0 0 0 5px;
}

.logo_text h1, .logo_text h1 a, .logo_text h1 a:hover {
    padding: 22px 0 0 0;
    color: #fff;
    text-decoration: none;
}

.logo_text h2 {
    font-size: 1em;
    padding: 4px 0 0 0;
    color: #999;
    letter-spacing: 0.1em;
    
}

.logo img {
    width: 100px;
    height: 100px;
    
}

HORMAN · 8 Ноя 2020

Проверяй.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>INVITE SHOP</title>
    <meta name='description' content='shit'>
    <meta name="keywords" content='pornhub' >
    <link rel="stylesheet" href="assets/css/style.css">
    <script src='script.js'></script>

</head>
<body>
    <div class='main'>
        <div class='header'>
            <div class='logo'>
                <img src="https://sun9-73.userapi.com/PHlABb5YVD-5zolYVkjok8KAuuoXvTRZu7jp7Q/QZS4Noih0OQ.jpg">
                <div class='logo_text'>
                    <h1>Invite shop</h1>
                    <h2>Get good - get invite</h2>
                </div>
            </div>
        </div>


    </div>
</body>
</html>

CSS:

body{
  background-color: #0003;
}
.main, .logo, .menubar, .site_content, .footer {
    margin-left: auto;
    margin-right: auto;
}

.logo {
    width: 880px;
    display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
   
}

.logo h1, .logo h2 {
    font: normal 300% 'century gothic', arial, sans-serif;
    margin: 0 0 0 5px;
}

.logo_text h1, .logo_text h1 a, .logo_text h1 a:hover {
    padding: 22px 0 0 0;
    color: #fff;
    text-decoration: none;
}

.logo_text h2 {
    font-size: 1em;
    padding: 4px 0 0 0;
    color: #999;
    letter-spacing: 0.1em;
   
}

.logo img {
    width: 100px;
    height: 100px;
   
}

Adrenochrome · 8 Ноя 2020

horman написал(а):

Проверяй.
Посмотреть вложение 111378

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>INVITE SHOP</title>
    <meta name='description' content='shit'>
    <meta name="keywords" content='pornhub' >
    <link rel="stylesheet" href="assets/css/style.css">
    <script src='script.js'></script>

</head>
<body>
    <div class='main'>
        <div class='header'>
            <div class='logo'>
                <img src="https://sun9-73.userapi.com/PHlABb5YVD-5zolYVkjok8KAuuoXvTRZu7jp7Q/QZS4Noih0OQ.jpg">
                <div class='logo_text'>
                    <h1>Invite shop</h1>
                    <h2>Get good - get invite</h2>
                </div>
            </div>
        </div>


    </div>
</body>
</html>

CSS:

body{
  background-color: #0003;
}
.main, .logo, .menubar, .site_content, .footer {
    margin-left: auto;
    margin-right: auto;
}

.logo {
    width: 880px;
    display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  
}

.logo h1, .logo h2 {
    font: normal 300% 'century gothic', arial, sans-serif;
    margin: 0 0 0 5px;
}

.logo_text h1, .logo_text h1 a, .logo_text h1 a:hover {
    padding: 22px 0 0 0;
    color: #fff;
    text-decoration: none;
}

.logo_text h2 {
    font-size: 1em;
    padding: 4px 0 0 0;
    color: #999;
    letter-spacing: 0.1em;
  
}

.logo img {
    width: 100px;
    height: 100px;
  
}

Спасибо, но если не трудно, можешь сделать через этот исходник(ниже), то есть просто сделать картинку слева, а текст рядом справа.
Тк я рассчитываю в дальнейшем делать именно по этому сурсу, добавляя новое(курс html/css)

CSS:

.header {
    background-color: darkslateblue;
    height: 177px;
    font-size: 0.8em;
    margin-left: 0px;
    margin-right: 0px;
    min-width: 900px;
}

.main, .logo, .menubar, .site_content, .footer {
    margin-left: auto;
    margin-right: auto;
}

.logo {
    width: 880px;
    padding-bottom: 40px;
}

.logo h1, .logo h2 {
    font: normal 300% 'century gothic', arial, sans-serif;
    margin: 0 0 0 9px;
}

.logo_text h1, .logo_text h1 a, .logo_text h1 a:hover {
    padding: 22px 0 0 0;
    color: #fff;
    letter-spacing: 0.1em;
    text-decoration: none;
}

.logo_text h2 {
    font-size: 0.9em;
    padding: 4px 0 0 0;
    color: #999;
    
}

HORMAN · 8 Ноя 2020

Держи.

CSS:

.header {
    background-color: darkslateblue;
    height: 177px;
    font-size: 0.8em;
    margin-left: 0px;
    margin-right: 0px;
    min-width: 900px;
}
.main, .logo, .menubar, .site_content, .footer {
    margin-left: auto;
    margin-right: auto;
}
.logo {
    width: 880px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
.logo h1, .logo h2 {
    font: normal 300% 'century gothic', arial, sans-serif;
    margin: 0 0 0 9px;
}
.logo_text h1, .logo_text h1 a, .logo_text h1 a:hover {
    padding: 22px 0 0 0;
    color: #fff;
    letter-spacing: 0.1em;
    text-decoration: none;
}
.logo_text h2 {
    font-size: 0.9em;
    padding: 4px 0 0 0;
    color: #999;
    
}