그냥 인터넷에 유저들이 만들어놓은 무료 웹페이지 템플릿을 다운받았는데요
템플릿 폴더안에 있는 index.html 파일, css폴더, image폴더 등 모든 폴더들을
제 도메인 ftp서버에 업로드해놓고 index.html 파일을 수정을 하려고 하는데
제가 원하는 페이지는 이런식인데
기본으로 적용되있는 index.html파일을 제 도메인에서 열었을때 이렇게 깨져서 나옵니다. 뭐가 문제일까요??
index.html파일 기본코드는 아래처럼 되있구요 제가 수정하고 싶은것들은 이미지 경로랑 내용, 문단내용 정도에요.
그런데 코드를 만지지도 안았는데도 저런식으로 깨져서 나와서ㅠㅠ
<!DOCTYPE HTML>
<!--
Theory by TEMPLATED
templated.co @templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
<head>
<title>Theory by TEMPLATED</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<!-- Header -->
<header id="header">
<div class="inner">
<a href="index.html" class="logo">Theory</a>
<nav id="nav">
<a href="index.html">Home</a>
<a href="generic.html">Generic</a>
<a href="elements.html">Elements</a>
</nav>
<a href="#navPanel" class="navPanelToggle"><span class="fa fa-bars"></span></a>
</div>
</header>
<!-- Banner -->
<section id="banner">
<h1>Welcome to Theory</h1>
<p>A free responsive HTML5 website template by TEMPLATED.</p>
</section>
<!-- One -->
<section id="one" class="wrapper">
<div class="inner">
<div class="flex flex-3">
<article>
<header>
<h3>Magna tempus sed amet<br /> aliquam veroeros</h3>
</header>
<p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu.</p>
<footer>
<a href="#" class="button special">More</a>
</footer>
</article>
<article>
<header>
<h3>Interdum lorem pulvinar<br /> adipiscing vitae</h3>
</header>
<p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu.</p>
<footer>
<a href="#" class="button special">More</a>
</footer>
</article>
<article>
<header>
<h3>Libero purus magna sapien<br /> sed ullamcorper</h3>
</header>
<p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu.</p>
<footer>
<a href="#" class="button special">More</a>
</footer>
</article>
</div>
</div>
</section>
<!-- Two -->
<section id="two" class="wrapper style1 special">
<div class="inner">
<header>
<h2>Ipsum Feugiat</h2>
<p>Semper suscipit posuere apede</p>
</header>
<div class="flex flex-4">
<div class="box person">
<div class="image round">
<img src="images/pic03.jpg" alt="Person 1" />
</div>
<h3>Magna</h3>
<p>Cipdum dolor</p>
</div>
<div class="box person">
<div class="image round">
<img src="images/pic04.jpg" alt="Person 2" />
</div>
<h3>Ipsum</h3>
<p>Vestibulum comm</p>
</div>
<div class="box person">
<div class="image round">
<img src="images/pic05.jpg" alt="Person 3" />
</div>
<h3>Tempus</h3>
<p>Fusce pellentes</p>
</div>
<div class="box person">
<div class="image round">
<img src="images/pic06.jpg" alt="Person 4" />
</div>
<h3>Dolore</h3>
<p>Praesent placer</p>
</div>
</div>
</div>
</section>
<!-- Three -->
<section id="three" class="wrapper special">
<div class="inner">
<header class="align-center">
<h2>Nunc Dignissim</h2>
<p>Aliquam erat volutpat nam dui </p>
</header>
<div class="flex flex-2">
<article>
<div class="image fit">
<img src="images/pic01.jpg" alt="Pic 01" />
</div>
<header>
<h3>Praesent placerat magna</h3>
</header>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.</p>
<footer>
<a href="#" class="button special">More</a>
</footer>
</article>
<article>
<div class="image fit">
<img src="images/pic02.jpg" alt="Pic 02" />
</div>
<header>
<h3>Fusce pellentesque tempus</h3>
</header>
<p>Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna non comodo sodales tempus.</p>
<footer>
<a href="#" class="button special">More</a>
</footer>
</article>
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<div class="flex">
<div class="copyright">
© Untitled. Design: <a href="https://templated.co">TEMPLATED</a>. Images: <a href="https://unsplash.com">Unsplash</a>.
</div>
<ul class="icons">
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon fa-linkedin"><span class="label">linkedIn</span></a></li>
<li><a href="#" class="icon fa-pinterest-p"><span class="label">Pinterest</span></a></li>
<li><a href="#" class="icon fa-vimeo"><span class="label">Vimeo</span></a></li>
</ul>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
글쓰기