|
HTML과 CSS를 활용한 개인 포트폴리오 웹사이트
소스 코드와 함께 HTML 및 CSS를 사용하는 개인 포트폴리오 웹사이트
안녕하세요 Coder님, 오늘은 소스 코드와 함께 HTML 및 CSS를 사용하여 개인 포트폴리오 웹사이트를 만드는 방법을 알아보겠습니다. 포트폴리오는 클라이언트에 대한 사용자의 기술을 표시하는 디지털 이력서와 비교할 수 있습니다. 개발자의 포트폴리오는 고용주가 자신의 기술을 기반으로 채용할 수 있도록 자신의 능력을 광고하는 데 사용하는 웹사이트입니다.
이 지침을 따르면 HTML CSS 코드로 이 개인 포트폴리오 반응형 웹사이트를 만들 수 있습니다. 아래에 설명된 절차만 준수하면 이 놀라운 개인 포트폴리오 웹사이트를 개발할 수 있습니다.
이 포트폴리오 웹사이트에는 오른쪽에 버튼이 있고, 중앙에 일부 탐색 링크가 있으며, 왼쪽에는 로고가 있는 탐색 모음이 있습니다. 다음 단계는 이미지와 같이 본 웹사이트 왼쪽의 작가 이름과 직업을 설명하는 텍스트 옆에 있는 “CV 다운로드” 버튼을 클릭하는 것입니다.
프로젝트의 단계별 솔루션을 살펴보기 전에 HTML과 CSS를 사용하는 개인 포트폴리오 웹사이트에 대한 몇 가지 일반적인 개념을 이해해야 합니다.
HTML 및 CSS 코드로 세련된 로그인 페이지 만들기
개인 포트폴리오 웹사이트란 무엇입니까?
페르소나 포트폴리오 웹사이트는 웹에 존재하는 디지털 유형의 이력서입니다. 이력서의 하드 카피를 사용하고 취업을 위해 여러 회사를 돌아다니는 대신, 온라인 이력서를 프로젝트 작업, 경험 및 성과와 함께 다양한 채용 담당자와 한 곳에서 공유할 수 있는 가장 좋은 방법입니다. 이는 채용 담당자가 해당 직무에 가장 적합한 후보자를 찾는 데 도움이 되며, 면접을 위해 개인 포트폴리오 웹사이트를 사용하면 개인 포트폴리오 없이도 다양한 후보자에게 우위를 제공할 수 있습니다.
개인 포트폴리오 웹사이트의 이점은 무엇입니까?
개인 포트폴리오 웹사이트를 사용하면 다음과 같은 이점이 있습니다.
선택 확률 증가.
최대 도달 범위를 제공합니다.
당신의 기술을 선보일 수 있습니다.
소스 코드가 포함된 50개 이상의 HTML, CSS 및 JavaScript 프로젝트
input_html&css&javarit tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Personal Portfolio Website</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css" />
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
a {
text-decoration: none;
}
.hero {
width: 100%;
height: 100vh;
background: url(img/bg.png);
background-size: cover;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30px 100px;
}
.logo {
max-height: 60px;
}
nav ul li {
list-style: none;
display: inline-block;
padding: 10px 20px;
}
nav ul li a {
color: #1d1d24;
position: relative;
padding: 5px 0;
}
nav ul li a:hover {
color: #fd4766;
}
nav ul li a:after {
content: "";
position: absolute;
left: 0;
width: 0;
height: 3px;
background: #fd4766;
transition: 0.3s;
bottom: 0;
}
nav ul li a:hover:after {
width: 100%;
}
.btn {
color: #fff;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 2px;
padding: 16px 40px;
border-radius: 500px;
display: inline-block;
font-weight: 500;
transition: all 0.4s ease-in-out;
background-size: 152% 100%;
background: #fd4766;
border: 2px solid #fd4766;
}
.btn:hover {
background: transparent;
border-color: #fd4766;
color: #fd4766;
}
.content {
position: absolute;
top: 35%;
left: 8%;
}
.content .title {
color: #0a0a0a;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 4px;
display: inline-block;
margin-bottom: 20px;
background: linear-gradient(
120deg,
#1c99fe 20.69%,
#7644ff 50.19%,
#fd4766 79.69%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.content h1 {
color: #1f1f25;
font-size: 75px;
font-weight: 900;
line-height: 90px;
text-transform: inherit;
width: 70%;
}
.content h1 span {
color: #fd4766;
}
.content p {
width: 55%;
color: #202020;
margin-top: 25px;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="hero">
<nav>
<img src="./img/logo.png" class="logo" />
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
<a href="#" class="btn">Resume</a>
</nav>
<div class="content">
<span class="title">Freelance Web Developer</span>
<h1>Hello, I’m <span>emma</span></h1>
<p>
I’m working on a professional, visually sophisticated and
technologically proficient, responsive and multi-functional React
Components.
</p>
<a href="#" class="btn">Download CV</a>
</div>
</div>
</body>
</html>
index_html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Personal Portfolio Website</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css" />
</head>
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
a {
text-decoration: none;
}
.hero {
width: 100%;
height: 100vh;
background: url(img/bg.png);
background-size: cover;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30px 100px;
}
.logo {
max-height: 60px;
}
nav ul li {
list-style: none;
display: inline-block;
padding: 10px 20px;
}
nav ul li a {
color: #1d1d24;
position: relative;
padding: 5px 0;
}
nav ul li a:hover {
color: #fd4766;
}
nav ul li a:after {
content: "";
position: absolute;
left: 0;
width: 0;
height: 3px;
background: #fd4766;
transition: 0.3s;
bottom: 0;
}
nav ul li a:hover:after {
width: 100%;
}
.btn {
color: #fff;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 2px;
padding: 16px 40px;
border-radius: 500px;
display: inline-block;
font-weight: 500;
transition: all 0.4s ease-in-out;
background-size: 152% 100%;
background: #fd4766;
border: 2px solid #fd4766;
}
.btn:hover {
background: transparent;
border-color: #fd4766;
color: #fd4766;
}
.content {
position: absolute;
top: 35%;
left: 8%;
}
.content .title {
color: #0a0a0a;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 4px;
display: inline-block;
margin-bottom: 20px;
background: linear-gradient(
120deg,
#1c99fe 20.69%,
#7644ff 50.19%,
#fd4766 79.69%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.content h1 {
color: #1f1f25;
font-size: 75px;
font-weight: 900;
line-height: 90px;
text-transform: inherit;
width: 70%;
}
.content h1 span {
color: #fd4766;
}
.content p {
width: 55%;
color: #202020;
margin-top: 25px;
margin-bottom: 30px;
}
</style>
<body>
<div class="hero">
<nav>
<img src="./img/logo.png" class="logo" />
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
<a href="#" class="btn">Resume</a>
</nav>
<div class="content">
<span class="title">Freelance Web Developer</span>
<h1>Hello, I’m <span>emma</span></h1>
<p>
I’m working on a professional, visually sophisticated and
technologically proficient, responsive and multi-functional React
Components.
</p>
<a href="#" class="btn">Download CV</a>
</div>
</div>
</body>
</html>
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
https://www.codewithrandom.com/2023/11/19/personal-portfolio-website/
HTML과 CSS를 활용한 개인 포트폴리오 웹사이트
|
첫댓글 소스 제공 https://github.com/WebDevVikramChoudhary/Personal-Portfolio-Website