1. 내 포트폴리오 사이트 만들기 (HTML CSS)

2022. 1. 2. 21:57

지금 현재 만들고 있는 사이트 이다

학원에서 css를 배우고 만들어 보았는데 갑상선 수술때문에 언제 만들지..? 흠

혹시 몰라 코드공유를 해본다.

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

body{

margin: 0;

font-family: 'Nanum Pen Script', cursive;

}

ul{

list-style: none;

}

text-decoration: none;

color: black;

}

nav{

position: fixed;

width: 100%;

height: 100px;

background: #acdbc9;

display: flex;

align-items: center;

justify-content: space-between;

top: 0;

left: 0;

right: 0;

}

.logo{

font-size: 40px;

}

.navbar_manu{

display: flex;

padding: 0;

margin-left: 20px;

}

.navbar_manu li{

padding: 8px 25px;

font-size: 30px;

}

.icon{

display: flex;

}

.icon li{

padding: 10px;

font-size: 30px;

}

.logos{

color: white;

}

.navbar_manu li:hover{

background: yellowgreen;

border-radius: 30%;

transition: 0.5s;

}

/* 이미지 */

/* first */

.frist{

padding-top: 150px;

width: 100%;

height: 600px;

}

.img{

background: url(KakaoTalk_20220101_210543362.jpg);

width: 300px;

height: 300px;

background-size: cover;

border-radius: 50%;

margin: 0 auto;

margin-top: 30px;

text-align: center;

}

/* about */

.about{

width: 100%;

height: 900px;

background: #d8e8c2;

}

.about_me h1{

text-align: center;

padding-bottom: 20px;

padding-top: 50px;

font-size: 40px;

}

.about_me p{

text-align: center;

font-size: 20px;

}

.about_me{

width: 600px;

height: 300px;

margin: 0 auto;

padding-bottom: 30px;

}

.about_Skils{

display: flex;

width: 700px;

margin: 0 auto;

}

.about_job2{

margin : 0 auto;

}

.about_img{

margin-top: 30px;

background: white;

width: 150px;

height: 150px;

border-radius: 50%;

text-align: center;

margin-bottom: 30px;

float: left;

}

.about_img i{

padding: 30px;

font-size: 80px;

}

.my_Jobs{

margin-top: 50px;

font-size: 20px;

font-weight: bold;

margin-left: 20px;

}

/* skills */

.skills{

width: 100%;

height: 800px;

background: #fdd2b5;

}

.skills_intro{

width: 600px;

height: 300px;

margin: 0 auto;

}

.skills_intro h1{

padding-top: 60px;

text-align: center;

font-size: 40px;

margin: 0px;

}

.skills_intro h2{

text-align: center;

font-size: 30px;

}

.skills_intro p {

text-align: center;

font-size: 20px;

}

.skillset{

width: 800px;

background: grey;

display: block;

margin: 0 auto;

}

.skillsset__left{

}

/* my work */

.main_box{

width: 100%;

height: 325px;

margin: 0 auto;

border: 3px double black;

}

.frist_box{

width: 100%;

height: 150px;

}

.box {

width: 220px;

height: 140px;

margin: 10px;

margin-right: 18px;

background: url(/CSS/7.배경/images/sky.jpg);

background-size: 100%;

float: left;

border: 1px solid black;

}

.second_box{

width: 100%;

height: 150px;

}

.box2{

width: 220px;

height: 140px;

margin: 10px;

margin-right: 18px;

background: url(/CSS/7.배경/images/sky.jpg);

background-size: 100%;

float: left;

border: 1px solid black;

}

/* footer */

footer{

background: #acdbc9;

width: 100%;

height: 200px;

text-align: center;

}

.name{

display: inline-block;

margin: 0 auto;

}

.name p{

text-align: center;

font-size: 30px;

font-weight: bold;

}

.footer_icon{

}

.footer_icon li{

margin: 0 3px;

font-size: 30px;

}

</style>

<body>

<nav>

<a href="#">Dargon</a>

</div>

<li><a href="#about">About</a></li>

<li><a href="#skills">Skills</a></li>

<li><a href="#">Content</a></li>

</ul>

</ul>

</nav>

</div>

<p style="font-weight: bold; font-size: 30px; text-align: center;">Hello I'm SeokHuyn</p>

<p style="font-size: 20px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor sed id aspernatur ullam deleniti neque ea necessitatibus quos a, ipsum sapiente qui! Cupiditate optio nam, sed ut fugiat numquam perferendis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod beatae at laboriosam officia sint, dolore ipsa eum ipsum voluptate non ex culpa doloribus cum tempore provident illum soluta, architecto magnam.

</p>

</div>

</section>

<h1>About me</h1>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis aperiam veritatis totam unde beatae quos vel, quo ab obcaecati consectetur hic ipsa culpa repudiandae praesentium sapiente rerum expedita fugit atque?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed nobis reprehenderit delectus a consequuntur dolorem incidunt suscipit quibusdam aperiam omnis vitae ipsa possimus iste, dicta iure asperiores ea, illum deleniti!

</p>

</div>

</div>

<h3 style="text-align: center;">Front end</h3>

<p style="text-align: center;"> 프론트 엔드 스킬 들어갈꺼임</p>

</div>

</div>

<p style="text-align: center;"> 프론트 엔드 스킬 들어갈꺼임</p>

</div>

</div>

<h3 style="text-align: center;">Other</h3>

<p style="text-align: center;"> 프론트 엔드 스킬 들어갈꺼임</p>

</div>

<div >

<div>학교이미지</div>

</div>

<div>

</div>

</section>

<h1>Skills</h1>

<h2>skiils & Attributes</h2>

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis quasi enim laudantium, sit ea blanditiis officia sequi, delectus eum, reprehenderit hic laborum consectetur velit itaque tempore nulla? Deserunt, incidunt fugiat.

</p>

</div>

<h3 class="skillset__tittle">Skills</h3>

</div>

</div>

</div>

</div>

<span>JavaScript</span>

</div>

</div>

<h3 class="skillset__tittle">tools</h3>

</ul>

</div>

</ul>

</div>

</section>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat nisi voluptatibus accusamus labore cumque eos eaque nobis autem impedit magnam, veritatis modi reiciendis accusantium libero error quod, dolor est. Corrupti.</p>

</div>

</div>

</section>

<p>mls0000@naver.com</p>

</div>

</footer>

</body>

</html>

$('a').on('click', function(e){

e.preventDefault();

$('html, body').animate({scrollTop:$(this.hash).offset().top}, 300)

})

</script>

'Web 개발' 카테고리의 다른 글

(HTML,CSS,JS) 자바스크립트 TODOlist만들기 (0)	2022.01.19
(HTML,CSS,JS) 로 업다운게임 만들기. (0)	2022.01.18
(Web) 드디어 첫 사이트 완성하다. (HTML, CSS) (0)	2022.01.11
HTML 방문자 카운팅 커터 카운터 (0)	2022.01.10
파일질라로 내 포트폴리오 사이트 올리기 (HTML, CSS) (0)	2022.01.09

Dev of road

1. 내 포트폴리오 사이트 만들기 (HTML CSS)

'Web 개발' 카테고리의 다른 글

+ Recent posts

티스토리툴바