모바일 전체 레이아웃 및 네비게이션 퍼블리싱(Mobile ver.)

@media (max-width: 768px) { html { scroll-behavior: smooth; } /* Entire Layout */ .cd-section { height: auto; } .cd-section > div { height: auto; } .contents { position: static; width: 100%; height: 100%; } } /* Header */ header { transition: 0.5s; z-index: 100; } header.active { background-color: #fff; border-bottom: 1px solid #eee; } .menu { display: block; } .slogan { display: none; } .gnb { background-color: #fff; position: fixed; top: 0; right: -270px; width: 250px; height: 100vh; box-shadow: -5px 0 10px rgb(0, 0, 0, 0.05); transition: 0.5s; } .gnb.active { right: 0; } .menu { line-height: 40px; margin-top: 60px; } .menu a { text-align: right; display: block; padding-right: 20px; color: #000; font-size: 20px; } /* Trigger */ .trigger { display: block; /* border: 1px solid red; */ width: 24px; height: 14px; position: fixed; right: 20px; top: 20px; } .trigger span { position: absolute; height: 1px; width: 100%; background-color: #000; transition: 0.5s; } .trigger span:nth-child(1) { top: 0; } .trigger span:nth-child(2) { top: 50%; width: 80%; } .trigger span:nth-child(3) { top: 100%; } .trigger.active span:nth-child(1) { top: 50%; transform: rotate(45deg); } .trigger.active span:nth-child(2) { top: 50%; width: 80%; opacity: 0; } .trigger.active span:nth-child(3) { top: 50%; transform: rotate(-45deg); } /* Gototop */ .gototop { position: fixed; bottom: 20px; left: 22px; border: 1px solid #fff; display: block; width: 40px; height: 40px; border-radius: 50%; text-align: center; line-height: 40px; transform: translateY(30px); opacity: 0; transition: 0.5s; } .gototop.active { opacity: 1; transform: translateY(0); } .btn-hiring { right: 10px; bottom: 20px; }

모바일 전체 레이아웃 및 네비게이션 퍼블리싱(Mobile ver.)

/* Google Web Font : Montserrat */ @import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap'); @import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap'); /* FontAwesome CDN 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* Reset CSS */ * { box-sizing: border-box; } ul { list-style: none; } a { text-decoration: none; } /* Default CSS */ body { font-family: 'Montserrat', sans-serif; color: #222; font-size: 15px; margin: 0; height: 100vh; background-color: #fff; } /* Entire Layout */ .cd-section { height: 100vh; } .cd-section > div { height: 100%; position: relative; } .contents { background-color: #ddd; position: absolute; width: calc(100% - 40px); height: calc(100% - 80px); left: 20px; bottom: 20px; overflow: hidden; } /* Header */ header { position: fixed; top: 0; left: 0; width: 100%; } .gnb-inner { /* border: 1px solid #000; */ width: calc(100% - 40px); margin: auto; height: 60px; line-height: 60px; } .logo { float: left; } .logo img { padding-top: 17px; } .gnb { float: right; } .menu { display: none; } .menu a {} .slogan { font-size: 16px; font-style: italic; } .trigger { display: none; } /* Hiring Button */ .btn-hiring { position: fixed; right: 50px; bottom: 50px; color: #fff; background-color: #000; padding: 10px 20px; border-radius: 20px; box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.119); transition: 0.5s; } .btn-hiring .fa { transform: rotateY(180deg); margin-right: 5px; } .btn-hiring:active { transform: scale(0); }

모바일 전체 레이아웃 및 네비게이션 퍼블리싱(Mobile ver.)

doctype html> html lang="ko"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>DesignWorks Architecture Agencytitle> script src="js/jquery-2.1.4.js">script> script src="js/velocity/modernizr.js">script> script src="js/velocity/velocity.min.js">script> script src="js/velocity/velocity.ui.min.js">script> script src="js/velocity/main.js">script> link rel="stylesheet" href="js/velocity/velocity.css"> --> script src="custom.js">script> link rel="stylesheet" href="style.css"> link rel="stylesheet" href="responsive.css"> head> body data-hijacking="on" data-animation="rotate"> div class="container"> section class="cd-section visible" id="home"> div> div class="contents"> img src="images/temp-section-01.jpg" alt=""> div> div> section> section class="cd-section" id="about"> div> div class="contents"> img src="images/temp-section-02.jpg" alt=""> div> div> section> section class="cd-section" id="project"> div> div class="contents"> img src="images/temp-section-03.jpg" alt=""> div> div> section> section class="cd-section" id="plan"> div> div class="contents"> img src="images/temp-section-04.jpg" alt=""> div> div> section> section class="cd-section" id="awards"> div> div class="contents"> img src="images/temp-section-05.jpg" alt=""> div> div> section> section class="cd-section" id="location"> div> div class="contents"> img src="images/temp-section-06.jpg" alt=""> div> div> section> section class="cd-section" id="contact"> div> div class="contents"> img src="images/temp-section-07.jpg" alt=""> div> div> section> header> div class="gnb-inner"> div class="logo"> a href="none">img src="images/logo.png">a> div> div class="gnb"> div class="menu"> a href="#home">Homea> a href="#about">Abouta> a href="#project">Projecta> a href="#plan">Plan & Historya> a href="#awards">Awardsa> a href="#location">Locationa> a href="#contact">Contacta> div> div class="slogan">We design places, not projects. Hiringdiv> div> div class="trigger"> span>span> span>span> span>span> div> div> header> div> a href="#" class="gototop">img src="images/gototop.png">a> a href="" class="btn-hiring">i class="fa fa-commenting">i>Hiringa> nav> ul class="cd-vertical-nav"> li>a href="#0" class="cd-prev inactive">Nexta>li> li>a href="#0" class="cd-next">Preva>li> ul> nav> script src="js/jquery-2.1.4.js">/script:src> /script> script src="js/velocity.ui.min.js">script> script src="js/main.js">script> body> html>

안녕하세요. source text에 font에 대한 부분이 없어요.

txt파일에 없어서 방황했는데 여기있네용