[👩🏻‍💻 연습] Google 페이지 따라 만들어 보기

Google 페이지 따라 만들어 보기

 

[완성된 모습]

 

인풋 마우스 :hover

버튼 마우스 hover

[폰트]

 

• 폰트: 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;
}