클론코딩 2

티스토리 뷰

코딩/HTML&CSS

클론코딩 2

ehzim 2023. 12. 1. 01:39

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>
        <section class="section_1">
            <div class="imp">
                <div>
                    <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>
                    <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>
                    <i class="fas fa-tag"></i>
                    <div>
                        <h4>DAILY OFFERS</h4>
                        <p>Amet consectetur adipi elit loreme ipsum dolor sit.</p>
                    </div>    
                </div>
                <div>
                    <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>
        </section>
    </div>
    <!-- <div>
        <input type="text" name="" id="" placeholder="your email address here">
    </div> -->
    <footer>
        <div class="Foot">
            <div class="foo_1">
                <img src="images/main-logo.png" alt="">
                <p>Nisi, purus vitae, ultrices nunc. Sit ac sit suscipit hendrerit. Gravida massa volutpat aenean odio erat nullam fringilla.</p>
                <i></i>
            </div>
            <div class="foo_2">
                <h3>QUICK LINKS</h3>
                <a href="">HOME</a>
                <a href="">ABOUT</a>
                <a href="">SHOP</a>
                <a href="">BLOGS</a>
                <a href="">CONTACT</a>
            </div>
            <div class="foo_3">
                <h3>HELP & INFO HELP</h3>
                <a href="">TRACK YOUR ORDER</a>
                <a href="">RETURNS POLICIES</a>
                <a href="">SHIPPING + DELIVERY</a>
                <a href="">CONTACT US</a>
                <a href="">FAQS</a>
            </div>
            <div class="foo_4">
                <h3>CONTACT US</h3>
                <p>Do you have any queries or suggestions?<span class="ssspa">yourinfo@gmail.com</span></p>
                <p>If you need support? Just give us a call. <span class="ssspa">+55 111 222 333 44</span></p>
            </div>
        </div>
        <div class="foo">
            <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><span class="ssspa">TemplatesJungle</span> Distribution by <span class="ssspa">ThemeWagon</span></p>
            </div>
        </div>
    </footer>
    <div>
        <img id="sea_i" src="images/search-icon.png" alt="">
    </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: 90%;
    margin: auto;
}
.container nav{
    background-color: white;
    display: flex;
    width: 100%;
    /* border: 1px solid black; */
    padding: 15px;
    /* position: fixed; */
}
.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;
    padding: 10px 0;
    
}
#home{
    color: lightblue;
}
#sea_i{
    width: 40px;
    right: 10px;
    /* border: 1px solid red; */
    bottom: 10px;
    position: fixed;
}
.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:10%;
    right: 8%;
    transition: all 0.8s;
}
.page{
    padding: 20px 0;
    
}
/* '.pages'로 수정 */
.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;
    padding: 20px;
    width: 100%;
    justify-content: center;
    margin: 0 auto;
}
.imp div {
    width: 25%;
    display: flex;
    /* flex-direction: row; */
    
}
.imp div >div {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10px;
}
div h4{
    padding: 10px 0;
    font-size: 25px;
}
.imp div p{
    padding: 10px;
    line-height: 30px;
    color: gray;
}
.imp div > i{
    color:lightblue;
    font-size: 30px;
    padding: 25px 10px;
}

footer{
    /* display: flex; */
    width: 80%;
    margin: 0 auto;
    color: grey;
    align-items: center;
    border-top: 1px solid grey;
}
.Foot{
    display: flex;
}
.foo_1{
    width: 25%;

}
.foo_2, .foo_3{
    width: 25%;
    display: flex;
    flex-direction: column;
}

.foo_4{
    width: 25%;
}
.foo{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid grey;
}
.f_1{
    margin: 10px;
}

p > .ssspa:hover {
    color: lightblue;
}
.Foot a:hover {
    color: lightblue;
}

기존에 진행했던 클론코딩에 이어 footer와 fixed 아이콘 등 추가를 하고 정렬을 맞추었다.

저작자표시

'코딩 > HTML&CSS' 카테고리의 다른 글

[10주 5일차] 슬라이드 (1)	2023.12.15
[9주 2일차] CSS 정리 (1)	2023.12.05
회원가입 form (2)	2023.11.29
이미지 정렬 맞추기 & hover & opacity (1)	2023.11.28
슬라이드 연습 (1)	2023.11.24

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

zim's growth dairy

티스토리 뷰

클론코딩 2

'코딩 > HTML&CSS' 카테고리의 다른 글

티스토리툴바