본문 바로가기
☭DEVELOPER/#2 웹개발(자바기반 풀스택)

비주얼 스튜디오 코드 69_파노라마 회사소개02

by 조반짝 2023. 7. 7.
728x90
반응형

 

.face3 html 마크업

.face3 css 편집

.pic에서 공통된 속성을 적용해주고

nth-of-type으로 각각 사진만 넣어준다.

 

<html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>파노라마 회사소개</title>
    <link rel="stylesheet" href="./css/all.min.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <main class="wrap">
        <video src="./img/bg.mp4" loop autoplay muted></video>
        <!-- circle 8개의 면을 하나로 묶어주는 wrap 역할 -->
        <section id="circle">
            <article class="face1">
                <h2>Co Company</h2>
                <div class="inner">
                    <div>
                        <p><i class="fa-brands fa-android"></i></p>
                        <h3>Android</h3>
                    </div>
                    <div>
                        <p><i class="fa-brands fa-apple"></i></p>
                        <h3>Apple</h3>
                    </div>
                    <div>
                        <p><i class="fa-brands fa-twitter"></i></i></p>
                        <h3>Twitter</h3>
                    </div>
                    <div>
                        <p><i class="fa-brands fa-facebook"></i></i></p>
                        <h3>Facebook</h3>
                    </div>
                    <div>
                        <p><i class="fa-brands fa-youtube"></i></p>
                        <h3>YouTube</h3>
                    </div>
                    <div>
                        <p><i class="fa-brands fa-google"></i></p>
                        <h3>Google</h3>
                    </div>
                </div>
            </article>

            <article class="face2">
                <h2>What's New</h2>
                <div class="inner">
                    <div>
                        <h3>New n Articles</h3>
                        <img src="./img/pattern.jpg" alt="pattern image">
                        <h4>What is Lorem Ipsum?</h4>
                        <p>
                            Lorem: 텍스트 자동 완성 기능<br>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.<br> Beatae, explicabo quia error perspiciatis eveniet deserunt assumenda corporis minima voluptas consequatur quibusdam consectetur quae numquam recusandae vel quas. <br>Harum, sunt a!
                            Beatae, explicabo quia error perspiciatis eveniet deserunt assumenda corporis minima voluptas consequatur quibusdam consectetur quae numquam recusandae vel quas.<br>Harum, sunt a!
                        </p>
                    </div>
                </div>
            </article>

            <article class="face3">
                <h2>Member</h2>
                <div class="inner">
                    <div>
                        <div class="pic"></div>
                        <div class="con">
                            <h3>Member Information1</h3>
                            <p>Here comes Member Information contents in detail.Here comes Member Information contents in detail.</p>
                            <span>2023-07-07</span>
                        </div>
                    </div>
                    <div>
                        <div class="pic"></div>
                        <div class="con">
                            <h3>Member Information2</h3>
                            <p>Here comes Member Information contents in detail.Here comes Member Information contents in detail.</p>
                            <span>2023-07-07</span>
                        </div>
                    </div>
                    <div>
                        <div class="pic"></div>
                        <div class="con">
                            <h3>Member Information3</h3>
                            <p>Here comes Member Information contents in detail.Here comes Member Information contents in detail.</p>
                            <span>2023-07-07</span>
                        </div>
                    </div>
                </div>
            </article>

            <article class="face4">
                <h2>Advertisment</h2>
                <div class="inner">
                    <div></div>
                </div>
            </article>

            <article class="face5">
                <h2>DCODELAB</h2>
                <div class="inner">
                    <div></div>
                </div>
            </article>

            <article class="face6">
                <h2>Services</h2>
                <div class="inner">
                    <div></div>
                </div>
            </article>

            <article class="face7">
                <h2>Promotion</h2>
                <div class="inner">
                    <div></div>
                </div>
            </article>

            <article class="face8">
                <h2>Temperature</h2>
                <div class="inner">
                    <div></div>
                </div>
            </article>
        </section>
    </main>
</body>
</html>

<css>

@charset "utf-8";


@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap');
 /* font-family: 'Orbitron', sans-serif; */

*{
    margin: 0;
    padding: 0;
}
ol,ul,li{
    list-style: none;
}
a{
    outline: 0;
    text-decoration: none;
}

/* body는 바탕화면 */
body{
    font: 17px/1.4 "Orbitron";
    letter-spacing: 1px;
    color: #ddd;
    background-color: #000;
}
h3{
    font-size: 24px;
}
.wrap{
    position: fixed;
    width: 100%;
    height: 100%;
    /* 투영점 */
    perspective: 1300px;
}
.wrap > video{
    width: 100%;
    height: 100%;
    /* 너비 높이 강제로 100%로 줬기 때문에 비율 맞추기 */
    object-fit: cover;
    opacity: 0.5;
}
#circle{
    width: 600px;
    height: 800px;
    position: absolute;
    /* border: 1px solid aqua; */
    /* 화면 중앙으로 위치하기 */
    top: 50%;
    left: 50%;
    /* 너비,높이값의 1/2 */
    margin-top: -400px;
    margin-left: -300px;
    /* perspective 3d 효과 넣기 위해 지정 */
    transform-style: preserve-3d;
}
#circle article{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* background-color: rgba(255, 255, 255, 0.4); */
    display: none;
}
#circle article h2{
    position: absolute;
    left: 0;
    top: 0;
    font-size: 30px;
    opacity: 0;
    transition: all 0.5s;
}
#circle article:hover h2{
    opacity: 1;
    top: -60px;
}

#circle article .inner{
    width: 100%;
    height: 100%;
}
#circle article .inner > div{
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.06);
    padding: 50px;
    opacity: 0.7;
    /* div 박스안에 다양한 요소의 기준점 */
    position: relative;
    /* div 박스 안에만 나오게 */
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s;   
}
#circle article .inner > div:hover{
    /* 마우스오버시 투명도가 더 진해짐 */
    background-color: rgba(255, 255, 255, 0.15);
    transform: scale(1.03);
    opacity: 1;
}

/* face1 */
#circle .face1{
    /* display: block; */
}
#circle .face1 .inner>div{
    width: 290px;
    height: 254px;
    float: left;
    margin-bottom: 20px;
    text-align: center;
    
}

/* 홀수 div 오른쪽 여백 주기 */
#circle .face1 .inner>div:nth-of-type(2n-1){
    margin-right: 20px;
}

#circle .face1 .inner>div h3{
    letter-spacing: 2px;
    transition: all 0.5s;
    font-size: 18px;
}
#circle .face1 .inner>div:hover h3{
    color: lightcyan;
    text-shadow: 0 0 10px aqua;
}
#circle .face1 .inner>div p{
    margin-bottom: 10px;
}
#circle .face1 .inner>div p i{
    font-size: 100px;
    transition: all .5s;
    opacity: 0.7;
}
/* #circle .face1 .inner>div:hover p i{
    color: lightcyan;
    text-shadow: 0 0 10px aqua;
    
} */

#circle article .inner>div:hover i{
    color: lightcyan;
    text-shadow: 0 0 10px aqua;
    transform: scale(1.1);
    transition: all 0.5s;
}

/* face2 */
#circle .face2{
    /* display: block; */
}
#circle .face2 .inner>div{
    width: 100%;
    height: 100%;
}
#circle .face2 .inner>div h3{
    color: #fff;
    margin-bottom: 20px;
}
#circle .face2 .inner>div img{
    width: 100%;
    margin-bottom: 40px;
}
#circle .face2 .inner>div h4{
    font-size: 20px;
    margin-bottom: 20px;
}
#circle .face2 .inner>div p{
    font: 18px/1.4 "arial";
    color: #ccc;
    text-align: justify;
}

/* face3 */
#circle .face3{
    display: block;
}
#circle .face3 .inner > div{
    width: 100%;
    height: 253px;
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
}
#circle .face3 .inner > div .pic{
    width: 120px;
    height: 120px;
    /* background-color: rgba(255, 255, 255, 0.5); */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    border-radius: 50%;
    float: left;
    border: 1px solid #fff;
}
#circle .face3 .inner > div:nth-of-type(1) .pic{
    background-image: url(../img/member1.jpg);
}
#circle .face3 .inner > div:nth-of-type(2) .pic{
    background-image: url(../img/member2.jpg);
}
#circle .face3 .inner > div:nth-of-type(3) .pic{
    background-image: url(../img/member3.jpg);
}
#circle .face3 .inner > div .con{
    float: right;
    width: 340px;
}
#circle .face3 .inner > div .con h3{
    margin-bottom: 3px;
}
#circle .face3 .inner > div .con p{
    font: 18px/1.3 "arial";
    color: #ddd;
    text-align: justify;

}
#circle .face3 .inner > div .con span{
    position: absolute;
    bottom: 50px;
    right: 50px;
    font: 12px/1 "Orbitron";
    color: aqua;
    opacity: 0.7;
}

 

728x90
반응형
저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

비주얼 스튜디오 코드 71_하이시네마_컨텐츠(유투브 영상 삽입)  (0) 2023.07.10
비주얼 스튜디오 코드 70_parallax07  (0) 2023.07.10
비주얼 스튜디오 코드 68_ 하이시네마 탭메뉴_02  (0) 2023.07.07
비주얼 스튜디오 코드 67_ 하이시네마 탭메뉴  (0) 2023.07.06
비주얼 스튜디오 코드 66_ 사이드 닷 메뉴  (0) 2023.07.06

관련글

티스토리툴바