사이트 클론코딩

티스토리 뷰

코딩/JavaScript

사이트 클론코딩

ehzim 2023. 11. 28. 03:05

https://themewagon.com/themes/ministore/

https://themewagon.github.io/MiniStore/

Ministore

100% secure payment Rem Lopsum dolor sit amet, consectetur adipi elit.

themewagon.github.io

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://kit.fontawesome.com/5aa76ca121.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="mini.css">
</head>
<body>
    <div class="container">
        <nav class="container nav">
            <div class="title">
                <img src="images/main-logo.png" alt="">
            </div>
            <div class="menu">
                <a id="home"href="">HOME</a>
                <a href="">SERVICES</a>
                <a href="">PRODUCTS</a>
                <a href="">WATCHES</a>
                <a href="">SALE</a>
                <a href="">BLOG</a>
                <a class="pages" href="">PAGES ▼</a>
                <ul class="submenu">
                    <li><a href="" class="sub">ABOUT</a></li>
                    <li><a href="" class="sub">BLOG</a></li>
                    <li><a href="" class="sub">SHOP</a></li>
                    <li><a href="" class="sub">CART</a></li>
                    <li><a href="" class="sub">CHECKOUT</a></li>
                    <li><a href="" class="sub">SINGLE POST</a></li>
                    <li><a href="" class="sub">SINGLE PTODUCT</a></li>
                    <li><a href="" class="sub">CONTACT</a></li>
                </ul>
            </div>
            <div class="icon">
                <i class="fa-solid fa-magnifying-glass"></i>
                <i class="fas fa-user"></i>
                <i class="fas fa-shopping-cart"></i>
            </div>
        </nav>
        <div class="back">
            <div class="text">
                <p>TECHNOLOGY HACK YOU WON'T GET</p>
                <button>SHOP PRODUCT</button>
            </div>
            <div class="image">
                <img src="images/banner-image.png" alt="">
            </div>
        </div>
        <div class="imp">
            <div class="m">
                <i class="fas fa-shopping-cart"></i>
                <div>
                    <h4>FREE DELIVERY</h4>
                    <p>Consectetur adipi elit lorem ipsum dolor sit amet</p>
                </div>
            </div>
            <div class="m">
                <i class="fas fa-certificate"></i>
                <div>
                    <h4>QUALITY GUARANTEE</h4>
                    <p>Dolor sit amet orem ipsu mcons ectetur adipi elit.</p>
                </div>
            </div>
            <div class="m">
                <i class="fas fa-tag"></i>
                <div>
                    <h4>DAILY OFFERS</h4>
                    <p>Amet consectetur adipi elit loreme ipsum dolor sit.</p>
                </div>    
            </div>
            <div class="m">
                <i class="fas fa-shield-alt"></i>
                <div>
                    <h4>100% SECURE PAYMENT</h4>
                    <p>Rem Lopsum dolor sit amet, consectetur adipi elit.</p>
                </div>
            </div>
        </div>
    </div>
    <!-- <div>
        <input type="text" name="" id="" placeholder="your email address here">
    </div> -->
</body>
<script src="mini.js"></script>
</html>

CSS

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}
.container{
    /* width: 90%; */
    width: 100%;
    margin: auto;
}
.container nav{
    display: flex;
    width: 100%;
    border: 1px solid black;
    padding: 15px;
}
.title{  
    display: flex;
    width: 20%;
    border: 1px solid red;
    justify-content: left;
    align-items: center;
    /* font-size: 20px; */
}
.menu{
    display: flex;
    width: 50%;
    border: 1px solid purple;
    width: 60%;
    margin-left: 20%;
    justify-content: space-between;
    align-items: center;
    
}
#home{
    color: lightblue;
}
.menu > a{
    color: black;
}
.icon{
    border: 1px solid blue;
    width: 10%;
    text-align: right;
    line-height: 50px;
}
i{
    margin: 0 5px;
}

.submenu{
    /* height: 0; 
    overflow: hidden; */
    display: none;
    position: absolute;
    background-color: white;
    padding: 10px;
    top:80px;
    right: 80px;
    transition: all 3s;
}


.pages:hover + .submenu /*형제요소 이므로 +붙여서 선택*/
{
    display: block;
}
.submenu .sub{
    display: block;
    padding: 5px 10px;
    
}
/* .submenu .sub:hover{
    background-color: black;   
} */
a:hover{
    color: lightblue;
}
.back{
    background-color: rgb(230, 229, 229);
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.text{
    width: 40%;
    flex-wrap: wrap;
    margin: 0 25px;
    
}
.text p{
    font-size: 70px;
    margin-bottom: 10px;
}
.text button{
    font-size: 15px;
    padding: 10px;
    background-color: rgb(59, 58, 58);
    color: white;
    border: none;
}
.imp{
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid red;
    width: 100%;
    padding: 20px 0;
    
}
.imp .m{
    width: 20%;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    align-items: center;
    margin: 0 20px;
    border: 1px solid black;
}
.m i{
    width: 10%;
    margin: 20px 0;
    font-size: 20px;
    color: lightblue;
}
h4{
    margin: 10px 0;
    font-size: 20px;
}
.m p{
    color:gray;
}

CSS 구문을 살펴보면

.pages:hover + .submenu 
{
    display: block;
}

.submenu .sub{
    display: block;
    padding: 5px 10px;
    
}

위의 두 코드를 설명해보면 .pages(클래스)에 hover 즉 마우스를 올리면 +(형제요소) .submenu(클래스)의 요소를 선택한다.

선택하여 display:blcok;을 하였으므로 보이도록 작성하였다는 것을 알 수 있다.

또한, 두번째 코드는 submenu(클래스)의 자식 중 sub(클래스)를 가진 요소를 선택한다.

선택하여 요소가 보이도록 설정하고 padding을 주어 간격을 맞춰준다는 것을 알 수 있다.

footer

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="footer.css">
</head>
<body>
    <footer>
        <div class="f_1">
            <p>We ship with: 
                <img src="images/dhl.png" alt="">
                <img src="images/shippingcard.png" alt="">
            </p>
        </div>
        <div>
            <p>Payment options:  
                <img src="images/visa.jpg" alt="">
                <img src="images/mastercard.jpg" alt="">
                <img src="images/paypal.jpg" alt="">
            </p>
        </div>
        <div>
            <p>&copy; Copyright 2023 MiniStore. Design by</p>
            <p>TemplatesJungle Distribution by ThemeWagon</p>
        </div>
    </footer>
</body>
</html>

CSS

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}
footer{
    display: flex;
    width: 100%;
    justify-content: space-between;
    color: grey;
    align-items: center;
    border-top: 1px solid grey;
}
.f_1{
    margin: 10px;
}

저작자표시

'코딩 > JavaScript' 카테고리의 다른 글

[JavaScript] addEventListener 종류 (1)	2023.12.17
[JacaScript] 셀렉터 (0)	2023.12.17
[8주 1일차] javascript (1)	2023.11.27
[7주 5일차] JavaScript (1)	2023.11.24
[7주 4일차] JavaScript (1)	2023.11.23

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

zim's growth dairy

티스토리 뷰

사이트 클론코딩

'코딩 > JavaScript' 카테고리의 다른 글

티스토리툴바