Логотип html: html — Как вставить логотип на шапку сайта?

08.06.2023 Facebook Twitter LinkedIn Google+ Разное

html — Логотип и ссылки в строку

Задать вопрос

Вопрос задан

Изменён 3 года 7 месяцев назад

Просмотрен 541 раз

Хочу чтобы логотип и ссылки были в одну строку. Я хочу это сделать с помощью флексов или гридов. как это сделать на моем примере?

html,body{
   min-height: 5026px;
    padding: 0;
    margin: 0;
}


*, *::before, *::after {
    box-sizing: border-box;
  }

.container{
    width: 1060px;
    margin: 0 auto;
}


header{
   
}

nav li{
}
nav ul{
    margin: 0;
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: flex-end;
   
}



.
 
 main-navigation a{
   
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    color: #626262;
    text-decoration: none;
    font-size: 14px;
    padding-right: 20px;
}





#logo{
    font-family: 'Inconsolata', monospace;
    font-size: 30px;
    text-transform: uppercase;
    padding: 0;
    display: flex;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link type="text/css" rel="stylesheet" href="css/style.css">
        <link href="https://fonts.googleapis.com/css?family=Inconsolata|Playfair+Display:400,400i,700,900" rel="stylesheet">
        <script type="text/javascript" href="js/script.js" defer></script>
    </head>
    <body>
            <div>
    <header>
            <h2 href="#">minimø</h2>
        <nav>
        <ul>
            
            <li><a href="#">lifestyle</a></li>
            <li><a href="#">photodiary</a></li>
            <li><a href="#">music</a></li>
            <li><a href="#">travel</a></li>
        </ul>
        </nav>
    </header>   
    
            </div>
    
    <div>
        <div>
        <img src="img/himg.
  png" alt="" >
        </div>
    </div>
    </body>
</html>

как должно выглядеть

флоаты и инлайн блоки больше не юзаю

  • html
  • css
li{
  list-style: none;
}

header{
    position: absolute;
    height: 15vh;
	z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
	width: 80vw;
    left: 10%;
    background-color: #00a550;
}

nav.hMenu{
    display: flex;
    justify-content: center;
}
nav.hMenu a{
    padding: 7px 1vw;
    font-size: 16px;
    color: #fff;
}
nav.hMenu a:hover{
    box-shadow: 0 0 0 1px #fff;
    border-radius: 15px;
}

span.logo{
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
}
<header>
    <span>minimø</span>
    <nav>
        <li><a href="index.
  html">Hello</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
    </nav>
</header>

Прокачав свои скилы решил ответить на свой вопрос сам.

.container{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.logo{
display: flex;
align-items: center;
}


.menu{
    display: flex;
    padding: 0;
}
li{
    margin-left: 10px;
    list-style-type: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1. 0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link type="text/css" rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
   <div>
       <div>
           <img src="data:image/png;base64,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" alt="">
           <span>Logo</span>
       </div>
       <ul>
           <li><a href="">home</a></li>
           <li><a href="">about</a></li>
           <li><a href="">contact</a></li>
           <li><a href="">Call</a></li>
       </ul>
   </div>
</body>
</html>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Логотипы Html | Создать логотип Html

Turbologo предлагает множество идей для создания html-логотипов.

Выберите один из настраиваемых шаблонов и дайте волю своему вдохновению, чтобы разработать дизайн html-логотипа в соответствии с вашими потребностями. С помощью редактора html логотипов, как никогда, легко наслаждаться непревзойденным качеством и возможностями проектирования.

Логотип Конференции Программистов

Вдохновитесь нашей коллекцией html шаблонов логотипов. Создайте свой брендинг на их основе или создайте html-логотип с нуля. Доступ к библиотеке идей дизайна логотипов Turbologo бесплатный. Просто выберите иконку html и соответствующие цвета и посмотрите различные варианты логотипов html.

После того как вы окончательно разработаете логотип, которым вы будете гордиться, скачайте векторное изображение логотипа html.

Изучите лучшие идеи логотипов

  • IT, Разработка
  • YouTube
  • Абстракция
  • Авто
  • Алмаз
  • Аниме
  • Армия
  • Арт, искусство
  • Баскетбол
  • Безопасность
  • Бейсбол
  • Бесконечность
  • Бизнес
  • Бутик
  • Графический дизайн
  • Группа
  • Деньги
  • Диджей
  • Дом
  • Дом
  • Дракон
  • Еда
  • Здоровье
  • Империя
  • Инстаграм
  • Интернет
  • Камера
  • Киберспорт
  • Клининг
  • Книга
  • Компас
  • Компьютерные игры
  • Корона
  • Кофе
  • Круг
  • Крутой
  • Кулак
  • Лиса
  • Личный
  • Лошадь
  • Майнкрафт
  • Медведь
  • Медицина
  • Минимализм
  • Мода
  • Морской
  • Недвижимость
  • Обучение и образование
  • Огонь
  • Одежда
  • Оранжевый лев
  • Орел
  • Пекарня
  • Пиво
  • Подкаст
  • Призрак
  • Приложение
  • Птица
  • Пчела
  • Разнорабочий
  • Ресницы
  • Семья
  • Сердце
  • Собака
  • Современный
  • Спорт
  • Строительство
  • Телевидение
  • Тренер
  • Фитнес
  • Фотография
  • Футбол
  • Цветы
  • Чемпионат
  • Школа
  • Шопифай
  • Эл. адрес
  • Эстетичный

Больше идей логотипов

Турболого — создание логотипа онлайн, бесплатно.
© 2023 «Турболого»

Логотип W3C HTML5

Готов сейчас к будущему

Возьмите под свой контроль — ваш Интернет, ваш логотип

Логотип HTML5

Он сильный и правдивый, устойчивый и универсальный, как и разметка. ты пишешь. Он сияет так же ярко и смело, как вы дальновидные, преданные своему делу веб-разработчики. Это стандарт стандарта, вымпел прогресса. И это, безусловно, не использует таблицы для макета.

Представляем логотип HTML5.

Использовать логотип

У вас в голове HTML5. Сказать миру.

Покажи немного любви

Этот логотип HTML5 используется под лицензией Creative Commons Attribution. 3.0 — все можно использовать бесплатно и переосмысливать по своему усмотрению.

HTML5 в дикой природе

Галерея логотипов HTML5 (ниже) демонстрирует творчество сообщества. Мы предложить вам представить свои наблюдения, будь то снимки экрана или фильмы или кексы.

Технология

Воображение, встречайте реализацию. HTML5 является краеугольным камнем открытая веб-платформа W3C; каркас, предназначенный для поддержки инновации и использовать весь потенциал Интернета. Представляя этот революционный набор инструментов и стандартов, система идентификации HTML5 предоставляет визуальный словарь для четко классифицировать и сообщать о наших коллективных усилиях.

Вы уже в нескольких секундах от своего потрясающего персонализированного значка. Запустите Конструктор значков 5000.

Ориентация

Боковая панель или нижний колонтитул? Стоя или лежа?

Горизонтальный Вертикальный

Что за технология?

Создайте логотип, демонстрирующий, что вы используете.

Технология HTML Классы
  • Автономный режим и хранилище
  • Доступ к устройству
  • Связь / Реальное время
  • Производительность и интеграция
  • Мультимедиа
  • Семантика
  • Графика, 3D и эффекты
  • CSS3 / Стиль

Построй, и они придут

Движение

Вы в восторге от HTML5; мы тоже. Вы уже не просто наслаждаетесь Интернетом на базе HTML5 — вы его создаете! По мере распространения и вдохновения веб-сообщество будет находить творческие способы применения HTML5 и связанных с ним технологий, определять тенденции и использовать передовой опыт. По мере нарастания импульса мы надеемся, что вы возьмете с собой этот логотип и раскрасите мир в оранжевый цвет.

ЛОГОТИП В ДЕЙСТВИИ

Вы знаете тот значок HTML5, который вы так идеально поместили в свой нижний колонтитул? Эта футболка с HTML5 привлекает внимание в офисе? Наклейки HTML5 на вашем ноутбуке и логотип HTML5, который вы выпилили у себя в голове? Мы хотим это видеть! Покажите нам свои скриншоты, фотографии и другие творческие начинания, и они могут оказаться прямо здесь, в нашей галерее HTML5ivers.

Сообщите в Твиттере о своих появлениях логотипа HTML5 с хэштегом #html5logo

Загрузки

Mark + Wordmark

SVG

Скачать

PNG
  • 512px
  • 256px
  • 128px
  • 64px
  • 32px

Только отметка

SVG

Скачать

PNG
  • 512px
  • 256px
  • 128px
  • 64px
  • 32px

Опорные элементы

SVG

Скачать

PNG
  • Стандартный размер
  • Маленький размер

Технологические классы

Набор иконок SVG

Скачать

PNG
  • 512px
  • 256px
  • 128px
  • 64px
  • 32px

Одноцветные логотипы

SVG
  • Черный
  • Белый
PNG
  • Черный
  • Белый

Шаблоны наклеек

SVG

Скачать

PNG

Стандартный размер

Люди делают вещи!

Примеры наклеек!

Эти наклейки были доступны, когда мы впервые запустили логотип.

Comments
Leave Comment