Сделать разметку визитки

@+1 · Регистрация: 24.08.2010

Author24 — интернет-сервис помощи студентам

Я понял, что нифига не смыслю в создании разметки на HTML, ибо я уже за****ся.
Помогите, кто чем может )
Нужно сделать визитку, чтоб при изменении ширины браузера все поля изменялись пропорционально, а текст не выходил за пределы своего блока.
Типа так:

Вот написал код, исправьте, пожалуйста.

HTML5

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<style>
.container { 
  width: 100%;
  height: 100%;
  border: 1px dashed #000;
}
 
.visitka { 
  width: 470px;
  height: 250px;
  border: 1px dashed #000;
  overflow: hidden;
}
.visitka_photo {
  width: 40%;
  border: 1px dashed #000;
}
.visitka_name { 
  width: 45%;
    border: 1px dashed #000;
  overflow: hidden;
}
.visitka_phone {
  width: 45%;
    border: 1px dashed #000;
  overflow: hidden;
}
.visitka_s {
  width: 11%;
    border: 1px dashed #000;
  overflow: hidden;
}
.visitka_param1 {
  width: 28%;
    border: 1px dashed #000;
  overflow: hidden;
}
.visitka_param2 {
  width: 28%;
    border: 1px dashed #000;
  overflow: hidden;
}
.visitka_param3 {
  width: 57%;
    border: 1px dashed #000;
  overflow: hidden;
}
    </style>
</head>
 
<body>
<div id="container" class="container">
<div class="visitka">
    <div class="visitka_photo">
      <h2>photo</h2>
    </div>
    <div class="visitka_name">
      <h2>name</h2>
    </div>
    <div class="visitka_phone">
      <h2>phone</h2>
    </div>
    <div class="visitka_s">
      <h2>s</h2>
    </div>
    <div class="visitka_param1">
      <h2>param1</h2>
    </div>
    <div class="visitka_param2">
      <h2>param2</h2>
    </div>
    <div class="visitka_param3">
      <h2>param3</h2>
    </div>
</div>
</div>
</body>
</html>

@+1 · 16.10.2018, 17:01 **[ТС]**

Ответили на оверфлоу.
Спасибо.

@+1 345 / 178 / 53 Регистрация: 24.08.2010 Сообщений: 1,028
	16.10.2018, 17:01 [ТС]	2
	Ответили на оверфлоу. Спасибо. 0