19일차 (2) - flex를 활용한 사이트 만들기

Yohan·2024년 3월 18일
CSSTILhtml
0

코딩기록

목록 보기
26/156
post-custom-banner

html

  • 아직 자바스크립트를 활용해야하는 부분은 넣지 않았다.
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 검색 엔진 최적화(SEO) -->
    <meta name="author" content="Soongu Hong">
    <meta name="description" content="Soon9's Web Site">

    <!-- 카톡 보낼 때 뜨는 것 , http://ogp.me -->
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="Soon9's Web studio">
    <meta property="og:title" content="Soon9's Web studio">
    <meta property="og:description" content="Welcome to Soon9's Web studio">
    <meta property="og:image" content="img/visual2.jpg">
    <meta property="og:url" content="http://www.soon9.co.kr">

    <meta property="twitter:card" content="summary">
    <meta property="twitter:site_name" content="Soon9's Web studio">
    <meta property="twitter:title" content="Soon9's Web studio">
    <meta property="twitter:description" content="Welcome to Soon9's Web studio">
    <meta property="twitter:image" content="img/visual2.jpg">
    <meta property="twitter:url" content="http://www.soon9.co.kr">

    <title>Hong Studio</title>

    <!-- 파비콘 넣기 -->
    <link rel="icon" href="siteicon.ico">
    <link rel="apple-touch-icon" href="siteicon.ico">

    <!-- reset css -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">

    <!-- linear icons -->
    <!-- https://linearicons.com/free#cdn -->
    <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">

    <!-- animate css v3.7.0 || https://animate.style -->
    <!-- <link rel="stylesheet" href="css/animate.min.css"> -->

    <!-- slick css || https://kenwheeler.github.io/slick/  -->
    <!-- <link rel="stylesheet" href="css/slick.css"> -->

    <!-- custom css -->
    <link rel="stylesheet" href="css/main.css">

    <!-- jquery -->
    <!-- <script src="js/jquery-3.3.1.min.js"></script> -->

    <!-- libraries -->
    <!-- scrolla js -->
    <!-- <script src="js/scrolla.jquery.min.js" defer></script> -->
    <!-- slick js -->
    <!-- <script src="js/slick.min.js" defer></script> -->

    <!-- custom js -->
    <!-- <script src="js/config.js" defer></script>
    <script src="js/gnb-event.js" defer></script>
    <script src="js/scroll-event.js" defer></script> -->
</head>

<body>

<div class="wrap">

    <!-- header -->
    <header>
        <div class="inner-header">
            <h1 class="logo">
                <a href="#">
                    <img src="img/logo.png" alt="로고이미지">
                </a>
            </h1>
            <h2 class="intro-text">Welcome</h2>
            <a href="#" class="menu-open">
                <span class="menu-txt">MENU</span>
                <span class="lnr lnr-menu"></span>
            </a>
        </div>

        <nav class="gnb">
            <a href="#" class="close">
                <span class="lnr lnr-cross"></span>
            </a>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Work</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Favorite</a></li>
            </ul>
        </nav>

    </header>
    <!-- //header -->
    
    <!-- section visual -->
    <section class="visual">
        <ul class="slide">
            <li>
                <img src="img/visual1.jpg" alt="슬라이드 이미지1">
                <div class="txt">
                    <p>Creative design with Hong Studio</p>
                    <h3>Website & APP, <br>Responsive Web and <br>Brand Identity </h3>
                    <a href="#">See the work <span class="lnr lnr-chevron-right"></span></a>
                </div>
                <span class="scroll">Scroll down</span>
            </li>
            <!-- <li>
                <img src="img/visual2.jpg" alt="슬라이드 이미지1">
                <div class="txt">
                    <p>Creative design with Hong Studio</p>
                    <h3>Website & APP, <br>Responsive Web and <br>Brand Identity </h3>
                    <a href="#">See the work <span class="lnr lnr-chevron-right"></span></a>
                </div>
                <span class="scroll">Scroll down</span>
            </li>
            <li>
                <img src="img/visual3.jpg" alt="슬라이드 이미지1">
                <div class="txt">
                    <p>Creative design with Hong Studio</p>
                    <h3>Website & APP, <br>Responsive Web and <br>Brand Identity </h3>
                    <a href="#">See the work <span class="lnr lnr-chevron-right"></span></a>
                </div>
                <span class="scroll">Scroll down</span>
            </li>
            <li>
                <img src="img/visual4.jpg" alt="슬라이드 이미지1">
                <div class="txt">
                    <p>Creative design with Hong Studio</p>
                    <h3>Website & APP, <br>Responsive Web and <br>Brand Identity </h3>
                    <a href="#">See the work <span class="lnr lnr-chevron-right"></span></a>
                </div>
                <span class="scroll">Scroll down</span>
            </li>
            <li>
                <img src="img/visual5.jpg" alt="슬라이드 이미지1">
                <div class="txt">
                    <p>Creative design with Hong Studio</p>
                    <h3>Website & APP, <br>Responsive Web and <br>Brand Identity </h3>
                    <a href="#">See the work <span class="lnr lnr-chevron-right"></span></a>
                </div>
                <span class="scroll">Scroll down</span>
            </li>
            <li>
                <img src="img/visual6.jpg" alt="슬라이드 이미지1">
                <div class="txt">
                    <p>Creative design with Hong Studio</p>
                    <h3>Website & APP, <br>Responsive Web and <br>Brand Identity </h3>
                    <a href="#">See the work <span class="lnr lnr-chevron-right"></span></a>
                </div>
                <span class="scroll">Scroll down</span>
            </li> -->
        </ul>
    </section>
    <!-- //section visual -->

     <!--  section contents   -->
     <section class="contents">
        <!-- section contents main-text -->
        <div class="main-text animate" data-animate="fadeInUp" data-duration="1s">
            <h3>Great experience <br> build great brands.</h3>
            <p>다양한 온라인 서비스들을 구축하고 운영해온 풍부한 경험으로<br class="mo">
                UI/UX 기획과 디자인 그리고 구축에서 운영까지, 우리 스튜디오는<br class="mo">
                고객의 비즈니스를 위해 수준 높은 결과물을 제작하는 크리에이티브<br class="mo">
                파트너(Creative Partner) 입니다.
                <span>Soongu Hong, HONG STUDIO</span>
            </p>
        </div>
        <!-- //section contents main-text -->

        <!-- section contents > .project -->
        <div class="project">
            <div class="top">
                <h3 class="animate" data-animate="fadeInLeft" data-duration="1s" data-delay="0.5s">Meet <br>Out Projects</h3>
                <a href="#">More Projects
                    <span class="lnr lnr-chevron-right"></span>
                </a>
            </div>
            <ul class="animate" data-animate="fadeInUp" data-duration="1s">
                <li>
                    <a href="#">
                        <img src="img/project1.jpg" alt="project1">
                        <div class="name">
                            <span>Website</span>
                            <h3>Linkin Aviation</h3>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/project2.jpg" alt="project2">
                        <div class="name">
                            <span>Website</span>
                            <h3>HEESUNG LMS</h3>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/project3.png" alt="project3">
                        <div class="name">
                            <span>Website</span>
                            <h3>ORPHAN</h3>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/project4.jpg" alt="project4">
                        <div class="name">
                            <span>Website</span>
                            <h3>APMA WEB/APP</h3>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <!-- section contents > .project-->

        <!-- section contents > .partner -->
        <div class="partner">
            <h3>우리의 소중한 고객입니다.</h3>
            <ul class="animate" data-animate="fadeInRight" data-duration="1s">
                <li><img src="img/partner1.png" alt=""></li>
                <li><img src="img/partner2.png" alt=""></li>
                <li><img src="img/partner3.png" alt=""></li>
                <li><img src="img/partner4.png" alt=""></li>
                <li><img src="img/partner5.png" alt=""></li>
                <li><img src="img/partner6.png" alt=""></li>
                <li><img src="img/partner7.png" alt=""></li>
                <li><img src="img/partner8.png" alt=""></li>
            </ul>
        </div>

        <!-- section contents > .contact -->
        <div class="contact animate" data-animate="fadeIn" data-duration="2s" data-delay="0.5s">            
            <div class="inner">
                <h3>당신의 프로젝트를 이야기해 주세요.</h3>
                <p class="tel">010.1234.1234</p>
                <p>모바일 앱/웹 디자인 및 웹 표준화 작업 <br> UI/UX설계 및 제안서 작성<br> 스프링 기반 웹사이트 구축 등을 제공합니다.</p>
            </div>
        </div>
    </section>
    <!--  //section contents   -->

    <!-- footer-->
    <footer>
        <ul>
            <li>Hong Studio<br>사업자등록번호:123-12-12345 <br>대표자:홍길동</li>
            <li>
                <span>A :</span>서울 강남구 중앙정보처리교육원<br>
                <span>T :</span>010.7270.9984<br>
                <span>E :</span>hsg9984@gmail.com<br>
            </li>
            <li> &#xa9 Hong Studio 2023 <br>All Rights Reseved</li>
        </ul>
        <a href="#top" class="go-top"><span class="lnr lnr-arrow-up"></span></a>
    </footer>
    <!-- //footer-->

</div>

</body>

</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&display=swap");

/* reset */
a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  outline: none;
  border: none;
}

/* common style */
* {
  box-sizing: border-box;
}
.wrap {
  font-size: 15px;
  font-family: "Noto Sans KR", sans-serif;
}
.hide {
  display: none !important;
}

/* header style */
header {
  /* background: orange; */
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
  padding: 20px;
}
header .inner-header {
  /* background: tomato; */
  width: 92%;
  margin: 0 auto;

  display: flex;
  justify-content: space-between;
  align-items: center;

  color: #fff;
  font-weight: 700;
}
/* flex로 logo text menu 비율 설정 */
header .inner-header .logo {
  /* border: 3px solid blue; */
  flex: 1;
}
header .inner-header .logo img {
  height: 60px;
}
header .inner-header .intro-text {
  /* border: 3px solid greenyellow; */
  flex: 4;
  margin-left: 40px;
  text-transform: uppercase;
}
header .inner-header .menu-open {
  /* border: 3px solid violet; */
  flex: 1;
  font-size: 16px;
  /* menu와 햄버거 높이 맞춤 */
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
header .inner-header .menu-open .lnr-menu {
  font-size: 33px;
  margin-left: 15px;
}
header .gnb {
  background: #000;
  color: #666;
  font-size: 40px;
  padding: 70px 100px;

  position: fixed;
  top: 0;
  /* js로 right를 0으로 복원하면 메뉴가 열림 */
  right: -100%;
  height: 100vh;

  /*
     X를 오른쪽으로 보내기 위해
     1. flex-direction: row-reverse;
     2. order: 1;
  */
  display: flex;
  flex-direction: row-reverse;
}

header .gnb .close {
  display: block;
  color: #fff;
  /* order: 1; */
}
header .gnb ul {
  margin-right: 200px;
}
header .gnb ul li {
  font-weight: 700;
  line-height: 1.7;
}
header .gnb ul li:hover,
header .gnb ul li.active {
  color: #fff;
}

/* section visual style */
section.visual .slide li {
  /* border: 4px solid blue; */
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
section.visual .slide li img {
  width: 100%;
  position: absolute;
  top: -130px;
}
/* 형제인 img에 position이 걸려있기 때문에 txt를
   사진 위로 올리려면 position
*/
section.visual .slide li .txt {
  /* background: red; */
  color: #fff;
  font-size: 18px;

  position: absolute;
  top: 50%;
  left: 28%;
  transform: translate(-50%, -50%);
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.8);
}
section.visual .slide li .txt h3 {
  margin: 30px 0;
  font-size: 64px;
  font-weight: 700;
  line-height: 1.3;
}
section.visual .slide li .scroll {
  /* background: orange; */
  position: absolute;
  left: 50px;
  bottom: 10%;
  font-size: 14px;
  font-weight: 700;
  color: #ccc;
  transform: rotate(-90deg);
}

/* section.contents */
section.contents {
  background: #1b1b1b;
  color: #fff;
  padding: 120px 0;
}
section.contents .main-text {
  /* background: orange; */
  width: 80%;
  margin: 0 auto 100px;
  font-size: 25px;
  display: flex;
  position: relative;
  /* justify-content: space-between; */
}
section.contents .main-text::before {
  content: "";
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #ffec03;
  position: absolute;
  left: 70px;
  top: 100px;
}
section.contents .main-text::after {
  content: "”";
  font-size: 300px;
  position: absolute;
  left: 0px;
  top: 100px;
}
section.contents .main-text h3 {
  /* border: 3px solid red; */
  font-weight: 700;
  flex: 1;
}
section.contents .main-text p {
  /* border: 3px solid blue; */
  font-size: 23px;
  line-height: 1.4;
  flex: 2;
}
section.contents .main-text p span {
  display: block;
  margin-top: 30px;
  color: #999;
  font-size: 20px;
}

/* > .project */
section.contents .top {
  /* background: orange; */
  width: 80%;
  margin: 200px auto 60px;
  display: flex;
  justify-content: space-between;
}
section.contents .project .top h3 {
  /* background: blue; */
  font-weight: 700;
  font-size: 40px;
}
section.contents .project .top a {
  /* background: red; */
  font-size: 20px;
}
section.contents .project ul {
  display: flex;
  justify-content: space-evenly;
}
section.contents .project ul:last-child {
  margin-top: 50px;
}
/* 사진 액자 */
section.contents .project ul li {
  width: 24%;
  height: 400px;
  box-sizing: border-box;

  border: 4px solid #fff;
  overflow: hidden;
  position: relative;
}

/* 이미지 애니메이션 */
section.contents .project ul li a::before {
  content: "";
  width: 0;
  height: 100%;
  background: rgba(27, 27, 27, 0.9);
  position: absolute;
  transition: 0.6s;
}
section.contents .project ul li a:hover::before {
  width: 100%;
}

/* 이미지 */
section.contents .project ul li a img {
  width: 100%;
}
/* 이름 */
section.contents .project ul li a .name {
  font-size: 22px;
  text-align: right;

  width: 100%;
  padding: 15px;
  box-sizing: border-box;
  background: #1b1b1b;
  right: 10px;
  bottom: 10px;

  /* hover로 1 만듦 */
  opacity: 0;
  position: absolute;
}
section.contents .project ul li a:hover .name {
  animation: show-name 1s forwards;
}
@keyframes show-name {
  from {
    opacity: 0;
    bottom: -30px;
  }
  to {
    opacity: 1;
    bottom: 10px;
  }
}

/* > .partner */
section.contents .partner {
  /* background: orange; */
  width: 80%;
  margin: 170px auto 100px;
}
section.contents .partner h3 {
  font-size: 17px;
  margin-bottom: 80px;
}

section.contents .partner ul {
  /* background: red; */
  display: flex;
  flex-wrap: wrap;
}
section.contents .partner ul li {
  /* border: 4px solid #fff; */
  width: 25%;
  margin-bottom: 80px;

  display: flex;
  justify-content: center;
  align-items: center;
}
section.contents .partner ul li img {
  opacity: 0.3;
  transition: 0.4s;
}
section.contents .partner ul li img:hover {
  opacity: 1;
  transition: 0.4s;
}
/* > .contact */

section.contents .contact {
  /* border: 3px solid orange; */
  width: 90%;
  background: url("../img/contact.jpg") no-repeat center/cover fixed;
  padding: 220px 0;
}
section.contents .contact .inner {
  /* border: 1px solid #fff; */
  width: 70%;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.4;
}
section.contents .contact .inner h3 {
  /* background: red; */
  font-size: 30px;
}
section.contents .contact .inner p.tel {
  /* background: blue; */
  font-size: 60px;
  font-weight: 700;
  padding: 50px 0;
}

/* footer style */
footer {
  background: #1b1b1b;
  color: #999;
  padding: 0 80px 80px;
  position: relative;
}
footer ul {
  /* border: 2px solid #fff; */
  display: flex;
  font-size: 16px;
  font-weight: 700;
  padding-bottom: 30px;
}
footer ul li {
  /* background: blue; */
  flex: 1;
  margin-left: 100px;
}
footer ul li:nth-child(2) {
  color: #fff;
  line-height: 1.5;
  letter-spacing: 1px;
}
footer ul li:nth-child(2) span {
  /* border: 1px solid #fff; */
  color: #666;
  margin-right: 10px;
}
footer .go-top {
  color: #fff;
  position: fixed;
  bottom: 60px;
  right: 50px;
  font-size: 50px;
}
profile
Yohan
백엔드 개발자
이전 포스트

19일차 - animation, flexbox, 사이트에 반응형 디자인 추가

다음 포스트

20일차 - javascript

post-custom-banner

0개의 댓글