-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
모바일 화면에서 hiring의 sns 문제-소스코드 올려 놓았습니다.
22.07.27 12:50 작성 조회수 236
1
index.html:
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>bizpage website-Architecture</title>
<link rel="icon" href="images/bizpage_logo3.png">
<script src="js/jquery-2.1.4.js"></script>
<!-- Page scroll Effects JS & CSS -->
<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">
<!-- Smooth Scrolling -->
<script src="js/jquery.scrollTo.min.js"></script>
<!-- Slick.js -->
<script src="js/slick/slick.min.js"></script>
<link rel="stylesheet" href="js/slick/slick-theme.css">
<link rel="stylesheet" href="js/slick/slick.css">
<!-- Featherlight.js -->
<script src="js/featherlight/featherlight.js"></script>
<link rel="stylesheet" href="js/featherlight/featherlight.css">
<!-- Custom JS & CSS -->
<script src="custom.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
</head>
<!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax -->
<body data-hijacking="on" data-animation="rotate">
<div class="container">
<section class="cd-section visible" id="home">
<div>
<div class="content">
<div class="home-inner">
<h3 class="welcome-text">Can your homepage do this?<br>You can!!<span>with bizpage<i class="fa fa-heart"></i></span></h3>
<div class="opacity-image"></div>
<div class="home-heading">
<span>Creative</span>
<span>Architecture</span>
<span>Specialist</span>
</div>
</div>
</div>
</div>
</section>
<section class="cd-section" id="about">
<div>
<div class="content">
<div class="about-inner">
<div class="about-items">
<div class="item">
<img src="images/careers-main-01.png">
<span>
<h3>Together we can make an impact</h3>
<p>Design Works the excitement of an entrepreneurial environment with the stability of an established practice. Principals and senior leadership work side-by-side with junior designers to create innovative, workable designs.</p>
</span>
</div>
<div class="item">
<img src="images/careers-main-02.png">
<span>
<h3>We’re always looking for talent</h3>
<p>If you don’t see an open position that fits your talents, send us your resume. We’re always looking for smart, self-starters and will reach out to you if something becomes available.</p>
</span>
</div>
<div class="item">
<img src="images/careers-main-03.png">
<span>
<h3>Fellowship</h3>
<p>Every summer we offer a Fellowship to a select group of students in architecture, planning and landscape architecture. Read about our 2019 Fellowship winners and learn more about what the Fellowship has to offer.</p>
</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="cd-section" id="project">
<div>
<div class="content">
<div class="project-inner">
<input type="radio" name="tabmenu" id="tab1" checked>
<input type="radio" name="tabmenu" id="tab2">
<input type="radio" name="tabmenu" id="tab3">
<div class="tabs">
<div class="tab">
<div class="project-info" data-text="01">
<h3>Project: Glass Wall Architecture</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia atque ratione, vitae culpa natus ex quae labore architecto nostrum odit laboriosam laborum aut vel dolores nulla et cumque placeat molestiae sunt? Aut consequuntur eos mollitia quam adipisci labore, sequi impedit.
</p>
<ul>
<li><b>Area</b> : 1670 m2</li>
<li><b>Completed Date</b> : September 2018</li>
<li><b>Architect</b> : Daniel Kang</li>
<div class="detail">
<div>
<span>225</span>WORKING DAY
</div>
<div>
<span>320</span>MEMBERS
</div>
<div>
<span>3M</span>BUDGET
</div>
</div>
<a class="view-project" href="project-detail-01.html" data-featherlight="iframe">view project<i class="fa fa-long-arrow-right"></i></a>
</ul>
</div>
<div class="project-photo">
<img src="images/project-main-01-01.jpg">
<img src="images/project-main-01-02.jpg">
<img src="images/project-main-01-03.jpg">
<img src="images/project-main-01-04.jpg">
</div>
</div>
<div class="tab">
<div class="project-info" data-text="02">
<h3>Project : Hallway of Architecture</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia atque ratione, vitae culpa natus ex quae labore architecto nostrum odit laboriosam laborum aut vel dolores nulla et cumque placeat molestiae sunt? Aut consequuntur eos mollitia quam adipisci labore, sequi impedit.
</p>
<ul>
<li><b>Area</b> : 2345 m2</li>
<li><b>Completed Date</b> : April 2019</li>
<li><b>Architect</b> : Daniel Kang</li>
<div class="detail">
<div>
<span>321</span>WORKING DAY
</div>
<div>
<span>420</span>MEMBERS
</div>
<div>
<span>8M</span>BUDGET
</div>
</div>
<a class="view-project" href="project-detail-02.html" data-featherlight="iframe">view project<i class="fa fa-long-arrow-right"></i></a>
</ul>
</div>
<div class="project-photo">
<img src="images/project-main-02-01.jpg">
<img src="images/project-main-02-02.jpg">
<img src="images/project-main-02-03.jpg">
<img src="images/project-main-02-04.jpg">
</div>
</div>
<div class="tab">
<div class="project-info" data-text="03">
<h3>Project : Outside Stairs Architecture</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia atque ratione, vitae culpa natus ex quae labore architecto nostrum odit laboriosam laborum aut vel dolores nulla et cumque placeat molestiae sunt? Aut consequuntur eos mollitia quam adipisci labore, sequi impedit.
</p>
<ul>
<li><b>Area</b> : 1200 m2</li>
<li><b>Completed Date</b> : May 2020</li>
<li><b>Architect</b> : Mark Lee</li>
<div class="detail">
<div>
<span>132</span>WORKING DAY
</div>
<div>
<span>202</span>MEMBERS
</div>
<div>
<span>5M</span>BUDGET
</div>
</div>
<a class="view-project" href="project-detail-03.html" data-featherlight="iframe">view project<i class="fa fa-long-arrow-right"></i></a>
</ul>
</div>
<div class="project-photo">
<img src="images/project-main-03-01.jpg">
<img src="images/project-main-03-02.jpg">
<img src="images/project-main-03-03.jpg">
<img src="images/project-main-03-04.jpg">
</div>
</div>
</div>
<div class="btn">
<label for="tab1"></label>
<label for="tab2"></label>
<label for="tab3"></label>
</div>
</div>
</div>
</div>
</section>
<section class="cd-section" id="plan">
<div>
<div class="content">
<div class="plan-inner">
<div class="plan-feature">
<div class="plan-info">
<div class="plan-heading">
<h2>Planning<br> For the Next Project</h2>
<hr class="bar">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis at deleniti ullam aut. Ex, dolorem animi, enim vitae molestiae eligendi, neque deserunt veritatis nam voluptate repellendus? Quis, itaque totam fuga repellat ut animi molestiae suscipit commodi culpa ducimus. Illo accusantium non numquam? Hic tempore molestias dicta labore debitis cupiditate ab.</p>
</div>
<div class="plan-photo">
<img src="images/plan-main-01.jpg">
</div>
</div>
<div class="history-info">
<h2>History</h2>
<hr class="bar">
<div class="history-slider">
<div>
<h4>The Project <br>of Architecture for the <span>2013</span></h4>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum et beatae aperiam perferendis explicabo quod voluptate sed autem sapiente distinctio.
</p>
</div>
<div>
<h4>The Project <br>of Architecture for the <span>2014</span></h4>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum et beatae aperiam perferendis explicabo quod voluptate sed autem sapiente distinctio.
</p>
</div>
<div>
<h4>The Project <br>of Architecture for the <span>2015</span></h4>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum et beatae aperiam perferendis explicabo quod voluptate sed autem sapiente distinctio.
</p>
</div>
<div>
<h4>The Project <br>of Architecture for the <span>2016</span></h4>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum et beatae aperiam perferendis explicabo quod voluptate sed autem sapiente distinctio.
</p>
</div>
<div>
<h4>The Project <br>of Architecture for the <span>2017</span></h4>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum et beatae aperiam perferendis explicabo quod voluptate sed autem sapiente distinctio.
</p>
</div>
<div>
<h4>The Project <br>of Architecture for the <span>2018</span></h4>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum et beatae aperiam perferendis explicabo quod voluptate sed autem sapiente distinctio.
</p>
</div>
<div>
<h4>The Project <br>of Architecture for the <span>2019</span></h4>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum et beatae aperiam perferendis explicabo quod voluptate sed autem sapiente distinctio.
</p>
</div>
<div>
<h4>The Project <br>of Architecture for the <span>2020</span></h4>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum et beatae aperiam perferendis explicabo quod voluptate sed autem sapiente distinctio.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="cd-section" id="awards">
<div>
<div class="content">
<div class="awards-inner">
<div class="about-awards">
<div class="about-heading">
<h2>2020 <br>Architecture Awards <br>Winner</h2>
<hr class="bar">
<p>
The mission of the Architecture MasterPrize (AMP) is to advance the appreciation and exposure of quality architectural design worldwide. The AMP architecture award celebrates creativity and innovation in the fields of architectural design, landscape architecture, and interior design. Submissions from architects all around the world are welcome.
</p>
<a class="view-awards" href="https://architectureprize.com/" target="_blank">VIEW THE AWARDS</a>
</div>
</div>
<div class="victory-jump">
<img src="images/victory-jump.png">
</div>
</div>
</div>
</div>
</section>
<section class="cd-section" id="location">
<div>
<div class="content">
<div class="location-inner">
<div class="feature">
<div class="office">
<div class="headquater">
<b>CREATIVE DESGIN GROUP</b>
<h2>Headquarter</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia culpa libero, veritatis vero corporis quasi eaque commodi quia fugiat, qui ad consectetur vitae. Obcaecati odit expedita officia, veritatis accusamus illo.
</p>
<span>Address : #324, 510, Misa-daero, Hanam-si, Gyeonggi-do, Republic of Korea / Tel : 031 425 3336</span>
</div>
<div class="customer">
<b>THE PERFECT WAY</b>
<h2>Customer Service</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia culpa libero, veritatis vero corporis quasi eaque commodi quia fugiat, qui ad consectetur vitae. Obcaecati odit expedita officia, veritatis accusamus illo.
</p>
<span>Address : #324, 510, Misa-daero, Hanam-si, Gyeonggi-do, Republic of Korea / Tel : 031 425 3336</span>
</div>
</div>
<div class="service">
<div class="service-item">
<i class="fa fa-leaf"></i>
<h3>Built and natural contexts</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nulla voluptatibus debitis tempora impedit quam.
</p>
</div>
<div class="service-item">
<i class="fa fa-bullseye"></i>
<h3>Landscape design</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nulla voluptatibus debitis tempora impedit quam.
</p>
</div>
<div class="service-item">
<i class="fa fa-cube"></i>
<h3>Every building site unique</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nulla voluptatibus debitis tempora impedit quam.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="cd-section" id="contact">
<div>
<div class="content">
<div class="contact-inner">
<div class="contact-feature">
<div class="contact-form">
<h3><b>Contact </b>Us</h3>
<p>Feel free to ask for details, don't save any questions.</p>
<form class="send-box">
<label>Email <span>*</span></label>
<input type="email">
<label>Subject <span>*</span></label>
<input type="text">
<label>Message <span>*</span></label>
<textarea cols="30" rows="10"></textarea>
<!-- <input type="submit" value="send message"> -->
<button>send message</button>
</form>
</div>
<div class="contact-info">
<h4>Our <b>Office</b></h4>
<ul>
<li>Address : #324, 510, Misa-daero, Hanam-si, Gyeonggi-do, Republic of Korea</li>
<li>Phone: +82-31-425-3336, +82-10-3687-4054</li>
<li>Email: oykang64@gmail.com</li>
</ul>
<h4>Business <b>Hours</b></h4>
<ul>
<li><i class="fa fa-clock-o"></i> Monday - Friday : 9am to 5pm</li>
<li><i class="fa fa-clock-o"></i> Saturday : 9am to 2pm</li>
<li><i class="fa fa-clock-o"></i> Sunday : Closed</li>
</ul>
<h4>Get in <b>Touch</b></h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit impedit qui harum nulla cum hic sed esse molestias animi veniam.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<header>
<div class="gnb-inner">
<div class="logo">bizpage</div>
<div class="gnb">
<div class="menu">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#project">Project</a>
<a href="#plan">Plan & History</a>
<a href="#awards">Awards</a>
<a href="#location">Location</a>
<a href="#contact">Contact</a>
</div>
<div class="slogan">We think different and make different.</div>
</div>
<div class="trigger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</header>
</div>
<a href="#" class="gototop active"><img src="images/gototop.png"></a>
<a href="hiring.html" class="btn-hiring" data-featherlight="iframe"><i class="fa fa-commenting"></i></i>Hiring</a>
<nav>
<ul class="cd-vertical-nav">
<li><a href="#0" class="cd-prev inactive">Next</a></li>
<li><a href="#0" class="cd-next">Prev</a></li>
</ul>
</nav>
</body>
</html>
style.css:
/* 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=Nanum+Gothic&family=Nunito&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Nunito&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Overpass&family=Source+Sans+Pro&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; padding: 0;}
a {text-decoration: none;}
/* Default CSS */
body {
font-family: 'Open Sans', '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;
}
.content {
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%;
z-index: 100;
}
.gnb-inner {
/* border: 1px solid #000; */
width: calc(100% - 40px);
margin: auto;
height: 60px;
line-height: 60px;
}
.logo {
font-size: 2.4rem;
font-weight: bold;
color: #066bf7;
float: left;
}
/* .logd img {
padding-top: 17px;
} */
.gnb {
float: right;
}
.menu {
display: none;
}
/* .menu a {} */
.slogan {
font-style: italic;
font-size: 16px;
float: right;
}
.trigger {
display: none;
}
/* Hiring Button */
.btn-hiring {
position: fixed;
right: 30px;
bottom: 30px;
color: #fff;
background-color: #000;
padding: 10px 20px;
border-radius: 20px;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.38);
transition: 0.5s;
}
.btn-hiring .fa {
transform: rotateY(180deg);
margin-right: 5px;
}
.btn-hiring:active {
transform: scale(0);
}
/* ################## Section : home ################## */
.home-inner {
background-color: #fff;
height: 100%;
}
.home-inner::before {
content: '';
background-color: #000;
position: absolute;
width: 0%;
height: 100%;
top: 0;
left: 0;
animation: overlay 1s 3s ease-in-out both;
}
.welcome-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
font-weight: 300;
text-align: center;
line-height: 1.2em;
margin: 0;
font-family: 'Source Sans Pro', sans-serif;
animation: slideup 3s 0s linear;
animation-fill-mode: both;
}
.welcome-text span {
display: block;
font-size: 26px;
color: #066bf7;
}
.welcome-text span .fa {
color: crimson;
margin-left: 10px;
}
.opacity-image {
background: url(images/section-bg-01.jpg) no-repeat center center;
height: 100%;
background-size: cover;
opacity: 0;
animation: opacity-image 1s 3.5s ease-in both;
}
.home-heading {
position: absolute;
top: 50%;
left: 250px;
transform: translateY(-50%);
}
.home-heading span {
display: block;
font-size: 90px;
color: #fff;
font-weight: bold;
width: 0;
overflow: hidden;
}
.home-heading span:nth-child(1) {
animation: reveal 1s 4s ease-in-out both;
}
.home-heading span:nth-child(2) {
animation: reveal 1s 4.5s ease-in-out both;
}
.home-heading span:nth-child(3) {
animation: reveal 1s 5s ease-in-out both;
}
@keyframes slideup {
0% {
opacity: 0;
margin-top: 50px;
}
20% {
opacity: 0.5;
margin-top: 0;
}
80% {
opacity: 1;
margin-top: 0;
}
100% {
opacity: 0;
}
}
@keyframes overlay {
0% {
width: 0;
left: 0;
}
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
@keyframes opacity-image {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes reveal {
0% {
width: 0;
}
100% {
width: 100%;
}
}
/* ################## Section : about ################## */
.about-inner {
background: #0dace3 url(images/line-drawing.png) no-repeat right bottom;
height: 100%;
background-size: 60%;
/* background-color: #0dace3; */
}
.about-items {
width: 60%;
color: #fff;
position: absolute;
top: 50%;
transform: translateY(-50%);
margin-left: 100px;
}
.item {
overflow: hidden;
margin: 60px;
}
.item:hover h3 {
color: #000;
/* letter-spacing: 0px; */
}
.item:hover img {
filter: invert(0);
}
.item img {
height: 160px;
float: left;
margin-right: 30px;
filter: invert(1);
transition: 0.5s;
}
.item h3 {
font-size: 30px;
font-weight: 500;
margin: 0;
transition: 0.5s;
letter-spacing: -1px;
}
.item p {
overflow: hidden;
font-size: 20px;
}
/* ################## Section : project ################## */
.project-inner {
height: 100%;
}
.tabs {
height: 100%;
width: 300%;
transition: 0.5s;
}
.tab {
height: 100%;
float: left;
width: 33.333333%;
}
.tab > div {
height: 100%;
float: left;
}
.project-info {
width: 25%;
background-color: #fff;
}
.project-photo {
width: 75%;
height: 100%;
/* overflow: hidden; */
}
.project-photo img {
width: 100%;
height: inherit;
object-fit: cover;
}
input[name="tabmenu"] {
display: none;
}
.btn {
position: absolute;
left: 0;
bottom: 30px;
width: 25%;
text-align: center;
}
.btn label {
cursor: pointer;
width: 5px;
height: 5px;
background-color: #000;
display: inline-block;
border-radius: 50%;
margin: 8px;
position: relative;
}
.btn label::before {
content: '';
display: inline-block;
border: 1px solid transparent;
width: 15px;
height: 15px;
border-radius: 50%;
position: absolute;
left: -5px;
top: -5px;
transition: 0.3s;
}
.btn label:hover::before {
border: 1px solid #aaa;
}
input[id=tab1]:checked ~ .btn label[for=tab1]::before, input[id=tab2]:checked ~ .btn label[for=tab2]::before, input[id=tab3]:checked ~ .btn label[for=tab3]::before {
border: 1px solid #aaa;
}
input[id=tab1]:checked ~ .tabs {
margin-left: 0;
}
input[id=tab2]:checked ~ .tabs {
margin-left: -100%;
}
input[id=tab3]:checked ~ .tabs {
margin-left: -200%;
}
/* project-info */
.project-info {
padding: 30px;
position: relative;
}
.project-info h3 {
font-size: 18px;
position: relative;
}
.project-info p {
font-size: 16px;
line-height: 1.4em;
}
.project-info ul {
line-height: 2em;
}
.project-info ul li::before {
content: "\f105";
font-family: fontawesome;
margin-right: 10px;
}
.detail {
margin-top: 30px;
margin-bottom: 30px;
}
.detail div {
display: inline-block;
text-align: center;
width: 32%;
color: #999;
font-size: 12px;
}
.detail div span {
font-size: 36px;
font-weight: bold;
display: block;
margin-bottom: 10px;
color: #000;
}
.view-project {
background-color: #3f3f3f;
color: #fff;
text-transform: uppercase;
font-size: 13px;
text-align: center;
width: 200px;
display: inline-block;
transition: 0.5s;
}
.view-project:hover {
background-color: #000;
}
.view-project .fa {
margin-left: 10px;
transition: 0.5s;
}
.view-project:hover .fa {
margin-left: 30px;
}
.project-info::before {
content: attr(data-text);
font-size: 100px;
color: #eee;
position: absolute;
top: -15px;
left: 10px;
}
/* ################## Section : plan ################## */
.plan-inner {
background-color: #1d1b24;
height: 100%;
}
.plan-feature {
width: 85%;
height: 85%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.plan-feature > div {
height: 250px;
color: #aaa;
}
.plan-info > div {
float: left;
}
.plan-heading {
width: 70%;
padding-right: 50px;
}
.plan-heading h2,
.history-info h2 {
font-weight: normal;
color: #fff;
margin: 0;
}
.plan-heading p {
font-size: 14px;
line-height: 1.4em;
margin: 0;
}
.plan-photo {
width: 30%;
}
.plan-photo img {
height: 200px;
}
.plan-heading hr.bar, .history-info hr.bar {
background-color: dodgerblue;
margin-top: 20px;
display: inline-block;
}
.history-slider div {
margin-right: 10px;
}
.history-slider div h4 {
color: #fff;
font-size: 20px;
font-weight: normal;
margin: 0;
}
.history-slider div h4 span {
color: dodgerblue;
}
.history-slider div p {
font-size: 14px;
line-height: 1.5em;
}
/* Slick.js Custom CSS */
.history-slider .slick-arrow {
display: none !important;
}
.history-slider .slick-dots li button::before {
color: #fff;
font-size: 40px;
}
.history-slider .slick-dots li {
margin: 0;
}
/* ################## Section : awards ################## */
.awards-inner {
height: 100%;
}
.awards-inner > div {
float: left;
width: 50%;
height: 100%;
position: relative;
}
.about-awards {
background-color: #1a1f24;
color: #fff;
}
.about-heading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% ,-50%);
text-align: center;
width: 70%;
}
.victory-jump {
background-color: #eee;
}
.victory-jump img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% ,-50%);
width: 80%;
}
.about-heading h2 {
margin: 0;
}
hr.bar {
width: 50px;
height: 4px;
border: none;
background-color: crimson;
margin: 30px auto;
}
.about-heading p {
color: #999;
font-size: 17px;
line-height: 1.5em; /* 16px * 1.5 */
/* margin-bottom: 40px; */
}
.view-awards {
color: #aaa;
border: 1px solid #aaa;
padding: 5px 15px;
border-radius: 20px;
transition: 0.5s;
display: inline-block;
margin-top: 20px;
}
.view-awards:hover {
background-color: #31c0ce;
color: #fff;
border-color: transparent;
}
/* ################## Section : location ################## */
.location-inner {
background: url(images/background-location.jpg) no-repeat center center;
height: 100%;
position: relative;
}
.location-inner::before {
content: '';
background-color: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
position: absolute;
/* display: block; */
}
.feature {
width: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.feature > div {
float: left;
color: #aaa;
}
.office {
width: 60%;
padding-right: 100px;
}
.service {
width:40%;
}
.office b {
font-weight: normal;
}
.office h2 {
color: #1db1f0;
font-weight: 500;
margin: 5px 0;
}
.office p {
font-size: 16px;
line-height: 1.5em;
}
.office span {
color: #fff;
}
.customer {
margin-top: 40px;
}
.service-item {
margin-top: 40px;
}
.service-item .fa {
color: #1db1f0;
font-size: 40px;
}
.service-item h3 {
color: #fff;
font-size: 22px;
margin: 0;
}
/* ################## Section : contact ################## */
.contact-inner {
background-color: #eee;
height: 100%;
border: 1px solid #ddd;
}
.contact-feature {
width: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.contact-feature > div {
float: left;
width: 50%;
padding: 20px;
}
.contact-form h3 {
font-size: 30px;
font-weight: normal;
margin: 0;
}
.send-box label {
display: block;
font-weight: bold;
font-size: 16px;
margin: 10px 0;
margin-top: 20px;
}
.send-box label span {
color: crimson;
font-weight: normal;
}
.send-box input[type=email],
.send-box input[type=text],
.send-box textarea {
border: 1px solid #ccc;
padding: 10px;
border-radius: 3px;
outline: none;
width: 100%;
transition: 0.5s;
}
.send-box input[type=email]:hover,
.send-box input[type=text]:hover,
.send-box textarea:hover {
border: 1px solid #0088cc;
box-shadow: 0 0 5px #0088cc;
}
.send-box input[type=email]:focus,
.send-box input[type=text]:focus,
.send-box textarea:focus {
background-color: #fff;
}
.send-box button {
background-color: #0088cc;
color: #fff;
display: block;
text-transform: uppercase;
padding: 12px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: 0.5s;
margin-top: 20px;
}
.send-box button:hover {
background-color: #000;
}
.contact-info h4 {
font-weight: normal;
font-size: 20px;
margin: 0;
margin-top: 20px;
}
.contact-info ul li {
line-height: 2em; /* body 15px x 2 */
}
.contact-info ul li:last-child {
color: #0088cc;
}
.contact-info p {
line-height: 1.5em;
}
/* ################## Subpage : hiring ################## */
.modal {
font-family: 'Source Sans Pro', sans-serif;
}
.header {
position: fixed;
width: 100%;
background-color: #fff;
z-index: 1000;
}
.header-inner {
width: 95%;
margin: auto;
height: 90px;
line-height: 90px;
border-bottom: 1px solid #ddd;
}
.modal-dispaly {
font-size: 16px;
}
.hiring-main {
height: 600px;
position: relative;
}
.hiring-heading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.hiring-heading span {
text-transform: uppercase;
font-weight: 600;
font-size: 20px;
position: relative;
}
.hiring-heading span::before,
.hiring-heading span::after {
content: '';
height: 2px;
background-color: #000;
position: absolute;
width: 30px;
top: 50%;
}
.hiring-heading span::before {
right: 120%;
}
.hiring-heading span::after {
left: 120%;
}
.hiring-heading h1 {
font-size: 80px;
font-weight: 200;
margin: 0;
margin-top: 40px;
}
.hiring-info {
overflow: hidden;
margin-bottom: 30px;
}
.hiring-info > div {
float: left;
width: 50%;
height: 480px;
}
.center-parent {
position: relative;
}
.center-child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70%;
}
.center-child h2 {
font-size: 30px;
font-weight: normal;
}
.center-child p {
font-size: 20px;
font-weight: 300;
line-height: 1.5em;
}
/* .photo {
background: url(images/hiring-main-01-01.jpg) no-repeat center center;
background-size: cover;
} */
.photo img {
width: 100%;
height: 100%;
}
.hiring-slogan {
display: inline-block;
padding: 100px;
}
.hiring-slogan p {
font-size: 25px;
font-weight: 300;
text-align: center;
width: 80%;
margin: auto;
position: relative;
color: #999;
}
.hiring-slogan p::before {
content: ',,';
font-family: 'Overpass', sans-serif;
font-size: 180px;
position: absolute;
color: #ddd;
transform: rotate(180deg);
top: -78px;
left: -85px;
}
.hiring-contact ul {
display: inline-block;
width: 49%;
font-size: 16px;
font-weight: 300;
line-height: 1.6rem;
}
.hiring-contact ul li:first-child {
font-weight: 400;
}
.hiring-contact ul li:last-child {
color: dodgerblue;
}
.sns {
margin-top: 20px;
}
.sns a {
font-size: 15px;
color: #000;
width: 30px;
height: 30px;
display: inline-block;
border-radius: 50%;
text-align: center;
line-height: 30px;
margin: 2px;
position: relative;
transition: 0.3s;
}
.sns a::before {
content: '';
position: absolute;
width: inherit;
height: inherit;
border-radius: 50%;
z-index: -1;
left: 50%;
transform: translateX(-50%) scale(0);
transition: 0.3s;
}
.sns a:hover {
color: #aaa;
}
.sns a:hover::before {
transform: translateX(-50%) scale(1);
}
.sns a:nth-child(1)::before {
background-color: #1877F2;
}
.sns a:nth-child(2)::before {
background-color: #1DA1F2;
}
.sns a:nth-child(3)::before {
background-color: #0A66C2;
}
.sns a:nth-child(4)::before {
background-color: #E4405F;
}
.sns a:nth-child(5)::before {
background-color: #CD201F;
}
.sns a:nth-child(6)::before {
background-color: #09B83E;
}
/* ################## Subpage : project-detail ################## */
.project-detail .hiring-main.project-main1 {
background: url(images/project-modal-main-01.jpg) no-repeat center center;
background-size: cover;
height: 100vh;
}
.project-detail .hiring-main.project-main2 {
background: url(images/project-modal-main-02.jpg) no-repeat center center;
background-size: cover;
height: 100vh;
}
.project-detail .hiring-main.project-main3 {
background: url(images/project-modal-main-03.jpg) no-repeat center center;
background-size: cover;
height: 100vh;
}
.project-detail .hiring-heading {
color: #fff;
width: 100%;
animation: slidedown 1s linear both;
}
.project-detail .hiring-heading h1 {
font-size: 60px;
}
.project-detail .hiring-heading span::before,
.project-detail .hiring-heading span::after {
background-color: #fff;
}
.project-detail .hiring-info {
margin-bottom: 0;
}
.project-detail .center-child p {
font-size: 18px;
}
.project-detail .project-info {
font-size: 18px;
font-weight: 300;
padding-top: 100px;
border: none;
}
@keyframes slidedown {
0% {
opacity: 0;
margin-top: -50px;
}
100% {
opacity: 1;
margin-top: 0;
}
}
/* Featherlight Custom CSS */
.featherlight .featherlight-content {
position: relative;
text-align: left;
vertical-align: middle;
display: inline-block;
overflow: auto;
padding: 0;
border-bottom: 25px solid transparent;
margin-left: 0;
margin-right: 0;
max-height: 100%;
background: #fff;
cursor: auto;
white-space: normal;
width: 100%;
height: 100%;
outline: none;
}
.featherlight iframe {
border: none;
width: 100%;
height: 100%;
}
.featherlight .featherlight-close-icon {
position: absolute;
z-index: 9999;
top: 10px;
right: 10px;
line-height: 25px;
width: 25px;
cursor: pointer;
text-align: center;
font-family: Arial, sans-serif;
background: #fff;
background: rgba(255, 255, 255, 0.3);
color: #000;
border: none;
padding: 0;
font-size: 30px;
color: #bbb;
}
responsive.css:
@media (max-width: 480px) {
/* html {
scroll-behavior: smooth;
} */
/* Entire Layout */
.cd-section {
height: auto;
}
.cd-section > div {
height: auto;
}
.content {
position: static;
width: 100%;
height: 100%;
}
/* Header */
header {
transition: 0.5s;
z-index: 100;
}
header.active {
background-color: #fff;
border-bottom: 1px solid #eee;
}
.logo {
color: #fff;
}
.logo.active {
color: #066bf7;
}
.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 rgba(0, 0, 0, 0.1);
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;
width: 24px;
height: 14px;
position: absolute;
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: 20px;
border: 1px solid #fff;
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
text-align: center;
line-height: 50px;
transform: translateY(30px);
opacity: 0;
transition: 0.5s;
}
.gototop.active {
opacity: 1;
transform: translateY(0px);
}
.btn-hiring {
right: 15px;
bottom: 20px;
font-size: 15px;
padding: 5px 10px;
}
.cd-vertical-nav {
display: none;
}
/* ################## Section : home ################## */
.home-inner {
height: 100vh;
}
.welcome-text {
transform: translate(-50%, -50%) scale(0.7);
width: 100%;
font-size: 40px;
}
.home-heading {
left: 30px;
}
.home-heading span {
font-size: 40px;
}
/* ################## Section : about ################## */
.about-inner {
height: auto;
padding-top: 10px;
}
.about-items {
width: 100%;
position: static;
margin-left: 0;
transform: none;
text-align: center;
padding: 20px;
}
.item img {
float: none;
height: 120px;
}
.item h3 {
font-size: 22px;
}
.item p {
font-size: 16px;
}
/* ################## Section : project ################## */
.project-inner {
height: auto;
padding-top: 60px;
}
.tab > div {
width: 100%;
float: none;
}
.view-project {
width: 100%;
}
.project-info {
padding: 20px;
}
.project-info p {
position: relative;
}
.btn {
width: 100%;
bottom: -10px;
background-color: #fff;
padding: 20px;
}
.project-info::before {
top: -20px;
}
/* ################## Section : plan ################## */
.plan-inner {
height: auto;
padding-top: 60px;
}
.plan-feature {
width: 100%;
position: static;
transform: none;
padding: 20px 0 20px 20px;
}
.plan-feature > div {
height: auto;
}
.plan-info > div {
float: none;
width: 100%;
}
.plan-photo img {
width: 100%;
margin: 20px 0;
}
.plan-heading {
padding-right: 0;
}
/* ################## Section : awards ################## */
.awards-inner {
height: auto;
}
.awards-inner > div {
float: none;
width: 100%;
}
.about-heading, .victory-jump img {
position: static;
transform: none;
width: 100%;
padding: 70px 20px;
}
/* ################## Section : location ################## */
.location-inner {
height: auto;
}
.feature {
width: 100%;
position: relative;
top: 0;
left: 0;
transform: none;
padding-top: 50px;
}
.feature > div {
float: none;
width: 100%;
padding: 20px;
}
/* ################## Section : contact ################## */
.contact-inner {
height: auto;
padding: 60px 20px 20px 20px;
}
.contact-feature {
width: 100%;
position: static;
transform: none;
}
.contact-feature > div {
float: none;
width: 100%;
}
/* ################## Subpage : hiring ################## */
.hiring-main {
height: 300px;
}
.hiring-heading {
width: 100%;
top: 65%;
}
.hiring-heading h1 {
font-size: 32px;
margin-top: 20px;
}
.hiring-info > div {
float: none;
width: 100%;
height: auto;
padding: 20px;
}
.center-child {
position: static;
transform: none;
width: 100%;
}
.center-child h2 {
font-size: 24px;
}
.hiring-slogan {
padding: 50px 20px;
}
.hiring-slogan p {
font-size: 24px;
}
.hiring-slogan p::before {
font-size: 140px;
top: -60px;
left: -45px;
}
.hiring-contact ul {
display: block;
width: 100%;
}
/* featherlight */
.featherlight .featherlight-close-icon {
font-size: 24px;
right: 20px;
top: 30px;
}
/* ################## Subpage : project-detail ################## */
.project-detail .hiring-main.project-main1,
.project-detail .hiring-main.project-main2,
.project-detail .hiring-main.project-main3 {
height: 70vh;
}
.project-detail .hiring-heading {
top: 220px;
}
.project-detail .hiring-heading h1 {
font-size: 40px;
}
.project-detail .project-info {
font-size: 18px;
font-weight: 300;
padding-top: 0;
}
/* slick-theme.css .slick-prev slick-arrow 제거 */
.slick-prev:before {
content: '';
}
}
답변을 작성해보세요.
0
코딩웍스(Coding Works)
지식공유자2022.07.29
코드 복사해서 체크 중인데 index.html style.css는 문제없이 잘 만드셨네요.
그런데 정작 문제가 되는 hiring.html 코드를 안올리셨네요.
답변 1