Оглавление
Краткое введение
Структура папки
Первый раздел (Заголовок)
Второй раздел (Волны)
Третий раздел (Особенности)
Краткое введение
Прежде чем я напишу что-нибудь еще, я должен упомянуть пару вещей. Во-первых, я здесь новичок, так что потерпите меня. Во-вторых, если вы считаете видео более познавательным, у меня есть учебник по этому проекту на YouTube, нажмите здесь :).
Итак, сегодня я расскажу вам, как создать клон Shopify Landing Page. И причина, по которой я его создал, заключается в том, чтобы продемонстрировать первое правило пользовательского интерфейса. Simple & Consistent.
Подумайте обо всех приложениях/сайтах, которые вы использовали и которые произвели на вас впечатление. Все они (некоторые нет) следовали этому простому правилу.
Простой и последовательный пользовательский интерфейс хорош по следующим причинам:
- Он не перегружен (что может пугать новых пользователей).
- Обеспечивает ощущение знакомости (что заставляет пользователей возвращаться)
- Легче увидеть важные детали
Итак, теперь, когда вы понимаете, почему этот сайт является (или, скорее, был) привлекательным для меня, давайте перейдем к коду.
Структура папки
Откройте редактор и создайте папки и файлы, которые вы видите на картинке (shop-vector.png можно скачать с моего GitHub):
После создания папок создайте основной скелет страницы HTML (не забудьте сослаться на файл CSS и ссылки bootstrap):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./css/index.css" />
</head>
<body>
<h1>Hello World!</h1>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"
></script>
</body>
</html>
А в файле CSS установите основные правила:
body {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
color: #000000;
background: #ffffff;
overflow-x: hidden;
}
Первый раздел (Заголовок)
Сразу под тегом body и следующим кодом:
<section class="green">
<h1 class="title">Sell Online With Shopify</h1>
<p class="sub-title">Trusted By Over 1,700,000 Businesses Worldwide!</p>
</section>
И в index.css добавьте:
section {
display: flex;
flex-direction: column;
align-items: center;
min-height: 200px;
padding: 70px 20vw;
}
.green {
color: #ffffff;
background: #08855e;
}
Код (CSS ) внутри section позаботится о выравнивании всего, что нужно. А .green позаботится о цветах. Теперь у вас есть:
Мы почти закончили с первой секцией. Чтобы закончить его, добавьте следующий код под тегом p (в файле index.html)
<div class="container text-center">
<div class="row d-flex justify-content-center">
<div class="col col-lg-4">
<div class="input-group-lg">
<input
type="text"
class="form-control"
placeholder="Enter Your Email Address"
readonly
/>
</div>
</div>
<div class="col col-auto">
<button class="btn btn-dark btn-lg" type="button">
Start Free Trial
</button>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col helper-text">
<p>
Try Shopify for free 14 days, no credit card required. By
entering your email, you agree to receive marketing emails
from Shopify.
</p>
</div>
</div>
</div>
Небольшое замечание: все классы, используемые в приведенном выше коде, являются классами bootstrap, т.е. нам не нужно использовать CSS.
Теперь у нас осталось вот это:
Вторая секция (Волны)
Для многих из вас это, вероятно, та часть, которую вы ждали больше всего (я знаю, что некоторые из вас пришли ради волн).
Для создания волн мы будем использовать сайт под названием shapedivider.
Вы можете сразу увидеть там некоторые значения, которые вы можете изменить (не стесняйтесь экспериментировать, вам не обязательно использовать ту же волну, что и я), но я просто вставлю следующие значения:
После того, как вы будете удовлетворены своей волной, нажмите кнопку облака, и вы увидите этот экран:
Нажмите кнопку Copy HTML и вставьте ваш код HTML в раздел section .green. Затем нажмите кнопку Copy CSS и вставьте свой CSS. Не забудьте изменить position: absolute на position: relative.
Теперь у вас есть:
Теперь нам нужно добавить изображение (вы можете загрузить его с моего GitHub).
Добавьте следующий код под кодом для волн 🙂
<div class="vector-img">
<img src="./img/shop-vector.png" />
</div>
И добавьте это в ваш CSS файл
.vector-img {
position: absolute;
margin: -30vh 35vw;
z-index: 1;
}
Это гарантирует, что изображение, находится вокруг центра сайта, а z-index: 1; гарантирует, что оно (изображение) всегда будет поверх всего.
Третий раздел (Функции)
Мы почти закончили. Чтобы сделать функции, мы будем использовать Bootstrap Icons. Итак, добавьте следующую ссылку перед </head>.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"
>
Мы будем использовать эти 3 иконки:
<i class="bi bi-window-sidebar"></i>
<i class="bi bi-cash"></i>
<i class="bi bi-people-fill"></i>
И добавьте следующий код под вашим
<section>
<div class="container text-left">
<div class="row">
<div class="col-6 col-md-4 features">
<div class="d-flex justify-content-left align-items-left">
<i class="bi bi-window-sidebar"></i>
</div>
<h6 class="features-text">Customizable Templates</h6>
<p>Free website designs to launch your store quickly and
easily.
</p>
</div>
<div class="col-6 col-md-4 features">
<div class="d-flex justify-content-left align-items-left">
<i class="bi bi-cash"></i>
</div>
<h6 class="features-text">All In One</h6>
<p>
Shopify takes care of everything from marketing and payments to managing money.
</p>
</div>
<div class="col-6 col-md-4 features">
<div class="d-flex justify-content-left align-items-left">
<i class="bi bi-people-fill"></i>
</div>
<h6 class="features-text">A Safe And Efficient Platform
</h6>
<p>
More than a million users trust Shopify to manage their online stores.
</p>
</div>
</div>
</div>
</section>
Код выше гарантирует, что все элементы выровнены правильно и находятся в нужном месте, теперь нам просто нужно добавить немного CSS
и все готово.
Вставьте следующий код в файл index.css:
i {
font-size: 3rem;
color: #08855e;
}
.features {
margin-top: 12vh;
}
.features-text {
font-weight: bold;
}
Наконец-то мы закончили! Вот результат:
Надеюсь, вам понравилось. Если вам понравилось, не забудьте следовать за мной.
Ссылки на мои социальные сети:
24YoungMamba (Young Mamba) — GitHub
Я делаю сайты : )Я могу создать ваш сайт. 24YoungMamba имеет 2 доступных репозитория. Следите за их кодом на GitHub.
github.com 
Young Mamba — Medium
Читайте произведения от Young Mamba на Medium. Я создаю сайты👨💻. Каждый день Young Mamba и тысячи других людей читают, пишут и делятся важными историями на Medium.
medium.com 
Все для веб-разработки и науки о данных! Присоединяйтесь ко мне в путешествии по изучению программирования, от полного новичка до эксперта, который может получить работу, даже не пытаясь.
youtube.com