Вещи, которые я скрыл
- как я планировал
– HTML-часть
– часть CSS
- присвоение названия
Как я планировал
Пытались спроектировать несколькими способами. Основой был дизайн в скетчбуке,
*это блокнот, книга идей, книга для плохих набросков и т. д., ммм, это просто наброски моих идей, которые несколько раз оказываются практичными и продуктивными*.
записывать элементы для оформления в Excel. В итоге неудовлетворенный и расстроенный. Итак, я просто представил и начал кодировать на атоме и попытаться выяснить, какие изменения я хочу добавить вместе. Atom — программа, в которой я пишу код. Это было предложено тренером в онлайн-классе.
HTML-часть
Прежде чем начать, хочу сказать, что это мой первый дизайн в коллекции органайзеров и планировщиков. Это довольно просто и понятно, несмотря на то, что потребовалось очень много времени, чтобы разобраться с кодами, интервалами, выравниванием и стилем, особенно с горизонтальной линией.
*Да, это горизонтальная линия, которая представляет собой простую маленькую линию, которую можно очень легко нарисовать за считанные секунды в любом другом программном инструменте. Я новичок, видите ли. Таким образом, это улучшает мои навыки, создавая вещи, которые мне нравятся, это просто мой способ изучать вещи и исследовать вещи. Кроме того, я люблю похлопывать себя по спине при каждом маленьком успехе и достижении. Я думаю, что это держит меня в контакте с внутренним ребенком. Например, как они смеются и аплодируют каждому маленькому шагу и каждой мелочи, которую они получают или достигают*.
Итак, теперь я углублюсь в часть HTML-кодирования.
Я сделал это очень просто, начал с названия и названия моего канала или логотипа с двумя размерами заголовка. Знаете, я не понимаю, зачем масштабирование заголовка от ‹h1› до ‹h6›, когда я могу изменить размер шрифта в CSS. В любом случае, это все еще тайна, если я узнаю об этом, я тоже задокументирую это. Затем следует горизонтальная линия, обозначенная как ‹hr›, и список ‹li›.
#обновить
Небольшое обновление: при написании этого контента я внес некоторые изменения и обнаружил, что элементы списка ‹ul› и ‹ol› не требуются для моего дизайна. Потому что, когда я использовал ‹ul›, точка маркера была довольно далеко от пунктирной линии, и я пытался уменьшить отступ, пробовал много чего, но не мог уменьшить. Итак, просто убрал ‹ul› и вуаля! расстояние сократилось. #
Для заполнения я использовал маркированный список, который называется неупорядоченным списком. Таким образом, для перечисления каких-либо вещей необходимо указать тип списка, то есть неупорядоченный список ‹ul› или упорядоченный список ‹ol›, который является числовым, латинским или алфавитным. Здесь можно использовать любой тип листинга, но я использовал ‹ul›.
*просто представил себе рабочий день. Я избегаю считать, сколько дел мне нужно закончить, это почему-то беспокоит меня, и я хочу бежать, спасая свою жизнь, и проспать ее. Я не, я не в порядке! Я просто плачу и работаю, а потом смотрю Гарри Поттера или какой-нибудь волшебный фильм. Который в основном бежит после работы*.
Итак, вот что.
Часть CSS
Что касается стиля. Я хотел, чтобы это выглядело просто, прилично и минималистично. Текст в теле был выровнен по центру с отступом 20 пикселей сверху и снизу.
Верхнее и нижнее поля упоминаются здесь из-за похожего дизайна, который я сделал за один раз в том же HTML-файле. Таким образом, 40 пикселей — это расстояние между дизайнами.
Ширина и высота каждой карточки списка составляют 550 и 630 пикселей соответственно. Размер здесь не очень важен, я просто сделал это, чтобы полностью разместить один дизайн на экране.
Как-то я наткнулся на этот цвет под названием "помидор". Не знал, что это будет название цвета с кодом #ff6347. Я не помню, где я нашел этот цвет, но это довольно уникальный цвет. Не громкий, не бледный, просто достаточно приятный, чтобы не раздражаться, глядя на него долго. Это, конечно, не то, что я хотел, но у меня не было плана и по цвету.
*Попытался написать названия других фруктов и овощей, чтобы проверить, дают ли они какой-либо цвет, оранжевый сделал! Хе-хе! *
Я также не слишком упражнялся со стилем шрифта, так как придерживаюсь стиля, который упоминался в моем онлайн-курсе по веб-разработке. При этом заголовок написан шрифтом в стиле Sacramento. Я хотел аккуратный неформальный стиль. Так и есть.
*У меня было сильное ощущение, что мой почерк очень похож. Проверено! Нет, в моем стиле письма явно не существует аккуратности*.
Заголовок имеет толщину шрифта 400, поля 20 пикселей сверху и 10 пикселей снизу. Я оставил размер на 2rem, на 3rem он смотрелся совсем в лицо.
Что касается логотипа, позвольте мне сказать, что я очень привязан к Монтсеррат
*когда он тонкий, он дает приятное, холодное и утонченное ощущение*.
Я думаю, что Монтсеррат будет использоваться где-то во всех моих работах, настолько я к ней привязан. Именно вес 200, 300 и 400. Итак, логотип здесь имеет стиль заголовка ‹h6›, присвоил ему класс логотипа, который имеет вес 200. Поскольку я не хотел, чтобы он был выделен, я смягчил его до цвета #f2dcbb .
*в основном сок бледного и больного помидора*.
История горизонтальной линии
Раньше я использовал для этого пунктирную линию, но позже сплошная линия показалась мне более четкой. Он выглядел гладким и четким при ширине 70 пикселей, это казалось правильным размером с верхним полем в -10 пикселей, чтобы приблизить логотип и нижнее поле в 25 пикселей. Удалена граница слева направо снизу. Вы не удаляете стороны, вы не получаете линию, вы получаете коробку.
*никто не хочет чертову рамку в качестве подчеркивания*
Должен признаться, мне потребовалось слишком много времени, чтобы понять, как это удалить.
*Я начал видеть ‹hr› как моего хулигана, всегда смеющегося надо мной*
Последнее — это список, где высота строки составляет 1,8 бэр, то есть расстояние между каждой строкой. Пунктирная линия — это просто ввод с клавиатуры, а затем копирование и вставка.
*традиционный способ*
Идея названия
То, как я придумал заголовок, предполагало, что все мои задачи были приятными или надоедливыми людьми, в зависимости от типа задачи, я имею в виду человека, с которым я могу говорить. Тогда в таком случае, что бы я сказал или что я хотел бы дать ему знать о себе.
- Большую часть времени я думал о грубости при выполнении своей задачи. Вот как я это понял*.
«Я многому учусь и вырабатываю новые привычки. Благодаря онлайн-курсам, которые поддерживают мой дух в эти трудные и запутанные времена! Я создал еще несколько таких дизайнов, о которых расскажу в следующей статье».