html
<!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">
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@1,300&family=Montserrat:wght@300&family=Sacramento&display=swap" rel="stylesheet">
<title>Hanoona</title>
</head>
<body>
<div class="top-container">
<img class="top-cloud" src="img/cloud.png" alt="cloud-img">
<h1>I'm Hanoona</h1>
<h2>a <span class="pro">pro</span>grammer.</h2>
<img class="bottom-cloud" src="img/cloud.png" alt="cloud-img">
<img src="img/mountain.png" alt="mountain-img">
</div>
<div class="middle-container">
<div class="profile">
<img class="hyori-img" src="img/이효리.jpeg" alt="">
<h2>Hello</h2>
<p>I'm a web developer. I'm the founder of the HaNooNa. I like to watch Korean movies and verieties.</p>
</div>
<hr>
<div class="skills">
<h2>My Skills</h2>
<div class="skill-row">
<img class="webdesign-img" src="img/webdesign.png" alt="">
<h3>Lorem & Ipsum</h3>
<p class="design-skill-description">Lorem ipsum dolor sit amet, quis in duis, iaculis id felis. Consectetuer vestibulum, nunc urna lectus, erat ligula. Hendrerit nam, lectus ante, ut lorem eros.</p>
</div>
<div class="skill-row">
<img class="coding-img" src="img/coding.png" alt="">
<h3>Lorem Ipsum Dolor</h3>
<p class="code-skill-description">Lorem ipsum dolor sit amet, mauris sed consectetuer. Etiam et eu, bibendum interdum, lacus quis mauris. Curabitur wisi, quisque vel eu, rutrum nam.</p>
</div>
</div>
<hr>
<div class="contact-me">
<h2>Get In Touch</h2>
<h3>Lorem ipsum dolor sit amet, non elit.</h3>
<p class="contact-message">Lorem ipsum dolor sit amet, in quis, aenean amet. Phasellus sodales, tellus donec dui, ornare erat.</p>
<a class="btn" href="mailto:name@email.com">CONTACT ME</a>
</div>
</div>
<div class="bottom-container">
<a class="footer-link" href="https://www.linkedin.com/">LinkedIn</a>
<a class="footer-link" href="https://twitter.com/">Twitter</a>
<a class="footer-link" href="https://www.appbrewery.co/">Website</a>
<p class="copyright">2021 Hanoona @ The HaNooNa Company.</p>
</div>
</body>
</html>
CSS
body {
color: #40514E;
margin: 0;
text-align: center;
}
h1 {
margin: 50px auto 0 auto;
font-family: 'Sacramento', cursive;
font-size: 5.625rem;
color: #66BFBF;
line-height: 2;
}
h2 {
font-family: 'Montserrat', sans-serif;
font-size: 2.5rem;
color: #66BFBF;
padding-bottom: 10px;
}
h3 {
font-family: 'Montserrat', sans-serif;
color: #11999E;
}
p {
font-family: 'Merriweather', serif;
line-height: 2;
font-weight: normal;
}
a {
color: #11999E;
font-family: 'Montserrat', sans-serif;
}
a:hover {
color: #e3eaeb;
}
hr {
border: dotted #d1e9e9 6px;
border-bottom: none;
width: 4%;
margin: 100px auto;
}
.top-container {
background-color: rgb(227, 247, 250);
position: relative;
padding-top: 100px;
}
.bottom-container {
background-color: #66BFBF;
padding: 50px 0 20px;
}
.pro {
text-decoration: underline;
}
.top-cloud {
position: absolute;
right: 300px;
top: 50px;
}
.bottom-cloud {
position: absolute;
left: 300px;
bottom: 300px;
}
.profile {
margin: 100px auto;
}
.hyori-img {
width: 15%;
height: 15%;
}
.skills {
margin: 100px auto;
}
.my-skills {
margin: 0;
}
.skill-row {
width: 50%;
margin: 100px auto;
text-align: left;
}
.webdesign-img {
width: 25%;
height: 25%;
float: left;
margin-right: 30px;
}
.coding-img {
width: 27%;
height: 27%;
float: right;
margin-left: 30px;
}
.contact-message {
width: 40%;
margin: 0 auto 60px;
}
.contact-me {
margin: 100px auto;
}
.btn {
background: #66bfbf;
background-image: -webkit-linear-gradient(top, #66bfbf, #53a3a3);
background-image: -moz-linear-gradient(top, #66bfbf, #53a3a3);
background-image: -ms-linear-gradient(top, #66bfbf, #53a3a3);
background-image: -o-linear-gradient(top, #66bfbf, #53a3a3);
background-image: linear-gradient(to bottom, #66bfbf, #53a3a3);
-webkit-border-radius: 8;
-moz-border-radius: 8;
border-radius: 8px;
font-family: 'Montserrat', sans-serif;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.btn:hover {
background: #7dcccc;
background-image: -webkit-linear-gradient(top, #7dcccc, #73d1d1);
background-image: -moz-linear-gradient(top, #7dcccc, #73d1d1);
background-image: -ms-linear-gradient(top, #7dcccc, #73d1d1);
background-image: -o-linear-gradient(top, #7dcccc, #73d1d1);
background-image: linear-gradient(to bottom, #7dcccc, #73d1d1);
text-decoration: none;
}
.footer-link {
font-family: 'Montserrat', sans-serif;
color: #115e61;
font-size: 1.3rem;
text-decoration: none;
padding: 30px;
}
.copyright {
color: #eceeee;
font-family: 'Merriweather', serif;
font-size: 0.75rem;
padding: 20px 0;
}
'Clone Coding > Other Websites' 카테고리의 다른 글
| 숀할핀 사이트 클론 1 (0) | 2021.06.26 |
|---|
댓글