Skip to content

Commit

Permalink
idus-mobile1
Browse files Browse the repository at this point in the history
  • Loading branch information
YesolLee421 committed Jul 16, 2021
1 parent e600603 commit dd74a11
Show file tree
Hide file tree
Showing 3 changed files with 220 additions and 7 deletions.
166 changes: 166 additions & 0 deletions idus/css/mobile.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
#nav-bot {
position: fixed;
display: none;
width: 100%;
height: 50px;
background-color: #fff;
border-top: 1px solid #d9d9d9;
bottom: 0;
z-index: 150;
}
#nav-bot ul li {
width: 20%;
float: left;
}
#nav-bot ul li a {
display: block;
width: 100%;
height: 100%;
text-align: center;
padding-top: 10px;
font-size: 15px;
}
#nav-bot ul li a:hover {
color: #ff7b30;
}
#nav-bot ul li a .icon-art::before {
display: block;
content: "\f54e";
font-family: "Font Awesome 5 Free";
font-size: 1.0em;
font-weight: 600;
}
#nav-bot ul li a .icon-class::before {
display: block;
content: "\f51c";
font-family: "Font Awesome 5 Free";
font-size: 1.0em;
font-weight: 600;
}
#nav-bot ul li a .icon-search::before {
display: block;
content: "\f00e";
font-family: "Font Awesome 5 Free";
font-size: 1.0em;
font-weight: 600;
}
#nav-bot ul li a .icon-category::before {
display: block;
content: "\f0ca";
font-family: "Font Awesome 5 Free";
font-size: 1.0em;
font-weight: 600;
}
#nav-bot ul li a .icon-mypage::before {
display: block;
content: "\f2bd";
font-family: "Font Awesome 5 Free";
font-size: 1.0em;
font-weight: 600;
}


@media (max-width: 43em) {
#header {
font-size: 12px;
height: auto;
}
#header .top {
display: none;
}
#header .middle {
width: 100%;
}
#header .middle .category {
display: none;
}
#header .middle .search-input {
width: 60%;
margin: 2px 0 0 20px;
float: none;
display: inline-block;
vertical-align: middle;
}
#header .middle .mypage {
display: inline-block;
vertical-align: middle;
margin: 0;
width: 60px;
}
#header .middle .mypage a {
display: inline-block;
width: 50%;
text-align: center;
margin: 0;
}

#header .middle .mypage .profile,
#header .middle .mypage .cart span{
display: none;
}
#header .middle .mypage img{
width: 100%;
}
#header .bottom .nav-main ul {
width: 100%;
}
#header .bottom .nav-main ul li {
font-size: 10px;
}
#main-image {
height: 300px;
margin: 0;
}
#today-art {
width: 100%;
}
#today-art h2 {
font-size: 15px;
}
#today-art .today-frame ul .card {
position: relative;
width: 48%;
height: 350px;
font-size: 12px;
border: 1px solid #d9d9d9;
margin: 0 10px 20px 0;
}
#today-art .today-frame ul .card:nth-child(2n) {
margin-right:0px;
}
#today-art .today-frame ul .card .product-info {
padding: 10px;
}
#today-art .today-frame ul .card .product-rating p {
padding-top: 10px;
}
#today-art .today-frame ul .card .product-img {
width: 100%;
height: 60%;
overflow: hidden;
}
#today-art .today-frame ul .card .product-img img {
width: 100%;
height: 100%;
}
#today-art .btn-more {
position: relative;
width: 200px;
padding: 10px;
border: 1px solid #d9d9d9;
border-radius: 5px;
left: 50%;
margin-left: -100px;
}





#nav-bot {
display: initial;
}
#footer {
margin-bottom: 50px;
}
}
18 changes: 16 additions & 2 deletions idus/css/style.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
/* css 초기화 */
html, body {
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow-x: hidden;
Expand All @@ -23,6 +24,9 @@ button {
border: none;
background-color: transparent;
}
img {
vertical-align: middle;
}
.clearfix {
clear: both;
}
Expand Down Expand Up @@ -69,7 +73,7 @@ button {
margin-right:20px;
color: #ff7b30;
}
#header .middle form .search-input {
#header .middle .search-input {
float: left;
width: 285px;
height: 30px;
Expand Down Expand Up @@ -208,4 +212,14 @@ button {
}


#footer {
position: relative;
width: 100%;
height: 80px;
background-color: pink;
}





43 changes: 38 additions & 5 deletions idus/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@
<meta name="keywords" content="핸드메이드, 수공예, 먹거리">
<meta name="author" content="yesollee">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />


<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/mobile.css">
<title>아이디어스</title>
Expand All @@ -24,14 +27,14 @@
</div>
<div class="middle">
<a href="#"><img class="logo" src="img/logo_idus.png" alt="아이디어스 메인으로"></a>
<nav>
<nav class="category">
<a class="to-art" href="#">작품</a>
<a class="to-class" href="#">클래스</a>
</nav>
<!-- form action:"url" 서식데이터를 서버로 보낼 때 해당 데이터가 도착할 url -->
<form action="#">
<input class="search-input" type="text" placeholder="소독제를 검색해주세요">
</form>

<input class="search-input" type="text" placeholder="소독제를 검색해주세요">

<nav class="mypage">

<a class="profile" href="#">
Expand Down Expand Up @@ -251,7 +254,37 @@ <h3 class="product-title">
<button class="btn-more" type="button">오늘의 작품 더보기</button>
</div>

<footer></footer>
<footer id="footer"></footer>

<nav id="nav-bot">
<ul>
<li>
<a href="#">
<span class="icon-art">작품</span>
</a>
</li>
<li>
<a href="#">
<span class="icon-class">클래스</span>
</a>
</li>
<li>
<a href="#">
<span class="icon-search">검색</span>
</a>
</li>
<li>
<a href="#">
<span class="icon-category">카테고리</span>
</a>
</li>
<li>
<a href="#">
<span class="icon-mypage">내 정보</span>
</a>
</li>
</ul>
</nav>



Expand Down

0 comments on commit dd74a11

Please sign in to comment.