Cara Mengalihkan Bahagian Mengenai Saya dan Pendidikan ke Sebelah Kanan Web
Berikut ialah pautan kod pen: https://codepen.io/Weng-Hong-the-selector/pen/GRGjVLy
Ini HTML dan CSS saya `
<!DOCTYPE html>
<body>
<div class="resume">
<div class="resume_left">
<div class="resume_profile">
<img src="me.png" width=500px height=250px alt="profile_pic">
</div>
<div class="resume_content">
<div class="resume_item resume_info">
<div class="title">
<p class="bold">TAN WENG HONG</p>
<p class="regular">STUDENT OF DIPLOMA IN IT</p>
</div>
<ul>
<li>
<div class="icon">
<i class="fas fa-mars-and-venus"></i>
</div>
<div class="data">
Male
</div>
</li>
<li>
<div class="icon">
<i class="fa-solid fa-flag"></i>
</div>
<div class="data">
Malaysian
</div>
</li>
<li>
<div class="icon">
<i class="fa-solid fa-signs-post"></i>
</div>
<div class="data">
13A, Elitis Suria, Valencia, 47000, Sungai Buloh, Selangor
</div>
</li>
<li>
<div class="icon">
<i class="fas fa-mobile-alt"></i>
</div>
<div class="data">
012-352-5089
</div>
</li>
<li>
<div class="icon">
<i class="fas fa-envelope"></i>
</div>
<div class="data">
[email protected]
</div>
</li>
</ul>
</div>
<div class="resume_item resume_social">
<div class="title">
<p class="bold">Social</p>
</div>
<ul>
<li>
<div class="icon">
<i class="fab fa-facebook-square"></i>
</div>
<div class="data">
<p><a href="https://www.facebook.com/tan.w.hong.16">Facebook</a></p>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-instagram-square"></i>
</div>
<div class="data">
<p><a href="https://www.instagram.com/wenghongggggg/">Instagram</a></p>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-youtube"></i>
</div>
<div class="data">
<p><a href="https://www.youtube.com/channel/UCXdPTNsToFxqfBvHg_z5XTA">Youtube</a></p>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-linkedin"></i>
</div>
<div class="data">
<p><a href="https://www.linkedin.com/in/tan-weng-hong-314211251/">LinkedIn</a></p>
</div>
</li>
</ul>
</div>
<div class="resume_right">
<div class="resume_item resume_about">
<div class="title">
<p class="bold">About me</p>
</div>
<p>My name is Tan Weng Hong and I am currently 19 years old</p>
</div>
</div>
</div>
<div class="resume_item resume_education">
<div class="title">
<p class="bold">Education</p>
</div>
<ul>
<li>
<div class="date">2021 - present</div>
<div class="info">
<p class="semi-bold">Taylor's College</p>
<p>Diploma in Information Technology</p>
<p>Current CGPA: 3.01</p>
<p>Will Graduate August 2023</p>
</div>
</li>
<li>
<div class="date">2016 - 2020</div>
<div class="info">
<p class="semi-bold">SMK Sri KDU</p>
<p>- Sijil Pelajaran Malaysia (SPM)</p>
<p>   Results: 1A+ 1A 1C+ 1C 2D 3E 1G</p>
</div>
</li>
</ul>
</div>
<div class="resume_item resume_hobby">
</body>
</html>
`
`
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
font-family: 'Roboto Condensed', sans-serif;
}
body {
background: #D3D3D3;
font-size: 14px;
line-height: 22px;
color: #555555;
width: 200vh;
text-align: center;
}
img{
border: solid;
border_width: 5px;
}
.bold {
font-weight: 700;
font-size: 20px;
text-transform: uppercase;
}
.semi-bold {
font-weight: 500;
font-size: 16px;
}
.regular{
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
}
.resume {
width: 1200px;
height: auto;
display: flex;
margin: 50px auto;
}
.resume .resume_left {
width: 290px;
height: 1050px;
background: #0bb5f4;
padding: 3px;
}
.resume .resume_left .resume_profile {
width: 100%;
height: 350px;
}
.resume .resume_left .resume_profile img {
width: 100%;
height: 100%;
}
.resume .resume_left .resume_content {
padding: 0 25px;
}
.resume .title {
margin-bottom: 20px;
}
.resume .resume_left .bold {
color: #fff;
}
.resume .resume_left .regular {
color: #b1eaff;
}
.resume .resume_item {
padding: 25px 0;
border-bottom: 2px solid #b1eaff;
}
.resume .resume_left ul li {
display: flex;
margin-bottom: 20px;
align-items: center;
}
.resume .resume_left ul li:last-child {
margin-bottom: 0;
}
.resume .resume_left ul li .icon {
width: 35px;
height: 35px;
background: #fff;
color: #0bb5f4;
border-radius: 50%;
margin-right: 15px;
font-size: 16px;
position: relative;
}
.resume .icon i,
.resume ul li i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.resume .resume_left ul li .data {
color: #b1eaff;
}
.resume .resume_left .resume_social .semi-bold {
color: #fff;
margin-bottom: 3px;
}
`
Saya ingin bahagian Perihal Saya dan bahagian Pendidikan di sebelah kanan bahagian Maklumat, ada idea bagaimana untuk menjadikannya berfungsi? Terima kasih terlebih dahulu
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Tidak pasti sama ada anda telah memahami perkara ini lagi, tetapi melihat kod anda dengan pantas memberitahu saya anda menghadapi masalah organisasi html, jadi resume_right ada di dalam resume_right>resume_left
Ini adalah kod tetap anda, harap ia membantu.
Jika anda mempunyai sebarang masalah kedudukan selepas ini, saya syorkan membaca dokumentasiCSS flex.
https://developer.mozilla.org/en -US/docs/Learn/CSS/CSS_layout/Flexbox