+++ .idea/.gitignore
... | ... | @@ -0,0 +1,5 @@ |
1 | +# Default ignored files | |
2 | +/shelf/ | |
3 | +/workspace.xml | |
4 | +# Editor-based HTTP Client requests | |
5 | +/httpRequests/ |
+++ .idea/modules.xml
... | ... | @@ -0,0 +1,8 @@ |
1 | +<?xml version="1.0" encoding="UTF-8"?> | |
2 | +<project version="4"> | |
3 | + <component name="ProjectModuleManager"> | |
4 | + <modules> | |
5 | + <module fileurl="file://$PROJECT_DIR$/.idea/portfolio.iml" filepath="$PROJECT_DIR$/.idea/portfolio.iml" /> | |
6 | + </modules> | |
7 | + </component> | |
8 | +</project>(No newline at end of file) |
+++ .idea/portfolio.iml
... | ... | @@ -0,0 +1,12 @@ |
1 | +<?xml version="1.0" encoding="UTF-8"?> | |
2 | +<module type="WEB_MODULE" version="4"> | |
3 | + <component name="NewModuleRootManager"> | |
4 | + <content url="file://$MODULE_DIR$"> | |
5 | + <excludeFolder url="file://$MODULE_DIR$/temp" /> | |
6 | + <excludeFolder url="file://$MODULE_DIR$/.tmp" /> | |
7 | + <excludeFolder url="file://$MODULE_DIR$/tmp" /> | |
8 | + </content> | |
9 | + <orderEntry type="inheritedJdk" /> | |
10 | + <orderEntry type="sourceFolder" forTests="false" /> | |
11 | + </component> | |
12 | +</module>(No newline at end of file) |
+++ asset/logo.png
Binary file is not shown |
+++ asset/mainImage.jpg
Binary file is not shown |
+++ asset/mainImageHigh.jpg
Binary file is not shown |
+++ index.css
... | ... | @@ -0,0 +1,141 @@ |
1 | +@charset "utf-8"; | |
2 | +/* VAR */ | |
3 | +/* ALL */ | |
4 | +* { | |
5 | + padding: 0; | |
6 | + margin: 0; | |
7 | + box-sizing: border-box; | |
8 | +} | |
9 | + | |
10 | +body { | |
11 | + width: 100%; | |
12 | + font-family: sans-serif; | |
13 | +} | |
14 | + | |
15 | +ul, li { | |
16 | + list-style: none; | |
17 | +} | |
18 | + | |
19 | +a, a:hover, a:link, a:active { | |
20 | + text-decoration: none; | |
21 | + color: black; | |
22 | +} | |
23 | + | |
24 | +.wrap { | |
25 | + width: 100%; | |
26 | + margin: 0 auto; | |
27 | + max-width: 1000px; | |
28 | +} | |
29 | + | |
30 | +/* TOP */ | |
31 | +.pageOne { | |
32 | + height: 1280px; | |
33 | + display: flex; | |
34 | + flex-direction: column; | |
35 | +} | |
36 | + | |
37 | +header { | |
38 | + width: 100%; | |
39 | + height: 80%; | |
40 | + background: url('asset/mainImage.jpg') no-repeat center; | |
41 | + background-size: 100% 100%; | |
42 | +} | |
43 | + | |
44 | +.top { | |
45 | + height: 10%; | |
46 | +} | |
47 | + | |
48 | +.topTitleSection { | |
49 | + height: 90%; | |
50 | +} | |
51 | + | |
52 | + | |
53 | +header .wrap { | |
54 | + height: 100%; | |
55 | + display: flex; | |
56 | +} | |
57 | + | |
58 | +header .wrap .topLeft { | |
59 | + width: 30%; | |
60 | +} | |
61 | + | |
62 | +header .wrap .topLeft .logo img { | |
63 | + width: 40%; | |
64 | + height: 40%; | |
65 | +} | |
66 | + | |
67 | + | |
68 | +header .wrap .topRight { | |
69 | + width: 70%; | |
70 | +} | |
71 | + | |
72 | +header .wrap .topRight ul { | |
73 | + height: 100%; | |
74 | + display: flex; | |
75 | + justify-content: space-around; | |
76 | + align-items: center; | |
77 | +} | |
78 | + | |
79 | +header .wrap .topRight ul li a { | |
80 | + font-weight: 600; | |
81 | + font-size: larger; | |
82 | + padding: 20px; | |
83 | +} | |
84 | + | |
85 | +header .wrap .topRight ul li a:hover { | |
86 | + background-color: darkgray; | |
87 | + opacity: 30%; | |
88 | + border-radius: 10px; | |
89 | +} | |
90 | + | |
91 | +.topTitleSection .wrap { | |
92 | + display: flex; | |
93 | + flex-direction: column; | |
94 | + justify-content: flex-start; | |
95 | + align-items: center; | |
96 | + position: relative; | |
97 | + top: 100px; | |
98 | +} | |
99 | + | |
100 | +.topTitleSection .wrap .mainTitle { | |
101 | + font-size: 70px; | |
102 | + font-weight: 600; | |
103 | + border-bottom: 5px black solid; | |
104 | + text-align: center; | |
105 | + letter-spacing: 0.4rem; | |
106 | +} | |
107 | + | |
108 | +.topTitleSection .wrap .subTitle { | |
109 | + font-size: 35px; | |
110 | + font-weight: 600; | |
111 | + text-align: center; | |
112 | +} | |
113 | + | |
114 | +.scroll { | |
115 | + height: 20%; | |
116 | + text-align: center; | |
117 | +} | |
118 | + | |
119 | +.scroll .wrap { | |
120 | + height: 100%; | |
121 | + display: flex; | |
122 | + flex-direction: column; | |
123 | + justify-content: flex-end; | |
124 | + align-items: center; | |
125 | +} | |
126 | + | |
127 | +.directionMark { | |
128 | + animation: mark 1s infinite; | |
129 | + position: relative; | |
130 | + bottom: 8px; | |
131 | + font-weight: 600; | |
132 | +} | |
133 | + | |
134 | +@keyframes mark { | |
135 | + from{ | |
136 | + | |
137 | + } | |
138 | + to { | |
139 | + top: 8px; | |
140 | + } | |
141 | +}(No newline at end of file) |
+++ index.html
... | ... | @@ -0,0 +1,54 @@ |
1 | +<!DOCTYPE html> | |
2 | +<html lang="ko"> | |
3 | +<head> | |
4 | + <meta charset="UTF-8"> | |
5 | + <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
6 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
7 | + <title>Document</title> | |
8 | + <link rel="stylesheet" href="index.css"> | |
9 | +</head> | |
10 | +<body> | |
11 | + <div class="pageOne"> | |
12 | + <header> | |
13 | + <div class="top"> | |
14 | + <div class="wrap"> | |
15 | + <div class="topLeft"> | |
16 | + <div class="logo"> | |
17 | + <a href="#"> | |
18 | + <img src="asset/logo.png"> | |
19 | + </a> | |
20 | + </div> | |
21 | + </div> | |
22 | + <div class="topRight"> | |
23 | + <ul> | |
24 | + <li><a href="#">HOME</a></li> | |
25 | + <li><a href="#">About</a></li> | |
26 | + <li><a href="#">Portfolio</a></li> | |
27 | + <li><a href="#">Gallery</a></li> | |
28 | + <li><a href="#">Contect</a></li> | |
29 | + </ul> | |
30 | + </div> | |
31 | + </div> | |
32 | + </div> | |
33 | + | |
34 | + <div class="topTitleSection"> | |
35 | + <div class="wrap"> | |
36 | + <span class="mainTitle">If not? Make It!!</span> | |
37 | + <span class="subTitle"> | |
38 | + <br> | |
39 | + 정점이 되고싶은 개발자,<br> | |
40 | + 안효원의 포트폴리오 | |
41 | + </span> | |
42 | + </div> | |
43 | + </div> | |
44 | + </header> | |
45 | + | |
46 | + <div class="scroll"> | |
47 | + <div class="wrap"> | |
48 | + <span>Scroll Down!!!</span> | |
49 | + <span class="directionMark">↓ ↓ ↓</span> | |
50 | + </div> | |
51 | + </div> | |
52 | + </div> | |
53 | +</body> | |
54 | +</html>(No newline at end of file) |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?