Не могу правильно спозиционировать фото, может кто поможет?

Question

Валерий @Skorobei18

Учусь вёрстке

HTML
CSS

Не могу правильно спозиционировать фото, может кто поможет?

вот что надо сделать и то что я на данный момент имею

вот то что я пытался сделать

так я прописал фон под фото, но есть ощущение, что это должно быть сделано по другому

Вопрос задан более трёх лет назад
75 просмотров

5 комментариев

Подписаться 1 Простой 5 комментариев

Yupiter7575 @yupiter7575

Может прикрепите код?

Написано более трёх лет назад
Валерий @Skorobei18 Автор вопроса

Yupiter7575, я прикрепил, или надо ещё какой то?

Написано более трёх лет назад
Yupiter7575 @yupiter7575

Валерий, Чтобы узнать что пошло не так надо запустить код. Чтобы его запустить надо его переписать. Вы будете переписывать?

Написано более трёх лет назад

Валерий @Skorobei18 Автор вопроса

<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Womazing</title>
	<meta name="description" content="Одежда">
	<meta name="keywords" content="Отечественные дизайнеры, бархатные оттенки, утончённые сочетания">
	<!-- OG Tags -->
	<meta property="og:title" content="Дизайнерская одежда">
	<meta property="og:description" content="Отечественные дизайнеры, бархатные оттенки, утончённые сочетания">
	<meta property="og:type" content="article">
	<meta property="og:image" content="https://sitename/ru/img/preview/jpg">
	<meta property="og:site_name" content="TEST">
	<!-- Styling -->
	<link rel="shortcut icon" href="assets/img/favicon.png" type="image/png">
	<!-- Bootstrap -->
	<link rel="stylesheet" href="assets/css/bootstrap-reboot.min.css">
	<link rel="stylesheet" href="assets/css/bootstrap-grid.min.css">
	<!-- Fonts -->
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;500&display=swap" rel="stylesheet">
	<!-- CSS -->
	<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<!-- Preloader -->
 <div id="preloader-active">
    <div class="preloader d-flex align-items-center justify-content-center">
        <div class="preloader-inner position-relative">
            <div class="preloader-circle"></div>
            <div class="preloader-img pere-text">
                <img src="assets/img/logo.svg" alt="logo">
            </div>
        </div>
    </div>
</div>
<!-- Header -->
<header class="header" id="header">
	<div class="container">
		<div class="sticky" id="sticky">
			<div class="row align-items-center">
				<div class="col-6 col-md-2">
					<img src="assets/img/logo.svg" class="header-logo" alt="Logo"></img>
				</div>
				<div class="col-d-none col-md-5 ml-auto">
					<!-- Menu -->
					<nav>
						<ul class="menu d-flex">
							<li class="menu__item">
								<a href="#" class="menu__link">
									Главная
								</a>
								<a href="#" class="menu__link">
									Магазин
								</a>
								<a href="#" class="menu__link">
									О бренде
								</a>
								<a href="#" class="menu__link">
									Контакты
								</a>
							</li>
						</ul>
					</nav>
				</div>
				<div class="col-md-3 align-content-center">
					<nav>
						<ul class="contacts d-flex justify-content-end">
							<li class="contacts__item">
								<a href="#" class="contacts_phone"></a>
							</li>
							<li class="contacts__item">
								<a href="tel:+74958235412" class="contacts_number">+7 (495) 823-54-12</a>
							</li>
						</ul>
					</nav>
				</div>
				<div class="col-1">
					<a href="#" class="basket ml-auto"></a>
				</div>
			</div>
		</div>
	</div>
	<!-- Slider -->
<div class="offer" id="offer">
	<div class="container">
		<div class="row">
			<div class="col-md-7">
				<div class="receipts">
					<h1 class="receipts__title">
						Новые поступления в этом сезоне
					</h1>
					<p class="receipts__text">
						Утонченные сочетания и бархатные оттенки - вот то, что вы искали в этом сезоне. Время исследовать.
					</p>
					<div class="wrapper-btn d-flex">
						<a href="#" class="arrow-down"></a>
						<button class="receipts__btn btn">
							Открыть магазин
						</button>
					</div>
					<div class="dots-wrapper d-flex">
						<button type="button" class="dot active"></button>
						<button type="button" class="dot"></button>
						<button type="button" class="dot"></button>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-5">
				<div class="hero">
					<img src="assets/img/girl_big.jpg" alt="girl" class="hero__girl_big">
					<img src="assets/img/girl_down.jpg" alt="girl" class="hero__girl_down">
					<img src="assets/img/girl_up.jpg" alt="girl" class="hero__girl_up">
				</div>
			</div>
			</div>
			
		</div>
	</div>
</div>
	<!--  JS  -->

	<script src = "assets/js/jquery-3.5.1.min.js"></script>
	<script src = "assets/js/jquery.sticky.js"> </script>
	<script src= "assets/js/main.js"></script>
</body>
</html>

Написано более трёх лет назад

Валерий @Skorobei18 Автор вопроса

/*  Specifications  */

body {
	font-family: 'Raleway', sans-serif;
	font-weight: 400px;
	color: #000;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 500;
	margin: 0;
	padding: 0;
}

.container {
	width: 1110px;
	margin: 0 auto;
	padding: 0;
}

.btn {
	display: block;
	background-color: #6E9C9F;
	color: #fff;
	font-weight: normal;
	text-align: center;
	transition: 0.5s ease;
	font-size: 17px;
}

.btn:hover {
	background-color: #509498;
	color: #fff;
}

span {
	margin: 0;
	padding: 0;
}

p {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
	color: #000;
	margin: 0;
	padding: 0;
	border: none;
	background-color: transparent;
}

img {
	border: none;
	background-color: transparent;
}

a:hover {
	text-decoration: none;
	color: #6E9C9F;
}

ul, li {
	list-style-type:none;
	margin: 0;
	padding: 0;
}

button {
	display: block;
	font-family: inherit;
	outline: none;
	padding: 0;
	border: none;
	cursor: pointer;
	background-color: transparent;
}

button:active,
button:focus {
	outline: none;
}

.btn {
	background-color: #6E9C9F;
	color: #fff;
	font-weight: 400;
	text-align: center;
	transition: 0.5s ease;
	font-size: 17px;
	padding: 22px 50px;
}

.btn:hover {
	background-color: #509498;
	color: #fff;
}

.btn-ghost {
	border: 1px solid #509498;
	background-color: #fff;
	color: #509498;
	font-weight: 400;
	text-align: center;
	transition: 0.5s ease;
	font-size: 17px;
	padding: 22px 50px;
}

.btn-ghost:hover {
	background-color: #509498;
	color: #fff;
}

section {
	padding-top: 130px;
}

/*  Preloader  */

.preloader {
    background-color: #f7f7f7;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    -webkit-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease;
    margin: 0 auto;
}
.preloader .preloader-circle {
    width: 100px;
    height: 100px;
    position: relative;
    border-style: solid;
    border-width: 1px;
    border-top-color: #6E9C9F;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    z-index: 10;
    border-radius: 50%;
    -webkit-box-shadow: 0 1px 5px 0 rgba(35, 181, 185, 0.15);
    box-shadow: 0 1px 5px 0 rgba(35, 181, 185, 0.15);
    background-color: #fff;
    -webkit-animation: zoom 2000ms infinite ease;
    animation: zoom 2000ms infinite ease;
    -webkit-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease;
}
.preloader .preloader-circle2 {
    border-top-color: #0078ff;
}
.preloader .preloader-img {
    position: absolute;
    top: 50%;
    z-index: 200;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    display: inline-block;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding-top: 6px;
    -webkit-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease;
}
.preloader .preloader-img img {
    max-width: 55px;
}
.preloader .pere-text strong {
    font-weight: 500;
    color: #dca73a;
    text-transform: uppercase;
}

/*  Header  */

.header {
	background-color: #F1EADC;
	width: 664px;
	height: 826px;
}

.sticky {
	position: relative;
	width: 1110px;
 	top: 51px;
  	z-index: 1;
}

.header-logo {
	display: block;
	width: 139px;
	height: 25px;
}

.menu__link {
	margin-right: 42px;
	font-size: 15px;
	letter-spacing: 0.02em;
}

.menu__link:last-of-type {
	margin-right: 0;
}

.contacts_number {
	font-size: 15px;
}

.contacts_phone {
	display: block;
	width: 27px;
	height:	27px;
	background: url('../img/phone.svg');
	margin-right: 9px;
    transition: all 0.5s ease;
}

.contacts_phone:hover {
	display: block;
	width: 27px;
	height:	27px;
    background: url('../img/phone_hover.svg') no-repeat center center, rgba(110,156,159,1);
}

.basket {
	display: block;
	width: 24px;
    height: 24px;
    background: url(../img/basket.png);
}

.offer {
	margin-top: 192px;
}

.receipts__title {
	max-width: 585px;
	font-size: 55px;
	letter-spacing: 0.02em;
}

.receipts__text {
	max-width: 385px;
	margin-top: 45px;
	font-size: 20px;
	text-align: end;
}

.wrapper-btn {
	margin-left: 80px;
}

.arrow-down {
	margin-top: 50px;
	background: url(../img/arrow_down.png) no-repeat center center, rgba(110, 156, 159, 0.1);
	width: 67px;
	height: 67px;
}

.receipts__btn {
	margin-top: 50px;
	font-size: 17px;
}

.dots-wrapper {
  	display: flex;
	position: relative;
    top: 126px;
    justify-content: center;
}

.dot {
	max-width: 30px;
	width: 100%;
    height: 4px;
    background-color: #D1D1D1; 
    margin-right: 12px;
	cursor: pointer;
	border: none;
}

.dot.active {
    background-color: #000;
}

.dot:last-child {
    margin-right: 0;
}

.hero {
	display: inline-block;
	position: relative;
}

.hero__girl_big {
	display: inline-block;
	position: relative;
	width: 434px;
	height: 652px;
}

.hero__girl_down {
	position: absolute;
    top: 0;
    right: 0;
    display: block;
}

.hero__girl_up {
	position: absolute;
    top: 0;
    right: 0;
    display: block;
}

Написано более трёх лет назад

Решения вопроса 1

2 комментария

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 9 часов назад
- 72 просмотра
1

ответ
CSS

Простой
Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?
- 1 подписчик
- вчера
- 71 просмотр
0

ответов
CSS

Простой
Как заменить плавно логотипы?
- 1 подписчик
- вчера
- 61 просмотр
1

ответ
HTML

Простой
Какая альтернатива AVIFS поддерживается в iOS?
- 1 подписчик
- 20 дек.
- 31 просмотр
1

ответ
CSS

Средний
Как сделать сквозную нумерацию неупорядоченных списков?
- 1 подписчик
- 20 дек.
- 69 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 100 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как загрузить img в первой очереди при загрузке страницы?
- 1 подписчик
- 19 дек.
- 90 просмотров
1

ответ
HTML

+1 ещё

Простой
Как с помощью регулярного выражения найти все теги?
- 1 подписчик
- 19 дек.
- 87 просмотров
2

ответа
HTML

+1 ещё

Простой
Можно ли задать стили внешнему тегу на основе вложенного?
- 1 подписчик
- 18 дек.
- 104 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как сделать универсальную HTML-ссылку на яндекс карты?
- 1 подписчик
- 17 дек.
- 251 просмотр
0

ответов
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

CRM Bitrix24 разработчик

World Vision Clinic • Москва

от 170 000 ₽

Расшифровать требуемые параметры из CAN-шины авто Chery Tiggo 7 Pro

23 дек. 2024, в 00:27

20000 руб./за проект

Отправка команды на (раз)блокировку двигателя Chery Tiggo 7 Pro

23 дек. 2024, в 00:15

20000 руб./за проект

Собрать из исходного кода и запустить в докере рабочее приложение с бд

22 дек. 2024, в 22:57

500 руб./за проект

Yupiter7575, я прикрепил, или надо ещё какой то?
Валерий, Чтобы узнать что пошло не так надо запустить код. Чтобы его запустить надо его переписать. Вы будете переписывать?

Answer 1 · 2021-04-14 21:53:16

Юрий @cheeroque

Да хоть абсолютами сделайте, вполне рабочий вариант:

Ответ написан более трёх лет назад

2 комментария

Не могу правильно спозиционировать фото, может кто поможет?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт