1657543280
Как создать список перетаскивания с помощью HTML, CSS и JavaScript
В этом руководстве мы узнаем, как создать список перетаскивания с использованием HTML CSS и JavaScript. Чтобы создать список перетаскивания с использованием HTML CSS и JavaScript, вам необходимо создать два файла: один файл HTML, а другой — файл CSS.
1: Сначала создайте файл HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag & Drop Element | Codequs</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.2/Sortable.min.js"></script>
</head>
<body>
<div class="wrapper">
<div class="item">
<span class="text">Draggable Element One</span>
<i class="fas fa-bars"></i>
</div>
<div class="item">
<span class="text">Draggable Element Two</span>
<i class="fas fa-bars"></i>
</div>
<div class="item">
<span class="text">Draggable Element Three</span>
<i class="fas fa-bars"></i>
</div>
<div class="item">
<span class="text">Draggable Element Four</span>
<i class="fas fa-bars"></i>
</div>
<div class="item">
<span class="text">Draggable Element Five</span>
<i class="fas fa-bars"></i>
</div>
</div>
<script>
const dragArea = document.querySelector(".wrapper");
new Sortable(dragArea, {
animation: 350
});
</script>
</body>
</html>2: Во-вторых, создайте файл CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #304B5F;
padding: 20px;
}
.wrapper{
background: #fff;
padding: 25px;
max-width: 460px;
width: 100%;
border-radius: 3px;
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.wrapper .item{
color: #fff;
display: flex;
margin-bottom: 8px;
padding: 12px 17px;
background: #304B5F;
border-radius: 3px;
align-items: center;
justify-content: space-between;
}
.wrapper .item:last-child{
margin-bottom: 0px;
}
.wrapper .item .text{
font-size: 18px;
font-weight: 400;
}
.wrapper .item i{
font-size: 18px;
cursor: pointer;
}Теперь вы успешно создали список перетаскивания с помощью HTML CSS и JavaScript.
What is GEEK
Buddha Community
1628189100
How to Image Uploader with Preview || Html CSS JavaScript
Image Uploader with Preview || Html CSS JavaScript || #html #css #javascript #coding
1677108125
Creating a Responsive Blog with HTML, CSS, and JavaScript
Are you looking to build a professional-looking blog with HTML, CSS, and JavaScript? In this video
tutorial, we'll walk you through the process of designing and developing a blog from scratch, step-by-step.
From creating the layout of your blog with HTML and CSS to adding interactivity and functionality with JavaScript,
we'll cover everything you need to know to create a fully functional blog. Whether you're a blogger,
web developer, or simply looking to learn new skills, this tutorial is for you!
We'll also provide some tips and tricks along the way to help you optimize your blog for search engines, improve your website's accessibility, and enhance the user experience.
🔔 Subscribe for more!
https://www.youtube.com/channel/UCHI9Mo7HCSlqum1UMP2APFQ
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🔗 Source code
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
☝ Start developing the project (base files + images)
- Click on the UpFiles link
- Click the green button (code)
- Click Download ZIP
- Extract the project to the desired location
📂Assets
Icons: https://boxicon.com/
Fonts: https://fonts.google.com/
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🔥 Follow me!
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tags:
#responsiveportfolio #portfoliohtmlcssjs #webmonster #html #css #javascript #webdesign #website #react #blog, #HTML #CSS #JavaScript #web_development #responsive_design #accessibility #user_experience #tutorial.
So, if you're ready to start building your own blog, this video is the perfect place to start. Be sure to like this video and subscribe to our channel for more web development tutorials and tips!
Link of The Video :
https://youtu.be/BqgWIel4uuU
1671267560
Personal Portfolio Website Using Html Css and Javascript
In this tutorial we are going to make a personal Portfolio in this website there are six section Home, About, Services,Portfolio , Skills, and Contact the main features of this is dark/light mode function
∎ Download Source codes - https://www.thesimplifieddev.com/make-a-personal-portfolio-website
Features : -
- Fully Responsive
- Dark mode/light mode
- Browser compatibility
- Social Media Icon
- and many more
1630506330
Product landing page using HTML CSS & JavaScript | web design
Knowledge
This video is about the product landing page using HTML CSS And JavaScript, in which we created a simple product landing page using HTML CSS and in order to perform those powerful animations we use the GSAP a JavaScript animation library for work done.
In this video we broadly cover the concepts of CSS Flex box and CSS Grid system and Some CSS Properties such as nth child selector, ::before & ::after much more.
Don't forget to join the channel for more videos like this. Code Savvy
📁 Assets
Icons : https://fontawesome.com/
Fonts : https://fonts.google.com/
GitHub : https://github.com/ananikets18
GSAP : https://greensock.com/gsap/
Outline ⏱
0:00 - Intro
0:10 - Result
0:38 - Project Setup
01:35 – Reset HTML
02:21 – Left Container HTML
03:41 – Wrapper
14:58 – Bottom Shoe Nav
26:23 – Right Container HTML
33:10 – Product Size
35:49 – Reviews
41:11 – GSAP Animations
Click to Watch Full tutorial on YOUTUBE
1678823280
Как создать боковое меню с помощью HTML, CSS и JavaScript
В этой статье вы узнаете, как создавать боковые меню с помощью кода программирования HTML, CSS и JavaScript. Раньше я разработал еще много боковых меню . Надеюсь, вам нравятся эти боковые меню, такие как дизайн.
В этом случае я использовал HTML для создания и программный код CSS для дизайна. В этом случае для активации кнопки меню было использовано небольшое количество JavaScript. Если вы хотите создать боковое меню без кода программирования JavaScript, вы можете посмотреть другие проекты, которые я сделал . Нажатие на кнопку меню здесь скроет всю строку меню.
Когда вы снова нажмете на эту кнопку, появится полная строка меню. Это меню боковой панели выполнено в современном стиле и имеет все необходимое, чтобы сделать боковую панель красивой и привлекательной.
Меню боковой панели с использованием HTML CSS JavaScript
Прежде всего, здесь я использовал изображение профиля. Ниже находится место, где можно дать имена и описания. Ниже я добавил много пунктов меню. Я добавил иконки к каждому пункту меню. Добавление значков делает пункты меню более красивыми и привлекательными.
При желании вы можете изменить эти пункты меню по своему вкусу. Здесь в качестве фона я использовал синий цвет ( background: rgb (5, 68, 104); ) и добавил цветовой эффект при наведении на элементы меню. Иконки будут менять фон, когда вы наводите курсор или нажимаете на пункты меню. Боковое меню представляет собой очень простой и незамысловатый дизайн, который вы, несомненно, сможете научиться делать очень легко.
Если вы хотите увидеть живую демонстрацию этой структуры, вы можете увидеть демонстрационный раздел ниже. Вы также можете скопировать оттуда необходимый исходный код и использовать его в своих целях.
Надеюсь, вам понравилась демонстрация выше, и вы заинтересованы в создании этого дизайна. Если вам нужен исходный код, необходимый для его создания, вы можете скопировать исходный код из демонстрационного раздела выше. Вы также можете загрузить исходный код , нажав кнопку загрузки ниже.
Если вы новичок, вы должны следовать приведенному ниже руководству, чтобы узнать, как шаг за шагом создать это боковое меню . Это требует от вас знания основ программирования HTML, CSS и JavaScript.
Шаг 1: Создайте базовую структуру для боковых панелей
Вы создаете файл HTML, затем копируете приведенную ниже структуру и добавляете ее в этот файл HTML. В следующей структуре я дал информацию, где именно вы добавите следующий программный код.
<!DOCTYPE html>
<html lang=”en”>
<head>
<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.8.1/css/all.css”>
<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>
<style>
</style>
</head>
<body>
<div class=”wrapper”>
<!–Top Menu & Menu button–>
<div class=”sidebar”>
<div class=”profile”>
<!–Profile Image–>
<!–Profile Title & Descruption–>
</div>
<!–Menu item–>
</div>
</div>
<script>
</script>
</body>
</html>Следующий программный код представляет собой CSS, который изначально использовался для оформления и окраски фона этого бокового меню. В этом случае я использовал синий цвет в качестве фона. Вы можете использовать другие цвета по вашему выбору, если хотите.
@import url(‘https://fonts.googleapis.com/css2?family=Open+Sans&display=swap’);
*{
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Open Sans’, sans-serif;
}
body{
background: #f5f6fa;
}
.wrapper .sidebar{
background: rgb(5, 68, 104);
position: fixed;
top: 0;
left: 0;
width: 225px;
height: 100%;
padding: 20px 0;
transition: all 0.5s ease;
}
.wrapper .sidebar .profile{
margin-bottom: 30px;
text-align: center;
}
Шаг 2. Добавьте изображение профиля
Прежде всего, я использовал здесь изображение профиля, которое помогло добавить следующий HTML-код. Следующие коды CSS помогли спроектировать и создать это изображение профиля.
<img src=”https://1.bp.blogspot.com/-vhmWFWO2r8U/YLjr2A57toI/AAAAAAAACO4/0GBonlEZPmAiQW4uvkCTm5LvlJVd_-l_wCNcBGAsYHQ/s16000/team-1-2.jpg” alt=”profile_picture”>.wrapper .sidebar .profile img{
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
}
Шаг 3. Добавьте заголовки и описания.
Под изображением я добавил немного текста. Если вы видели демонстрацию выше, вы поймете, что я использовал имя и профессионал под изображением профиля здесь. Следующие коды программирования HTML и CSS помогли создать и спроектировать это.
<h3>Anamika Roy</h3>
<p>Designer</p>.wrapper .sidebar .profile h3{
color: #ffffff;
margin: 10px 0 5px;
}
.wrapper .sidebar .profile p{
color: rgb(206, 240, 253);
font-size: 14px;
}
Шаг 4. При необходимости добавьте элементы меню с помощью HTML-кода.
Среди этих боковых меню выделяется пункт меню, который я использовал для создания следующих программных кодов HTML. В этом случае я использовал одну иконку перед каждым пунктом меню. Следующие коды программирования HTML помогли создать это. Конечно, чтобы активировать эти значки, вы будете использовать ссылку Font Awesome CDN в разделе заголовка вашего HTML-файла.
<ul>
<li>
<a href=”#” class=”active”>
<span class=”icon”><i class=”fas fa-home”></i></span>
<span class=”item”>Home</span>
</a>
</li>
<li>
<a href=”#”>
<span class=”icon”><i class=”fas fa-desktop”></i></span>
<span class=”item”>My Dashboard</span>
</a>
</li>
<li>
<a href=”#”>
<span class=”icon”><i class=”fas fa-user-friends”></i></span>
<span class=”item”>People</span>
</a>
</li>
<li>
<a href=”#”>
<span class=”icon”><i class=”fas fa-tachometer-alt”></i></span>
<span class=”item”>Perfomance</span>
</a>
</li>
<li>
<a href=”#”>
<span class=”icon”><i class=”fas fa-database”></i></span>
<span class=”item”>Development</span>
</a>
</li>
<li>
<a href=”#”>
<span class=”icon”><i class=”fas fa-chart-line”></i></span>
<span class=”item”>Reports</span>
</a>
</li>
<li>
<a href=”#”>
<span class=”icon”><i class=”fas fa-user-shield”></i></span>
<span class=”item”>Admin</span>
</a>
</li>
<li>
<a href=”#”>
<span class=”icon”><i class=”fas fa-cog”></i></span>
<span class=”item”>Settings</span>
</a>
</li>
</ul>Шаг 5: Создайте элементы меню с помощью кода CSS
Следующие коды программирования помогли сделать дизайн меню выше основного дизайна. Это означает, что для указания размера и цвета значков и текста использовались следующие коды CSS.
.wrapper .sidebar ul li a{
display: block;
padding: 13px 30px;
border-bottom: 1px solid #10558d;
color: rgb(241, 237, 237);
font-size: 16px;
position: relative;
}
.wrapper .sidebar ul li a .icon{
color: #dee4ec;
width: 30px;
display: inline-block;
}
Шаг 6: Добавьте эффект наведения к ссылке меню
Для элементов меню на боковой панели использовался цветовой эффект при наведении, что означает, что цвет фона будет меняться при нажатии на элементы. Для изменения этого цвета использовались следующие коды CSS. В этом случае при изменении цвета фона будет меняться цвет текста и значков.
.wrapper .sidebar ul li a:hover,
.wrapper .sidebar ul li a.active{
color: #0c7db1;
background:white;
border-right: 2px solid rgb(5, 68, 104);
}
.wrapper .sidebar ul li a:hover .icon,
.wrapper .sidebar ul li a.active .icon{
color: #0c7db1;
}
.wrapper .sidebar ul li a:hover:before,
.wrapper .sidebar ul li a.active:before{
display: block;
}
Шаг 7: Добавьте панель навигации
В этом случае я использовал панель навигации, но не добавлял в нее никаких пунктов меню. Я использовал кнопку в этой строке меню. Нажатие на эту кнопку скрывает боковую панель, а повторное нажатие показывает боковую панель. Следующий программный код HTML помог создать его.
<div class=”section”>
<div class=”top_navbar”>
<div class=”hamburger”>
<a href=”#”>
<i class=”fas fa-bars”></i>
</a>
</div>
</div>
</div>Используется для оформления панели вверху, сделанной выше, и для оформления значка меню.
.wrapper .section{
width: calc(100% – 225px);
margin-left: 225px;
transition: all 0.5s ease;
}
.wrapper .section .top_navbar{
background: rgb(7, 105, 185);
height: 50px;
display: flex;
align-items: center;
padding: 0 30px;
}
.wrapper .section .top_navbar .hamburger a{
font-size: 28px;
color: #f4fbff;
}
.wrapper .section .top_navbar .hamburger a:hover{
color: #a2ecff;
}
Этот код указывает, что изменится на боковой панели, когда вы нажмете эту кнопку меню. Если вы посмотрите ниже, то увидите, что при активации кнопки меню боковая панель сдвинется на 225 пикселей влево, что означает, что боковая панель будет полностью скрыта.
body.active .wrapper .sidebar{
left: -225px;
}
body.active .wrapper .section{
margin-left: 0;
width: 100%;
}Шаг 8. Активируйте кнопки меню с помощью кода JavaScript
Выше я показал, что изменится, когда вы нажмете на эту кнопку меню. Теперь вам нужно сделать эту кнопку меню эффективной. То есть, когда вы нажмете на эту кнопку, сработает инструкция, приведенная в приведенном выше коде CSS. Для этого я использовал небольшой фрагмент кода JavaScript, который приведен ниже.
var hamburger = document.querySelector(“.hamburger”);
hamburger.addEventListener(“click”, function(){
document.querySelector(“body”).classList.toggle(“active”);
})
Надеюсь, из этого руководства вы узнали, как создаются боковые меню с использованием кода программирования HTML, CSS и JavaScript. Тем временем я разработал боковую панель меню, используя только код HTML и CSS без JavaScript.
Оригинальный источник статьи: https://foolishdeveloper.com/