Google 페이지 따라 만들어 보기
[완성된 모습]



[폰트]
- 폰트: poppins 사용
- 폰트 컬러: 피그마툴로 추출
[google 글자 - CSS :nth-child() 사용]
글자 하나하나 <span>으로 묶어줌
<h1>
<span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>
</h1>
:nth-child()로 폰트 컬러 설정
h1 span:nth-child(1) {
color: #4285F4;
}
h1 span:nth-child(2) {
color: #EB5144;
}
h1 span:nth-child(3) {
color: #FCC72E;
}
h1 span:nth-child(4) {
color: #4285F4;
}
h1 span:nth-child(5) {
color: #34A853;
}
h1 span:nth-child(6) {
color: #EB5144;
}
[마우스 :hover]
/* input 마우스 hover 상태 */
#input:hover {
box-shadow: 4px 4px 5px rgba(222, 222, 221, 0.6);
}
/* button 마우스 hover 상태 */
#bottom button:hover {
border: 1px solid #dadce0;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
cursor: pointer;
}
'공부 모음집 > 실습 기록' 카테고리의 다른 글
| [JS] TO DO LIST (0) | 2023.12.15 |
|---|---|
| [CSS] transform-origin (1) | 2023.11.20 |
| [레이아웃] 레이아웃 유형(2) - flex, grid (0) | 2023.10.23 |
| [CSS] box-shadow (0) | 2023.10.23 |
| [👩🏻💻 연습] 반응형 Navbar 만들기 (+ 미디어쿼리, 햄버거 메뉴 토글 버튼, 자바스크립트 적용) (0) | 2023.10.21 |