HTML
<!DOCTYPE html>
<html>
<head>
<title>CITRUS</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<header class="header">
<a class="icon logo" href="">HOME</a>
<a class="icon lemon" href="">LEMON</a>
<a class="icon orange" href="">ORANGE</a>
<a class="icon jamong" href="">JAMONG</a>
</header>
<section class="contents">
<h1>CITRUS <span>JAM</span></h1>
<p>
<mark>Fruit</mark>
dolor sit amet, <span class="point">Orange</span> adipiscing elit.
Aenean <br />commodo ligula eget dolor. Aenean massa. Cum sociis
natoque penatibus et magnis<br />
dis parturient <span class="point">Jamong</span> nascetur ridiculus
mus. Donec quam felis, ultricies nec, pellentesque eu, <br />pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo,
fringilla vel, aliquet nec, vulputate <br />eget, arcu. In enim justo,
<span class="point">Lemon</span> ut, imperdiet a, venenatis vitae,
justo. Nullam dictum felis eu pede <br />
mollis pretium. Integer tincidunt.
</p>
</section>
<footer class="footer">Citrus Jam 2021</footer>
</div>
</body>
</html>
CSS
body,
p {
margin: 0;
padding: 0;
}
a {
color: inherit;
text-decoration: none;
}
h1 {
font-size: inherit;
font-weight: inherit;
}
/**/
body {
background-image: url(images/bg.png);
}
.wrapper {
width: 960px;
margin: 0 auto;
}
.header {
padding: 25px 0;
}
.header .icon {
background-color: black;
width: 200px;
height: 200px;
display: inline-block;
text-align: center;
line-height: 200px;
border-radius: 50%;
margin-right: 10px;
letter-spacing: 0.4em;
text-indent: 0.4em;
}
.header .icon.logo {
background-image: url(images/logo.png);
text-indent: -9999px;
}
.header .icon.lemon {
color: yellow;
}
.header .icon.orange {
color: orange;
}
.header .icon.jamong {
color: tomato;
}
header .icon:hover {
text-indent: -9999px;
}
.header .icon.lemon:hover {
background-image: url(images/lemon.png);
}
.header .icon.orange:hover {
background-image: url(images/orange.png);
}
.header .icon.jamong:hover {
background-image: url(images/jamong.png);
}
.contents {
background-color: white;
background-image: url(images/contents-bg.png);
background-position: bottom right;
background-repeat: no-repeat;
padding: 35px;
border-radius: 50px;
min-height: 320px;
}
.contents h1 {
color: tomato;
font-size: 30px;
font-weight: bold;
margin: 20px 0;
}
.contents h1 span {
color: gray;
font-size: 0.5em;
vertical-align: top;
font-weight: lighter;
}
.contents p {
color: rgb(123, 123, 111);
font-family: arial;
margin-bottom: 1em;
font-size: 15px;
line-height: 2;
}
.contents p mark {
background-color: tomato;
color: white;
padding: 4px 7px;
border-radius: 5px;
}
.contents .point {
color: green;
}
.footer {
color: rgb(60, 60, 60);
text-align: right;
font-size: 20px;
letter-spacing: 0.3em;
padding-right: 15px;
}'Front-end > HTML CSS' 카테고리의 다른 글
| HTML 시멘틱 태그 (0) | 2022.04.08 |
|---|---|
| Flex Box (justify-content와 align-items/flex-grow와 flex-shrink/flex-wrap/flex-direction) (0) | 2022.04.07 |
| inline element (0) | 2022.04.06 |
| inline elements의 특성 (0) | 2022.04.04 |
| (box-model) 화면 구현 연습 (0) | 2022.04.02 |
