Notice
Recent Posts
Recent Comments
Link
| ์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- ์๊ณ ๋ฆฌ์ฆ
- SASS
- ::before
- js
- vscode
- object
- @mixin
- ๋ฌธ์์ด
- Em
- scss
- string
- ํ๋ก๊ทธ๋๋จธ์ค ์ฝ๋ฉํ ์คํธ
- input
- ์ธ๋ผ์ธ๋ธ๋ก
- HTML
- carousel slider
- ์ฝ๋ฉํ ์คํธ
- float
- html ํ๊ทธ
- javascript
- ์๋ฐ์คํฌ๋ฆฝํธ
- TAG
- ์ธ๋ผ์ธ
- ํฉ๊ณ ์๊ณ ๋ฆฌ์ฆ
- layout
- ํ๋ก๊ทธ๋๋จธ์ค
- css
- VSCODE๋จ์ถํค
- ์ ๊ฐ์ฐ์ฐ์
- inline
Archives
- Today
- Total
Outputor
Landing ํ์ด์ง2 ๋ณธ๋ฌธ
- background์ url๋ก ์ด๋ฏธ์ง๋ฅผ ์ฝ์ ํด์ img์ text์ absolute๋ฅผ ๋ฃ์ง ์๊ณ ์์ฑํจ
- hover ์ด๋ฒคํธ์ ์ด๋ฏธ์ง ์ฌ์ด์ฆ๋ ์์์ง์ง ์๊ฒ ์์ฑํจ
๋๋ณด๊ธฐ
๋๋ณด๊ธฐ
์ฝ๋
<!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>
/* COMMON */
body {
margin: 0;
}
p {
margin: 0;
}
h1 {
margin: 0;
}
.clearfix::after {
content: '';
clear: both;
display: block;
}
.float--left {
float: left;
}
.float--right {
float: right;
}
.container {
width: 100%;
}
.inner {
max-width: 1200px;
height: 100%;
margin: auto;
padding-top: 100px;
}
/* DESCRIPTION */
.description {
text-align: center;
margin-bottom: 50px;
}
.description p {
color: #7950f2;
font-weight: bold;
}
/* MAIN */
.box {
width: 50%;
height: 330px;
position: relative;
background-size: cover;
}
.box-one {
background-image: url('./images/portfolio-1.jpg');
}
.box-two {
background-image: url('./images/portfolio-2.jpg');
}
.box-three {
background-image: url('./images/portfolio-3.jpg');
}
.box-four {
background-image: url('./images/portfolio-4.jpg');
}
.text {
padding: 0 50px;
padding-top: 160px;
color: #fff;
}
.box::before{
content:'';
width: 100%;
height: 100%;
position: absolute;
box-sizing: border-box;
border: 0px solid #fff;
z-index: 10;
top: 0;
left: 0;
transition: all .5s;
}
.box:hover::before {
content: '';
border: 20px solid #fff;
}
/* MEDIA */
@media screen and (max-width:992px) {
.float--left,
.float--right {
float: none;
}
.inner {
width: 100%;
}
.box {
min-width: 330px;
margin: auto;
}
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
<div class="description">
<p>PORTFOLIO</p>
<h1>What you can Do</h1>
</div>
<div class="main clearfix">
<div class="box box-one float--left">
<div class="text">
<h3>name one</h3>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum optio ratione
possimus
</p>
</div>
</div>
<div class="box box-two float--right">
<div class="text">
<h3>name two</h3>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum optio ratione
possimus
</p>
</div>
</div>
<div class="box box-three float--left">
<div class="text">
<h3>name three</h3>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum optio ratione
possimus
</p>
</div>
</div>
<div class="box box-four float--right">
<div class="text">
<h3>name four</h3>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum optio ratione
possimus
</p>
</div>
</div>
</div>
</div>
</body>
</html>'๐ฆ ํ๋ก์ ํธ ๐ป > ๐ ํ๋ก์ ํธ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| layout 3 (0) | 2022.01.13 |
|---|---|
| Shadow DOM (0) | 2022.01.06 |
| layout 2 (0) | 2022.01.05 |
| layout 1 (0) | 2022.01.05 |
| Landing ํ์ด์ง 1 (0) | 2022.01.04 |
'๐ฆ ํ๋ก์ ํธ ๐ป/๐ ํ๋ก์ ํธ' Related Articles
more
