├── BlogTemplate ├── css │ └── main.css ├── img │ └── 1.png ├── index.html └── js │ └── main.js ├── Portfolio ├── css │ └── main.css ├── img │ ├── 1.png │ ├── 2.png │ ├── 3.png │ ├── 4.png │ ├── 5.png │ ├── 6.png │ ├── 7.png │ ├── 8.png │ └── 9.png ├── index.html └── js │ └── main.js ├── README.md ├── index.html ├── main.css ├── main.js └── react.html /BlogTemplate/css/main.css: -------------------------------------------------------------------------------- 1 | body 2 | { 3 | background-color: #272626; 4 | color:#272626; 5 | font-family: 'Courier'; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | overflow-x: hidden; 9 | height: 100vh; 10 | } 11 | 12 | a, h4, .fa-map-marker-alt { color:#4ca3a3; } 13 | a, h4 { font-weight: bold; } 14 | .container-in h4 { padding-bottom: 0.5rem; } 15 | 16 | a:hover 17 | { 18 | color:#4dc5c5; 19 | text-decoration: none; 20 | } 21 | 22 | .fa-map-marker-alt, .icons i { font-size:25px; } 23 | 24 | .author { font-weight: bold; } 25 | 26 | .list-unstyled { padding-bottom: 2rem; } 27 | 28 | .blog-pagination { padding: .5rem 0 7rem 0; } 29 | 30 | .btn-primary 31 | { 32 | background-color: #4ca3a3; 33 | border: none; 34 | color: white; 35 | } 36 | 37 | .btn-primary:hover { background-color: #2e8080; } 38 | 39 | /*********CONTAINERS********************/ 40 | 41 | .container-main 42 | { 43 | max-width: 960px; 44 | background-color: white; 45 | margin-left: auto; 46 | margin-right: auto; 47 | min-height: 900px; 48 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.6); 49 | } 50 | 51 | .container-in 52 | { 53 | max-width: 850px; 54 | margin-left: auto; 55 | margin-right: auto; 56 | } 57 | 58 | .jumbotron { color:#f2f2f2; } 59 | .container-main:first-child { padding-top: 6rem; } 60 | 61 | /****TRENDING SECTION*****/ 62 | .containerImg 63 | { 64 | position: relative; 65 | width: 100%; 66 | } 67 | .text 68 | { 69 | color: #f2f2f2; 70 | font-size: 20px; 71 | position: absolute; 72 | top: 50%; 73 | left: 50%; 74 | -webkit-transform: translate(-50%, -50%); 75 | -ms-transform: translate(-50%, -50%); 76 | transform: translate(-50%, -50%); 77 | text-align: center; 78 | } 79 | 80 | .overlay 81 | { 82 | position: absolute; 83 | top: 0; 84 | bottom: 0; 85 | left: 0; 86 | right: 0; 87 | height: 100%; 88 | width: 100%; 89 | opacity: 0; 90 | transition: .5s ease; 91 | background-color: #4ca3a3; 92 | } 93 | 94 | .containerImg:hover .overlay { opacity: 1; } 95 | 96 | #post1, #post2, #post3, #post4 97 | { 98 | display: block; 99 | margin: 0 auto; 100 | text-indent: -9999px; 101 | width: 100%; 102 | height: 180px; 103 | } 104 | 105 | #post1 { background-image: url(../img/1.png); } 106 | #post2 { background-image: url(../img/1.png); } 107 | #post3 { background-image: url(../img/1.png); } 108 | #post4 { background-image: url(../img/1.png); } 109 | 110 | 111 | /******NAVBAR*************/ 112 | .nav 113 | { 114 | overflow: hidden; 115 | background-color: #272626; 116 | z-index: 100; 117 | position: fixed; 118 | width: 100%; 119 | color: #1a1a1a; 120 | text-align: center; 121 | } 122 | 123 | .nav h4 124 | { 125 | color:#4ca3a3; 126 | font-weight: bold; 127 | } 128 | 129 | .nav a 130 | { 131 | float: left; 132 | display: block; 133 | color: #f2f2f2; 134 | text-align: center; 135 | padding: 14px 16px; 136 | text-decoration: none; 137 | font-size: 17px; 138 | } 139 | 140 | .nav .icon { display: none; } 141 | 142 | /*********FOOTER*******************/ 143 | .footer 144 | { 145 | z-index: 100; 146 | position: fixed; 147 | left: 0; 148 | bottom: 0; 149 | width: 100%; 150 | background-color: #272626; 151 | color: #f2f2f2; 152 | text-align: center; 153 | padding: 1.5rem 0 1rem 0; 154 | } 155 | 156 | /*********RESPONSIVE********************/ 157 | @media only screen and (max-width: 1024px) 158 | { 159 | [class*="col-"] { width: 100%; } 160 | 161 | .icons { padding: .5rem 0 1rem 0; } 162 | .blog-pagination { padding: 0 0 2rem 0; } 163 | .container-main:first-child { padding-top: 9rem; } 164 | .list-unstyled { padding-bottom: 11rem; } 165 | } 166 | 167 | .responsive 168 | { 169 | width: 100%; 170 | height: auto; 171 | } 172 | 173 | @media screen and (max-width: 600px) 174 | { 175 | .nav.responsive { position: relative; } 176 | 177 | .nav.responsive .icon 178 | { 179 | position: absolute; 180 | right: 0; 181 | top: 0; 182 | } 183 | 184 | .nav.responsive a 185 | { 186 | float: none; 187 | display: block; 188 | text-align: left; 189 | } 190 | 191 | .nav a:not(:first-child) {display: none;} 192 | 193 | .nav a.icon 194 | { 195 | float: right; 196 | display: block; 197 | } 198 | 199 | } -------------------------------------------------------------------------------- /BlogTemplate/img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YunaAnn/UIFrontEndProjects/d5accd3a8d8a14f5bcf5e2f6516268c9d4ddbdd0/BlogTemplate/img/1.png -------------------------------------------------------------------------------- /BlogTemplate/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Blog Template – by YunaAnn 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 42 | 43 |
44 |
45 |
46 | 47 |
48 |
49 |
50 |
51 |

Announcement

52 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eleifend dictum tortor congue convallis.

53 |

54 |
55 |
56 |
57 | 58 |

Trending

59 |
60 |
61 |
62 |
63 | 64 |
65 |
Post 1
66 |
67 |
68 |
69 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

70 |

456 71 | 123

72 |
73 |
74 |
75 |
76 |
77 |
78 | 79 |
80 |
Post 2
81 |
82 |
83 |
84 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

85 |

123 86 | 90

87 |
88 |
89 |
90 |
91 |
92 |
93 | 94 |
95 |
Post 3
96 |
97 |
98 |
99 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

100 |

234 101 | 67

102 |
103 |
104 |
105 |
106 |
107 |
108 | 109 |
110 |
Post 4
111 |
112 |
113 |
114 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

115 |

25 116 | 8

117 |
118 |
119 |
120 |
121 | 122 | 123 |
124 | 125 |
126 |
127 |
128 |

Post 1

129 |

December 9, 2019 by Olga

130 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id lobortis elit. Ut elit leo, ultricies in commodo vel, facilisis at sem. Nullam interdum velit eget nibh luctus, id tincidunt felis pellentesque. Sed molestie eros nec egestas luctus. Quisque efficitur nibh et viverra eleifend. Vestibulum sodales dolor libero, at fringilla purus fermentum et. Suspendisse at cursus arcu...

131 |
132 |
133 | 0 134 | 0 135 |
136 |
137 | Continue reading.... 138 |
139 |
140 |
141 |
142 |
143 |

Post 2

144 |

December 6, 2019 by Chris

145 |

Pellentesque sem libero, auctor ac urna a, porttitor elementum elit. Sed tincidunt elit sed justo dignissim, nec mollis purus pretium. Vivamus accumsan feugiat fringilla. Cras efficitur sodales orci non suscipit. Donec at eros felis. Curabitur non eros nec ligula fermentum aliquam...

146 |
147 |
148 | 4 149 | 1 150 |
151 |
152 | Continue reading.... 153 |
154 |
155 |
156 |
157 |
158 |

Post 3

159 |

December 4, 2019 by Anna

160 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id lobortis elit. Ut elit leo, ultricies in commodo vel, facilisis at sem. Nullam interdum velit eget nibh luctus, id tincidunt felis pellentesque. Sed molestie eros nec egestas luctus. Quisque efficitur nibh et viverra eleifend. Vestibulum sodales dolor libero, at fringilla purus fermentum et. Suspendisse at cursus arcu..

161 |
162 |
163 | 1 164 | 2 165 |
166 |
167 | Continue reading.... 168 |
169 |
170 |
171 | 175 |
176 |
177 |
178 | 179 |
180 |
181 |

About

182 | Id 183 |

YunaAnn

184 |
185 | Somewhere 186 |

I like pancakes and trains.

187 |
188 |

Archives

189 |
    190 |
  1. January 2020
    2. 191 |
  2. December 2019
    3. 192 |
  3. November 2019
    4. 193 |
  4. October 2019
    5. 194 |
  5. September 2019
    6. 195 |
  6. August 2019
    7. 196 |
  7. July 2019
    8. 197 |
  8. June 2019
    9. 198 |
  9. May 2019
    10. 199 |
  10. April 2019
    11. 200 |
  11. March 2019
    12. 201 |
  12. February 2019
    13. 202 |
  13. January 2019
    14. 203 |
  14. December 2018
    15. 204 |
205 |
206 |
207 | 208 |
209 |
210 |
211 |
212 | 213 | 214 |
215 |
216 |
217 |
218 |
template made by YunaAnn
219 |
220 |
221 |
222 | 223 | 224 | 225 | 226 | 227 |
228 |
229 |
230 |
231 | 232 | 233 |
234 |
235 |
236 |
237 |
238 | 239 | 240 | 241 | 242 | 243 | -------------------------------------------------------------------------------- /BlogTemplate/js/main.js: -------------------------------------------------------------------------------- 1 | function myFunction() 2 | { 3 | var x = document.getElementById("mainNav"); 4 | if (x.className === "nav") 5 | { 6 | x.className += " responsive"; 7 | } 8 | else 9 | { 10 | x.className = "nav"; 11 | } 12 | } -------------------------------------------------------------------------------- /Portfolio/css/main.css: -------------------------------------------------------------------------------- 1 | body 2 | { 3 | background-color: #f2f2f2; 4 | color:#272626; 5 | font-family: 'Relaway'; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | overflow-x: hidden; 9 | } 10 | 11 | html 12 | { 13 | scroll-behavior: smooth; 14 | } 15 | 16 | a 17 | { 18 | color:rgb(202, 158, 62); 19 | } 20 | 21 | .row .col-sm-4 i 22 | { 23 | color:rgb(133, 45, 45); 24 | } 25 | 26 | a:hover 27 | { 28 | color:rgb(165, 122, 29); 29 | } 30 | 31 | .form .btn 32 | { 33 | width: 30%; 34 | background-color:rgb(202, 158, 62); 35 | color:#f2f2f2; 36 | cursor:pointer; 37 | font-weight: bold; 38 | } 39 | 40 | .form .btn:hover 41 | { 42 | color:rgb(165, 122, 29); 43 | color:#f2f2f2; 44 | } 45 | 46 | .welcome 47 | { 48 | background: url("../img/1.png") center center/cover; 49 | background-repeat: no-repeat; 50 | height: 100vh; 51 | } 52 | 53 | .welcome h1 54 | { 55 | color:#f2f2f2; 56 | font-weight: bold; 57 | font-size: 3vw; 58 | padding-top: 10%; 59 | text-align: center; 60 | letter-spacing: 4px; 61 | background: linear-gradient(90deg, #272626, #fff, #272626); 62 | background-repeat: no-repeat; 63 | background-size: 80%; 64 | animation: animate 6s linear infinite; 65 | -webkit-background-clip: text; 66 | -webkit-text-fill-color: rgba(255, 255, 255, 0); 67 | } 68 | 69 | 70 | @keyframes animate 71 | { 72 | 0% 73 | { 74 | background-position: -500%; 75 | } 76 | 100% 77 | { 78 | background-position: 500%; 79 | } 80 | } 81 | 82 | .welcome h4 83 | { 84 | font-size: 2vw; 85 | padding-top: 25vh; 86 | text-align: center; 87 | color:#f2f2f2; 88 | } 89 | 90 | .welcome a 91 | { 92 | position: absolute; 93 | bottom: 80px; 94 | padding-left: 50vw; 95 | color:#f2f2f2; 96 | font-weight: bold; 97 | text-transform: uppercase; 98 | } 99 | 100 | .welcome a:hover 101 | { 102 | border-bottom: 2px dotted #f2f2f2; 103 | padding-bottom: 5px; 104 | transition: all 0.2s; 105 | cursor: pointer; 106 | text-decoration: none; 107 | } 108 | 109 | .container .photo img 110 | { 111 | border-radius: 50%; 112 | display: block; 113 | margin-left: auto; 114 | margin-right: auto; 115 | } 116 | 117 | #project1 118 | { 119 | background-image: url(../img/7.png); 120 | display: block; 121 | margin: 0 auto; 122 | text-indent: -9999px; 123 | width: 100%; 124 | height: 250px; 125 | } 126 | 127 | #project2 128 | { 129 | background-image: url(../img/8.png); 130 | display: block; 131 | margin: 0 auto; 132 | text-indent: -9999px; 133 | width: 100%; 134 | height: 250px; 135 | } 136 | 137 | #project3 138 | { 139 | background-image: url(../img/9.png); 140 | display: block; 141 | margin: 0 auto; 142 | text-indent: -9999px; 143 | width: 100%; 144 | height: 250px; 145 | } 146 | 147 | .containerLink 148 | { 149 | position: relative; 150 | width: 100%; 151 | } 152 | 153 | .text 154 | { 155 | color: #f2f2f2; 156 | font-size: 20px; 157 | position: absolute; 158 | top: 50%; 159 | left: 50%; 160 | -webkit-transform: translate(-50%, -50%); 161 | -ms-transform: translate(-50%, -50%); 162 | transform: translate(-50%, -50%); 163 | text-align: center; 164 | } 165 | 166 | .overlay 167 | { 168 | position: absolute; 169 | top: 0; 170 | bottom: 0; 171 | left: 0; 172 | right: 0; 173 | height: 100%; 174 | width: 100%; 175 | opacity: 0; 176 | transition: .5s ease; 177 | background-color: rgb(48, 92, 52); 178 | } 179 | 180 | .containerLink:hover .overlay 181 | { 182 | opacity: 1; 183 | } 184 | 185 | 186 | .skills 187 | { 188 | background-color:#272626; 189 | color:#f2f2f2; 190 | } 191 | 192 | .links 193 | { 194 | text-align: center; 195 | } 196 | 197 | .row .col-sm-4 p 198 | { 199 | font-weight: bold; 200 | color:rgb(133, 45, 45); 201 | } 202 | .row .col-sm-4 p, .row .col-sm-4 ul>li, .row .col-sm-4 h6 203 | { 204 | text-align: left; 205 | } 206 | 207 | .form 208 | { 209 | background-color:#333; 210 | text-align: center; 211 | } 212 | 213 | form 214 | { 215 | color:#f2f2f2; 216 | } 217 | 218 | .footer 219 | { 220 | width: 100%; 221 | height: 60px; 222 | line-height: 60px; 223 | background-color: #f2f2f2; 224 | } 225 | 226 | /***PARALLAX****/ 227 | .img-1, .img-2, .img-3, .img-4 228 | { 229 | position: relative; 230 | opacity: 0.80; 231 | background-attachment: fixed; 232 | background-position: center; 233 | background-repeat: no-repeat; 234 | background-size: cover; 235 | 236 | } 237 | .img-1 238 | { 239 | background-image: url("../img/3.png"); 240 | min-height: 200px; 241 | } 242 | 243 | .img-2 244 | { 245 | background-image: url("../img/4.png"); 246 | min-height: 200px; 247 | } 248 | 249 | .img-3 250 | { 251 | background-image: url("../img/5.png"); 252 | min-height: 200px; 253 | } 254 | 255 | .img-4 256 | { 257 | background-image: url("../img/6.png"); 258 | min-height: 200px; 259 | } 260 | 261 | .caption 262 | { 263 | position: absolute; 264 | top: 50%; 265 | width: 100%; 266 | text-align: center; 267 | color: #000; 268 | } 269 | 270 | /******TURNING OFF PARALLAX FOR TABLETS AND PHONES******/ 271 | @media only screen and (max-device-width: 1024px) 272 | { 273 | .img-1, .img-2, .img-3, .img-4 274 | { 275 | background-attachment: scroll; 276 | } 277 | 278 | /*********RESPONSIVE********************/ 279 | @media only screen and (max-width: 1024px) 280 | { 281 | [class*="col-"] 282 | { 283 | width: 100%; 284 | } 285 | } 286 | } 287 | 288 | .responsive 289 | { 290 | width: 100%; 291 | height: auto; 292 | } 293 | -------------------------------------------------------------------------------- /Portfolio/img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YunaAnn/UIFrontEndProjects/d5accd3a8d8a14f5bcf5e2f6516268c9d4ddbdd0/Portfolio/img/1.png -------------------------------------------------------------------------------- /Portfolio/img/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YunaAnn/UIFrontEndProjects/d5accd3a8d8a14f5bcf5e2f6516268c9d4ddbdd0/Portfolio/img/2.png -------------------------------------------------------------------------------- /Portfolio/img/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YunaAnn/UIFrontEndProjects/d5accd3a8d8a14f5bcf5e2f6516268c9d4ddbdd0/Portfolio/img/3.png -------------------------------------------------------------------------------- /Portfolio/img/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YunaAnn/UIFrontEndProjects/d5accd3a8d8a14f5bcf5e2f6516268c9d4ddbdd0/Portfolio/img/4.png -------------------------------------------------------------------------------- /Portfolio/img/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YunaAnn/UIFrontEndProjects/d5accd3a8d8a14f5bcf5e2f6516268c9d4ddbdd0/Portfolio/img/5.png -------------------------------------------------------------------------------- /Portfolio/img/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YunaAnn/UIFrontEndProjects/d5accd3a8d8a14f5bcf5e2f6516268c9d4ddbdd0/Portfolio/img/6.png -------------------------------------------------------------------------------- /Portfolio/img/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YunaAnn/UIFrontEndProjects/d5accd3a8d8a14f5bcf5e2f6516268c9d4ddbdd0/Portfolio/img/7.png -------------------------------------------------------------------------------- /Portfolio/img/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YunaAnn/UIFrontEndProjects/d5accd3a8d8a14f5bcf5e2f6516268c9d4ddbdd0/Portfolio/img/8.png -------------------------------------------------------------------------------- /Portfolio/img/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YunaAnn/UIFrontEndProjects/d5accd3a8d8a14f5bcf5e2f6516268c9d4ddbdd0/Portfolio/img/9.png -------------------------------------------------------------------------------- /Portfolio/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | UIFrontEndProjects – YunaAnn 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

Hello

21 |

I'm Jane Doe. I do many things.

22 | 23 | Learn more 24 |
25 |
26 | 27 |
28 |
29 | about 30 |
31 |
32 |
33 |

34 |
35 | 36 |
37 |

38 |

Praesent porttitor pulvinar nibh, ac euismod nisl feugiat id. Cras consectetur, sapien non egestas pretium, felis magna consequat orci, vitae scelerisque enim dolor eget est.

39 |
40 |
41 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat gravida malesuada. Sed in nunc consectetur, dapibus purus malesuada, pharetra diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam vitae quam tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam dignissim ullamcorper enim et accumsan. In leo mi, euismod id faucibus ut, feugiat vel felis. Nunc dignissim ex est, ut mollis turpis eleifend et. Vivamus bibendum tempor leo nec cursus.

42 |
43 |
44 |

Vivamus fringilla sollicitudin mi, ut gravida ex. Vivamus mattis tincidunt odio, eu accumsan mauris aliquet quis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris tellus dolor, ultrices vel scelerisque non, pretium eget ex. Donec aliquet eget diam id fringilla. Phasellus congue ut augue ut varius. Nunc nec ullamcorper dolor, in feugiat magna. Maecenas scelerisque ex eget nisl dapibus, in laoreet arcu maximus.

45 |
46 |
47 |
48 | 49 |
50 |
51 | skills 52 |
53 |
54 |

55 |
56 |
57 | 58 |

59 |

Vestibulum malesuada congue metus at porttitor. Pellentesque pharetra enim dui. Proin lacinia, odio sed malesuada tempor, dolor diam commodo sem, vel fermentum nisi lacus eu est.

60 |

Integer ultricies vitae urna ut placerat:

61 |
Praesent at hendrerit libero. Ut iaculis, lacus sed varius faucibus.
62 |

Cras vulputate faucibus vulputate:

63 |
    64 |
  • odio sed malesuada tempor
    • 65 |
  • proin lacinia
    • 66 |
  • pellentesque pharetra enim dui
    • 67 |
  • vestibulum malesuada congue metus at porttitor
    • 68 |
69 |
70 |
71 | 72 |

73 |

Praesent porttitor pulvinar nibh, ac euismod nisl feugiat id. Cras consectetur, sapien non egestas pretium, felis magna consequat orci, vitae scelerisque enim dolor eget est.

74 | 75 |

Cras consectetur, sapien non egestas pretium:

76 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dolor lacus, convallis sit amet lacinia sit amet, varius non risus.
77 |

Integer ultricies vitae urna ut placerat:

78 |
    79 |
  • sapien non egestas pretium
    • 80 |
  • cras consectetur
    • 81 |
  • ac euismod nisl feugiat id
    • 82 |
  • praesent porttitor pulvinar nibh
    • 83 |
84 |
85 |
86 | 87 |

88 |

Cras vulputate faucibus vulputate. Integer ultricies vitae urna ut placerat. Fusce ac tempor leo. Nulla odio dui, accumsan id posuere nec, aliquam eget sem.

89 |

Vitae scelerisque enim dolor eget est:

90 |
Praesent ultricies faucibus posuere. Nam commodo auctor mi, et facilisis quam. Nam dolor tortor, tempor ac lacus ut, molestie porttitor ante.
91 |

Cras consectetur, sapien non egestas pretium:

92 |
    93 |
  • nulla odio dui
    • 94 |
  • accumsan id posuere nec
    • 95 |
  • fusce ac tempor leo
    • 96 |
  • integer ultricies vitae urna ut placerat
    • 97 |
98 |
99 |
100 |


101 | 102 | 103 |
104 |
105 | projects 106 |
107 |
108 |
109 |
110 |
111 |
112 | 113 |
114 |
Project 1
115 |
116 |
117 |
118 |
119 |
120 | 121 |
122 |
Project 2
123 |
124 |
125 |
126 |
127 |
128 | 129 |
130 |
Project 3
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 | stay in touch 139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 | 148 | 149 |
150 |
151 | 152 | 153 |
154 |
155 |
156 | 157 | 158 |
159 |
160 | 161 |
162 |

163 |
164 |
165 |

166 |
167 | 168 | 169 | 170 |

171 |
172 |
173 | 174 | 179 | 180 | 181 | 182 | -------------------------------------------------------------------------------- /Portfolio/js/main.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YunaAnn/UIFrontEndProjects/d5accd3a8d8a14f5bcf5e2f6516268c9d4ddbdd0/Portfolio/js/main.js -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # UIFrontEndProjects 2 | 3 | Projects contain my own photos and drawings. 4 | 5 | Done: 6 | 1. Main menu 7 | 2. Portfolio template 8 | 3. Blog template -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | UIFrontEndProjects – YunaAnn 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 |
23 | 24 |
25 | 26 |

UI FrontEnd Projects by YunaAnn

27 |
HTML5, CSS3, JavaScript, Boostrap 4.0, React, Font Awesome
28 |
Repository containing my UI Front-end projects, which can be viewed by using the menu below.
29 | 30 | 31 |
32 | 33 |
34 | 35 |
36 |

*menu*

37 | 54 |
55 |
56 | 57 | 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | body 2 | { 3 | background-color: #272626; 4 | color:#272626; 5 | font-family: 'Courier'; 6 | overflow-x: hidden; 7 | } 8 | 9 | .lead { font-weight: bold; text-transform: uppercase; letter-spacing: .5rem; } 10 | 11 | .container { padding: 2rem 3rem 2rem 3rem; } 12 | 13 | .container:first-child 14 | { 15 | background-color: #e2e2e2; 16 | margin-top: 2rem; 17 | } 18 | 19 | 20 | i { font-size: 2.2rem; padding-right:.5rem;} 21 | 22 | a { color: #3c8e97; } 23 | a:hover { color:#3c8e97 ; text-decoration: none; border-bottom: 6px dotted #3c8e97;} 24 | .menu-item a:hover { border-bottom: none; color:#57a0a8;} 25 | 26 | 27 | /*********MENU********************/ 28 | 29 | nav 30 | { 31 | line-height: 1.4; 32 | background: #333; 33 | padding: 25px 35px; 34 | max-width: 700px; 35 | top: calc(50vh - 200px); 36 | left: calc(50vw - 200px); 37 | position: fixed; 38 | border-radius: 16px; 39 | box-shadow: 0 0 60px -15px #1f1e1ebf; 40 | transform: scale(0) rotate(360deg); 41 | transition: all 0.75s; 42 | font-size: 1.2rem; 43 | } 44 | 45 | .main-menu nav.menu_active 46 | { 47 | transform: scale(1) rotate(0deg); 48 | } 49 | 50 | .main-menu nav > ol > li 51 | { 52 | margin: 20px 0; 53 | color: #f2f2f2; 54 | font-weight: bold; 55 | } 56 | 57 | .main-menu nav > ol > li > ol 58 | { 59 | margin: 10px 0 0 20px; 60 | border-left: 1px solid #4d4d4c; 61 | color: #3c8e97; 62 | } 63 | 64 | .main-menu nav > ol > li > ol > li 65 | { 66 | margin: 7px 0; 67 | padding-left: 20px; 68 | color:#3c8e97; 69 | font-weight: bold; 70 | } 71 | 72 | .main-menu nav a:hover 73 | { 74 | color: rgb(63, 184, 197); 75 | } 76 | 77 | .main-menu h3 78 | { 79 | position: fixed; 80 | font-size: 60px; 81 | color: #f2f2f2; 82 | top: calc(90vh - 40px); 83 | left: calc(50vw - 126px); 84 | cursor: pointer; 85 | transition: all 0.3s; 86 | } 87 | 88 | .main-menu h3:hover 89 | { 90 | border-bottom: 6px dotted #f2f2f2; 91 | padding-bottom: 10px; 92 | top: calc(90vh - 50px); 93 | } 94 | 95 | .main-menu p 96 | { 97 | float: right; 98 | cursor: pointer; 99 | font-size: 16px; 100 | color: #f2f2f2; 101 | transition: all 0.2s; 102 | font-weight: bold; 103 | } 104 | 105 | .main-menu p:hover 106 | { 107 | border-bottom: 2px dotted #f2f2f2; 108 | padding-bottom: 5px; 109 | } 110 | 111 | .main-menu h4 { color: #f2f2f2; font-weight: bold; } 112 | 113 | 114 | /*********LOADER********************/ 115 | #loader 116 | { 117 | position: absolute; 118 | left: 50%; 119 | top: 45%; 120 | z-index: 1; 121 | width: 4.5rem; 122 | height: 4.5rem; 123 | border: 1rem solid #3c8e97; 124 | border-radius: 50%; 125 | border-top: 1rem solid #272626; 126 | -webkit-animation: spin 2s linear infinite; 127 | animation: spin 2s linear infinite; 128 | } 129 | 130 | @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }} 131 | 132 | @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }} 133 | 134 | .animate 135 | { 136 | position: relative; 137 | -webkit-animation-name: animatebottom; 138 | -webkit-animation-duration: 1s; 139 | animation-name: animatebottom; 140 | animation-duration: 1s 141 | } 142 | 143 | @-webkit-keyframes animatebottom { from { bottom:-100px; opacity:0 } to { bottom:0px; opacity:1 }} 144 | 145 | @keyframes animatebottom { from { bottom:-100px; opacity:0 } to { bottom:0; opacity:1 }} 146 | 147 | #page { display: none; } 148 | 149 | /*****************************/ -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | /***LOADING***/ 2 | var time; 3 | 4 | function loading() 5 | { 6 | time = setTimeout(showPage, 2000); 7 | } 8 | 9 | function showPage() 10 | { 11 | document.getElementById("loader").style.display = "none"; 12 | document.getElementById("page").style.display = "block"; 13 | } 14 | 15 | /***MENU***/ 16 | 17 | var i=0; 18 | function expand() 19 | { 20 | if(i==0) 21 | { 22 | document.getElementById("menu").style.transform="scale(3)"; 23 | document.getElementById("open").style.transform="rotate(45deg)"; 24 | i=1; 25 | } 26 | else 27 | { 28 | document.getElementById("menu").style.transform="scale(0)"; 29 | document.getElementById("open").style.transform="rotate(0deg)"; 30 | i=0; 31 | } 32 | } 33 | 34 | function menuActive() 35 | { 36 | document.getElementsByTagName("nav")[0].className = "menu menu_active"; 37 | } 38 | 39 | function menuClose() 40 | { 41 | document.getElementsByTagName("nav")[0].className = "menu"; 42 | } -------------------------------------------------------------------------------- /react.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | UIFrontEndProjects – YunaAnn 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
31 |
React has not rendered yet!
32 |
33 | 34 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | --------------------------------------------------------------------------------