안효원 안효원 2022-01-24
File Upload
@df9e28427eaab901c08d905d2612d8f519028f0a
 
.idea/.gitignore (added)
+++ .idea/.gitignore
@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
 
.idea/modules.xml (added)
+++ .idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/portfolio.iml" filepath="$PROJECT_DIR$/.idea/portfolio.iml" />
+    </modules>
+  </component>
+</project>(No newline at end of file)
 
.idea/portfolio.iml (added)
+++ .idea/portfolio.iml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>(No newline at end of file)
 
asset/logo.png (Binary) (added)
+++ asset/logo.png
Binary file is not shown
 
asset/mainImage.jpg (Binary) (added)
+++ asset/mainImage.jpg
Binary file is not shown
 
asset/mainImageHigh.jpg (Binary) (added)
+++ asset/mainImageHigh.jpg
Binary file is not shown
 
index.css (added)
+++ index.css
@@ -0,0 +1,141 @@
+@charset "utf-8";
+/* VAR */
+/* ALL */
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body {
+    width: 100%;
+    font-family: sans-serif;
+}
+
+ul, li {
+    list-style: none;
+}
+
+a, a:hover, a:link, a:active {
+    text-decoration: none;
+    color: black;
+}
+
+.wrap {
+    width: 100%;
+    margin: 0 auto;
+    max-width: 1000px;
+}
+
+/* TOP */
+.pageOne {
+    height: 1280px;
+    display: flex;
+    flex-direction: column;
+}
+
+header {
+    width: 100%;
+    height: 80%;
+    background: url('asset/mainImage.jpg') no-repeat center;
+    background-size: 100% 100%;
+}
+
+.top {
+    height: 10%;
+}
+
+.topTitleSection {
+    height: 90%;
+}
+
+
+header .wrap {
+    height: 100%;
+    display: flex;
+}
+
+header .wrap .topLeft {
+    width: 30%;
+}
+
+header .wrap .topLeft .logo img {
+    width: 40%;
+    height: 40%;
+}
+
+
+header .wrap .topRight {
+    width: 70%;
+}
+
+header .wrap .topRight ul {
+    height: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+header .wrap .topRight ul li a {
+    font-weight: 600;
+    font-size: larger;
+    padding: 20px;
+}
+
+header .wrap .topRight ul li a:hover { 
+    background-color: darkgray;
+    opacity: 30%;
+    border-radius: 10px;
+}
+
+.topTitleSection .wrap {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    position: relative;
+    top: 100px;
+}
+
+.topTitleSection .wrap .mainTitle {
+    font-size: 70px;
+    font-weight: 600;
+    border-bottom: 5px black solid;
+    text-align: center;
+    letter-spacing: 0.4rem;
+}
+
+.topTitleSection .wrap .subTitle {
+    font-size: 35px;
+    font-weight: 600;
+    text-align: center;
+}
+
+.scroll {
+    height: 20%;
+    text-align: center;
+}
+
+.scroll .wrap {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+.directionMark {
+    animation: mark 1s infinite;
+    position: relative;
+    bottom: 8px;
+    font-weight: 600;
+}
+
+@keyframes mark {
+    from{
+        
+    }
+    to {
+        top: 8px;
+    }
+}(No newline at end of file)
 
index.html (added)
+++ index.html
@@ -0,0 +1,54 @@
+<!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">
+    <title>Document</title>
+    <link rel="stylesheet" href="index.css">
+</head>
+<body>
+    <div class="pageOne">
+        <header>
+            <div class="top">
+                <div class="wrap">
+                    <div class="topLeft">
+                        <div class="logo">
+                            <a href="#">
+                            <img src="asset/logo.png">
+                            </a>
+                        </div>
+                    </div>
+                    <div class="topRight">
+                        <ul>
+                            <li><a href="#">HOME</a></li>
+                            <li><a href="#">About</a></li>
+                            <li><a href="#">Portfolio</a></li>
+                            <li><a href="#">Gallery</a></li>
+                            <li><a href="#">Contect</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            <div class="topTitleSection">
+                <div class="wrap">
+                    <span class="mainTitle">If not? Make It!!</span>
+                    <span class="subTitle">
+                        <br>
+                        정점이 되고싶은 개발자,<br>
+                        안효원의 포트폴리오
+                    </span>
+                </div>
+            </div>
+        </header>
+
+        <div class="scroll">
+            <div class="wrap">
+                <span>Scroll Down!!!</span>
+                <span class="directionMark">↓ ↓ ↓</span>
+            </div>
+        </div>
+    </div>
+</body>
+</html>(No newline at end of file)
Add a comment
List