728x90
반응형
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul, li{
list-style: none;
}
/* 스타일 추가: 네비게이션 메뉴 항목을 버튼처럼 스타일링 */
.header-nav{
font-weight: bold;
display: flex;
justify-content: space-around;
align-items: center;
background-color: #f0f0f0;
padding: 10px 20px;
ul{
display: flex;
gap: 20px;
li{
padding: 20px;
}
}
b{
color: blue;
}
ul> li:hover{
cursor: pointer;
color: blue;
font-style: italic;
transform: scale(1.1);
}
}
.blur-background::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(../image\ 1.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: blur(3px); /* 원하는 흐림 정도로 설정 */
z-index: -1;
}
.blur-background{
height: 800px;
font-size: 28px;
font-weight: bold;
-webkit-text-stroke: 1px rgb(255, 255, 255);
color: rgb(0, 0, 0);
position: relative;
align-items: center;
justify-content: center;
display: flex;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
.content{
h1{font-size: 40px;}
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
width: 70%;
height: 50%;
background-color:transparent;
padding: 100px;
margin: 70px;
box-sizing: border-box;
p{
padding: 10px;
};
span{
height: 40px;
}
}
#phoneNumber{
height: 50px;
}
#phoneNumber span{
color: white;
margin-top: 20px;
align-items: center;
justify-content: center;
display: flex;
border:2px solid white;
border-radius: 10px;
padding: 10px;
}
#phoneNumber span:hover{
font-size: 30px;
font-weight: bold;
cursor: pointer;
transform: scale(1.1);
color: black;
border: 3px solid blue;
transition: 0.2s;
padding: 20px;
}
}
.main-content{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 1000px;
.exp{
color: rgb(0, 0, 0);
font-size: 30px;
font-weight: bold;
margin-top: 100px;
border: 2px solid rgb(7, 4, 4);
border-radius: 10px;
width: 80%;
height: 500px;
margin-bottom: 50px;
.exp-item{
font-weight: bold;
font-size: 30px;
}
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
li{
padding: 10px;
}
}
.exp-em{
font-size: 25px;
font-weight: bold;
color: rgb(0, 0, 0);
margin-bottom: 100px;
}
}
.main-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(../image\ 2.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: blur(3px); /* 원하는 흐림 정도로 설정 */
z-index: -1;
opacity: 0.8;
}
.exp-content::before{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(../image\ 3.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: blur(4px); /* 원하는 흐림 정도로 설정 */
z-index: -1;
}
.exp-content{
height: 800px;
position: relative;
padding-top: 40px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.ti2{
font-weight: bold;
font-size: 40px;
margin-bottom: 60px;
}
.exp-main{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
overflow: hidden;
li{
display: flex;
color: black;
-webkit-text-stroke: 1px rgb(255, 255, 255);
font-size: 25px;
font-weight: bold;
margin: 20px;
padding: 10px;
gap: 5px;
border: 3px solid black;
border-radius: 10px;
width: 300px;
align-items: center;
align-content: center;
justify-content: center;
width: 300px;
transition: border-color 0.3s ease; /* 부드러운 전환을 위한 속성 추가 */
overflow: hidden;
width: 100%;
}
}
}
.service-section::before{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(../Outsourcing-symlog\ 1\ \(1\)\ 2.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: blur(3px); /* 원하는 흐림 정도로 설정 */
z-index: -1;
}
.service-section{
border: 2px solid white;
position: relative;
padding-top: 40px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 800px;
div{
font-weight: bold;
font-size: 20px;
padding-bottom: 20px;
}
ul{
border: 2px solid black;
padding: 20px;
color: black;
margin-top: 30px;
font-size: 20px;
font-weight: bold;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
}
footer{
background-color: rgba(32, 32, 32, 0.425);
gap: 30px;
padding: 40px;
display: flex;
align-items: center;
justify-content: space-around;
}
.price-section {
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
margin-top: 20px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.price-section h2 {
font-size: 24px;
margin-bottom: 10px;
text-align: center;
}
.price-section p {
font-size: 14px;
color: #555;
margin-bottom: 20px;
text-align: center;
}
.price-section div {
margin-bottom: 15px;
}
.price-section label {
display: block;
font-weight: bold;
margin-bottom: 15px;
}
.price-section input[type="text"],
.price-section input[type="number"] {
width: calc(100% - 20px);
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.price-section button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin-bottom: 10px;
}
.price-section button:hover {
background-color: #0056b3;
}
#priceResult {
font-size: 18px;
font-weight: bold;
text-align: center;
margin-top: 20px;
}
/* 모바일 스타일 */
@media (max-width: 768px) {
.desktop-only {
display: none;
}
.header-nav {
flex-direction: column;
align-items: center;
padding: 10px;
background-color: #f0f0f0;
}
.header-nav ul {
flex-direction: column;
width: 100%;
align-items: center;
}
.header-nav li {
padding: 10px;
width: 100%;
text-align: center;
border-bottom: 1px solid #ddd;
}
.header-nav li:last-child {
border-bottom: none;
}
.blur-background {
height: auto;
padding: 20px;
display: none;
}
.content {
width: 100%;
padding: 20px;
margin: 0;
}
.phone-number {
width: 100%;
padding: 15px;
}
.exp{
width: 100%;
height: 100%;
li{
font-size: 15px;
}
}
.main-content, .exp-content, .service-section, .price-section {
padding: 20px;
width: 100%;
box-sizing: border-box;
font-size: 10px;
.exp-em{
font-size: 17px;
}
}
.service-section{
div{
font-size: 15px;
}
ul{
font-size: 15px;
}
height: 500px;
}
.exp-main {
flex-direction: column;
}
.exp-main li {
width: 100%;
margin: 10px 0;
}
.price-section {
max-width: 100%;
}
.price-section input[type="text"],
.price-section input[type="number"] {
width: 100%;
}
.price-section button {
width: 100%;
}
}
728x90
반응형
'코딩을해보자 > 프론트엔드' 카테고리의 다른 글
| 포트폴리오 준비 (0) | 2024.12.06 |
|---|---|
| 살고싶은 프론트엔드 개발자 (0) | 2024.11.05 |
| FIGMA(피그마) (0) | 2024.09.30 |
| 비 전공자 프론트 엔드 1달 해본 후기 (8) | 2024.09.24 |
| 프론트앤드 코딩용 (1) | 2024.09.19 |