본문 바로가기
Project Development/Java_programming

쇼핑몰 홈페이지

by SeleniumBindingProtein 2021. 12. 14.
728x90
반응형
//homePage.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>쇼핑몰 홈페이지</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
          integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
    <link rel="stylesheet" href="../css/headerTopBarIcon.css">
	<link rel="stylesheet" href="../css/navBanner.css">
	<link rel="stylesheet" href="../css/contentFooter.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
</head>
	<body>
		<div class="wrap">
        	<div class="header">
  				<div class="topBar">
 					<a class="topLogo" href="#"><img src="../img/logo.jpg" alt="대체 텍스트"></a>
  					<div class="searchBox">
                		<input type="text">
                		<a class="search" href="#"><i class="fas fa-search"></i></a>
                	</div>
        			<div class="topBarIcon">
                		<a href="#"><i class="fas fa-door-open"></i></a>
               	 		<a href="../login/login.html"><i class="far fa-user"></i></a>
                		<a href="#"><i class="fas fa-shopping-cart"></i></a>
            		</div>
            	</div>
            </div>
        	<div class="nav">
  				<div class="navBox">
    				<ul>
     					<li><a href=""><i class="fas fa-bars"></i>전체메뉴</a></li>
     					<li><a href="">회사소개</a></li>
      					<li><a href="">브랜드정보</a></li>
      					<li><a href="">제품정보</a></li>
      					<li><a href="">게시판</a></li>
   				 	</ul>
  				</div>
			</div>
        	
        	<div class="banner">
  				<div class="bannerImg">
  					<a href=""><img src="../img/sofa.jpg" alt=""></a>
  				</div>
			</div>
        	
        	<div class="main">
        		<div class="container">
            		<div class="items">
                		<a href="">
                    	<div class="tagList">
                        	<span class="event">EVENT</span>
                        	<span class="best">BEST</span>
                    	</div>
                    	<span class="title">아이맥, 매직키보드마우스세트</span>
                    	<div class="contentImg">
                        	<img src="../img/product.jpg" alt="">
                    	</div>
                    	<div class="price">
                        	<span class="originPrice"><strike>23000</strike></span>
                        	<span class="salePrice">19000</span>
                    	</div>
                	</a>
            	</div>

            	<div class="items">
                	<a href="">
                    	<div class="tagList">
                        	<span class="event">EVENT</span>
                        	<span class="best">BEST</span>
                    	</div>
                    	<span class="title">아이맥, 매직키보드마우스세트</span>
                    	<div class="contentImg">
                        	<img src="../img/product.jpg" alt="">
                    	</div>
                    	<div class="price">
                        	<span class="originPrice"><strike>23000</strike></span>
                        	<span class="salePrice">19000</span>
                    	</div>
               		</a>
           		 </div>
           		 
           	 	 <div class="items">
                	<a href="">
                    	<div class="tagList">	
                        	<span class="event">EVENT</span>
                        	<span class="best">BEST</span>
                    	</div>
                    	<span class="title">아이맥, 매직키보드마우스세트</span>
                    	<div class="contentImg">
                        	<img src="../img/product.jpg" alt="">
                    	</div>
                    	<div class="price">
                        	<span class="originPrice"><strike>23000</strike></span>
                        	<span class="salePrice">19000</span>
                    	</div>
                	</a>
           		</div>
           		
            	<div class="items">
                	<a href="">
                    	<div class="tagList">
                        	<span class="event">EVENT</span>
                        	<span class="best">BEST</span>
                    	</div>
                    	<span class="title">아이맥, 매직키보드마우스세트</span>
                    	<div class="contentImg">
                        	<img src="../img/product.jpg" alt="">
                    	</div>
                    	<div class="price">
                        	<span class="originPrice"><strike>23000</strike></span>
                        	<span class="salePrice">19000</span>
                    	</div>
                	</a>
            	</div>

            	<div class="items">
                	<a href="">
                    	<div class="tagList">
                        	<span class="event">EVENT</span>
                        	<span class="best">BEST</span>
                    	</div>
                    	<span class="title">아이맥, 매직키보드마우스세트</span>
                    	<div class="contentImg">
                        	<img src="../img/product.jpg" alt="">
                    	</div>
                    	<div class="price">
                        	<span class="originPrice"><strike>23000</strike></span>
                        	<span class="salePrice">19000</span>
                    	</div>
                	</a>
            	</div>
            	
            	<div class="items">
                	<a href="">
                    	<div class="tagList">
                        	<span class="event">EVENT</span>
                        	<span class="best">BEST</span>
                    	</div>
                    	<span class="title">아이맥, 매직키보드마우스세트</span>
                    	<div class="contentImg">
                        	<img src="../img/product.jpg" alt="">
                    	</div>
                    	<div class="price">
                        	<span class="originPrice"><strike>23000</strike></span>
                        	<span class="salePrice">19000</span>
                    	</div>
                	 </a>
            		</div>
        	  	</div>
    		</div>
        	
        	<div class="footer">
        		<div class="footerContent">
            		<div class="footerLinkList">
               			<ul>
                    		<li><a href="#">회사소개</a></li>
                    		<li><a href="#">이용약관</a></li>
                    		<li><a href="#">개인정보처리방침</a></li>
                    		<li><a href="#">사고대응메뉴얼</a></li>
                    		<li><a href="#">상품문의</a></li>
                		</ul>
            		</div>
            		<div class="companyInfo">
                		<span>
                    		주식회사 강사모<br/>
                    		서울특별시 서초구 교보타워<br/>
                    		사업자등록번호 : 123-29-123456<br/>
                    		통신판매업신고 제2021-서울서초-9999호<br/>
                    		고객센터: 070-1111-1111 / puppylove@puppylove.co.kr<br/>
                		</span>
            		</div>
        		</div>
        	</div>
   		</div>
	</body>
</html>
//headerTopBarIcon.css
*{
    font-family: 'Noto Sans KR', sans-serif;
}

body{
    margin: 0 auto;
}

a{
    text-decoration: none;
    color: black;
}

.header{
    width: 1080px;
    height: 70px;
    margin: 0 auto;
    line-height: 70px;
}

.topBar{
    display: flex;
    align-items: center;
}

.topLogo{
    width: 20%;
    display: inline-block;
}

.searchBox{
    width: 60%;
    display: inline-block;
}

.searchBox input{
    background-color: whitesmoke;
    border: 0px;
    width: 500px;
	height: 30px;
}

.searchBox input:active{
    border: 2px solid black;
}

.topBar img{
    vertical-align: middle;
}

.topBarIcon{
    width: 15%;
    background-color: grey;
    border-radius: 20px;
    text-align: center;
    height: 35px;
    line-height: 35px;

}

.topBarIcon a{
    color:white;
    margin: 6%;
}

//navBanner.css
@charset "UTF-8";

body{
    margin: 0 auto;
}

a{
    text-decoration: none;
    color: black;
}

ul{
    list-style: none;
}

.navBox ul{
    display: flex;
}

.navBox ul li{
    margin-left: 5%;
}

.navBox{
    font-weight: 300;
    font-size:25px;
}

.navBoxFirst{
    margin: 0;
    font-weight: 600;
    width: 40%;
}

.navBoxFirst i{
    margin-right: 10px;
}


.navBox ul li:hover{
    font-weight: 500;
}

.navBoxFirst:hover{
    font-weight: 800;
}

.wrap{
    width: 1080px;
    margin: 0 auto;
}

.bannerImg img{
    width: 1080px;
    height: 350px;
}

//contentFooter.css
@charset "UTF-8";

.container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.items{
    width: 48%;
    height: 450px;
    border: 1px solid black;

}
.contentImg {
    text-align: center;
}

.contentImg img{
    width:99%;
}
.price span{
    display: block;
}

.footer{
    width: 100%;
    height: 230px;
    background-color: #4d4d4d;
    margin-bottom: 0;
}

.footer .footerContent{
    width: 1080px;
    margin: 0 auto;
}

.footerLinkList ul{
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footerLinkList ul{
    justify-content: space-around;
}

.footerLinkList ul li{
    height: 70px;
    line-height: 70px;
    font-size: 17px;
    font-weight: 900;
    width: 100%;
}

.footerLinkList ul li a{
    text-decoration: none;
    color: black;
    color: #cecece;
    display:block;
    text-align: center;
}

.footerLinkList ul li a:hover{
    color: #a1a1a1;
    text-decoration: underline;
}

.companyInfo{
    margin-top: 15px;
}

728x90
반응형

'Project Development > Java_programming' 카테고리의 다른 글

아이디 찾기 - DB 연결  (0) 2021.12.15
회원가입 - DB 연결  (0) 2021.12.14
회원가입 페이지  (0) 2021.12.14
로그인 페이지  (0) 2021.12.14
웹 레이아웃  (0) 2021.12.12

관련글

댓글

티스토리툴바