[Tin tức] 15. Contact form CSS

…

🔥 Hãy chia sẻ các khóa học để mọi người được học MIỄN PHÍ ❤️
🔥 Truy cập (miễn phí) để làm bài tập và quản lý được tiến độ học của bạn. Trong tương lai còn giúp bạn có hồ sơ đẹp trong mắt Nhà Tuyển Dụng.
🔥 Tham gia nhóm Học lập trình tại F8 trên Facebook:

#hoclaptrinh #mienphi #frontend #backend #devops
—————————————
HỌC LẬP TRÌNH MIỄN PHÍ
1. Khóa Javascript cơ bản:
2. Khóa HTML, CSS:
3. Khóa Responsive web design:
4. Khóa Xây dựng web với NodeJS & ExpressJS:
—————————————
LIÊN KẾT HỮU ÍCH
1. Học lập trình:
2. Viết CV xin việc:
3. Danh sách phát Youtube:
———————————————————–
LIÊN HỆ
1. Facebook:
2. Email: sondnf8@gmail.com

Yêu các bạn ❤️

<!DOCTYPE html>

<html lang="en">

<heat >

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1">

<title>dcm</title>

<link rel="stylesheet" href="./assets/style.css">

<link rel="stylesheet" href="./assets/themify-icons/themify-icons.css">

</heat>

<body>

<div id="main">

<div id="heatd">

<ul id="nav">

<li><a href="">home</a></li>

<li><a href="">band</a></li>

<li><a href="">tour</a></li>

<li><a href="">contact</a></li>

<li>

<a href="">

more

<i class="nav-arrow-down ti-angle-down"></i></a>

<ul class="supnav">

<li><a href="">mechandise</a></li>

<li><a href="">extras</a></li>

<li><a href="">media</a></li>

</ul>

</li>

</ul>

<div class="search-bth">

<i class=" ti-search"></i>

</div>

</div>

<div id="slider">

<div class="text-content">

<h2 class="text-heatding">New York</h2>

<p class="text-vl">Bầu không khí ở New York là lorem ipsum</p>

</div>

</div>

<div id="content">

<div class="content-section">

<h2 class=" section-heatding">THE BAND</h2>

<p class=" sextion-sub-heatding">We love music</p>

<p class=" about-text">We have created a fictional band website. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<div class="row text-center members-list">

<div class="col col-third ">

<p class="members-name">Name</p>

<img src="/f8/assets/img/bandmember/member-1.jpg" alt="Name" class="members-img">

</div>

<div class="col col-third ">

<p class="members-name">Name</p>

<img src="/f8/assets/img/bandmember/member-1.jpg" alt="Name" class="members-img">

</div>

<div class="col col-third ">

<p class="members-name">Name</p>

<img src="/f8/assets/img/bandmember/member-1.jpg" alt="Name" class="members-img">

</div>

</div>

</div>

<div class="tour-section">

<div class="content-section">

<h2 class=" section-heatding text-white">TOUR DATES</h2>

<p class=" sextion-sub-heatding text-white">Remember to book your tickets!</p>

<ul class="tickets-list">

<li>

September <spam class="sold-out">Sold out

</spam>

</li>

<li>

October <spam class="sold-out">Sold out

</spam>

</li>

<li>

November<spam class="quantity">3</spam>

</li>

</ul>

<div class="row places-list">

<div class="col col-third"><img src="/f8/assets/img/places/newyork.jpg" alt="" class="place-img">

<div class="place-body">

<h3 class="place-heading">New York</h3>

<p class="place-time">Fri 27 Nov 2016</p>

<p class="place-desc">Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>

<button class="place-buy-btn js-buy-ticket">Buy tickets</button>

</div>

</div>

<div class="col col-third"><img src="/f8/assets/img/places/paris.jpg" alt="" class="place-img">

<div class="place-body">

<h3 class="place-heading">Paris</h3>

<p class="place-time">Sat 28 Nov 2016</p>

<p class="place-desc">Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>

<button class="place-buy-btn js-buy-ticket">Buy tickets</button>

</div>

</div>

<div class="col col-third"><img src="/f8/assets/img/places/sanfran.jpg" alt="" class="place-img">

<div class="place-body">

<h3 class="place-heading">San Francisco</h3>

<p class="place-time">Sun 29 Nov 2016</p>

<p class="place-desc">Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>

<button class="place-buy-btn js-buy-ticket">Buy tickets</button>

</div>

</div>

</div>

</div>

</div>

<div class="content-section">

<h2 class=" section-heatding">CONTACT</h2>

<p class=" sextion-sub-heatding">Fan? Drop a note!</p>

<div class="row contact-content">

<div class="col col-half contact-info">

<p><i class="ti-location-pin"></i>Chicago, US</p>

<p><i class="ti-mobile"></i>Phone: +00 151515</p>

<p><i class="ti-email"></i>Email: mail@mail.com</p>

</div>

<div class="col col-half contact-form">

<from action="">

<div class="row">

<div class="col col-half">

<input type="text" placeholder="Name" required class="form-control">

</div>

</div>

</div>

<div class="modal">

<div class="modal-container">

<div class="modal-close"><i class="ti-close"></i></div>

<div class="modal-header">

<i class="ti-bag"></i>Tickets

</div>

<div class="modal-body">

<label for="quantity1" class="modal-label">

<i class="ti-shopping-car"></i>Tickets, $15 per person

</label>

<input id="quantity1" type="text" class="modal-input" placeholder="how many ?">

<label for="quantity2" class="modal-label">

<i class="ti-user"></i> Send To

</label>

<input id="quantity2" type="text" class="modal-input" placeholder="enter email ?">

<button id="buy-tickets">pay <i class="ti-check"></i></button>

</div>

<footer class="modal-footer">

<p class="modal-help">Need <a href="">help ? </a></p>

</footer>

</div>

</div>

<!– <script>

const buyBtns = doccument.querySeLectorAll('.js-buy-ticket')

</script> –>

</body>

</html>

Bình luận

9 bình luận về “[Tin tức] 15. Contact form CSS”

Linh Pham

7 Tháng Một, 2023 vào lúc 2:39 chiều

10:28 chọn class theo họ class
Bình luận
vaht

7 Tháng Một, 2023 vào lúc 2:39 chiều

mọi người xin giúp em chút ạ sao bấm send nó không hiên như trong video
Bình luận
vaht

7 Tháng Một, 2023 vào lúc 2:39 chiều

<!DOCTYPE html>

<html lang="en">

<heat >

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1">

<title>dcm</title>

<link rel="stylesheet" href="./assets/style.css">

<link rel="stylesheet" href="./assets/themify-icons/themify-icons.css">

</heat>

<body>

<div id="main">

<div id="heatd">

<ul id="nav">

<li><a href="">home</a></li>

<li><a href="">band</a></li>

<li><a href="">tour</a></li>

<li><a href="">contact</a></li>

<li>

<a href="">

more

<i class="nav-arrow-down ti-angle-down"></i></a>

<ul class="supnav">

<li><a href="">mechandise</a></li>

<li><a href="">extras</a></li>

<li><a href="">media</a></li>

</ul>

</li>

</ul>

<div class="search-bth">

<i class=" ti-search"></i>

</div>

</div>

<div id="slider">

<div class="text-content">

<h2 class="text-heatding">New York</h2>

<p class="text-vl">Bầu không khí ở New York là lorem ipsum</p>

</div>

</div>

<div id="content">

<div class="content-section">

<h2 class=" section-heatding">THE BAND</h2>

<p class=" sextion-sub-heatding">We love music</p>

<p class=" about-text">We have created a fictional band website. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<div class="row text-center members-list">

<div class="col col-third ">

<p class="members-name">Name</p>

<img src="/f8/assets/img/bandmember/member-1.jpg" alt="Name" class="members-img">

</div>

<div class="col col-third ">

<p class="members-name">Name</p>

<img src="/f8/assets/img/bandmember/member-1.jpg" alt="Name" class="members-img">

</div>

<div class="col col-third ">

<p class="members-name">Name</p>

<img src="/f8/assets/img/bandmember/member-1.jpg" alt="Name" class="members-img">

</div>

</div>

</div>

<div class="tour-section">

<div class="content-section">

<h2 class=" section-heatding text-white">TOUR DATES</h2>

<p class=" sextion-sub-heatding text-white">Remember to book your tickets!</p>

<ul class="tickets-list">

<li>

September <spam class="sold-out">Sold out

</spam>

</li>

<li>

October <spam class="sold-out">Sold out

</spam>

</li>

<li>

November<spam class="quantity">3</spam>

</li>

</ul>

<div class="row places-list">

<div class="col col-third"><img src="/f8/assets/img/places/newyork.jpg" alt="" class="place-img">

<div class="place-body">

<h3 class="place-heading">New York</h3>

<p class="place-time">Fri 27 Nov 2016</p>

<p class="place-desc">Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>

<button class="place-buy-btn js-buy-ticket">Buy tickets</button>

</div>

</div>

<div class="col col-third"><img src="/f8/assets/img/places/paris.jpg" alt="" class="place-img">

<div class="place-body">

<h3 class="place-heading">Paris</h3>

<p class="place-time">Sat 28 Nov 2016</p>

<p class="place-desc">Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>

<button class="place-buy-btn js-buy-ticket">Buy tickets</button>

</div>

</div>

<div class="col col-third"><img src="/f8/assets/img/places/sanfran.jpg" alt="" class="place-img">

<div class="place-body">

<h3 class="place-heading">San Francisco</h3>

<p class="place-time">Sun 29 Nov 2016</p>

<p class="place-desc">Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>

<button class="place-buy-btn js-buy-ticket">Buy tickets</button>

</div>

</div>

</div>

</div>

</div>

<div class="content-section">

<h2 class=" section-heatding">CONTACT</h2>

<p class=" sextion-sub-heatding">Fan? Drop a note!</p>

<div class="row contact-content">

<div class="col col-half contact-info">

<p><i class="ti-location-pin"></i>Chicago, US</p>

<p><i class="ti-mobile"></i>Phone: +00 151515</p>

<p><i class="ti-email"></i>Email: mail@mail.com</p>

</div>

<div class="col col-half contact-form">

<from action="">

<div class="row">

<div class="col col-half">

<input type="text" placeholder="Name" required class="form-control">

</div>

<div class="col col-half">

<input type="text" placeholder="email" required class="form-control">

</div>

</div>

<div class="row mt-8">

<div class="col col-full">

<input type="text" placeholder="massage" required class="form-control">

</div>

</div>

<input class="form-submit-btn mt-16" type="submit" value="SEND">

</from>

</div>

</div>

</div>

</div>

<div id="footer">

</div>

</div>

<div class="modal">

<div class="modal-container">

<div class="modal-close"><i class="ti-close"></i></div>

<div class="modal-header">

<i class="ti-bag"></i>Tickets

</div>

<div class="modal-body">

<label for="quantity1" class="modal-label">

<i class="ti-shopping-car"></i>Tickets, $15 per person

</label>

<input id="quantity1" type="text" class="modal-input" placeholder="how many ?">

<label for="quantity2" class="modal-label">

<i class="ti-user"></i> Send To

</label>

<input id="quantity2" type="text" class="modal-input" placeholder="enter email ?">

<button id="buy-tickets">pay <i class="ti-check"></i></button>

</div>

<footer class="modal-footer">

<p class="modal-help">Need <a href="">help ? </a></p>

</footer>

</div>

</div>

<!– <script>

const buyBtns = doccument.querySeLectorAll('.js-buy-ticket')

</script> –>

</body>

</html>
Bình luận
DatAmazon

7 Tháng Một, 2023 vào lúc 2:39 chiều

2:49 có thể bấm ctrl + dấu cách để gợi ý ạ
Bình luận
Tiến Cường Audio

7 Tháng Một, 2023 vào lúc 2:39 chiều

Anh ơi, cho em hỏi là khi làm xong form rồi thì làm cách nào để đăng ký kết nối khi khách hàng truy cập ạ.
Bình luận
Hung Duong Minh

7 Tháng Một, 2023 vào lúc 2:39 chiều

14:20 em cho width =100% nó kéo ra bên phải dài hết màn hình luôn là sao ạ nó k = phần Email
Bình luận
hoàng nguyễn huy

7 Tháng Một, 2023 vào lúc 2:39 chiều

Sao của em inline-block phần info nó vẫn xuống dòng vậy ạ 🙁
Bình luận
NIC Liên Quân

7 Tháng Một, 2023 vào lúc 2:39 chiều

hay quá
Bình luận
just for fun

7 Tháng Một, 2023 vào lúc 2:39 chiều

hihi
Bình luận

9 bình luận về “[Tin tức] 15. Contact form CSS”

Viết một bình luận Hủy