Cách tạo trang web danh mục đầu tư cá nhân đáp ứng chỉ bằng HTML và CSS
|
Cách tạo một trang web danh mục đầu tư cá nhân đáp ứng hoàn chỉnh bằng HTML, CSS và JavaScript. Thiết kế trang web danh mục đầu tư cá nhân này hoàn toàn đáp ứng và tương thích với trình duyệt. Trong video mà tôi đã đưa ra dưới đây, tôi sẽ chỉ cho bạn cách tạo một thiết kế trang web Cá nhân/Danh mục đầu tư Responsive bằng HTML, CSS và JavaScript. Bạn sẽ có thể tạo trang web này bằng cách làm theo hướng dẫn bằng video Youtube của tôi Show
Tạo một trang web danh mục đầu tư cá nhân đáp ứng bằng HTML, CSS và jQuery
Đây là HTML cơ bản quan trọng đối với tất cả các tệp HTML. Tôi nhập Poppins trong tệp HTML này bằng cách sử dụng Styling từ google vì hầu hết mọi người không có phông chữ Poppins trên thiết bị của họ Side Login and Registration Form Bar Phần chính Trong phần chính, trước tiên tôi tạo thanh điều hướng với thanh menu điều hướng tối trong suốt chỉ sử dụng HTML và CSS. Sau khi tạo Thanh điều hướng, tôi tạo một phần văn bản nơi tôi đặt tên của chủ sở hữu trang web và một số thông tin chi tiết về chủ sở hữu. Sau đó, tôi đặt hình ảnh mô hình ở bên phải của trang web. sau đó tôi tạo kiểu cho phần chính bằng biểu định kiểu CSS mà tôi đã kết nối với tệp HTML ➤Phần chính Mã HTML đã đưa ra bên dưới
Hire Me
Hey, I'm a Front-End Developer Our landing page template works on all devices, so you only have to set it up once, and get beautiful results forever.
➤ Liên kết phông chữ tuyệt vời ➤ Mã CSS Phần chính được đưa ra bên dưới body{
margin:0px;
padding: 0px;
font-family: poppins;
background-color: #111111;
}
*{
box-sizing: border-box;
scroll-behavior: smooth;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.navigation{
position: fixed;
left: 0px;
top: 0px;
width:100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 50px;
z-index: 4;
background-image: linear-gradient(180deg, rgb(17,17,17) 15%, transparent);
}
.menu{
display: flex;
justify-content: center;
align-items: center;
margin: 0px;
}
.menu li{
padding: 20px;
}
.logo{
height:33px;
z-index: 3;
}
.logo img{
height: 100%;
object-fit: contain;
object-position: center;
}
.menu li a{
color: #ffffffcc;
}
.hire-me{
color: #46a0f5;
z-index: 3;
}
.hire-me i{
margin-left: 4px;
}
.menu li a:hover{
color: #46a0f5;
transition: all ease 0.5s;
}
.hire-me:hover{
color: #1a82e2;
transition: all ease 0.5s;
}
/*--main------------------------*/
#main{
width:100%;
height: 100vh;
position: relative;
overflow: hidden;
z-index: 1;
}
#main::before{
content: '';
position: absolute;
width:130%;
height: 100vh;
left: -20%;
top: -23%;
transform: rotate(-10deg);
background: linear-gradient(45deg, rgb(19,19,19) -10%, #141516);
z-index: -1;
}
.main-text{
position: absolute;
left: 15%;
top: 50%;
transform: translate(-15%,-50%);
width:500px;
}
.main-text h1{
color: #ffffff;
font-size: 2.5rem;
font-weight: 600;
text-shadow: 2px 2px 30px rgba(0,0,0,0.01);
margin: 0px;
line-height: 45px;
}
.main-text p{
color: #8a94a7c0;
font-size: 1rem;
margin: 0px;
margin-top: 10px;
}
.main-btns{
display: flex;
align-items: center;
margin-top: 25px;
}
.main-btns a{
width:180px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
color: #ffffff;
box-shadow: 2px 2px 30px rgba(0,0,0,0.05);
letter-spacing: 1px;
font-size: 0.9rem;
}
.download-cv-btn{
background: linear-gradient(90deg, #2788e2 20%, #3b58b8);
margin-right: 20px;
}
.hire-me-btn{
background-color: #242830;
}
.hire-me-btn:hover{
background-color: #0f7ce2;
transition: all ease 0.3s;
}
.model{
width:500px;
height: 500px;
position: absolute;
top: 50%;
right: 7%;
transform: translate(-7%,-50%);
}
.model img{
width:100%;
height: 100%;
object-fit: contain;
}
.model-bg{
position: absolute;
right: 0px;
top: 0px;
width:45%;
height: 100%;
}
.model-bg img{
width:100%;
height: 100%;
object-fit: contain;
object-position: top;
}
Phần kỹ năng Trong phần kỹ năng, Đầu tiên tôi tạo một phần kỹ năng, nơi tôi tạo các ô kỹ năng thể hiện các kỹ năng và kinh nghiệm của mình. Tôi cũng tạo một thanh tiến trình để hiển thị kinh nghiệm của mình trong kỹ năng này, sau đó đặt một hình ảnh demo ở bên phải của trang web ➤Phần Kỹ năng Mã HTML đã đưa ra bên dưới
➤Mã CSS Mục Kỹ năng được cung cấp bên dưới /*Skills---------------------*/
#skills{
width:90%;
display: flex;
justify-content: space-around;
align-items: center;
margin: auto auto 50px auto;
}
.skills-text-section{
width:400px;
}
.skill-heading span{
color: #416cdf;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 1rem;
}
.skill-heading h2{
color: #ffffff;
font-size: 3.3rem;
margin: 0px;
font-weight: 400;
letter-spacing: 1px;
}
.s-box-container{
margin-top: 30px;
}
.skill-box{
display: flex;
margin: 25px 0px;
}
.s-box-icon{
margin-right: 12px;
}
.s-box-icon i{
width:40px;
height: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f011;
font-size: 1.1rem;
}
.skill-box strong{
color: #ffffff;
margin: 0px;
font-weight: 400;
font-size: 0.9rem;
}
.skill-box p{
color: #8a94a783;
font-size: 0.9rem;
}
.fa-html5{
color: #e06061;
}
.fa-css3-alt{
color: #5d85f3;
}
.fa-js{
color: #f9ca31;
}
.progress-line{
position: relative;
height: 5px;
width:100%;
background-color: #1d1d1d;
border-radius: 10px;
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.05),
0px 1px rgba(54, 54, 54, 0.8);
}
.progress-line span{
height: 100%;
background: linear-gradient(90deg,#2788e2 20%,#3b43b8);
position: absolute;
border-radius: 10px;
}
.progress-line.html span{
width:90%;
}
.progress-line.css span{
width:85%;
}
.progress-line.js span{
width:80%;
}
.progress-line span::before{
position: absolute;
content: '';
right: 0px;
top: -10px;
height: 0px;
width: 0px;
border: 7px solid transparent;
border-bottom-width:0px;
border-right-width:0px;
border-top-color:rgb(20,98,243);
}
.progress-line span::after{
position: absolute;
right: 0px;
top: -28px;
color: #ffffff;
font-size: 12px;
font-weight: 400;
background-color: rgb(20,98,243);
padding: 1px 8px;
border-radius: 3px;
}
.progress-line.html span::after{
content:'90%';
}
.progress-line.css span::after{
content:'85%';
}
.progress-line.js span::after{
content:'80%';
}
.skill-img{
width:600px;
height: 600px;
}
.skill-img img{
width:100%;
height: 100%;
object-fit: contain;
}
Phần giới thiệu ➤Phần giới thiệu Mã HTML đã đưa ra bên dưới
➤Phần giới thiệu Mã CSS được đưa ra bên dưới /*Introduction------------------*/
#introduction{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 3;
position: relative;
text-align: center;
max-width: 80%;
border-top: 1px solid #292b32;
padding: 5px 0px;
border-bottom: 1px solid #292b32;
margin: 5px auto;
background-image: url(../images/bg.png);
background-size: 950px;
background-repeat: no-repeat;
background-position: center;
}
.intro-heading{
width:60%;
}
.intro-heading strong{
color: #ffffff;
font-size: 2.5rem;
font-weight: 600;
}
.intro-heading p{
color: #8a94a763;
}
.intro-video{
margin-top: 50px;
}
.intro-video iframe{
width:712px;
height: 400px;
}
Phần dịch vụ ➤Mã HTML dịch vụ đã cung cấp bên dưới ________số 8_______➤ Mã CSS Phần Dịch vụ được cung cấp bên dưới #services{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 3;
position: relative;
}
.services-heading{
color: #ffffff;
font-size: 1.2rem;
letter-spacing: 1px;
text-transform: uppercase;
width:90%;
background-color: #141516;
padding: 10px;
display: flex;
}
.services-box-container{
width:90%;
margin-top: 40px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
}
.service-box{
display: flex;
flex-direction: column;
justify-content: center;
margin: 0px 20px 20px 20px;
}
.service-box i{
font-size: 2.5rem;
background: linear-gradient(90deg,#2788e2 20%,#3b67b8);
margin-bottom: 10px;
margin-right: auto;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.service-box p{
color: #8a94a783;
font-size: 0.95rem;
}
.service-box strong{
font-size: 1.2rem;
font-weight: 400;
letter-spacing: 1px;
color: #e4e4e4;
}
Liên hệ và Footer ➤Mã HTML Liên hệ và Chân trang được cung cấp bên dưới
Hire Me
Hey, I'm a Front-End Developer Our landing page template works on all devices, so you only have to set it up once, and get beautiful results forever.
➤ Mã CSS Liên hệ và Chân trang được cung cấp bên dưới
Hire Me
Hey, I'm a Front-End Developer Our landing page template works on all devices, so you only have to set it up once, and get beautiful results forever.
Cuộn tập tin hoạt hình ➤Cuộn liên kết tệp hoạt hình
Hire Me
Hey, I'm a Front-End Developer Our landing page template works on all devices, so you only have to set it up once, and get beautiful results forever.
➤Cuộn hoạt ảnh Mã JavaScript
Hire Me
Hey, I'm a Front-End Developer Our landing page template works on all devices, so you only have to set it up once, and get beautiful results forever.
➤Trang web hoạt hình cuộn Làm cho ResponsiveBây giờ tôi làm cho trang web Danh mục đầu tư này đáp ứng cho Điện thoại di động, PC và Tab. Tôi sử dụng truy vấn "@media" để làm cho Trang web danh mục đầu tư này đáp ứng đầy đủ. Mã CSS được đưa ra bên dưới, chỉ cần sao chép và dán vào tệp CSS của bạn để làm cho trang web danh mục đầu tư này phản hồi mà bạn tạo. Nếu bạn gặp phải bất kỳ vấn đề nào, bạn sẽ liên hệ với tôi trên trang Instagram hoặc Facebook của tôi. Cảm ơn bạn Làm cách nào để tạo một trang web danh mục đầu tư cá nhân hoàn chỉnh chỉ bằng HTML và CSS?Đi nào. . Bước một. Thêm khung HTML. Nhập mã khung HTML, đây là điểm bắt đầu cho trang web của bạn. . Bước hai. Thêm thanh điều hướng. . Bước thứ ba. Thêm phần anh hùng. . Bước bốn. Thêm phần Giới thiệu về tôi. . Bước Năm. Thêm phần Kinh nghiệm làm việc. . Bước sáu. Thêm phần Liên hệ. . Bước Bảy. Thêm phần Footer Tôi có thể tạo một trang web chỉ bằng HTML và CSS không?Câu trả lời ngắn gọn là có, bạn có thể tạo một trang web đơn giản chỉ với HTML và CSS . Tuy nhiên, nếu bạn muốn bắt đầu xây dựng một số trang web thực sự thú vị và linh hoạt hơn trong những gì bạn có thể làm, bạn cần sử dụng JavaScript, ngôn ngữ phụ trợ, lưu trữ web và cơ sở dữ liệu.
Làm cách nào để tạo một trang web đáp ứng bằng HTML CSS và JavaScript?Thiết kế web đáp ứng HTML . Setting The Viewport. To create a responsive website, add the following tag to all your web pages: .. . Hình ảnh phản hồi. . Kích thước văn bản đáp ứng. . Truy vấn phương tiện truyền thông. . Trang web đáp ứng - Ví dụ đầy đủ. . Thiết kế web đáp ứng - Khung. . Bootstrap Làm cách nào để tạo một trang web đơn giản bằng HTML CSS và JavaScript?Tìm hiểu cách sử dụng các công cụ dành cho nhà phát triển trong trình duyệt của bạn để kiểm tra công việc của bạn. . Tạo một trang web cơ bản bằng HTML Áp dụng kiểu cho các phần tử trang bằng CSS Tạo chủ đề bằng CSS Thêm hỗ trợ để chuyển đổi giữa các chủ đề bằng JavaScript Kiểm tra trang web bằng các công cụ dành cho nhà phát triển trình duyệt |
