عیدانه کلاسیک ایرانیان😍 از عید شروع کن به آموزش دیدن دیگه بهتر از این؟!😁
دوره های تخفیف دار
روز
ساعت
دقیقه
ثانیه
گروه آموزشی کلاسیک ایرانیان گروه آموزشی کلاسیک ایرانیان
جستجو
سبد خرید
خانه برنامه نویسی وب ساخت صفحه فرود با HTML CSS JS
برنامه نویسی وب ۱۸ اسفند ۱۴۰۱ زمان خواندن: ۱۶ دقیقه

ساخت صفحه فرود با HTML CSS JS

ساخت صفحه فرود با HTML CSS JS

سلام دوستان در این آموزش قصد داریم تا با استفاده از HTML CSS JS یک صفحه فرود(Landing Page) ایجاد کنیم با ما همراه باشید.

ابتدا باید معنی و مفهوم صفحه فرود(Landing Page) را درک کنیم. صفحه فرود یک برگه مجزا در وبسایت شما است که معمولا برای جذب مخاطب و افزایش فروش طراحی شده است.دلیل نامگذاری صفحه فرود به این دلیل است که کاربر معمولا اولین بار است که وارد این صفحه می شود یا اصطلاحا فرود می آید.

اما در ادامه قبل از این که شروع به طراحی کنیم باید خوب بدانیم که یک صفحه فرود(Landing Page) چه ویژگی هایی دارد؟

  • معمولا دارای یک فرم است
  • صرفا برای جمع آوری اطلاعات طراحی شده است.
  • در وبسایت های فروشگاهی معمولا محصولاتی که دارای تخفیف هستند نمایش داده می شوند
  • ایجاد و جذب مخاطب

اما یک صفحه فرود مناسب چه ویژگی هایی دارد؟

صفحه فرود به دلیل این که ممکن است بسیاری از افراد اولین بار است که از سایت شما دیدن میکنند پس میتواند بستری برای گسترش کسب و کار و جذب مخاطب باشد به همین دلیل لازم است تا نکاتی را رعایت کنید تا موجب رضایت شما و کاربران شود:

یک عنوان چشم گیر!

عنوان خوب خیلی خیلی مهم است. ایجاد حس خرید و علاقه در مخاطب و جلب توجه در عنوان صفحه مشتری را ترغیب به خرید میکند. شما باید در حد چند کلمه و خیلی خلاصه در خصوص محصول یا کمپین تخفیفی که ارائه کرده اید توضیح دهید.

زیر عنوان چشم نواز

زیر عنوان ادامه عنوان است با جزئیات بیشتر! زیر عنوان باعث می شود تا کاربر در صفحه بماند و احتمال خرید از شما بالاتر می رود.

استفاده از تصاویر مناسب

هر چه قدر از اهمیت تصاویر بگوییم واقعا کم است! استفاده از تصویر و حتی ویدیو تاثیرگذاری بیشتری در خرید مشتری خواهد داشت. این کار موجب اعتماد مشتری و افزایش اعتبار برند شما خواهد شد. چند وبسایت مفید و پراستفاده برای این کار مناسب هستند

ساخت صفحه فرود با HTML CSS JS

برای ساخت صفحه فرود فقط کافی است کدهای زیر را کپی و اجرا کنید(توجه کنید که باید دو فایل به نام های style.css و index.js ایجاد کنید تا بتوانید از کدهای css و جاوا اسکریپت استفاده کنید):

کد HTML

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Landing Page</title>
</head>
  
<body dir="rtl">
    <nav>
        <div class="heading">کلاسیک ایرانیان</div>
        <span class="sideMenuButton" 
            onclick="openNavbar()">
            ☰
        </span>
  
        <div class="navbar">
            <ul>
                <li><a href="#Home">صفحه اصلی</a></li>
                <li><a href="#">درباره ما</a></li>
                <li><a href="#">ثبت نام</a></li>
            </ul>
        </div>
    </nav>
  
    <!-- Side navigation bar for 
        responsive website -->
    <div class="sideNavigationBar" 
        id="sideNavigationBar">
        <a href="#" class="closeButton" 
            onclick="closeNavbar()">
            ❌
        </a>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Sign Up</a>
    </div>
  
    <!-- Content -->
    <div class="line" id="Home">
        <div class="side1">
            <h1 style="font-size: 36px;">در کمتر از6ماه طراحی سایت رو یاد بگیر😍</h1>
            <button>
                <a href=
"https://classiciranian.ir">
                    برو بریم برا خرید
                </a>
            </button>
        </div>
        <div class="side2">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png"
                width="500">
        </div>
    </div>
  
    <section class="about" id="My Projects">
        <div class="content">
            <div class="title">
                <span>محتویات پک آموزشی</span>
            </div>
            <div class="boxes">
                <div class="box">
                    <div class="topic">
                        <a href="" target="_blank">
                            CSS
                        </a>
                    </div>
                    <p>
                       صفر تا صد CSS رو بهت یاد میدیم (:)
                    </p>
                </div>
                <div class="box">
  
                    <div class="topic">
                        <a href="" target="_blank">
                            HTML
                        </a>
                    </div>
                    <p>
                        تموم تگ های اچ تی ام ال و مخلفاتش رو بهت آموزش میدیم 😁
                    </p>
                </div>
  
                <div class="box">
                    <div class="topic">
                        <a href="" target="_blank">
                            جاوا اسکریپت
                        </a>
                    </div>
                    <p>
                        جاوا اسکریپت که دیگه گل سر سبد این آموزش هست جاوا اسکریپت خام
                        و فریم ورک ویو جی اس توی این دوره یاد میگیریشون 🙂
                    </p>
                </div>
            </div>
        </div>
    </section>
  
    <section class="contact" id="contact">
        <div class="content">
            <div class="title"><span>اطلاع از بروز رسانی دوره</span></div>
            <div class="contactMenu">
                <div class="input1">
                    <div class="label1">نام و نام خانوادگی</div>
                    <div class="input2">
                        <input type="text" 
                            placeholder="">
                    </div>
                    <div class="label1">
                        <label>ایمیل</label>
                    </div>
                    <div class="input2">
                        <input type="text" 
                            placeholder="">
                    </div>
                    <div class="label1">
                        <label>شماره تماس</label>
                    </div>
                    <div class="input2">
                        <input type="text" 
                            placeholder="">
                    </div>
                    <div class="button">
                        <button>عضویت</button>
                    </div>
                </div>
                <div class="input3">
                    <div class="rightside1">
                        <div class="title1">
                            <span>
                                تماس با ما
                            </span>
                        </div>
                        <div class="content1">
                            ایران-فارس-شیراز-معالی آباد
                        </div>
                        <div class="title1">
                            <!-- <span>More Information</span> -->
                        </div>
                        <div class="content1">
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Footer section -->
    <footer>
        <div class="footer">
            <span>
                طراحی و توسعه توسط
                <a href="https://classiciranian.ir/" 
                    target="_blank">
                    کلاسیک ایرانیان
                </a>
            </span>
        </div>
    </footer>
    <script src="index.js"></script>
</body>
  
</html>

کد CSS

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	background-color: white;
	color: black;
	font-family: Vazirmatn;
	background-color: white;
}

nav {
	width: 100%;
	height: 80px;
	display: flex;
	justify-content: space-between;
	padding: 20px 5%;
	background-color: #8cc099;
}

nav .heading {
	font-size: 30px;
	font-weight: 700;
	color: white;
}

nav ul {
	display: flex;
	list-style: none;
}

nav ul li {
	padding: 8px 15px;
	border-radius: 10px;
	transition: 0.2s ease-in;
}

nav ul li a {
	color: black;
	font-size: 20px;
	font-weight: 500;
	text-decoration: none;
	color: white;
}

nav ul li:hover {
	background-color: green;
}

nav ul li a:hover {
	color: white;
}

nav .sideMenuButton {
	font-size: 30px;
	font-weight: bolder;
	cursor: pointer;
	display: none;
}

/* responsive navbar css */
@media screen and (max-width: 600px) {
	nav .sideMenuButton {
		display: flex;
	}

	nav .navbar {
		display: none;
	}

	.sideNavigationBar {
		display: block !important;
	}
}

.sideNavigationBar {
	height: 100%;
	position: fixed;
	top: 0;
	right: 0%;
	background-color: green;
	overflow-x: hidden;
	transition: 0.3s ease-in;
	padding-top: 60px;
	display: none;
}

.sideNavigationBar a {
	padding: 8px 8px 8px 40px;
	display: block;
	font-size: 25px;
	font-weight: 500;
	color: #d1d1d1;
	transition: 0.3s;
	text-decoration: none;
}

.sideNavigationBar a button {
	padding: 10px 20px;
	border-radius: 10px;
	color: green;
	font-size: 16px;
	border-style: none;
	font-weight: 700;
}

.sideNavigationBar a:hover {
	color: white;
}

.sideNavigationBar .closeButton {
	position: absolute;
	top: 10px;
	right: 25px;
	font-size: 20px;
	margin-left: 50px;
}

.line {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 2% 5%;
}

.line .side1 {
	padding-right: 50px;
}

.side1 h1 {
	font-size: 60px;
	margin-bottom: 10px;
	color: green;
}

.side1 button {
	width: 200px;
	padding: 12px 20px;
	border-radius: 20px;
	border-style: none;
	color: black;
	font-size: 17px;
	font-weight: 600;
}

a {
	text-decoration: none;
	color: black;
}

/* Header content responsive */
@media screen and (max-width: 980px) {
	.side2 img {
		width: 350px;
	}

	.side1 h1 {
		font-size: 40px;
	}

	.side1 p {
		font-size: 17px;
	}

	.line {
		margin-top: 80px;
	}
}

@media screen and (max-width: 600px) {
	.side1 h1 {
		font-size: 35px;
	}

	.line {
		flex-direction: column;
	}

	.line .side1 {
		padding: 30px;
	}
}

/* section */

section .topic a {
	font-size: 25px;
	font-weight: 500;
	margin-bottom: 10px;
}

.about .boxes {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.about .boxes .box {
	margin: 10px 20px;
	max-width: calc(100% / 3 - 50px);
	text-align: center;
	border-radius: 12px;
	padding: 30px 10px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
	cursor: default;
}

/* Contact Page */

.contact {
	padding: 20px;
}

.contact .content {
	margin: 0 auto;
	padding: 30px 0;
}

.content .title {
	width: 80%;
	text-align: center;
	font-weight: bolder;
	font-size: 40px;
}

.title {
	margin-bottom: 30px;
	margin-left: 80px;
}

.contactMenu {
	display: flex;
	justify-content: space-evenly;
}

.input2 {
	margin-top: 10;
}

.label1 {
	font-size: 18px;
	margin-top: 8px;
	margin-bottom: 8px;
	font-weight: bolder;
}

.contactMenu .input1 input {
	border-radius: 13px;
	padding: 6px;
}

.input2 input {
	border-color: rgb(252, 244, 244);
	width: 400px;
}

.button {
	margin-top: 12px;
	margin-left: 5px;
}

.button button {
	width: 162px;
	height: 35px;
	border-radius: 12px;
	border-color: transparent;
}

.button button:hover {
	background-color: #8cc099;
}

button {
	width: 162px;
	height: 35px;
	border-radius: 12px;
	border-color: transparent;
}

button:hover {
	background-color: #8cc099;
}

.rightside1 {
	display: flex;
	flex-direction: column;
	margin-left: 300px;
}

.title1 {
	font-size: 18px;
	margin-top: 8px;
	margin-bottom: 5px;
	font-weight: bolder;
}

.content1 {
	width: 450px;
	margin-top: 2px;
	color: grey;
}

/* Footer */
footer {
	background: var(--primary-color);
	padding: 15px 0;
	text-align: center;
	font-family: "Poppins", sans-serif;
}

footer .footer span {
	font-size: 17px;
	font-weight: 400;
	color: var(--white-color);
}

footer .footer span a {
	font-weight: 500;
	color: var(--white-color);
}

footer .footer span a:hover {
	text-decoration: underline;
}

@media screen and (max-width: 1060px) {
	.contactMenu {
		flex-direction: column;
		align-items: center;
	}

	.rightside1 {
		display: flex;
		flex-direction: column;
		margin-left: 0px;
	}

	.content1 {
		width: 100%;
		margin-top: 2px;
		color: grey;
	}

	.side2 img {
		width: 95%;
		height: 90%;
	}
}

@media screen and (max-width: 600px) {
	.side2 img {
		width: 100%;
	}

	section .topic a {
		font-size: 20px;
	}

	section .topic p {
		font-size: 5px;
	}

	.about .boxes {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.about .boxes .box {
		max-width: 70%;
	}
}
img{
    border-radius: 5px;
}

کد جاوا اسکریپت

پیشنهاد میکنیم این مقاله را مطالعه کنید: جاوا اسکریپت چیست؟ بررسی بازار کار جاوا اسکریپت در ایران

function openNavbar() {
    document.getElementById("sideNavigationBar")
        .style.width = "50%";
}
function closeNavbar() {
    document.getElementById("sideNavigationBar")
        .style.width = "0%";
}

این پست چقدر برای شما مفید بود؟

روی ستاره ها کلیک کنید تا امتیاز شما ثبت شود

میانگین امتیاز 1 / 5. تعداد امتیاز 1

هیچ امتیازی ثبت نشده است شما اولین نفر باشید☺

HTML CSS
دیدگاه‌ها ۰

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *