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

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

조반짝 2023. 7. 5. 17:10
728x90
반응형

1. 배경 - 영상 넣기

글꼴넣기

다른방법으로 폰트 넣기

font : 17px 1.4(줄간격) 폰트종류 

body css편집

wrap에서 fixed 하기

object-fit: cover; 비율 맞추기

html 마크업

#circle css 편집

#circle 3d효과 지정

#circle html 세부 마크업

#circle article css 편집

위치 정하기

#circle html 세부 마크업2

#circle article h2 css 편집

#circle article .inner css 편집

article 숨겨주기

div 하나하나 편집해준다.

face1 부터 편집

 

face1 html 마크업

div 6개가 필요하다. 

폰트어썸 이미지를 넣어야하기 때문에 폰트어썸 링크를 걸어주자

i태그 밖에 p태그를 추가해준다.

face1 css 편집

.face1 .inner css 편집

text-shadow: blur 효과로 네온효과 주기

 

각 div 별 폰트어썸 아이콘 넣기

h3에도 블러효과 주기

마우스 오버 시 모든 div 확대 하기

face2 html 마크업

face2 css 편집

<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>
                </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;
}
728x90
반응형
저작자표시 비영리 변경금지

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

비주얼 스튜디오 코드 67_ 하이시네마 탭메뉴  (0) 2023.07.06
비주얼 스튜디오 코드 66_ 사이드 닷 메뉴  (0) 2023.07.06
비주얼 스튜디오 코드 64_ 하이시네마 웹페이지 03  (0) 2023.07.05
비주얼 스튜디오 코드 63_ parallax07  (0) 2023.07.05
비주얼 스튜디오 코드 62_ 하이시네마 웹사이트 만들기 02  (0) 2023.07.04

'☭DEVELOPER/#2 웹개발(자바기반 풀스택)'의 다른글

  • 현재글비주얼 스튜디오 코드 65_파노라마 회사 소개

관련글

티스토리툴바