728x90
@import url("https://fonts.googleapis.com/css2?family=Lexend+Exa:wght@100..900&display=swap");
/* CSS Reset - 기본 설정 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* body태그 기본 마진 삭제 */
body {
margin: 0px;
cursor: url("banner/mcdonaldslogo 60.png"), default;
}
/* 전체 틀 */
.wrapper {
width: 100%;
}
/* 헤더 */
.header {
width: 100%;
padding: 20px;
background: rgb(255, 255, 255);
border-top: 10px solid #ffbe01;
display: flex;
align-items: center;
}
/* 네비게이션 바 */
.navbar {
a {
text-decoration: none;
font-size: 25px;
font-weight: bold;
color: white;
&:hover {
color: #db0009;
opacity: 0.7;
}
}
li {
display: inline-block;
margin-right: 33px;
}
}
.menu-bar {
border-radius: 50px;
background: #ffbe01;
padding: 8px 20px;
display: flex;
align-items: center;
}
/* 아이콘 */
.icons {
padding-left: 2px;
display: flex;
align-items: center;
.search-icon,
.menu-icon {
cursor: pointer;
}
.search-icon {
width: 33px;
height: 33px;
margin-right: 25px;
}
.menu-icon {
width: 48px;
height: 48px;
}
}
/* 로고 */
.logo {
flex-grow: 1;
img {
width: 67px;
height: 60px;
}
}
/* 캐러셀 */
.container {
width: 100%;
}
.slide-container {
width: 400vw;
justify-content: center;
}
.slide-box {
width: 100vw;
float: left;
text-align: center;
padding: 0 20px;
img {
width: 100%;
max-width: 920px;
height: auto;
border-radius: 20px;
}
}
/* 캐러셀 버튼 */
.carousel-button {
text-align: center;
padding: 13px;
button {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #ffbe01;
cursor: pointer;
margin: 0 6px;
border: none;
opacity: 0.8;
&:hover {
background-color: #db0009;
opacity: 0.7;
}
}
}
/* 언더 메뉴바 */
.under-menu {
background-color: #fccf4b;
display: none;
&.show-under {
display: block;
}
}
.navbar-under {
text-align: center;
a {
font-size: 25px;
text-decoration: none;
font-weight: bold;
color: white;
&:hover {
color: orange;
text-shadow: -1px -1px 0 #db0009, 1px -1px 0 #db0009, -1px 1px 0 #db0009,
1px 1px 0 #db0009, 0px -1px 0 #db0009, -1px 0px 0 #db0009,
1px 0px 0 #db0009, 0px 1px 0 #db0009;
}
}
li {
padding-bottom: 20px;
&:nth-child(1) {
padding-top: 20px;
}
}
}
/* McDonald's Live 효과 */
#mclive {
font-family: "Lexend Exa", sans-serif;
font-size: 24px;
font-weight: 600;
color: #ffbe01;
border-top: 2px solid #ffbe01;
border-bottom: 2px solid #ffbe01;
padding: 20px;
}
/* 정사각형 */
.square {
width: 375px;
height: 375px;
border-radius: 32px;
border: 2px solid #ffbe01;
margin: 40px;
}
.square-flex {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 37px;
}
/* 푸터 */
.footer {
width: 100%;
background-color: #fdd96f;
.footer-content {
height: 250px;
padding: 20px;
display: flex;
justify-content: space-around;
align-items: center;
}
a,
li {
text-decoration: none;
font-size: 15px;
font-weight: bold;
color: white;
list-style-type: none;
}
li {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
}
/* 밑줄 */
.underline {
width: 100%;
height: 20px;
background-color: rgb(255, 255, 255);
border-bottom: 10px solid #ffbe01;
}
/* 미디어 쿼리 */
@media screen and (max-width: 1200px) {
.wrapper {
max-width: auto;
}
.navbar a {
font-size: 22px;
}
.slide-box img {
max-width: 820px;
}
.square {
width: 25vw;
height: 25vw;
margin: 15px;
border-radius: 32px;
}
}
@media screen and (max-width: 992px) {
.square {
width: 25vw;
height: 25vw;
margin: 15px;
border-radius: 20px;
}
#mclive {
font-size: 20px;
}
}
@media screen and (max-width: 768px) {
.wrapper {
min-width: 200px;
}
.navbar li {
display: none;
}
.square {
width: 30vw;
height: 30vw;
margin: 15px;
border-radius: 20px;
}
#mclive {
font-size: 17px;
}
.footer a,
li {
font-size: 12px;
}
.navbar-under a {
font-size: 20px;
}
}
주석 단 버전
728x90
'> 포트폴리오 > 맥도날드' 카테고리의 다른 글
[깃] 맥도날드 데이터 깃허브에 넣기 (0) | 2024.08.24 |
---|---|
[SCSS] scss 수정 및 캐러셀 수정 (0) | 2024.08.24 |
[CSS] flex 사용해서 상자 나열하기 (0) | 2024.03.29 |
[JS] 캐러셀 만들기 (4개 사진)* (0) | 2024.03.26 |
[JS / CSS] 햄버거 언더 메뉴바 만들기 (2) (1) | 2024.03.26 |