-
😎 About Me
I am Suh Young-eun, and I am studying programming. -
👀 Career
- A social worker
- An intern at a public institution for six months
- Several part-time jobs (Pharmacy, Cafe, Restaurant, Factory, etc.)
-
🛠 Skill
Click on the icon
-
👩🎓 Education
출신학교 전공 기간 구분 Handong Global University Social Welfare 2016.2.~2021.2 Graduation Yeongil High School liberal arts 2013.2~2016.2 Graduation
반응형
SUH YOUNGEUN
<!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">
<title>Document</title>
<style>
body {
display:flex;
justify-content: center;
margin-top: 100px;
background-color:black;
background-image:
radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
}
#container {
background: white;
display:flex;
justify-content: space-between;
width: 1000px;
height: 800px;
}
#profile {
background: rgb(236, 236, 227);
text-align: center;
width:300px;
}
#content {
width: 1000px;
}
ul {
box-sizing: border-box;
}
#img {
border-radius: 50%;
padding:20px;
width: 250px;
}
.skill_img img {
width: 100px;
}
#edu_table #table_top {
background: rgb(236, 236, 227);
}
#table_top th{
padding: 5px;
}
#edu_table {
text-align: center;
width: 600px;
border-collapse: collapse;
}
.edu_th, .edu_td {
border: 1px solid rgb(236, 236, 227);
padding:2px 5px;
}
.box {
list-style: none;
padding: 20px;
border-bottom: 1px solid rgb(236, 236, 227);
}
.myself div {
margin-bottom: 20px;
}
.icon_click {
color:gray;
}
</style>
</head>
<body>
<div id="container">
<div id="profile">
<img src="images/kimgoeun.png" id="img">
<div>
<h2>SUH YOUNGEUN</h2>
<div class="myself">
<div style="font-size: 20px; margin-top: 50px;">Welcome my page</div>
<div>
zerosilver222@naver.com<br>
@zs_west
</div>
<span>Learn more </span>
<a href="https://newbiedeveloper2023.tistory.com/">Visit my blog</a>
<div style="margin-top: 150px;">[Now] <br><span id="current"></span></div>
</div>
</div>
</div>
<div id="content">
<ul style="padding:15px">
<li class="box">
<h3>😎 About Me</h3>
<div>I am Suh Young-eun, and I am studying programming.</div>
</li>
<li class="box">
<h3>👀 Career</h3>
<ul>
<li>A social worker</li>
<li>An intern at a public institution for six months</li>
<li>
<span>Several part-time jobs</span>
<span>(Pharmacy, Cafe, Restaurant, Factory, etc.)</span>
</li>
</ul>
</li>
<li class="box">
<h3>🛠 Skill</h3>
<div class="icon_click">Click on the icon</div>
<div class="skill_img">
<img src="images/java.png" onclick="javalevel()">
<img src="images/oracledb.png" onclick="dblevel()">
<img src="images/html.png" onclick="htmllevel()">
<img src="images/css.png" onclick="csslevel()">
<img src="images/js.png" onclick="jslevel()">
</div>
</li>
<li class="box">
<h3>👩🎓 Education</h3>
<table id=edu_table>
<tr id="table_top">
<th class="edu_th">출신학교</th>
<th class="edu_th">전공</th>
<th class="edu_th">기간</th>
<th class="edu_th">구분</th>
</tr>
<tr>
<td class="edu_td">Handong Global University</td>
<td class="edu_td">Social Welfare</td>
<td class="edu_td">2016.2.~2021.2</td>
<td class="edu_td">Graduation</td>
</tr>
<tr>
<td class="edu_td">Yeongil High School</td>
<td class="edu_td">liberal arts</td>
<td class="edu_td">2013.2~2016.2</td>
<td class="edu_td">Graduation</td>
</tr>
</table>
</li>
</ul>
</div>
</div>
</body>
</html>
<script>
setInterval(displayTime,1000);
function displayTime() {
let date = new Date();
let time = date.toLocaleString();
document.querySelector('#current').innerHTML = time;
}
function javalevel() {
alert("자바 실력 중입니다.");
}
function dblevel() {
alert("데이터베이스 실력은 상입니다.");
}
function htmllevel() {
alert("HTML 실력은 중상입니다.");
}
function csslevel() {
alert("CSS 실력은 중입니다.");
}
function jslevel() {
alert("자바 스크립트 실력은 중상입니다.");
}
@media screen and (max-width: 320px) {
}
</script>반응형
'Portfolio' 카테고리의 다른 글
| [JS] 포트폴리오2: 투두리스트 (0) | 2023.02.13 |
|---|---|
| JS 포트폴리오1: 숫자맞추기 게임 (0) | 2023.02.13 |
| HTML/CSS 포트폴리오3: 쇼핑몰 웹사이트 만들기 Bootstrap (0) | 2023.02.13 |
| HTML/CSS 포트폴리오2: Spotify 웹사이트 만들기 (0) | 2023.02.13 |
| HTML/CSS 포트폴리오1: "구글 웹사이트 만들기" (0) | 2023.02.13 |