Как написать разные заголовки в одной строке html

129
10 октября 2019, 04:10

Мне нужно сделать что-то на подобии этого

Вот что,я сделал,я не знаю как писать новый текст по центру 

body 
{ 
	font-family: 'Archivo Narrow', sans-serif; 
 
} 
.border{ 
    border: 1px solid black; 
    padding: 10px; 
	 
} 
 
strong{ 
	font-size: 50px; 
} 
 
h2 { 
    font-size: 150%; /* Размер шрифта */ 
    border-bottom: 2px solid grey; /* Параметры линии под текстом */ 
    font-weight: normal; /* Убираем жирное начертание */ 
    padding-bottom: 5px; /* Расстояние от текста до линии */ 
   left:10%; 
            width:10%; 
 
   } 
   .graficlogo{ 
	 
	height: 5%; 
	width: 5%; 
	 
	justify-content: left; 
	 
}
<!DOCTYPE HTML>  
<html>  
<head>  
 
 <title>Заголовок документа</title>  
 
 	<link rel="stylesheet" type="text/css" href="style/style.css"> 
 <link href="https://fonts.googleapis.com/css?family=Archivo+Narrow" rel="stylesheet"> 
  <meta http-equiv="content-type" content="text/HTML; charset=utf-8" /> 
  </head>  
<body>      
	<h1 align="center">Резюме</h1> 
	<h1 align="center" class ="border">ФИО</h1> 
	<h2 class="leftstr">Инфо</h2> 
 
<div class="topnav"> 
	<li>Birthday: 2001-05-05</li> 
  			<li>Phone: 380630</li> 
  			<li>Email: yuranov8@gmail.com</li> 
  		</li> 
  		</div> 
  		<h2>Навики</h2> 
  		<div class="topnav"> 
  			<ol> 
	        <li>English </li> 
	        <img class="graficlogo" src="img/English1.png" alt="Logo"> 
  			<li>use PC</li> 
  			<img class="graficlogo" src="img/pc.png" alt="Logo"> 
  			<li>Photoshop</li> 
  			<img class="graficlogo" src="img/photo.png" alt="Logo"> 
  			<li>C++</li> 
  			<img class="graficlogo" src="img/C++.png" alt="Logo"> 
  			<li>Microsoft Ofiice</li> 
  			<img class="graficlogo" src="img/pc.png" alt="Logo"> 
  			<li>MySQL</li> 
  			<img class="graficlogo" src="img/photo.png" alt="Logo"> 
  			<li>HTML</li> 
  			<img class="graficlogo" src="img/C++.png" alt="Logo"> 
  		</ol> 
  		</div> 
 
  		 
 </body>  
</html>

Answer 1

Вот пример

body { 
  margin: 0; 
  padding: 0ж 
} 
 
.card { 
  min-height: 100vh; 
  background-color: white; 
  position: relative; 
  display: flex; 
} 
 
.card-content, 
.card-assets { 
  padding: 80px 10px 10px 10px; 
} 
 
.card-title { 
  font-size: 20px; 
  padding: 1rem; 
  background-color: white; 
  width: 300px; 
  position: absolute; 
  top: 15px; 
  left: 80px; 
  border: 1px solid black; 
  text-align: center 
} 
 
.card-assets { 
  flex: 0 0 150px; 
  background-color: #e2e2e2; 
} 
 
.accent { 
  border-bottom: 1px solid black; 
  text-transform: uppercase; 
  font-weight: bold; 
  font-size: .8rem; 
  margin-bottom: .5rem 
} 
 
.text{ 
  margin-bottom: 1rem 
}
<div class="card"> 
  <div class="card-title">Фамилия Имя</div> 
  <div class="card-assets"> 
    <div class="accent">навыки:</div> 
    <div class="text">Lorem ipsum</div> 
    <div class="accent">навыки:</div> 
    <div class="text">Lorem ipsum</div> 
    <div class="accent">навыки:</div> 
    <div class="text">Lorem ipsum</div> 
    <div class="accent">навыки:</div> 
    <div class="text">Lorem ipsum</div> 
  </div> 
  <div class="card-content"> 
    <div class="accent">Описание:</div> 
    <div class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, odit.</div> 
    <div class="accent">навыки:</div> 
    <div class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, odit.</div> 
    <div class="accent">навыки:</div> 
    <div class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, odit.</div> 
    <div class="accent">навыки:</div> 
    <div class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, odit.</div> 
    <div class="accent">навыки:</div> 
    <div class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, odit.</div> 
  </div> 
</div>

READ ALSO
Путь HTML файла в JS скрипте
HTML

Путь HTML файла в JS скрипте

Имеется такой вопрос

 116
Safari на macbook: расширяется textarea при вводе текста?
HTML

Safari на macbook: расширяется textarea при вводе текста?

Safari на macbook: расширяется textarea при вводе текста на сайтеКак только начинаешь вводить текст в textarea, оно расширяется на ширину всего экрана и тянет...

 98
stroke-dasharray через style
jQuery

stroke-dasharray через style

Есть следующий код:

 126
Как настроить $.fancybox.showLoading() и $.fancybox.hideLoading() при переходе на jquery-3 и fancybox-3?
jQuery

Как настроить $.fancybox.showLoading() и $.fancybox.hideLoading() при переходе на jquery-3 и fancybox-3?

есть код отправки и обработки кода в fancyboxВ fancybox-1

 117