├── .github └── ISSUE_TEMPLATE │ ├── ---bug-report-template.md │ ├── ---question-template.md │ └── ---review-template.md ├── .gitignore ├── .prettierrc ├── .vscode └── settings.json ├── LICENSE ├── README.md ├── css-basic ├── README.md ├── animation │ ├── README.md │ ├── index.html │ ├── style.css │ └── templates │ │ ├── index.html │ │ └── style.css ├── background │ ├── assets │ │ ├── icon-favorite.svg │ │ ├── icon-star.svg │ │ ├── img-house-vertical.jpg │ │ └── img-house.jpg │ ├── index.html │ ├── style.css │ └── templates │ │ ├── assets │ │ ├── icon-favorite.svg │ │ ├── icon-star.svg │ │ ├── img-house-vertical.jpg │ │ └── img-house.jpg │ │ ├── index.html │ │ └── style.css ├── flexbox-1 │ ├── index.html │ ├── style.css │ └── templates │ │ ├── index.html │ │ └── style.css ├── flexbox-2 │ ├── assets │ │ └── user.jpg │ ├── index.html │ ├── style.css │ └── templates │ │ ├── assets │ │ └── user.jpg │ │ ├── index.html │ │ └── style.css ├── flexbox-3 │ ├── assets │ │ └── user.jpg │ ├── index.html │ ├── style.css │ └── templates │ │ ├── assets │ │ └── user.jpg │ │ ├── index.html │ │ └── style.css ├── float-1 │ ├── index.html │ ├── style.css │ └── templates │ │ ├── index.html │ │ └── style.css ├── float-2 │ ├── assets │ │ └── user.jpg │ ├── index.html │ ├── style.css │ └── templates │ │ ├── assets │ │ └── user.jpg │ │ ├── index.html │ │ └── style.css ├── media-query │ ├── assets │ │ └── img-bg.jpg │ ├── index.html │ ├── style.css │ └── templates │ │ ├── assets │ │ └── img-bg.jpg │ │ ├── index.html │ │ └── style.css ├── position-1 │ ├── assets │ │ └── user.jpg │ ├── index.html │ ├── style.css │ └── templates │ │ ├── assets │ │ └── user.jpg │ │ ├── index.html │ │ └── style.css ├── position-2 │ ├── assets │ │ ├── icon-backward.svg │ │ ├── icon-forward.svg │ │ └── img-card.jpg │ ├── index.html │ ├── style.css │ └── templates │ │ ├── assets │ │ ├── icon-backward.svg │ │ ├── icon-forward.svg │ │ └── img-card.jpg │ │ ├── index.html │ │ └── style.css ├── position-3 │ ├── assets │ │ └── icon-close.svg │ ├── index.html │ ├── style.css │ └── templates │ │ ├── assets │ │ └── icon-close.svg │ │ ├── index.html │ │ └── style.css ├── transition │ ├── README.md │ ├── index.html │ ├── style.css │ └── templates │ │ ├── index.html │ │ └── style.css └── typography │ ├── index.html │ ├── style.css │ ├── templates │ ├── index.html │ ├── style.css │ └── typography.css │ └── typography.css ├── css-practice ├── 01-slack-message │ ├── README.md │ ├── assets │ │ └── img-user.jpg │ ├── index.html │ ├── style.css │ └── templates │ │ ├── assets │ │ └── img-user.jpg │ │ ├── index.html │ │ └── style.css ├── 02-dribbble-card │ ├── README.md │ ├── assets │ │ ├── icon-comment-active.svg │ │ ├── icon-comment-muted.svg │ │ ├── icon-favorite-active.svg │ │ ├── icon-favorite-muted.svg │ │ ├── img-user.jpg │ │ └── img-work.jpg │ ├── index.html │ ├── style.css │ └── templates │ │ ├── assets │ │ ├── icon-comment-active.svg │ │ ├── icon-comment-muted.svg │ │ ├── icon-favorite-active.svg │ │ ├── icon-favorite-muted.svg │ │ ├── img-user.jpg │ │ └── img-work.jpg │ │ ├── index.html │ │ └── style.css ├── 03-ecommerce │ ├── README.md │ ├── assets │ │ ├── icon-cart.svg │ │ ├── icon-minus.svg │ │ ├── icon-plus.svg │ │ ├── icon-star-active.svg │ │ ├── icon-star-muted.svg │ │ ├── img-product-1.jpg │ │ ├── img-product-1@2x.jpg │ │ ├── img-product-2.jpg │ │ ├── img-product-2@2x.jpg │ │ ├── img-product-3.jpg │ │ └── img-product-3@2x.jpg │ ├── index.html │ ├── style.css │ └── templates │ │ ├── assets │ │ ├── icon-cart.svg │ │ ├── icon-minus.svg │ │ ├── icon-plus.svg │ │ ├── icon-star-active.svg │ │ ├── icon-star-muted.svg │ │ ├── img-product-1.jpg │ │ ├── img-product-1@2x.jpg │ │ ├── img-product-2.jpg │ │ ├── img-product-2@2x.jpg │ │ ├── img-product-3.jpg │ │ └── img-product-3@2x.jpg │ │ ├── index.html │ │ └── style.css └── final │ ├── assets │ ├── img-curriculum.png │ ├── img-fulltime-campus.png │ ├── img-fulltime-remote.png │ ├── img-parttime-flex.png │ └── img-subscription.png │ ├── grid.min.css │ ├── index.html │ └── style.css ├── html-basic ├── 00-html-structure │ └── index.html ├── 01-headings-and-paragraph │ ├── practice-1.html │ ├── practice-2.html │ └── styles.css ├── 16-table-1 │ ├── index.html │ └── styles.css ├── 21-title-link-style-script │ ├── app.js │ ├── assets │ │ └── audios │ │ │ └── pop.wav │ ├── index.html │ └── styles.css └── 22-meta │ ├── app.js │ ├── assets │ └── audios │ │ └── pop.wav │ ├── index.html │ └── styles.css ├── html-practice ├── 01-ad-banner │ ├── README.md │ ├── index.html │ └── styles.css ├── 02-google-search-result-item │ ├── README.md │ ├── index.html │ └── styles.css ├── 03-feature-box │ ├── README.md │ ├── index.html │ └── styles.css ├── 03-modal │ ├── README.md │ ├── app.js │ ├── assets │ │ └── icon-close.svg │ ├── index.html │ └── styles.css ├── 04-logo-in-header │ ├── README.md │ ├── index.html │ └── styles.css ├── 05-breadcrumb-and-pagination │ ├── README.md │ ├── assets │ │ └── icon-repository.svg │ ├── index.html │ └── styles.css ├── 06-product-card │ ├── README.md │ ├── index.html │ └── styles.css ├── 07-instagram-user-profile │ ├── README.md │ ├── index.html │ └── styles.css ├── 08-receipt │ ├── README.md │ ├── assets │ │ ├── barcode.svg │ │ └── logo-mcdonalds.png │ ├── index.html │ └── styles.css ├── 09-github-dropdown-menu │ ├── README.md │ ├── app.js │ ├── index.html │ └── styles.css ├── 10-input-group │ ├── README.md │ ├── index.html │ └── styles.css ├── 11-feed │ ├── README.md │ ├── app.js │ ├── index.html │ └── styles.css ├── 12-gmail-inbox │ ├── README.md │ ├── app.js │ ├── assets │ │ ├── icon-checkbox-checked.svg │ │ ├── icon-checkbox-outlined.svg │ │ ├── icon-star-border.svg │ │ └── icon-star.svg │ ├── index.html │ └── styles.css ├── 13-music-player │ ├── README.md │ ├── app.js │ ├── assets │ │ ├── music-1.mp3 │ │ └── music-2.mp3 │ ├── index.html │ └── styles.css └── 14-video-player │ ├── README.md │ ├── assets │ ├── kimbug-bjj.mov │ └── kimbug-bjj.mp4 │ ├── index.html │ └── styles.css └── twitter-markup-challenge ├── 01-header.html ├── 02-global-navigation.html ├── 03-main.html ├── 04-tweet-form.html ├── 05-timeline.html ├── 06-tweet.html ├── 07-worldwide-trends.html ├── 08-footer.html └── index.html /.github/ISSUE_TEMPLATE/---bug-report-template.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "\U0001F693 Bug Report Template" 3 | about: 강의 오류 리포트 템플릿 4 | title: 버그 제목 (ex. 이 부분은 잘못된 내용 아닌가용?) 5 | labels: "\U0001F41BBUG" 6 | assignees: rohjs 7 | 8 | --- 9 | 10 | ## Bug Report 11 | 12 | 👉 강의 내용 중 발견하신 오류를 남겨주세요 13 | 14 | ## Related Contents 15 | 16 | 👉 관련 강의 제목과 Timestamp를 알려주세요 (ex. 제목과 문단 Headings & Paragraph, 01:03-01:30) 17 | 18 | ## Screenshots (optional) 19 | 20 | 👉 참고할 스크린샷이 있다면 함께 남겨주세요 21 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/---question-template.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "\U0001F6A8 Question Template" 3 | about: 질문용 이슈 템플릿 4 | title: 질문 제목 (ex. em과 strong의 차이를 잘 모르겠어요!) 5 | labels: "\U0001F423Question" 6 | assignees: rohjs 7 | 8 | --- 9 | 10 | ## Question 11 | 12 | 👉 이곳에 질문을 남겨주세요 13 | 14 | ## Related Contents 15 | 16 | 👉 질문의 내용과 관련된 강의 제목을 알려주세요 (ex. 제목과 문단 Headings & Paragraph) 17 | 18 | ## Screenshots (optional) 19 | 20 | 👉 참고할 스크린샷이 있다면 함께 남겨주세요 21 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/---review-template.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "✍️ Review Template" 3 | about: 강의 후기 템플릿 4 | title: 리뷰 제목 (ex. 김버그님~ 강의 후기 남깁니다) 5 | labels: "✍️Review" 6 | assignees: '' 7 | 8 | --- 9 | 10 | ## Review 11 | 12 | 👉 솔...직한 리뷰를 남겨주세요 (두려움이 몰려오는.) 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .DS_Store -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": false, 4 | "endOfLine": "lf", 5 | "htmlWhitespaceSensitivity": "css", 6 | "useTabs": false, 7 | "tabWidth": 2, 8 | "printWidth": 120 9 | } 10 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Roh Woohyeon 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Cover Image](https://user-images.githubusercontent.com/19285811/69313493-a86df080-0c6c-11ea-9bdd-bf6572372947.png) 2 | -------------------------------------------------------------------------------- /css-basic/README.md: -------------------------------------------------------------------------------- 1 | # CSS Basic 2 | 3 | ## 1. 디자인 시안 4 | 5 | ![image](https://user-images.githubusercontent.com/19285811/76139894-43fa6400-6098-11ea-9961-dead30692844.png) 6 | 7 | 실습 때 함께 만들 디자인 시안은 [Figma](https://www.figma.com/file/k6aekBk53MUKUwVqRHsSVx/Bugless-CSS?node-id=0%3A1)에서 확인 가능합니다. 8 | 9 | ## 2. Templates 파일 10 | 11 | ![image](https://user-images.githubusercontent.com/19285811/76139900-612f3280-6098-11ea-9deb-9475202f1943.png) 12 | 13 | [Bugless-101 repository](https://github.com/rohjs/bugless-101/)에 실습에 필요한 templates를 제공합니다. 14 | [css-basic](https://github.com/rohjs/bugless-101/tree/master/css-basic) 디렉토리에서 각 실습 파트 별로 제공되는 templates 파일을 미리 준비해 주세요. 15 | 16 | CSS 강의에서는 HTML 마크업을 다루지 않기 때문에 마크업 된 HTML 파일을 제공합니다. 17 | 18 | ## 3. 미리 연습해보세요! 19 | 20 | 실습 강의를 수강하기 전에 여러분들이 직접 코드를 작성해 보세요! 21 | 그냥 실습 강의를 듣는 것보다 코드를 혼자 작성을 해보고 강의를 듣는 것이 훨씬 더 큰 도움이 될 거예요. 22 | 앞서 준비한 templates 코드를 바탕으로 연습하시는 것을 추천드립니다. 23 | 24 | ### ✨ CSS 초보자를 위한 꿀팁 25 | 26 | 막상 해보려고 하니 어디서부터 시작해야 할지 몰라서 난감하신 분들을 위해 팁을 드리자면, 27 | 28 | - 노트를 준비한다 29 | - 현재 상태와 만들어야 할 디자인 시안을 비교한다 30 | - 현 상태와 디자인 시안의 차이점을 찾아 체크 리스트로 작성한다 31 | - 작성한 체크 리스트를 하나하나 해결한다 32 | -------------------------------------------------------------------------------- /css-basic/animation/README.md: -------------------------------------------------------------------------------- 1 | ## Animation 2 | 3 | ![Animation](https://user-images.githubusercontent.com/19285811/78890865-615c8c80-7aa1-11ea-9296-dacddb88d586.gif) 4 | -------------------------------------------------------------------------------- /css-basic/animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Animation 7 | 8 | 9 | 10 | 11 |
12 |

Loading...

13 | 16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /css-basic/animation/style.css: -------------------------------------------------------------------------------- 1 | /* ▼ WHERE YOUR CODE BEGINS */ 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | } 7 | 8 | body { 9 | font-family: "Muli", sans-serif; 10 | } 11 | 12 | .loading { 13 | display: flex; 14 | flex-direction: column; 15 | justify-content: center; 16 | align-items: center; 17 | width: 500px; 18 | height: 216px; 19 | } 20 | 21 | .loading-title { 22 | margin-bottom: 20px; 23 | font-size: 18px; 24 | font-weight: 400; 25 | line-height: 1.3333333333; 26 | color: #151b26; 27 | text-align: center; 28 | animation-name: flicker; 29 | animation-duration: 1600ms; 30 | animation-iteration-count: infinite; 31 | animation-direction: alternate; 32 | } 33 | 34 | .progress-bar { 35 | position: relative; 36 | width: 300px; 37 | height: 12px; 38 | border-radius: 100px; 39 | background-color: #e5eaef; 40 | overflow: hidden; 41 | } 42 | 43 | .progress-bar-gauge { 44 | position: absolute; 45 | top: 0; 46 | left: 0; 47 | width: 0; 48 | height: 12px; 49 | border-radius: 100px; 50 | background-color: #13ce66; 51 | animation-name: loading-bar; 52 | animation-duration: 1600ms; 53 | animation-iteration-count: infinite; 54 | animation-timing-function: ease-out; 55 | } 56 | 57 | @keyframes flicker { 58 | from { 59 | opacity: 1; 60 | } 61 | 62 | to { 63 | opacity: 0; 64 | } 65 | } 66 | 67 | @keyframes loading-bar { 68 | 0% { 69 | width: 0; 70 | opacity: 1; 71 | } 72 | 73 | 80% { 74 | width: 100%; 75 | opacity: 1; 76 | } 77 | 78 | 100% { 79 | width: 100%; 80 | opacity: 0; 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /css-basic/animation/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Animation 7 | 8 | 9 | 10 |
11 |

Loading...

12 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /css-basic/animation/templates/style.css: -------------------------------------------------------------------------------- 1 | /* ▼ WHERE YOUR CODE BEGINS */ 2 | -------------------------------------------------------------------------------- /css-basic/background/assets/icon-favorite.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css-basic/background/assets/icon-star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css-basic/background/assets/img-house-vertical.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-basic/background/assets/img-house-vertical.jpg -------------------------------------------------------------------------------- /css-basic/background/assets/img-house.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-basic/background/assets/img-house.jpg -------------------------------------------------------------------------------- /css-basic/background/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Background 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 |
16 | 17 |
18 |
19 |
20 | Plus 21 | Entire apartment 22 |
23 | 24 |
25 | 26 | 4.97 27 | 28 | (203) 29 |
30 |
31 | 32 |

33 | Unwind in a Bright Space with Rustic Accents 34 |

35 | 36 |
37 |
38 |
39 |
Rooms and beds
40 |
41 | 2 guests 42 | 1 bedroom 43 | 1 bed 44 | 1 bath 45 |
46 |
47 | 48 |
49 |
Amenities
50 |
51 | Wifi 52 | Kitchen 53 |
54 |
55 |
56 |
57 |
58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /css-basic/background/style.css: -------------------------------------------------------------------------------- 1 | .like-button { 2 | box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 3 | } 4 | 5 | /* ▼ WHERE YOUR CODE BEGINS */ 6 | 7 | * { 8 | box-sizing: border-box; 9 | margin: 0; 10 | } 11 | 12 | body { 13 | font-family: "Poppins", sans-serif; 14 | } 15 | 16 | button { 17 | border: none; 18 | } 19 | 20 | .sr-only { 21 | position: absolute; 22 | z-index: -1; 23 | width: 1px; 24 | height: 1px; 25 | overflow: hidden; 26 | visibility: hidden; 27 | } 28 | 29 | .card { 30 | display: flex; 31 | width: 840px; 32 | padding: 24px; 33 | background-color: #fff; 34 | } 35 | 36 | .card-image { 37 | position: relative; 38 | width: 300px; 39 | height: 200px; 40 | border-radius: 6px; 41 | margin-right: 24px; 42 | background-image: url(./assets/img-house.jpg); 43 | background-position: center center; 44 | background-repeat: no-repeat; 45 | background-size: cover; 46 | } 47 | 48 | .like-button { 49 | position: absolute; 50 | top: 12px; 51 | left: 12px; 52 | width: 36px; 53 | height: 36px; 54 | border-radius: 50%; 55 | background-color: #fff; 56 | background-image: url(./assets/icon-favorite.svg); 57 | background-size: 24px 24px; 58 | background-repeat: no-repeat; 59 | background-position: center center; 60 | cursor: pointer; 61 | } 62 | 63 | .card-content { 64 | flex-grow: 1; 65 | } 66 | 67 | .card-header { 68 | display: flex; 69 | justify-content: space-between; 70 | align-items: center; 71 | margin-bottom: 8px; 72 | } 73 | 74 | .plus-badge { 75 | display: inline-block; 76 | padding: 1px 8px; 77 | border-radius: 4px; 78 | margin-right: 8px; 79 | font-size: 14px; 80 | line-height: 1.4285714286; 81 | color: #fff; 82 | text-transform: uppercase; 83 | background-color: #92174d; 84 | } 85 | 86 | .property-type span { 87 | font-size: 16px; 88 | line-height: 1.25; 89 | color: #7d858f; 90 | } 91 | 92 | .property-rate { 93 | display: flex; 94 | justify-content: flex-end; 95 | align-items: center; 96 | } 97 | 98 | .property-rate::before { 99 | content: ""; 100 | display: block; 101 | width: 16px; 102 | height: 16px; 103 | margin-right: 4px; 104 | background-image: url(./assets/icon-star.svg); 105 | background-size: contain; 106 | background-repeat: no-repeat; 107 | background-position: center center; 108 | } 109 | 110 | .property-rate { 111 | font-size: 16px; 112 | line-height: 1.25; 113 | color: #7d858f; 114 | } 115 | 116 | .property-rate strong { 117 | margin-right: 2px; 118 | font-weight: 400; 119 | color: #151b26; 120 | } 121 | 122 | .card-title { 123 | margin-bottom: 16px; 124 | font-size: 20px; 125 | font-weight: 400; 126 | line-height: 1.6; 127 | color: #151b26; 128 | } 129 | 130 | .property-detail { 131 | font-size: 14px; 132 | line-height: 1.1428571429; 133 | color: #7d858f; 134 | } 135 | 136 | .property-detail div:first-child { 137 | margin-bottom: 8px; 138 | } 139 | 140 | .property-detail dd span::after { 141 | content: "·"; 142 | margin: 0 6px; 143 | } 144 | 145 | .property-detail dd span:last-child::after { 146 | content: ""; 147 | margin: 0; 148 | } 149 | -------------------------------------------------------------------------------- /css-basic/background/templates/assets/icon-favorite.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css-basic/background/templates/assets/icon-star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css-basic/background/templates/assets/img-house-vertical.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-basic/background/templates/assets/img-house-vertical.jpg -------------------------------------------------------------------------------- /css-basic/background/templates/assets/img-house.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-basic/background/templates/assets/img-house.jpg -------------------------------------------------------------------------------- /css-basic/background/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Background 7 | 8 | 9 | 10 |
11 |
12 | 13 | 14 | 15 |
16 | 17 |
18 |
19 |
20 | Plus 21 | Entire apartment 22 |
23 | 24 |
25 | 26 | 4.97 27 | 28 | (203) 29 |
30 |
31 | 32 |

33 | Unwind in a Bright Space with Rustic Accents 34 |

35 | 36 |
37 |
38 |
39 |
Rooms and beds
40 |
41 | 2 guests 42 | 1 bedroom 43 | 1 bed 44 | 1 bath 45 |
46 |
47 | 48 |
49 |
Amenities
50 |
51 | Wifi 52 | Kitchen 53 |
54 |
55 |
56 |
57 |
58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /css-basic/background/templates/style.css: -------------------------------------------------------------------------------- 1 | .like-button { 2 | box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 3 | } 4 | 5 | /* ▼ WHERE YOUR CODE BEGINS */ 6 | -------------------------------------------------------------------------------- /css-basic/flexbox-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flexbox 1 7 | 8 | 9 | 10 | 11 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /css-basic/flexbox-1/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | font-family: "Roboto", sans-serif; 8 | letter-spacing: -0.02em; 9 | } 10 | 11 | a { 12 | font-size: 18px; 13 | line-height: 20px; 14 | color: #8492a6; 15 | text-decoration: none; 16 | } 17 | 18 | .tab-menu { 19 | padding-left: 0; 20 | border-bottom: 1px solid #e5eaef; 21 | list-style-type: none; 22 | } 23 | 24 | .tab-menu-item { 25 | margin-right: 16px; 26 | } 27 | 28 | .tab-menu-item.active { 29 | border-bottom: 2px solid #2860e1; 30 | } 31 | 32 | .tab-menu-item.active a { 33 | font-weight: 500; 34 | color: #2860e1; 35 | } 36 | 37 | .tab-menu-item:last-child { 38 | margin-right: 0; 39 | } 40 | 41 | .tab-menu-item a { 42 | display: block; 43 | padding: 16px 20px; 44 | } 45 | 46 | /* ▼ WHERE YOUR CODE BEGINS */ 47 | 48 | .tab-menu { 49 | display: flex; 50 | flex-direction: row; 51 | flex-wrap: nowrap; 52 | justify-content: flex-start; 53 | align-items: center; 54 | } 55 | -------------------------------------------------------------------------------- /css-basic/flexbox-1/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flexbox 1 7 | 8 | 9 | 10 | 11 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /css-basic/flexbox-1/templates/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | font-family: "Roboto", sans-serif; 8 | letter-spacing: -0.02em; 9 | } 10 | 11 | a { 12 | font-size: 18px; 13 | line-height: 20px; 14 | color: #8492a6; 15 | text-decoration: none; 16 | } 17 | 18 | .tab-menu { 19 | padding-left: 0; 20 | border-bottom: 1px solid #e5eaef; 21 | list-style-type: none; 22 | } 23 | 24 | .tab-menu::after { 25 | content: ""; 26 | display: block; 27 | clear: both; 28 | } 29 | 30 | .tab-menu-item { 31 | float: left; 32 | margin-right: 16px; 33 | } 34 | 35 | .tab-menu-item.active { 36 | border-bottom: 2px solid #2860e1; 37 | } 38 | 39 | .tab-menu-item.active a { 40 | font-weight: 500; 41 | color: #2860e1; 42 | } 43 | 44 | .tab-menu-item:last-child { 45 | margin-right: 0; 46 | } 47 | 48 | .tab-menu-item a { 49 | display: block; 50 | padding: 16px 20px; 51 | } 52 | 53 | /* ▼ WHERE YOUR CODE BEGINS */ 54 | -------------------------------------------------------------------------------- /css-basic/flexbox-2/assets/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-basic/flexbox-2/assets/user.jpg -------------------------------------------------------------------------------- /css-basic/flexbox-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flexbox 2 7 | 8 | 9 | 10 | 11 |
12 | Customer support 13 |
14 |

RE: 안녕하세요 배송 관련 문의드립니다

15 | 16 | customer support 17 | 18 |

19 | 안녕하세요 우현님. 문의 드린 사항에 대d한 답변드립니다. 지난 12... 20 |

21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /css-basic/flexbox-2/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | font-family: "Noto Sans KR", sans-serif; 8 | letter-spacing: -0.02em; 9 | } 10 | 11 | h1 { 12 | font-size: 16px; 13 | font-weight: 400; 14 | color: #1f2d3d; 15 | line-height: 1.25; 16 | } 17 | 18 | strong { 19 | font-size: 14px; 20 | font-weight: 400; 21 | color: #afb3b9; 22 | line-height: 1.4285714286; 23 | } 24 | 25 | p { 26 | font-size: 16px; 27 | color: #79818b; 28 | line-height: 1.5; 29 | } 30 | 31 | .card { 32 | padding: 20px; 33 | background-color: #fff; 34 | } 35 | 36 | .card-user { 37 | width: 44px; 38 | height: 44px; 39 | border-radius: 50%; 40 | margin-right: 20px; 41 | } 42 | 43 | .card-content h1 { 44 | margin-bottom: 4px; 45 | } 46 | 47 | .card-content strong { 48 | display: block; 49 | margin-bottom: 12px; 50 | } 51 | 52 | /* ▼ WHERE YOUR CODE BEGINS */ 53 | 54 | .card { 55 | display: flex; 56 | flex-direction: row; 57 | flex-wrap: nowrap; 58 | justify-content: flex-start; 59 | align-items: flex-start; 60 | } 61 | -------------------------------------------------------------------------------- /css-basic/flexbox-2/templates/assets/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-basic/flexbox-2/templates/assets/user.jpg -------------------------------------------------------------------------------- /css-basic/flexbox-2/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flexbox 2 7 | 8 | 9 | 10 | 11 |
12 | Customer support 13 |
14 |

RE: 안녕하세요 배송 관련 문의드립니다

15 | 16 | customer support 17 | 18 |

19 | 안녕하세요 우현님. 문의 드린 사항에 대한 답변드립니다. 지난 12... 20 |

21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /css-basic/flexbox-2/templates/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | font-family: "Noto Sans KR", sans-serif; 8 | letter-spacing: -0.02em; 9 | } 10 | 11 | h1 { 12 | font-size: 16px; 13 | font-weight: 400; 14 | color: #1f2d3d; 15 | line-height: 1.25; 16 | } 17 | 18 | strong { 19 | font-size: 14px; 20 | font-weight: 400; 21 | color: #afb3b9; 22 | line-height: 1.4285714286; 23 | } 24 | 25 | p { 26 | font-size: 16px; 27 | color: #79818b; 28 | line-height: 1.5; 29 | } 30 | 31 | .card { 32 | padding: 20px; 33 | background-color: #fff; 34 | } 35 | 36 | .card::after { 37 | content: ""; 38 | display: block; 39 | clear: left; 40 | } 41 | 42 | .card-user { 43 | float: left; 44 | width: 44px; 45 | height: 44px; 46 | border-radius: 50%; 47 | margin-right: 20px; 48 | } 49 | 50 | .card-content { 51 | float: left; 52 | } 53 | 54 | .card-content h1 { 55 | margin-bottom: 4px; 56 | } 57 | 58 | .card-content strong { 59 | display: block; 60 | margin-bottom: 12px; 61 | } 62 | 63 | /* ▼ WHERE YOUR CODE BEGINS */ 64 | -------------------------------------------------------------------------------- /css-basic/flexbox-3/assets/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-basic/flexbox-3/assets/user.jpg -------------------------------------------------------------------------------- /css-basic/flexbox-3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flexbox 3 7 | 8 | 9 | 10 | 11 |
12 | Noah Madsen 13 |

Noah Madsen

14 |

Copenhagen, Denmark

15 | 16 |
17 |
18 |
Friends
19 |
730
20 |
21 |
22 |
Projects
23 |
3
24 |
25 |
26 |
Reviews
27 |
243
28 |
29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /css-basic/flexbox-3/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | font-family: "Muli", sans-serif; 8 | color: #273444; 9 | } 10 | 11 | .profile-name { 12 | font-size: 18px; 13 | font-weight: 600; 14 | line-height: 1.3333333333; 15 | } 16 | 17 | .profile-location { 18 | font-size: 14px; 19 | line-height: 1.4285714286; 20 | color: #8492a6; 21 | } 22 | 23 | .profile-detail dt { 24 | font-size: 12px; 25 | font-weight: 600; 26 | line-height: 1.6666666667; 27 | color: #8492a6; 28 | } 29 | 30 | .profile-detail dd { 31 | font-size: 32px; 32 | font-weight: 300; 33 | line-height: 1.25; 34 | color: #0066ff; 35 | } 36 | 37 | /* ▼ WHERE YOUR CODE BEGINS */ 38 | 39 | body { 40 | display: flex; 41 | flex-direction: row; 42 | flex-wrap: nowrap; 43 | justify-content: center; 44 | align-items: center; 45 | width: 100%; 46 | height: 100vh; 47 | background-color: #000; 48 | } 49 | 50 | .profile { 51 | display: flex; 52 | flex-direction: column; 53 | align-items: center; 54 | width: 386px; 55 | padding: 32px 40px; 56 | border-radius: 16px; 57 | text-align: center; 58 | background-color: #fff; 59 | } 60 | 61 | .profile-image { 62 | display: block; 63 | width: 80px; 64 | height: 80px; 65 | border-radius: 50%; 66 | margin-bottom: 16px; 67 | } 68 | 69 | .profile-name { 70 | margin-bottom: 4px; 71 | } 72 | 73 | .profile-location { 74 | margin-bottom: 32px; 75 | } 76 | 77 | .profile-detail { 78 | display: flex; 79 | flex-direction: row; 80 | flex-wrap: nowrap; 81 | justify-content: space-between; 82 | align-items: center; 83 | width: 100%; 84 | } 85 | 86 | .profile-detail dt { 87 | margin-bottom: 4px; 88 | } 89 | -------------------------------------------------------------------------------- /css-basic/flexbox-3/templates/assets/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-basic/flexbox-3/templates/assets/user.jpg -------------------------------------------------------------------------------- /css-basic/flexbox-3/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flexbox 3 7 | 8 | 9 | 10 | 11 |
12 | Noah Madsen 13 |

Noah Madsen

14 |

Copenhagen, Denmark

15 | 16 |
17 |
18 |
Friends
19 |
730
20 |
21 |
22 |
Projects
23 |
3
24 |
25 |
26 |
Reviews
27 |
243
28 |
29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /css-basic/flexbox-3/templates/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | font-family: "Muli", sans-serif; 8 | color: #273444; 9 | } 10 | 11 | .profile-name { 12 | font-size: 18px; 13 | font-weight: 600; 14 | line-height: 1.3333333333; 15 | } 16 | 17 | .profile-location { 18 | font-size: 14px; 19 | line-height: 1.4285714286; 20 | color: #8492a6; 21 | } 22 | 23 | .profile-detail dt { 24 | font-size: 12px; 25 | font-weight: 600; 26 | line-height: 1.6666666667; 27 | color: #8492a6; 28 | } 29 | 30 | .profile-detail dd { 31 | font-size: 32px; 32 | font-weight: 300; 33 | line-height: 1.25; 34 | color: #0066ff; 35 | } 36 | 37 | /* ▼ WHERE YOUR CODE BEGINS */ 38 | -------------------------------------------------------------------------------- /css-basic/float-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Float 1 7 | 8 | 9 | 10 | 11 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /css-basic/float-1/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | font-family: "Roboto", sans-serif; 8 | letter-spacing: -0.02em; 9 | } 10 | 11 | a { 12 | font-size: 18px; 13 | line-height: 20px; 14 | color: #8492a6; 15 | text-decoration: none; 16 | } 17 | 18 | /* ▼ WHERE YOUR CODE BEGINS */ 19 | 20 | .tab-menu { 21 | padding-left: 0; 22 | border-bottom: 1px solid #e5eaef; 23 | list-style-type: none; 24 | } 25 | 26 | .tab-menu::after { 27 | content: ""; 28 | display: block; 29 | clear: both; 30 | } 31 | 32 | .tab-menu-item { 33 | float: left; 34 | margin-right: 16px; 35 | } 36 | 37 | .tab-menu-item.active { 38 | border-bottom: 2px solid #2860e1; 39 | } 40 | 41 | .tab-menu-item.active a { 42 | font-weight: 500; 43 | color: #2860e1; 44 | } 45 | 46 | .tab-menu-item:last-child { 47 | margin-right: 0; 48 | } 49 | 50 | .tab-menu-item a { 51 | display: block; 52 | padding: 16px 20px; 53 | } 54 | -------------------------------------------------------------------------------- /css-basic/float-1/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Float 1 7 | 8 | 9 | 10 | 11 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /css-basic/float-1/templates/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | font-family: "Roboto", sans-serif; 8 | letter-spacing: -0.02em; 9 | } 10 | 11 | a { 12 | font-size: 18px; 13 | line-height: 20px; 14 | color: #8492a6; 15 | text-decoration: none; 16 | } 17 | 18 | /* ▼ WHERE YOUR CODE BEGINS */ 19 | -------------------------------------------------------------------------------- /css-basic/float-2/assets/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-basic/float-2/assets/user.jpg -------------------------------------------------------------------------------- /css-basic/float-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Float 2 7 | 8 | 9 | 10 | 11 |
12 | Customer support 13 |
14 |

RE: 안녕하세요 배송 관련 문의드립니다

15 | 16 | customer support 17 | 18 |

19 | 안녕하세요 우현님. 문의 드린 사항에 대한 답변드립니다. 지난 12... 20 |

21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /css-basic/float-2/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | font-family: "Noto Sans KR", sans-serif; 8 | letter-spacing: -0.02em; 9 | } 10 | 11 | h1 { 12 | font-size: 16px; 13 | font-weight: 400; 14 | color: #1f2d3d; 15 | line-height: 1.25; 16 | } 17 | 18 | strong { 19 | font-size: 14px; 20 | font-weight: 400; 21 | color: #afb3b9; 22 | line-height: 1.4285714286; 23 | } 24 | 25 | p { 26 | font-size: 16px; 27 | color: #79818b; 28 | line-height: 1.5; 29 | } 30 | 31 | /* ▼ WHERE YOUR CODE BEGINS */ 32 | 33 | .card { 34 | padding: 20px; 35 | background-color: #fff; 36 | } 37 | 38 | .card::after { 39 | content: ""; 40 | display: block; 41 | clear: left; 42 | } 43 | 44 | .card-user { 45 | float: left; 46 | width: 44px; 47 | height: 44px; 48 | border-radius: 50%; 49 | margin-right: 20px; 50 | } 51 | 52 | .card-content { 53 | float: left; 54 | } 55 | 56 | .card-content h1 { 57 | margin-bottom: 4px; 58 | } 59 | 60 | .card-content strong { 61 | display: block; 62 | margin-bottom: 12px; 63 | } 64 | -------------------------------------------------------------------------------- /css-basic/float-2/templates/assets/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-basic/float-2/templates/assets/user.jpg -------------------------------------------------------------------------------- /css-basic/float-2/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Float 2 7 | 8 | 9 | 10 | 11 |
12 | Customer support 13 |
14 |

RE: 안녕하세요 배송 관련 문의드립니다

15 | 16 | customer support 17 | 18 |

19 | 안녕하세요 우현님. 문의 드린 사항에 대한 답변드립니다. 지난 12... 20 |

21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /css-basic/float-2/templates/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | font-family: "Noto Sans KR", sans-serif; 8 | letter-spacing: -0.02em; 9 | } 10 | 11 | h1 { 12 | font-size: 16px; 13 | font-weight: 400; 14 | color: #1f2d3d; 15 | line-height: 1.25; 16 | } 17 | 18 | strong { 19 | font-size: 14px; 20 | font-weight: 400; 21 | color: #afb3b9; 22 | line-height: 1.4285714286; 23 | } 24 | 25 | p { 26 | font-size: 16px; 27 | color: #79818b; 28 | line-height: 1.5; 29 | } 30 | 31 | /* ▼ WHERE YOUR CODE BEGINS */ 32 | -------------------------------------------------------------------------------- /css-basic/media-query/assets/img-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-basic/media-query/assets/img-bg.jpg -------------------------------------------------------------------------------- /css-basic/media-query/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Media Query 7 | 11 | 12 | 13 | 14 | 21 | 22 |
23 |

24 | Eat, pray, work 25 | 김버그의
26 | 디지털노마드 민박
27 | #치앙마이
28 | #8월예약오픈 29 |

30 | 31 | 민박 둘러보기 32 | 33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /css-basic/media-query/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | font-family: "Noto Sans KR", sans-serif; 8 | letter-spacing: -0.01em; 9 | } 10 | 11 | a { 12 | text-decoration: none; 13 | } 14 | 15 | .landing { 16 | background-image: url("./assets/img-bg.jpg"); 17 | background-size: cover; 18 | background-position: center center; 19 | background-repeat: no-repeat; 20 | } 21 | 22 | .landing-title { 23 | line-height: 1.25; 24 | letter-spacing: -0.03em; 25 | color: #fff; 26 | } 27 | 28 | .landing-title strong { 29 | display: block; 30 | font-family: "Poppins", sans-serif; 31 | letter-spacing: -0.01em; 32 | } 33 | 34 | .landing-link { 35 | line-height: 1; 36 | color: #fff; 37 | } 38 | 39 | .banner-title a { 40 | color: #1f2d3d; 41 | } 42 | 43 | /* ▼ WHERE YOUR CODE BEGINS */ 44 | 45 | .banner { 46 | position: fixed; 47 | bottom: 0; 48 | left: 0; 49 | width: 100%; 50 | background-color: #ffc82c; 51 | } 52 | 53 | .banner-title a { 54 | display: flex; 55 | flex-direction: row; 56 | flex-wrap: nowrap; 57 | justify-content: center; 58 | align-items: center; 59 | width: 100%; 60 | height: 64px; 61 | font-size: 15px; 62 | } 63 | 64 | .landing { 65 | display: flex; 66 | flex-direction: column; 67 | flex-wrap: nowrap; 68 | justify-content: center; 69 | align-items: flex-end; 70 | width: 100%; 71 | height: 100vh; 72 | padding: 0 20px; 73 | } 74 | 75 | .landing-title { 76 | margin-bottom: 24px; 77 | font-size: 32px; 78 | text-align: right; 79 | } 80 | 81 | .landing-link { 82 | display: flex; 83 | justify-content: center; 84 | align-items: center; 85 | border: 2px solid #fff; 86 | border-radius: 16px; 87 | font-size: 15px; 88 | width: 160px; 89 | height: 52px; 90 | background-color: rgba(0, 0, 0, 0.5); 91 | } 92 | 93 | @media screen and (min-width: 768px) { 94 | .banner { 95 | top: 0; 96 | bottom: auto; 97 | } 98 | 99 | .banner-title a { 100 | height: 80px; 101 | font-size: 18px; 102 | } 103 | 104 | .landing { 105 | align-items: center; 106 | } 107 | 108 | .landing-title { 109 | margin-bottom: 32px; 110 | font-size: 32px; 111 | text-align: center; 112 | } 113 | 114 | .landing-link { 115 | width: 180px; 116 | height: 56px; 117 | font-size: 18px; 118 | } 119 | } 120 | -------------------------------------------------------------------------------- /css-basic/media-query/templates/assets/img-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-basic/media-query/templates/assets/img-bg.jpg -------------------------------------------------------------------------------- /css-basic/media-query/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Media Query 7 | 11 | 12 | 13 | 14 | 21 | 22 |
23 |

24 | Eat, pray, work 25 | 김버그의
26 | 디지털노마드 민박
27 | #치앙마이
28 | #8월예약오픈 29 |

30 | 31 | 민박 둘러보기 32 | 33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /css-basic/media-query/templates/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | font-family: "Noto Sans KR", sans-serif; 8 | letter-spacing: -0.01em; 9 | } 10 | 11 | a { 12 | text-decoration: none; 13 | } 14 | 15 | .landing { 16 | background-image: url("./assets/img-bg.jpg"); 17 | background-size: cover; 18 | background-position: center center; 19 | background-repeat: no-repeat; 20 | } 21 | 22 | .landing-title { 23 | line-height: 1.25; 24 | letter-spacing: -0.03em; 25 | color: #fff; 26 | } 27 | 28 | .landing-title strong { 29 | display: block; 30 | font-family: "Poppins", sans-serif; 31 | letter-spacing: -0.01em; 32 | } 33 | 34 | .landing-link { 35 | line-height: 1; 36 | color: #fff; 37 | } 38 | 39 | .banner-title a { 40 | color: #1f2d3d; 41 | } 42 | 43 | /* ▼ WHERE YOUR CODE BEGINS */ 44 | -------------------------------------------------------------------------------- /css-basic/position-1/assets/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-basic/position-1/assets/user.jpg -------------------------------------------------------------------------------- /css-basic/position-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Position 1 7 | 8 | 9 | 10 | 11 |
12 |
13 | Kimbug 14 | 15 |
16 |

17 | Kimbug 18 |

19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /css-basic/position-1/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | font-family: "Lato", sans-serif; 8 | } 9 | 10 | h1 { 11 | font-size: 16px; 12 | font-weight: 400; 13 | line-height: 1.5; 14 | color: #273444; 15 | } 16 | 17 | /* ▼ WHERE YOUR CODE BEGINS */ 18 | 19 | .user-card { 20 | max-width: 240px; 21 | padding: 8px 12px; 22 | border: 1px solid #e5eaef; 23 | border-radius: 4px; 24 | } 25 | 26 | .user-card::after { 27 | content: ""; 28 | display: block; 29 | clear: left; 30 | } 31 | 32 | .user-photo { 33 | float: left; 34 | position: relative; 35 | width: 40px; 36 | height: 40px; 37 | margin-right: 12px; 38 | } 39 | 40 | .user-photo img { 41 | width: 100%; 42 | height: auto; 43 | border-radius: 50%; 44 | } 45 | 46 | .user-photo .user-status { 47 | position: absolute; 48 | bottom: 0; 49 | right: 0; 50 | width: 10px; 51 | height: 10px; 52 | border: 2px solid #fff; 53 | border-radius: 50%; 54 | background-color: #21d891; 55 | } 56 | 57 | .user-name { 58 | float: left; 59 | padding: 8px 0; 60 | } 61 | -------------------------------------------------------------------------------- /css-basic/position-1/templates/assets/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-basic/position-1/templates/assets/user.jpg -------------------------------------------------------------------------------- /css-basic/position-1/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Position 1 7 | 8 | 9 | 10 | 11 |
12 |
13 | Kimbug 14 | 15 |
16 |

17 | Kimbug 18 |

19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /css-basic/position-1/templates/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | font-family: "Lato", sans-serif; 8 | } 9 | 10 | h1 { 11 | font-size: 16px; 12 | font-weight: 400; 13 | line-height: 1.5; 14 | color: #273444; 15 | } 16 | 17 | /* ▼ WHERE YOUR CODE BEGINS */ 18 | -------------------------------------------------------------------------------- /css-basic/position-2/assets/icon-backward.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css-basic/position-2/assets/icon-forward.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css-basic/position-2/assets/img-card.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-basic/position-2/assets/img-card.jpg -------------------------------------------------------------------------------- /css-basic/position-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Position 2 7 | 8 | 9 | 10 | 11 |
12 |
13 | 그랜드캐년 14 | 15 | 16 |
17 |
18 |

19 | 그랜드캐년+앤텔롭+홀슈밴드 자유일정 20 |

21 | 22 | 김버그트래블 23 | 24 | 25 | 26 | 27 | 1인 28 | 29 | 180,000원 30 | 31 |
32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /css-basic/position-2/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | font-family: "Noto Sans KR", sans-serif; 8 | letter-spacing: -0.02em; 9 | } 10 | 11 | h1 { 12 | font-size: 22px; 13 | font-weight: 500; 14 | color: #1f2d3d; 15 | line-height: 1.4545454545; 16 | } 17 | 18 | span { 19 | font-size: 14px; 20 | font-weight: 400; 21 | color: #7d858f; 22 | line-height: 1.5; 23 | } 24 | 25 | strong { 26 | font-size: 22px; 27 | color: #2860e1; 28 | line-height: 1.0909090909; 29 | } 30 | 31 | strong span { 32 | font-size: 16px; 33 | font-weight: 400; 34 | color: #525d69; 35 | line-height: 1.5; 36 | } 37 | 38 | button { 39 | display: block; 40 | width: 28px; 41 | height: 28px; 42 | border: none; 43 | background-size: contain; 44 | background-repeat: no-repeat; 45 | background-position: center center; 46 | background-color: transparent; 47 | } 48 | 49 | #prev { 50 | background-image: url(./assets/icon-backward.svg); 51 | } 52 | 53 | #next { 54 | background-image: url(./assets/icon-forward.svg); 55 | } 56 | 57 | /* ▼ WHERE YOUR CODE BEGINS */ 58 | 59 | .card { 60 | width: 400px; 61 | } 62 | 63 | .card-carousel { 64 | position: relative; 65 | } 66 | 67 | .card-carousel img { 68 | display: block; 69 | width: 100%; 70 | height: auto; 71 | } 72 | 73 | .card-carousel button { 74 | position: absolute; 75 | top: 50%; 76 | transform: translateY(-50%); 77 | } 78 | 79 | .card-carousel #prev { 80 | left: 0; 81 | } 82 | 83 | .card-carousel #next { 84 | right: 0; 85 | } 86 | 87 | .card-content { 88 | padding: 12px 16px; 89 | background-color: #fff; 90 | } 91 | 92 | .card-content h1 { 93 | margin-bottom: 2px; 94 | } 95 | 96 | .card-content > span { 97 | display: block; 98 | margin-bottom: 8px; 99 | } 100 | 101 | .card-content strong { 102 | display: block; 103 | text-align: right; 104 | } 105 | -------------------------------------------------------------------------------- /css-basic/position-2/templates/assets/icon-backward.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css-basic/position-2/templates/assets/icon-forward.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css-basic/position-2/templates/assets/img-card.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-basic/position-2/templates/assets/img-card.jpg -------------------------------------------------------------------------------- /css-basic/position-2/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Position 2 7 | 8 | 9 | 10 | 11 |
12 |
13 | 그랜드캐년 14 | 15 | 16 |
17 |
18 |

19 | 그랜드캐년+앤텔롭+홀슈밴드 자유일정 20 |

21 | 22 | 김버그트래블 23 | 24 | 25 | 26 | 27 | 1인 28 | 29 | 180,000원 30 | 31 |
32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /css-basic/position-2/templates/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | font-family: "Noto Sans KR", sans-serif; 8 | letter-spacing: -0.02em; 9 | } 10 | 11 | h1 { 12 | font-size: 22px; 13 | font-weight: 500; 14 | color: #1f2d3d; 15 | line-height: 1.4545454545; 16 | } 17 | 18 | span { 19 | font-size: 14px; 20 | font-weight: 400; 21 | color: #7d858f; 22 | line-height: 1.5; 23 | } 24 | 25 | strong { 26 | font-size: 22px; 27 | color: #2860e1; 28 | line-height: 1.0909090909; 29 | } 30 | 31 | strong span { 32 | font-size: 16px; 33 | font-weight: 400; 34 | color: #525d69; 35 | line-height: 1.5; 36 | } 37 | 38 | button { 39 | display: block; 40 | width: 28px; 41 | height: 28px; 42 | border: none; 43 | background-size: contain; 44 | background-repeat: no-repeat; 45 | background-position: center center; 46 | background-color: transparent; 47 | } 48 | 49 | #prev { 50 | background-image: url(./assets/icon-backward.svg); 51 | } 52 | 53 | #next { 54 | background-image: url(./assets/icon-forward.svg); 55 | } 56 | 57 | /* ▼ WHERE YOUR CODE BEGINS */ 58 | -------------------------------------------------------------------------------- /css-basic/position-3/assets/icon-close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /css-basic/position-3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Position 3 7 | 8 | 9 | 10 | 11 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /css-basic/position-3/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | width: 100%; 8 | height: 100vh; 9 | font-family: "Nunito Sans", sans-serif; 10 | color: #273444; 11 | background-color: #000; 12 | } 13 | 14 | input:focus, 15 | input:active, 16 | button:focus, 17 | button:active { 18 | box-shadow: none; 19 | outline: none; 20 | } 21 | 22 | .modal { 23 | background-color: #fff; 24 | } 25 | 26 | .modal-title, 27 | .modal-desc { 28 | text-align: center; 29 | } 30 | 31 | .modal-title { 32 | font-size: 24px; 33 | font-weight: 600; 34 | line-height: 1.6666666667; 35 | } 36 | 37 | .modal-desc { 38 | font-size: 16px; 39 | line-height: 1.5; 40 | } 41 | 42 | .input-group input, 43 | .input-group button { 44 | font-size: 14px; 45 | font-family: "Nunito Sans", sans-serif; 46 | line-height: 1.4285714286; 47 | } 48 | 49 | .close-button { 50 | width: 20px; 51 | height: 20px; 52 | border: none; 53 | background-color: transparent; 54 | background-image: url(./assets/icon-close.svg); 55 | background-position: center center; 56 | background-size: contain; 57 | background-repeat: no-repeat; 58 | } 59 | 60 | /* ▼ WHERE YOUR CODE BEGINS */ 61 | 62 | .modal { 63 | position: fixed; 64 | top: 50%; 65 | left: 50%; 66 | transform: translate(-50%, -50%); 67 | padding: 32px 40px; 68 | border-radius: 4px; 69 | } 70 | 71 | .modal-title, 72 | .modal-desc { 73 | text-align: center; 74 | } 75 | 76 | .modal-title { 77 | margin-bottom: 4px; 78 | } 79 | 80 | .modal-desc { 81 | max-width: 590px; 82 | margin-bottom: 24px; 83 | } 84 | 85 | .close-button { 86 | position: absolute; 87 | top: 8px; 88 | right: 8px; 89 | } 90 | 91 | .input-group { 92 | text-align: center; 93 | } 94 | 95 | .input-group input { 96 | width: 200px; 97 | height: 36px; 98 | padding: 8px 16px; 99 | border: none; 100 | border-radius: 4px; 101 | background-color: #f6f8fa; 102 | } 103 | 104 | .input-group button { 105 | padding: 8px 13px; 106 | border: none; 107 | border-radius: 4px; 108 | color: #fff; 109 | background-color: #2860e1; 110 | } 111 | -------------------------------------------------------------------------------- /css-basic/position-3/templates/assets/icon-close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /css-basic/position-3/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Position 3 7 | 8 | 9 | 10 | 11 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /css-basic/position-3/templates/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | width: 100%; 8 | height: 100vh; 9 | font-family: "Nunito Sans", sans-serif; 10 | color: #273444; 11 | background-color: #000; 12 | } 13 | 14 | input:focus, 15 | input:active, 16 | button:focus, 17 | button:active { 18 | box-shadow: none; 19 | outline: none; 20 | } 21 | 22 | .modal { 23 | background-color: #fff; 24 | } 25 | 26 | .modal-title { 27 | font-size: 24px; 28 | font-weight: 600; 29 | line-height: 1.6666666667; 30 | } 31 | 32 | .modal-desc { 33 | font-size: 16px; 34 | line-height: 1.5; 35 | } 36 | 37 | .input-group input, 38 | .input-group button { 39 | font-size: 14px; 40 | font-family: "Nunito Sans", sans-serif; 41 | line-height: 1.4285714286; 42 | } 43 | 44 | .close-button { 45 | width: 20px; 46 | height: 20px; 47 | border: none; 48 | background-color: transparent; 49 | background-image: url(./assets/icon-close.svg); 50 | background-position: center center; 51 | background-size: contain; 52 | background-repeat: no-repeat; 53 | } 54 | 55 | /* ▼ WHERE YOUR CODE BEGINS */ 56 | -------------------------------------------------------------------------------- /css-basic/transition/README.md: -------------------------------------------------------------------------------- 1 | ## Transition 2 | 3 | ![Transition](https://user-images.githubusercontent.com/19285811/78807643-52bd9900-79ff-11ea-807f-0caa41c10726.gif) 4 | -------------------------------------------------------------------------------- /css-basic/transition/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Transition 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /css-basic/transition/style.css: -------------------------------------------------------------------------------- 1 | /* ▼ WHERE YOUR CODE BEGINS */ 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | } 7 | 8 | body { 9 | font-family: "Lato", sans-serif; 10 | } 11 | 12 | .line-button { 13 | position: relative; 14 | display: inline-flex; 15 | justify-content: center; 16 | align-items: center; 17 | width: 110px; 18 | height: 56px; 19 | border: none; 20 | font-size: 16px; 21 | font-family: "Lato", sans-serif; 22 | color: #151b26; 23 | background-color: #fff; 24 | cursor: pointer; 25 | } 26 | 27 | .line-button::after { 28 | content: ""; 29 | position: absolute; 30 | bottom: 0; 31 | left: 0; 32 | width: 0; 33 | height: 2px; 34 | background-color: #0066ff; 35 | transition: width 250ms ease-in; 36 | } 37 | 38 | .line-button:hover::after { 39 | width: 100%; 40 | } 41 | -------------------------------------------------------------------------------- /css-basic/transition/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Transition 7 | 8 | 9 | 10 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /css-basic/transition/templates/style.css: -------------------------------------------------------------------------------- 1 | /* ▼ WHERE YOUR CODE BEGINS */ 2 | -------------------------------------------------------------------------------- /css-basic/typography/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Typography 7 | 11 | 12 | 13 | 14 | 15 |
16 |

17 | 버그가 너무 많아 18 |
19 | 김 버그 20 |

21 | 22 |

23 | 주니어 개발자의 성장 드라마, 김버그 24 |

25 |

26 | 속에서 같은 주며, 가지에 그들의 우리의 때문이다. 이 길지 가는 있는 같이, 있다. 그들에게 그들은 길지 보내는 27 | 얼마나 동력은 칼이다. 청춘 위하여 같은 새 노래하며 풀이 청춘을 천자만홍이 풍부하게 칼이다. 목숨이 사는가 28 | 그들에게 안고, 위하여서, 타오르고 말이다. 많이 자신과 얼마나 없으면 몸이 이것은 29 | 품고 있으랴? 30 |

31 | 32 |

33 | 앞으로의 계획 34 |

35 | 36 |

37 | 끓는 봄바람을 끝까지 심장은 사는가 끓는 철환하였는가? 찾아다녀도, 우리는 청춘에서만 능히 행복스럽고 바로 38 | 위하여서. 반짝이는 광야에서 가지에 커다란 것이 청춘은 그들은 봄바람이다. 날카로우나 피가 얼마나 얼마나 기쁘며, 39 | 밥을 끓는 자신과 귀는 말이다. 그림자는 황금시대의 현저하게 곳으로 소리다.이것은 쓸쓸하랴? 가진 인간의 옷을 40 | 생명을 창공에 그들의 얼마나 살 따뜻한 힘있다. 현저하게 투명하되 웅대한 대한 것이다. 41 |

42 | 43 |

44 | 프론트엔드 개발, 첫 단추를 꿰다 45 |

46 | 47 |

48 | HTML, CSS 49 |

50 |

51 | 속에서 같은 주며, 가지에 그들의 우리의 때문이다. 이 길지 가는 있는 같이, 있다. 그들에게 그들은 길지 보내는 52 | 얼마나 동력은 칼이다. 청춘 위하여 같은 새 노래하며 풀이 청춘을 천자만홍이 53 | 풍부하게 칼이다. 목숨이 사는가 그들에게 안고, 위하여서, 타오르고 말이다. 많이 자신과 얼마나 없으면 몸이 이것은 54 | 품고 있으랴? 55 |

56 |
57 | 58 | 59 | -------------------------------------------------------------------------------- /css-basic/typography/style.css: -------------------------------------------------------------------------------- 1 | /* ▼ WHERE YOUR CODE BEGINS */ 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | } 7 | 8 | .container { 9 | width: 100%; 10 | max-width: 740px; 11 | padding: 48px; 12 | margin: 0 auto; 13 | } 14 | 15 | h1 { 16 | margin-bottom: 48px; 17 | } 18 | 19 | h2 { 20 | margin-bottom: 24px; 21 | } 22 | 23 | h3 { 24 | margin-bottom: 8px; 25 | } 26 | 27 | p { 28 | margin-bottom: 32px; 29 | } 30 | -------------------------------------------------------------------------------- /css-basic/typography/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Typography 7 | 8 | 9 | 10 | 11 |
12 |

13 | 버그가 너무 많아 14 |
15 | 김 버그 16 |

17 | 18 |

19 | 주니어 개발자의 성장 드라마, 김버그 20 |

21 |

22 | 속에서 같은 주며, 가지에 그들의 우리의 때문이다. 이 길지 가는 있는 같이, 있다. 그들에게 그들은 길지 보내는 23 | 얼마나 동력은 칼이다. 청춘 위하여 같은 새 노래하며 풀이 청춘을 천자만홍이 풍부하게 칼이다. 목숨이 사는가 24 | 그들에게 안고, 위하여서, 타오르고 말이다. 많이 자신과 얼마나 없으면 몸이 이것은 25 | 품고 있으랴? 26 |

27 | 28 |

29 | 앞으로의 계획 30 |

31 |

32 | 끓는 봄바람을 끝까지 심장은 사는가 끓는 철환하였는가? 찾아다녀도, 우리는 청춘에서만 능히 행복스럽고 바로 33 | 위하여서. 반짝이는 광야에서 가지에 커다란 것이 청춘은 그들은 봄바람이다. 날카로우나 피가 얼마나 얼마나 기쁘며, 34 | 밥을 끓는 자신과 귀는 말이다. 그림자는 황금시대의 현저하게 곳으로 소리다.이것은 쓸쓸하랴? 가진 인간의 옷을 35 | 생명을 창공에 그들의 얼마나 살 따뜻한 힘있다. 현저하게 투명하되 웅대한 대한 것이다. 36 |

37 | 38 |

39 | 프론트엔드 개발, 첫 단추를 꿰다 40 |

41 | 42 |

43 | HTML, CSS 44 |

45 |

46 | 속에서 같은 주며, 가지에 그들의 우리의 때문이다. 이 길지 가는 있는 같이, 있다. 그들에게 그들은 길지 보내는 47 | 얼마나 동력은 칼이다. 청춘 위하여 같은 새 노래하며 풀이 청춘을 천자만홍이 풍부하게 칼이다. 48 | 목숨이 사는가 그들에게 안고, 위하여서, 타오르고 말이다. 많이 자신과 얼마나 없으면 몸이 이것은 품고 있으랴? 49 |

50 |
51 | 52 | 53 | -------------------------------------------------------------------------------- /css-basic/typography/templates/style.css: -------------------------------------------------------------------------------- 1 | /* ▼ WHERE YOUR CODE BEGINS */ 2 | -------------------------------------------------------------------------------- /css-basic/typography/templates/typography.css: -------------------------------------------------------------------------------- 1 | /* ▼ WHERE YOUR CODE BEGINS */ 2 | -------------------------------------------------------------------------------- /css-basic/typography/typography.css: -------------------------------------------------------------------------------- 1 | /* ▼ WHERE YOUR CODE BEGINS */ 2 | 3 | body { 4 | font-family: "Noto Sans KR", sans-serif; 5 | letter-spacing: -0.015em; 6 | } 7 | 8 | /* Font Size */ 9 | 10 | .fs-tiny { 11 | font-size: 12px; 12 | line-height: 1.3333333333; 13 | } 14 | 15 | .fs-small { 16 | font-size: 14px; 17 | line-height: 1.4285714286; 18 | } 19 | 20 | .fs-base { 21 | font-size: 16px; 22 | line-height: 1.5; 23 | } 24 | 25 | .fs-medium { 26 | font-size: 18px; 27 | line-height: 1.5555555556; 28 | } 29 | 30 | .fs-large { 31 | font-size: 20px; 32 | line-height: 1.6; 33 | } 34 | 35 | .fs-h2 { 36 | font-size: 28px; 37 | line-height: 1.4285714286; 38 | } 39 | 40 | .fs-h1 { 41 | font-size: 34px; 42 | line-height: 1.4117647059; 43 | } 44 | 45 | /* Font Weight */ 46 | 47 | .fw-light, 48 | .fw-300 { 49 | font-weight: 300; 50 | } 51 | 52 | .fw-regular, 53 | .fw-400 { 54 | font-weight: 400; 55 | } 56 | 57 | .fw-medium, 58 | .fw-500 { 59 | font-weight: 500; 60 | } 61 | 62 | .fw-bold, 63 | .fw-700 { 64 | font-weight: 700; 65 | } 66 | 67 | /* Color */ 68 | 69 | .text-dark { 70 | color: #1f2d3d; 71 | } 72 | 73 | .text-primary { 74 | color: #3c4858; 75 | } 76 | 77 | .text-secondary { 78 | color: #8492a6; 79 | } 80 | 81 | .text-tertiary { 82 | color: #c0ccda; 83 | } 84 | 85 | .text-white { 86 | color: #fff; 87 | } 88 | 89 | .text-success { 90 | color: #13ce66; 91 | } 92 | 93 | .text-error { 94 | color: #ff5216; 95 | } 96 | 97 | .text-info { 98 | color: #009eeb; 99 | } 100 | -------------------------------------------------------------------------------- /css-practice/01-slack-message/README.md: -------------------------------------------------------------------------------- 1 | ## Slack message 2 | 3 | ![Slack message](https://user-images.githubusercontent.com/19285811/79632066-e7f72500-8197-11ea-8e30-e68897b2f3ee.gif) 4 | -------------------------------------------------------------------------------- /css-practice/01-slack-message/assets/img-user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-practice/01-slack-message/assets/img-user.jpg -------------------------------------------------------------------------------- /css-practice/01-slack-message/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Slack Messages 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 | Mia Khumalo 15 | 16 |
17 |
18 |
19 | 20 | Mia Khumalo 21 | 22 |
23 | 09:00 24 | 25 | Today at 09:00:30 26 | 27 |
28 |
29 |

30 | Good morning everyone 31 |

32 |
33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /css-practice/01-slack-message/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | width: 100%; 11 | height: 100vh; 12 | font-family: "Lato", sans-serif; 13 | } 14 | 15 | a { 16 | text-decoration: none; 17 | color: inherit; 18 | } 19 | 20 | a:hover { 21 | opacity: 0.5; 22 | } 23 | 24 | .message { 25 | display: flex; 26 | width: 100%; 27 | max-width: 810px; 28 | padding: 8px; 29 | background-color: #fff; 30 | } 31 | 32 | .message:hover { 33 | background-color: #f8f8f8; 34 | } 35 | 36 | .message-user { 37 | width: 44px; 38 | height: 44px; 39 | border-radius: 4px; 40 | margin-right: 12px; 41 | overflow: hidden; 42 | } 43 | 44 | .message-user a { 45 | display: block; 46 | } 47 | 48 | .message-user img { 49 | display: block; 50 | width: 100%; 51 | height: auto; 52 | } 53 | 54 | .message-info { 55 | display: flex; 56 | align-items: center; 57 | margin-bottom: 2px; 58 | } 59 | 60 | .message-sender, 61 | .message-text { 62 | font-size: 16px; 63 | line-height: 1.25; 64 | color: #212021; 65 | } 66 | 67 | .message-sender { 68 | margin-right: 8px; 69 | font-weight: 900; 70 | } 71 | 72 | .message-timestamp { 73 | position: relative; 74 | font-size: 14px; 75 | line-height: 1.4285714286; 76 | color: #626162; 77 | cursor: default; 78 | } 79 | 80 | .message-timestamp:hover .tooltip { 81 | display: block; 82 | } 83 | 84 | .message-timestamp .tooltip { 85 | position: absolute; 86 | top: -30px; 87 | left: 50%; 88 | display: none; 89 | padding: 4px 12px; 90 | border-radius: 5px; 91 | color: #fff; 92 | white-space: nowrap; 93 | background-color: #000; 94 | transform: translateX(-50%); 95 | } 96 | 97 | .message-timestamp .tooltip::after { 98 | content: ""; 99 | position: absolute; 100 | bottom: -8px; 101 | left: 50%; 102 | width: 0; 103 | height: 0; 104 | border-top: 4px solid #000; 105 | border-right: 4px solid transparent; 106 | border-bottom: 4px solid transparent; 107 | border-left: 4px solid transparent; 108 | transform: translateX(-50%); 109 | } 110 | 111 | .message-text { 112 | font-size: 16px; 113 | line-height: 1.25; 114 | color: #212021; 115 | } 116 | -------------------------------------------------------------------------------- /css-practice/01-slack-message/templates/assets/img-user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-practice/01-slack-message/templates/assets/img-user.jpg -------------------------------------------------------------------------------- /css-practice/01-slack-message/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Slack Messages 7 | 8 | 9 | 10 |
11 |
12 | 13 | Mia Khumalo 14 | 15 |
16 |
17 |
18 | 19 | Mia Khumalo 20 | 21 |
22 | 09:00 23 | 24 | Today at 09:00:30 25 | 26 |
27 |
28 |

29 | Good morning everyone 30 |

31 |
32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /css-practice/01-slack-message/templates/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-practice/01-slack-message/templates/style.css -------------------------------------------------------------------------------- /css-practice/02-dribbble-card/README.md: -------------------------------------------------------------------------------- 1 | ## Dribbble card 2 | 3 | ![Dribbble card](https://user-images.githubusercontent.com/19285811/79632064-e6c5f800-8197-11ea-880d-fd69479bafd3.gif) 4 | -------------------------------------------------------------------------------- /css-practice/02-dribbble-card/assets/icon-comment-active.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css-practice/02-dribbble-card/assets/icon-comment-muted.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css-practice/02-dribbble-card/assets/icon-favorite-active.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css-practice/02-dribbble-card/assets/icon-favorite-muted.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css-practice/02-dribbble-card/assets/img-user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-practice/02-dribbble-card/assets/img-user.jpg -------------------------------------------------------------------------------- /css-practice/02-dribbble-card/assets/img-work.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-practice/02-dribbble-card/assets/img-work.jpg -------------------------------------------------------------------------------- /css-practice/02-dribbble-card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Dribbble Card 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 |

15 | Shortlisted Website 16 |

17 | 18 | 19 |
20 |
21 |
22 | 23 |
24 | 25 |
26 |

Decode Studio™️

27 | 28 |
29 |
30 |
31 |
32 | Comments 33 |
34 |
35 | 17 36 |
37 |
38 |
39 |
40 | Liked 41 |
42 |
43 | 203 44 |
45 |
46 |
47 |
48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /css-practice/02-dribbble-card/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | width: 100%; 11 | height: 100vh; 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | a { 16 | text-decoration: none; 17 | color: inherit; 18 | } 19 | 20 | .card { 21 | width: 360px; 22 | } 23 | 24 | .card-image { 25 | position: relative; 26 | display: flex; 27 | justify-content: center; 28 | align-items: center; 29 | width: 100%; 30 | height: 265px; 31 | border-radius: 10px; 32 | margin-bottom: 8px; 33 | overflow: hidden; 34 | } 35 | 36 | .card-image:hover .card-title { 37 | opacity: 1; 38 | } 39 | 40 | .card-image a { 41 | display: block; 42 | } 43 | 44 | .card-image img { 45 | display: block; 46 | width: 100%; 47 | height: auto; 48 | } 49 | 50 | .card-title { 51 | position: absolute; 52 | top: 0; 53 | left: 0; 54 | display: flex; 55 | flex-direction: column; 56 | justify-content: flex-end; 57 | width: 100%; 58 | height: 100%; 59 | padding: 16px 20px; 60 | font-size: 18px; 61 | line-height: 1.3333333333; 62 | color: #fff; 63 | background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.375776) 57.03%, #000000 100%); 64 | opacity: 0; 65 | transition: opacity 250ms ease-in-out; 66 | } 67 | 68 | .card-user a { 69 | display: flex; 70 | align-items: center; 71 | } 72 | 73 | .card-user .user-image { 74 | width: 24px; 75 | height: 24px; 76 | border-radius: 50%; 77 | margin-right: 8px; 78 | overflow: hidden; 79 | } 80 | 81 | .card-user .user-image:hover { 82 | opacity: 0.5; 83 | } 84 | 85 | .user-image img { 86 | display: block; 87 | width: 100%; 88 | height: auto; 89 | } 90 | 91 | .card-user .user-name { 92 | font-size: 16px; 93 | font-weight: 700; 94 | line-height: 1.5; 95 | } 96 | 97 | .card-user .user-name:hover { 98 | opacity: 0.5; 99 | } 100 | 101 | .card-content { 102 | display: flex; 103 | justify-content: space-between; 104 | align-items: center; 105 | width: 100%; 106 | } 107 | 108 | .card-stats { 109 | display: flex; 110 | justify-content: flex-end; 111 | align-items: center; 112 | } 113 | 114 | .card-stats div { 115 | display: flex; 116 | align-items: center; 117 | color: #9e9ea7; 118 | cursor: default; 119 | } 120 | 121 | .card-stats div:hover { 122 | color: #ea4c89; 123 | } 124 | 125 | .card-stats div:first-child { 126 | margin-right: 10px; 127 | } 128 | 129 | .card-stats dt { 130 | display: block; 131 | width: 18px; 132 | height: 18px; 133 | margin-right: 4px; 134 | text-indent: -1000000px; 135 | background-repeat: no-repeat; 136 | background-position: center center; 137 | background-size: contain; 138 | background-color: transparent; 139 | } 140 | 141 | .stats-comments dt { 142 | background-image: url("./assets/icon-comment-muted.svg"); 143 | } 144 | 145 | .stats-likes dt { 146 | background-image: url("./assets/icon-favorite-muted.svg"); 147 | } 148 | 149 | .stats-comments:hover dt { 150 | background-image: url("./assets/icon-comment-active.svg"); 151 | } 152 | 153 | .stats-likes:hover dt { 154 | background-image: url("./assets/icon-favorite-active.svg"); 155 | } 156 | -------------------------------------------------------------------------------- /css-practice/02-dribbble-card/templates/assets/icon-comment-active.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css-practice/02-dribbble-card/templates/assets/icon-comment-muted.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css-practice/02-dribbble-card/templates/assets/icon-favorite-active.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css-practice/02-dribbble-card/templates/assets/icon-favorite-muted.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css-practice/02-dribbble-card/templates/assets/img-user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-practice/02-dribbble-card/templates/assets/img-user.jpg -------------------------------------------------------------------------------- /css-practice/02-dribbble-card/templates/assets/img-work.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-practice/02-dribbble-card/templates/assets/img-work.jpg -------------------------------------------------------------------------------- /css-practice/02-dribbble-card/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Dribbble Card 7 | 8 | 9 | 10 |
11 |
12 | 13 |

14 | Shortlisted Website 15 |

16 | 17 | 18 |
19 |
20 |
21 | 22 |
23 | 24 |
25 |

Decode Studio™️

26 | 27 |
28 |
29 |
30 |
31 | Comments 32 |
33 |
34 | 17 35 |
36 |
37 |
38 |
39 | Liked 40 |
41 |
42 | 203 43 |
44 |
45 |
46 |
47 |
48 | 49 | 50 | -------------------------------------------------------------------------------- /css-practice/02-dribbble-card/templates/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-practice/02-dribbble-card/templates/style.css -------------------------------------------------------------------------------- /css-practice/03-ecommerce/README.md: -------------------------------------------------------------------------------- 1 | ## E-commerce 2 | 3 | ![E-commerce](https://user-images.githubusercontent.com/19285811/79632059-e0d01700-8197-11ea-950b-8e379d5b9f3e.gif) 4 | -------------------------------------------------------------------------------- /css-practice/03-ecommerce/assets/icon-cart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css-practice/03-ecommerce/assets/icon-minus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css-practice/03-ecommerce/assets/icon-plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css-practice/03-ecommerce/assets/icon-star-active.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css-practice/03-ecommerce/assets/icon-star-muted.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css-practice/03-ecommerce/assets/img-product-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-practice/03-ecommerce/assets/img-product-1.jpg -------------------------------------------------------------------------------- /css-practice/03-ecommerce/assets/img-product-1@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-practice/03-ecommerce/assets/img-product-1@2x.jpg -------------------------------------------------------------------------------- /css-practice/03-ecommerce/assets/img-product-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-practice/03-ecommerce/assets/img-product-2.jpg -------------------------------------------------------------------------------- /css-practice/03-ecommerce/assets/img-product-2@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-practice/03-ecommerce/assets/img-product-2@2x.jpg -------------------------------------------------------------------------------- /css-practice/03-ecommerce/assets/img-product-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-practice/03-ecommerce/assets/img-product-3.jpg -------------------------------------------------------------------------------- /css-practice/03-ecommerce/assets/img-product-3@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-practice/03-ecommerce/assets/img-product-3@2x.jpg -------------------------------------------------------------------------------- /css-practice/03-ecommerce/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | E-commerce 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 | 20 |
21 |
    22 |
  • 23 | 30 |
    • 31 |
  • 32 | 39 |
    • 40 |
  • 41 | 48 |
    • 49 |
50 |
51 | 52 |
53 |
54 |

55 | Off-White Odsy-1000 56 |
57 | Low-Top Sneakers 58 |

59 |
60 |
61 |
62 | 63 | 64 | 65 | 66 | 67 |
68 |
69 | 132 reviews 70 |
71 |
72 |
73 |
74 | 75 |
76 |
77 | 154 orders 78 |
79 |
80 |
81 |
82 | 83 | 84 | $815.00 85 | 86 | 87 |

88 | Virgil Abloh’s Off-White is a streetwear-inspired collection that continues to break away from the 89 | conventions of mainstream fashion. Made in Italy, these black and brown Odsy-1000 low-top sneakers. 90 |

91 | 92 |
93 |
94 |
95 | Model 96 |
97 |
98 | Odsy-1000 99 |
100 |
101 |
102 |
103 | Color 104 |
105 |
106 | Navy 107 |
108 |
109 |
110 |
111 | Delivery 112 |
113 |
114 | Worldwide 115 |
116 |
117 |
118 | 119 |
120 |
121 |
122 | 125 |
126 | 127 | 128 | 129 |
130 |
131 | 132 |
133 | 136 |
137 |
138 | 139 | 142 |
143 |
144 | 145 | 148 |
149 |
150 | 151 | 154 |
155 |
156 |
157 |
158 | 159 | 162 |
163 |
164 |
165 |
166 | 167 | 168 | -------------------------------------------------------------------------------- /css-practice/03-ecommerce/templates/assets/icon-cart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css-practice/03-ecommerce/templates/assets/icon-minus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css-practice/03-ecommerce/templates/assets/icon-plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css-practice/03-ecommerce/templates/assets/icon-star-active.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css-practice/03-ecommerce/templates/assets/icon-star-muted.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css-practice/03-ecommerce/templates/assets/img-product-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-practice/03-ecommerce/templates/assets/img-product-1.jpg -------------------------------------------------------------------------------- /css-practice/03-ecommerce/templates/assets/img-product-1@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-practice/03-ecommerce/templates/assets/img-product-1@2x.jpg -------------------------------------------------------------------------------- /css-practice/03-ecommerce/templates/assets/img-product-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-practice/03-ecommerce/templates/assets/img-product-2.jpg -------------------------------------------------------------------------------- /css-practice/03-ecommerce/templates/assets/img-product-2@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-practice/03-ecommerce/templates/assets/img-product-2@2x.jpg -------------------------------------------------------------------------------- /css-practice/03-ecommerce/templates/assets/img-product-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-practice/03-ecommerce/templates/assets/img-product-3.jpg -------------------------------------------------------------------------------- /css-practice/03-ecommerce/templates/assets/img-product-3@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-practice/03-ecommerce/templates/assets/img-product-3@2x.jpg -------------------------------------------------------------------------------- /css-practice/03-ecommerce/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | E-commerce 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 | 19 |
20 |
    21 |
  • 22 | 29 |
    • 30 |
  • 31 | 38 |
    • 39 |
  • 40 | 47 |
    • 48 |
49 |
50 | 51 |
52 |
53 |

54 | Off-White Odsy-1000 55 |
56 | Low-Top Sneakers 57 |

58 |
59 |
60 |
61 | 62 | 63 | 64 | 65 | 66 |
67 |
68 | 132 reviews 69 |
70 |
71 |
72 |
73 | 74 |
75 |
76 | 154 orders 77 |
78 |
79 |
80 |
81 | 82 | 83 | $815.00 84 | 85 | 86 |

87 | Virgil Abloh’s Off-White is a streetwear-inspired collection that continues to break away from the 88 | conventions of mainstream fashion. Made in Italy, these black and brown Odsy-1000 low-top sneakers. 89 |

90 | 91 |
92 |
93 |
94 | Model 95 |
96 |
97 | Odsy-1000 98 |
99 |
100 |
101 |
102 | Color 103 |
104 |
105 | Navy 106 |
107 |
108 |
109 |
110 | Delivery 111 |
112 |
113 | Worldwide 114 |
115 |
116 |
117 | 118 |
119 |
120 |
121 | 124 |
125 | 126 | 127 | 128 |
129 |
130 | 131 |
132 | 135 |
136 |
137 | 138 | 141 |
142 |
143 | 144 | 147 |
148 |
149 | 150 | 153 |
154 |
155 |
156 |
157 | 158 | 161 |
162 |
163 |
164 |
165 | 166 | 167 | -------------------------------------------------------------------------------- /css-practice/03-ecommerce/templates/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-practice/03-ecommerce/templates/style.css -------------------------------------------------------------------------------- /css-practice/final/assets/img-curriculum.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-practice/final/assets/img-curriculum.png -------------------------------------------------------------------------------- /css-practice/final/assets/img-fulltime-campus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-practice/final/assets/img-fulltime-campus.png -------------------------------------------------------------------------------- /css-practice/final/assets/img-fulltime-remote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-practice/final/assets/img-fulltime-remote.png -------------------------------------------------------------------------------- /css-practice/final/assets/img-parttime-flex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-practice/final/assets/img-parttime-flex.png -------------------------------------------------------------------------------- /css-practice/final/assets/img-subscription.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/css-practice/final/assets/img-subscription.png -------------------------------------------------------------------------------- /html-basic/00-html-structure/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML 기본 구조 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /html-basic/01-headings-and-paragraph/practice-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 제목과 문단 Headings & Paragraph 6 | 7 | 8 | 9 |

구름EDU 클라우드 SW교육환경

10 |

11 | 스크래치3, 엔트리부터 파이썬, C언어까지 설치가 전혀 필요없고 강력한 LMS와 연동된 SW교육환경이 눈앞에 펼쳐집니다. 12 | 누구나 SW에 대한 지식과 경험을 나눌 수 있고, 누구나 SW를 배울 수 있는 환경! 지금 경험해보세요! 13 |

14 | 15 | 16 | -------------------------------------------------------------------------------- /html-basic/01-headings-and-paragraph/practice-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 제목과 문단 Headings & Paragraph 6 | 7 | 8 | 9 |

황제펭귄

10 | 11 |

생물학적 특성

12 |

13 | 지구상에 생존하는 모든 펭귄들 중에서 가장 키가 크고 체중이 많이 나가는 종이다. 서식지는 남극과 포클랜드 제도이다. 14 | 암컷과 수컷은 덩치와 깃털 무늬가 비슷하며, 성체는 최고 122센티미터에 몸무게는 22~37킬로그램까지 나간다. 등은 검고 15 | 가슴 부위는 창백한 노랑색을 띠고 있으며 귀 부위는 밝은 노랑색이다. 다른 펭귄들과 마찬가지로 황제펭귄은 날지 16 | 못한다. 이들은 해양 생활에 적합한 유선형의 몸매와 플리퍼(flipper)로 불리는 납작한 날개를 갖고 있다. 17 |

18 | 19 |

20 | 특성 21 |

22 |

23 | 황제펭귄은 남극의 겨울 기간 동안 알을 낳는 유일한 종으로, 50 ~ 120킬로미터 정도 얼음 위를 걸어 새끼들을 키우는 24 | 군집장소까지 이동한다. 이 군집장소에는 최대 수천 마리의 개체들이 모인다. 성체 황제펭귄들은 노래를 통해 짝짓기를 25 | 하고, 암컷은 한 개의 알을 낳는다. 수컷은 암컷이 바다로 돌아가서 먹이를 충분히 먹고 돌아올 때까지 태양이 완전히 26 | 뜨지 않아 최대 -60℃까지 기온이 떨어지는 1개월을 포함하여 약 4개월간 알을 발등에 올려놓고 품는다. 이 기간동안 27 | 수컷은 수분정도만 섭취하며 버틴다. 알이 부화하면 수컷은 4개월간 위 속에 간직했던 물고기를 한 번 새끼에게 준다. 28 | 암컷이 돌아오면 수컷이 역할 교대를 하여 바다로 먹이를 섭취하러 나가며, 암컷이 새끼를 돌본다. 새끼가 성장하여 29 | 천적인 도둑갈매기로부터 안전해지면 한 곳에 모아 집단으로 관리한다. 펭귄의 새끼는 다른 조류와 마찬가지로 솜털로 30 | 덮여있는데, 성체가 되면 솜털이 빠지고 깃털이 나면서 수영에 적합한 상태가 된다. 황제펭귄의 수명은 야생에서 보통 31 | 20년 정도이지만, 기록에 따르면 일부 개체들은 50년까지 살 수 있다고 한다. 32 |

33 | 34 | 35 | -------------------------------------------------------------------------------- /html-basic/01-headings-and-paragraph/styles.css: -------------------------------------------------------------------------------- 1 | @import url(https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css); 2 | 3 | * { 4 | margin: 0; 5 | box-sizing: border-box; 6 | letter-spacing: -0.03em; 7 | } 8 | 9 | html { 10 | font-family: 'SpoqaHanSans'; 11 | font-size: 16px; 12 | line-height: 1.5; 13 | color: #333e47; 14 | } 15 | 16 | body { 17 | width: 100%; 18 | max-width: 640px; 19 | min-height: 100vh; 20 | padding: 80px 0; 21 | margin: 0 auto; 22 | } 23 | 24 | h1, 25 | h2, 26 | h3, 27 | h4, 28 | h5, 29 | h6 { 30 | padding: 3px 0; 31 | margin-bottom: .5em; 32 | color: #212527; 33 | line-height: 1.2; 34 | } 35 | 36 | p { 37 | margin-bottom: 1.5rem; 38 | } 39 | -------------------------------------------------------------------------------- /html-basic/16-table-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 표 Table 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /html-basic/16-table-1/styles.css: -------------------------------------------------------------------------------- 1 | @import url(https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css); 2 | 3 | * { 4 | margin: 0; 5 | box-sizing: border-box; 6 | letter-spacing: -0.03em; 7 | } 8 | 9 | html { 10 | font-family: "SpoqaHanSans"; 11 | font-size: 16px; 12 | line-height: 1.5; 13 | color: #1f2d3d; 14 | } 15 | 16 | body { 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | width: 100%; 21 | height: 100vh; 22 | margin: 0 auto; 23 | } 24 | 25 | table { 26 | border: 1px solid #000; 27 | border-collapse: collapse; 28 | } 29 | 30 | td, 31 | th { 32 | white-space: nowrap; 33 | vertical-align: center; 34 | text-align: center; 35 | font-size: 13px; 36 | } 37 | 38 | th { 39 | padding: 4px 12px; 40 | } 41 | 42 | td { 43 | padding: 12px 24px; 44 | font-size: 12px; 45 | } 46 | 47 | thead { 48 | background-color: #000; 49 | color: #fff; 50 | } 51 | 52 | tbody th { 53 | background-color: #1f2d3d; 54 | color: #fff; 55 | } 56 | 57 | tbody th[colspan="6"] { 58 | padding: 10px; 59 | padding-left: 55px; 60 | background-color: #f9fafc; 61 | color: #1f2d3d; 62 | } 63 | 64 | td.html-css-basic { 65 | color: #1fb6ff; 66 | } 67 | 68 | td.js-basic { 69 | color: #ffc82c; 70 | } 71 | 72 | td.js-skillup { 73 | color: #592dea; 74 | } 75 | 76 | td.sass-basic { 77 | color: #ff16d1; 78 | } 79 | 80 | td.coding { 81 | color: #ff5216; 82 | } 83 | 84 | td.portfolio { 85 | color: #13ce66; 86 | } 87 | -------------------------------------------------------------------------------- /html-basic/21-title-link-style-script/app.js: -------------------------------------------------------------------------------- 1 | var heading = document.querySelector("h1") 2 | var audio = new Audio("./assets/audios/pop.wav") 3 | 4 | heading.addEventListener("click", function(event) { 5 | audio.play() 6 | if (this.active) { 7 | this.style.color = "#000" 8 | } else { 9 | this.style.color = "#fff" 10 | } 11 | this.active = !this.active 12 | }) 13 | 14 | heading.active = true 15 | -------------------------------------------------------------------------------- /html-basic/21-title-link-style-script/assets/audios/pop.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/html-basic/21-title-link-style-script/assets/audios/pop.wav -------------------------------------------------------------------------------- /html-basic/21-title-link-style-script/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /html-basic/21-title-link-style-script/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | width: 100%; 8 | height: 100vh; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | align-content: center; 13 | } 14 | 15 | h1 { 16 | flex-grow: 0; 17 | display: inline-block; 18 | padding: 0.1em 0.4em 0.15em; 19 | border-radius: 2px; 20 | background-color: #1fb6ff; 21 | text-align: center; 22 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 23 | color: #fff; 24 | letter-spacing: -0.03em; 25 | cursor: pointer; 26 | user-select: none; 27 | } 28 | 29 | h1:hover { 30 | background-color: #ff16d1; 31 | } 32 | -------------------------------------------------------------------------------- /html-basic/22-meta/app.js: -------------------------------------------------------------------------------- 1 | var heading = document.querySelector("h1") 2 | var audio = new Audio("./assets/audios/pop.wav") 3 | 4 | heading.addEventListener("click", function(event) { 5 | audio.play() 6 | if (this.active) { 7 | this.style.color = "#000" 8 | } else { 9 | this.style.color = "#fff" 10 | } 11 | this.active = !this.active 12 | }) 13 | 14 | heading.active = true 15 | -------------------------------------------------------------------------------- /html-basic/22-meta/assets/audios/pop.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/html-basic/22-meta/assets/audios/pop.wav -------------------------------------------------------------------------------- /html-basic/22-meta/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 김버그의 버그없는 HTML과 CSS 10 | 11 | 12 | 13 | 14 |

kimbug

15 | 16 | 17 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /html-basic/22-meta/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | width: 100%; 8 | height: 100vh; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | align-content: center; 13 | } 14 | 15 | h1 { 16 | flex-grow: 0; 17 | display: inline-block; 18 | padding: 0.1em 0.4em 0.15em; 19 | border-radius: 2px; 20 | background-color: #1fb6ff; 21 | text-align: center; 22 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 23 | color: #fff; 24 | letter-spacing: -0.03em; 25 | cursor: pointer; 26 | user-select: none; 27 | } 28 | 29 | h1:hover { 30 | background-color: #ff16d1; 31 | } 32 | -------------------------------------------------------------------------------- /html-practice/01-ad-banner/README.md: -------------------------------------------------------------------------------- 1 | # Basic Component 2 | 3 | ### Screenshot 4 | 5 | ![Basic Component](https://user-images.githubusercontent.com/19285811/69003988-549a9900-0946-11ea-9c57-8cd1489273f8.png) 6 | 7 | **Image Reference** [https://elements.envato.com/](https://elements.envato.com/) 8 | -------------------------------------------------------------------------------- /html-practice/01-ad-banner/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ad Banner- 김버그의 버그 없는 HTML 8 | 9 | 10 | 11 | 12 |
13 |

14 | Unlimited downloads.
15 | Our best content.
16 | No attribution. 17 |

18 |

19 | As low as $9/mo
20 | Buy subscription or credit packs 21 |

22 | 23 | Join Pro 24 | 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /html-practice/01-ad-banner/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | box-sizing: border-box; 4 | } 5 | 6 | html { 7 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", 8 | "Helvetica Neue", sans-serif; 9 | font-size: 16px; 10 | line-height: 1.5; 11 | color: #1f2d3d; 12 | } 13 | 14 | body { 15 | display: flex; 16 | flex-direction: column; 17 | justify-content: center; 18 | align-items: center; 19 | width: 100%; 20 | height: 100vh; 21 | margin: 0 auto; 22 | background-color: #1f2d3d; 23 | } 24 | 25 | body::after { 26 | content: "kimbug©"; 27 | display: block; 28 | margin-top: 50px; 29 | color: #fff; 30 | font-size: 12px; 31 | font-weight: 600; 32 | } 33 | 34 | .modal { 35 | position: relative; 36 | flex-grow: 0; 37 | flex-shrink: 0; 38 | padding: 40px 36px 36px; 39 | border-radius: 12px; 40 | background-color: #fff; 41 | transition: box-shadow 250ms ease-in, transform 250ms ease-in; 42 | } 43 | 44 | .modal:hover { 45 | transform: translateY(-1px); 46 | box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3); 47 | } 48 | 49 | h1 { 50 | margin-bottom: 20px; 51 | font-size: 24px; 52 | line-height: 1.35; 53 | font-weight: 600; 54 | letter-spacing: -0.025em; 55 | color: #474747; 56 | } 57 | 58 | p { 59 | margin-bottom: 28px; 60 | font-size: 14px; 61 | line-height: 1.5; 62 | color: #666; 63 | letter-spacing: 0.01em; 64 | } 65 | 66 | a { 67 | display: flex; 68 | justify-content: center; 69 | align-items: center; 70 | width: 100%; 71 | min-width: 320px; 72 | height: 65px; 73 | border-radius: 6px; 74 | color: #fff; 75 | font-size: 18px; 76 | font-weight: 500; 77 | letter-spacing: 0.01em; 78 | text-decoration: none; 79 | background: linear-gradient(90deg, #ff8806 0%, #fb07f3 100%); 80 | } 81 | -------------------------------------------------------------------------------- /html-practice/02-google-search-result-item/README.md: -------------------------------------------------------------------------------- 1 | # Google Search Result Item 2 | 3 | ### Screenshot 4 | 5 | ![Google Search Result Item](https://user-images.githubusercontent.com/19285811/69314860-1ec02200-0c70-11ea-9944-90cf1dc2496f.png) 6 | -------------------------------------------------------------------------------- /html-practice/02-google-search-result-item/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Google Search Result Item - 김버그의 버그 없는 HTML 8 | 9 | 10 | 11 | 12 |
13 |

14 | 15 | HTML5 Semantic Elements - W3Schools 16 | 17 |

18 |
19 | 20 | https://www.w3schools.com › html › html5_semantic_elements 21 | 22 |
23 |

24 | Oct 27, 2019 - Examples of non-semantic elements: <div> and <span> - Tells nothing 25 | about its content. ... HTML5 semantic elements are supported in all modern browsers. ... So, on 26 | the Internet, you will find HTML pages with <section> elements containing ... 27 |

28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /html-practice/02-google-search-result-item/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | box-sizing: border-box; 4 | } 5 | 6 | html { 7 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", 8 | "Helvetica Neue", sans-serif; 9 | font-size: 16px; 10 | line-height: 1.5; 11 | color: #1f2d3d; 12 | letter-spacing: -0.03em; 13 | } 14 | 15 | body { 16 | display: flex; 17 | flex-direction: column; 18 | justify-content: center; 19 | align-items: center; 20 | width: 100%; 21 | height: 100vh; 22 | margin: 0 auto; 23 | background-color: #f8f9fa; 24 | } 25 | 26 | body::after { 27 | content: "kimbug©"; 28 | display: block; 29 | margin-top: 50px; 30 | color: #1f2d3d; 31 | font-size: 12px; 32 | font-weight: 600; 33 | } 34 | 35 | .google-search-result-item { 36 | width: 100%; 37 | max-width: 640px; 38 | padding: 16px 20px; 39 | border-radius: 4px; 40 | background-color: #fff; 41 | } 42 | 43 | .google-search-result-item a { 44 | font-weight: 400; 45 | text-decoration: none; 46 | } 47 | 48 | .google-search-result-item h1 { 49 | margin-bottom: 0; 50 | font-size: 20px; 51 | line-height: 1.3; 52 | } 53 | 54 | .google-search-result-item h1 a { 55 | color: #1a0dab; 56 | } 57 | 58 | .google-search-result-item > div { 59 | margin-bottom: 4px; 60 | letter-spacing: 0; 61 | font-size: 16px; 62 | line-height: 1.5; 63 | } 64 | 65 | .google-search-result-item > div a { 66 | color: #006621; 67 | } 68 | 69 | .google-search-result-item p { 70 | font-size: 14px; 71 | line-height: 1.57; 72 | color: #545454; 73 | letter-spacing: -0.01em; 74 | } 75 | 76 | .google-search-result-item p strong { 77 | font-weight: 700; 78 | } 79 | -------------------------------------------------------------------------------- /html-practice/03-feature-box/README.md: -------------------------------------------------------------------------------- 1 | # Feature Box 2 | 3 | ### Screenshot 4 | 5 | ![Feature Box](https://user-images.githubusercontent.com/19285811/69003607-2914b000-0940-11ea-8f44-c82f9540df2b.png) 6 | 7 | **Image Reference** [https://bitbucket.org/](https://bitbucket.org/) 8 | -------------------------------------------------------------------------------- /html-practice/03-feature-box/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Feature Box - 김버그의 버그 없는 HTML 8 | 9 | 10 | 11 | 12 | 13 | 28 | 29 | 30 |
31 |

32 | Free unlimited private repositories 33 |

34 |

35 | Free for small teams under 5 and priced to scale with Standard ($3/user/mo) or Premium ($6/user/mo) plans. 38 |

39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /html-practice/03-feature-box/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Nunito+Sans:400,700&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | html { 9 | font-family: "Nunito Sans", sans-serif; 10 | font-size: 16px; 11 | line-height: 1.5; 12 | color: #1f2d3d; 13 | } 14 | 15 | body { 16 | display: flex; 17 | flex-direction: column; 18 | justify-content: center; 19 | align-items: center; 20 | width: 100%; 21 | height: 100vh; 22 | margin: 0 auto; 23 | background-color: #f8f9fc; 24 | } 25 | 26 | body::after { 27 | content: "kimbug©"; 28 | display: block; 29 | margin-top: 50px; 30 | color: #1f2d3d; 31 | font-size: 12px; 32 | font-weight: 600; 33 | } 34 | 35 | /* Common styles */ 36 | .feature-box { 37 | display: flex; 38 | flex-direction: column; 39 | justify-content: center; 40 | align-items: center; 41 | width: 100%; 42 | max-width: 420px; 43 | padding: 40px 32px; 44 | border-radius: 6px; 45 | background-color: #fff; 46 | text-align: center; 47 | } 48 | 49 | .feature-box h1 { 50 | margin-bottom: 1rem; 51 | font-size: 1.5rem; 52 | font-weight: 700; 53 | line-height: 1.33333333; 54 | color: #253858; 55 | } 56 | 57 | .feature-box p { 58 | font-size: 1rem; 59 | color: #091e42; 60 | } 61 | 62 | .feature-box img { 63 | display: block; 64 | width: auto; 65 | height: 140px; 66 | margin-bottom: 1rem; 67 | } 68 | 69 | /* For feature box without image */ 70 | .feature-box.no-image { 71 | padding-top: 196px; 72 | background-image: url("https://wac-cdn.atlassian.com/dam/jcr:bc1f15f9-3b2e-4c30-9313-0ebd6175f18c/File%20Cabinet@2x.png?cdnVersion=676"); 73 | background-repeat: no-repeat; 74 | background-position: center 40px; 75 | background-size: auto 140px; 76 | } 77 | -------------------------------------------------------------------------------- /html-practice/03-modal/README.md: -------------------------------------------------------------------------------- 1 | # Modal 2 | 3 | ### Screenshot 4 | 5 | ![Modal](https://user-images.githubusercontent.com/19285811/68985412-3ef77780-0851-11ea-8a73-30e842db3dab.png) 6 | 7 | ![Kapture 2019-11-17 at 14 32 40](https://user-images.githubusercontent.com/19285811/69004026-31241e00-0947-11ea-8284-37414acc8a1a.gif) 8 | 9 | **Image Reference** [https://elements.envato.com/](https://elements.envato.com/) 10 | -------------------------------------------------------------------------------- /html-practice/03-modal/app.js: -------------------------------------------------------------------------------- 1 | var body = document.body 2 | var modal = document.querySelector(".modal") 3 | var closeButton = document.querySelector("button") 4 | 5 | closeButton.addEventListener("click", function(event) { 6 | console.log("triggered") 7 | modal.classList.add("fade-out") 8 | window.setTimeout(function() { 9 | body.removeChild(modal) 10 | }, 550) 11 | }) 12 | -------------------------------------------------------------------------------- /html-practice/03-modal/assets/icon-close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /html-practice/03-modal/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Modal - 김버그의 버그 없는 HTML 8 | 9 | 10 | 11 | 12 |
13 |

14 | Unlimited downloads.
15 | Our best content.
16 | No attribution. 17 |

18 |

19 | As low as $9/mo
20 | Buy subscription or credit packs 21 |

22 | 23 | Join Pro 24 | 25 | 28 |
29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /html-practice/03-modal/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | box-sizing: border-box; 4 | } 5 | 6 | html { 7 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", 8 | "Helvetica Neue", sans-serif; 9 | font-size: 16px; 10 | line-height: 1.5; 11 | color: #1f2d3d; 12 | } 13 | 14 | body { 15 | display: flex; 16 | flex-direction: column; 17 | justify-content: center; 18 | align-items: center; 19 | width: 100%; 20 | height: 100vh; 21 | margin: 0 auto; 22 | background-color: #1f2d3d; 23 | } 24 | 25 | body::after { 26 | content: "kimbug©"; 27 | display: block; 28 | margin-top: 50px; 29 | color: #fff; 30 | font-size: 12px; 31 | font-weight: 600; 32 | } 33 | 34 | .modal { 35 | position: relative; 36 | flex-grow: 0; 37 | flex-shrink: 0; 38 | padding: 40px 36px 36px; 39 | border-radius: 12px; 40 | background-color: #fff; 41 | transition: box-shadow 250ms ease-in, transform 250ms ease-in; 42 | } 43 | 44 | .modal:hover { 45 | transform: translateY(-1px); 46 | box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3); 47 | } 48 | 49 | .modal.fade-out { 50 | animation: fade-out 400ms ease-in-out forwards; 51 | } 52 | 53 | h1 { 54 | margin-bottom: 20px; 55 | font-size: 24px; 56 | line-height: 1.35; 57 | font-weight: 600; 58 | letter-spacing: -0.025em; 59 | color: #474747; 60 | } 61 | 62 | p { 63 | margin-bottom: 28px; 64 | font-size: 14px; 65 | line-height: 1.5; 66 | color: #666; 67 | letter-spacing: 0.01em; 68 | } 69 | 70 | a { 71 | display: flex; 72 | justify-content: center; 73 | align-items: center; 74 | width: 100%; 75 | min-width: 320px; 76 | height: 65px; 77 | border-radius: 6px; 78 | color: #fff; 79 | font-size: 18px; 80 | font-weight: 500; 81 | letter-spacing: 0.01em; 82 | text-decoration: none; 83 | background: linear-gradient(90deg, #ff8806 0%, #fb07f3 100%); 84 | } 85 | 86 | button { 87 | position: absolute; 88 | top: 12px; 89 | right: 12px; 90 | padding: 0; 91 | border: none; 92 | background-color: #fff; 93 | box-shadow: none; 94 | cursor: pointer; 95 | } 96 | 97 | button:focus, 98 | button:hover { 99 | outline: none; 100 | box-shadow: none; 101 | opacity: 0.5; 102 | } 103 | 104 | @keyframes fade-out { 105 | from { 106 | opacity: 1; 107 | } 108 | 109 | to { 110 | opacity: 0; 111 | transform: translateY(10px); 112 | } 113 | } 114 | -------------------------------------------------------------------------------- /html-practice/04-logo-in-header/README.md: -------------------------------------------------------------------------------- 1 | # Logo in Header 2 | 3 | ### Screenshot 4 | 5 | ![Logo in Header](https://user-images.githubusercontent.com/19285811/69004168-abee3880-0949-11ea-93a0-291797349fa7.png) 6 | 7 | **Image Reference** [https://edu.goorm.io/](https://edu.goorm.io/) 8 | -------------------------------------------------------------------------------- /html-practice/04-logo-in-header/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Logo in Header - 김버그의 버그 없는 HTML 8 | 9 | 10 | 11 | 12 |
13 |

14 | 15 | 구름 Edu 16 | 17 |

18 | Q&A 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /html-practice/04-logo-in-header/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | html { 9 | font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, 10 | sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 11 | font-size: 16px; 12 | line-height: 1.5; 13 | color: #1f2d3d; 14 | } 15 | 16 | body { 17 | display: flex; 18 | flex-direction: column; 19 | justify-content: center; 20 | align-items: center; 21 | width: 100%; 22 | height: 100vh; 23 | margin: 0 auto; 24 | background-color: #1f2d3d; 25 | } 26 | 27 | body::after { 28 | content: "kimbug©"; 29 | display: block; 30 | margin-top: 50px; 31 | color: #fff; 32 | font-size: 12px; 33 | font-weight: 600; 34 | } 35 | 36 | .header { 37 | display: flex; 38 | justify-content: space-between; 39 | align-items: center; 40 | width: 90%; 41 | padding: 12px 56px; 42 | border-radius: 3px; 43 | background-color: #fff; 44 | box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1); 45 | } 46 | 47 | .header h1 { 48 | position: relative; 49 | top: 1px; 50 | } 51 | 52 | .header h1 img { 53 | display: block; 54 | width: auto; 55 | height: 30px; 56 | } 57 | 58 | .header a { 59 | display: block; 60 | text-decoration: none; 61 | font-size: 0.875rem; 62 | color: #313338; 63 | } 64 | 65 | .header a:hover { 66 | opacity: 0.5; 67 | } 68 | 69 | .header a:visited { 70 | color: inherit; 71 | } 72 | -------------------------------------------------------------------------------- /html-practice/05-breadcrumb-and-pagination/README.md: -------------------------------------------------------------------------------- 1 | # Breadcrumb & Pagination 2 | 3 | ### Screenshot 4 | 5 | ![Breadcrumb & Pagination](https://user-images.githubusercontent.com/19285811/69315201-f1c03f00-0c70-11ea-9e42-b0403d458574.png) 6 | -------------------------------------------------------------------------------- /html-practice/05-breadcrumb-and-pagination/assets/icon-repository.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /html-practice/05-breadcrumb-and-pagination/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Breadcrumb & Pagination - 김버그의 버그 없는 HTML 8 | 9 | 10 | 11 | 12 |
13 | rohjs 14 | bugless-101 15 |
16 | 17 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /html-practice/05-breadcrumb-and-pagination/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | box-sizing: border-box; 4 | } 5 | 6 | html { 7 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", 8 | "Helvetica Neue", sans-serif; 9 | font-size: 16px; 10 | line-height: 1.5; 11 | color: #1f2d3d; 12 | } 13 | 14 | body { 15 | display: flex; 16 | flex-direction: column; 17 | justify-content: center; 18 | align-items: center; 19 | width: 100%; 20 | height: 100vh; 21 | margin: 0 auto; 22 | background-color: #f8f9fa; 23 | } 24 | 25 | body::after { 26 | content: "kimbug©"; 27 | display: block; 28 | margin-top: 50px; 29 | color: #1f2d3d; 30 | font-size: 12px; 31 | font-weight: 600; 32 | } 33 | 34 | /* Breadcrumb */ 35 | 36 | .breadcrumb { 37 | display: flex; 38 | align-items: center; 39 | margin-bottom: 56px; 40 | font-size: 1.125rem; 41 | color: #0366d6; 42 | } 43 | 44 | .breadcrumb::before { 45 | content: ""; 46 | display: block; 47 | width: 22px; 48 | height: 22px; 49 | margin-right: 4px; 50 | background-color: transparent; 51 | background-position: center center; 52 | background-size: contain; 53 | background-image: url("./assets/icon-repository.svg"); 54 | background-repeat: no-repeat; 55 | } 56 | 57 | .breadcrumb a { 58 | color: inherit; 59 | text-decoration: none; 60 | } 61 | 62 | .breadcrumb a:hover { 63 | text-decoration: underline; 64 | } 65 | 66 | .breadcrumb a:first-child::after { 67 | content: "/"; 68 | padding: 0 4px 0 8px; 69 | color: #586069; 70 | } 71 | 72 | /* Pagination */ 73 | 74 | .pagination { 75 | display: flex; 76 | justify-content: center; 77 | align-items: center; 78 | border-radius: 3px; 79 | background-color: #fff; 80 | border: 1px solid #e1e4e8; 81 | } 82 | 83 | .pagination a, 84 | .pagination button { 85 | display: inline-flex; 86 | justify-content: center; 87 | align-items: center; 88 | padding: 7px 12px; 89 | font-size: 13px; 90 | font-weight: 500; 91 | color: #0366d6; 92 | text-decoration: none; 93 | } 94 | 95 | .pagination > a:first-child { 96 | border-radius: 3px 0 0 3px; 97 | } 98 | 99 | .pagination > a:last-child { 100 | border-radius: 0 3px 3px 0; 101 | } 102 | 103 | .pagination ol button { 104 | background-color: #fff; 105 | border: none; 106 | } 107 | 108 | .pagination ol { 109 | display: flex; 110 | justify-content: center; 111 | align-items: center; 112 | padding: 0; 113 | list-style-type: none; 114 | background-color: #fff; 115 | } 116 | 117 | .pagination li { 118 | display: inline-flex; 119 | justify-content: center; 120 | align-items: center; 121 | min-width: 32px; 122 | border-right: 1px solid #e1e4e8; 123 | font-size: 13px; 124 | font-weight: 500; 125 | color: #0366d6; 126 | } 127 | 128 | .pagination li.disabled { 129 | background-color: #fafbfc; 130 | } 131 | 132 | .pagination li.current-page { 133 | border-color: #0366d6; 134 | background-color: #0366d6; 135 | } 136 | 137 | .pagination li.current-page a { 138 | color: #fff; 139 | } 140 | 141 | .pagination *[disabled], 142 | .pagination .disabled { 143 | color: #d1d5da; 144 | background-color: #fafbfc; 145 | } 146 | -------------------------------------------------------------------------------- /html-practice/06-product-card/README.md: -------------------------------------------------------------------------------- 1 | # Product Card 2 | 3 | ### Screenshot 4 | 5 | ![Product Card](https://user-images.githubusercontent.com/19285811/69320327-f2120780-0c7b-11ea-82cf-aed1dfc8810d.png) 6 | -------------------------------------------------------------------------------- /html-practice/06-product-card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Product Card - 김버그의 버그 없는 HTML 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 19 |
20 | 21 |
22 |

23 | 혼자가 혼자에게 24 |

25 | 26 | 오늘의 책 27 | 28 |
29 | 30 | 31 | 이병률 32 | 33 | 34 |
35 | 36 | 43 | 9.4 44 | 45 |
46 |
47 | 48 | 49 | -------------------------------------------------------------------------------- /html-practice/06-product-card/styles.css: -------------------------------------------------------------------------------- 1 | @import url(https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css); 2 | 3 | * { 4 | margin: 0; 5 | box-sizing: border-box; 6 | letter-spacing: -0.03em; 7 | } 8 | 9 | html { 10 | font-family: "SpoqaHanSans"; 11 | font-size: 16px; 12 | line-height: 1.5; 13 | color: #1f2d3d; 14 | } 15 | 16 | body { 17 | display: flex; 18 | flex-direction: column; 19 | justify-content: center; 20 | align-items: center; 21 | width: 100%; 22 | height: 100vh; 23 | margin: 0 auto; 24 | background-color: #1f2d3d; 25 | } 26 | 27 | body::after { 28 | content: "kimbug©"; 29 | display: block; 30 | margin-top: 50px; 31 | color: #fff; 32 | font-size: 12px; 33 | font-weight: 600; 34 | } 35 | 36 | .product-card { 37 | display: flex; 38 | flex-direction: column; 39 | justify-content: center; 40 | align-items: center; 41 | padding: 32px 48px 24px; 42 | border-radius: 4px; 43 | background-color: #fff; 44 | } 45 | 46 | .product-card:hover .product-card-image::after { 47 | box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.4); 48 | } 49 | 50 | .product-card-image { 51 | order: 1; 52 | position: relative; 53 | } 54 | 55 | .product-card-image img { 56 | position: relative; 57 | z-index: 1; 58 | border-radius: 5px; 59 | } 60 | 61 | .product-card-image::after { 62 | content: ""; 63 | position: absolute; 64 | z-index: 0; 65 | left: 50%; 66 | bottom: 8px; 67 | width: 75%; 68 | height: 0; 69 | padding-bottom: 75%; 70 | transform: translateX(-50%); 71 | background-color: #fff; 72 | transition: box-shadow 250ms ease-in; 73 | box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.65); 74 | } 75 | 76 | .product-card-title { 77 | order: 3; 78 | display: flex; 79 | flex-wrap: wrap; 80 | justify-content: center; 81 | align-items: center; 82 | margin-bottom: 16px; 83 | } 84 | 85 | .product-card-title h1 { 86 | font-size: 18px; 87 | line-height: 1.3333333333; 88 | color: #212529; 89 | } 90 | 91 | .product-card-title strong { 92 | padding: 0 5px 0 4px; 93 | border-radius: 4px; 94 | margin-left: 8px; 95 | font-size: 13px; 96 | line-height: 20px; 97 | color: #fff; 98 | background-color: #0257c7; 99 | } 100 | 101 | .product-card-author { 102 | order: 2; 103 | margin: 8px 0; 104 | font-size: 14px; 105 | font-weight: 400; 106 | line-height: 16px; 107 | color: #80868e; 108 | } 109 | 110 | .product-card-review { 111 | order: 4; 112 | display: flex; 113 | justify-content: center; 114 | align-items: center; 115 | margin-left: -4px; 116 | font-size: 14px; 117 | } 118 | 119 | .fas { 120 | color: #ffcf14; 121 | margin-right: -1px; 122 | } 123 | -------------------------------------------------------------------------------- /html-practice/07-instagram-user-profile/README.md: -------------------------------------------------------------------------------- 1 | # Instagram User Profile 2 | 3 | ### Screenshot 4 | 5 | ![Instagram User Profile](https://user-images.githubusercontent.com/19285811/69399228-52f71980-0d28-11ea-81de-96896c41e520.png) 6 | -------------------------------------------------------------------------------- /html-practice/07-instagram-user-profile/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Instagram User Profile - 김버그의 버그 없는 HTML 8 | 9 | 10 | 11 | 12 |
13 |
14 |

15 | _kimbug 16 |

17 |
18 |
19 |
Posts
20 |
112
21 |
22 |
23 |
Followers
24 |
274
25 |
26 |
27 |
Following
28 |
238
29 |
30 |
31 |

32 | 우현 33 |

34 |

35 | 김버그 #frontend #구독 #디지털노마드 🇰🇷🇯🇵🇳🇿🇨🇦🇨🇳🇩🇪🇮🇹🇨🇿🇦🇹🇵🇾🇧🇷🇺🇸🇬🇧🇮🇳🇹🇭🇹🇼🇻🇳🇲🇾🇸🇬🚩 36 |

37 | youtube.com/c/kimbug 38 |
39 |
40 | 44 |
45 |
46 | 47 | 48 | -------------------------------------------------------------------------------- /html-practice/07-instagram-user-profile/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | box-sizing: border-box; 4 | } 5 | 6 | html { 7 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", 8 | "Helvetica Neue", sans-serif; 9 | font-size: 16px; 10 | line-height: 1.5; 11 | color: #1f2d3d; 12 | } 13 | 14 | body { 15 | display: flex; 16 | flex-direction: column; 17 | justify-content: center; 18 | align-items: center; 19 | width: 100%; 20 | height: 100vh; 21 | margin: 0 auto; 22 | background-color: #f8f9fa; 23 | } 24 | 25 | body::after { 26 | content: "kimbug©"; 27 | display: block; 28 | margin-top: 50px; 29 | color: #1f2d3d; 30 | font-size: 12px; 31 | font-weight: 600; 32 | } 33 | 34 | .user-profile { 35 | display: flex; 36 | flex-direction: row-reverse; 37 | justify-content: space-between; 38 | width: 100%; 39 | max-width: 960px; 40 | padding: 40px 24px; 41 | border-radius: 6px; 42 | background-color: #fff; 43 | } 44 | 45 | .user-profile-photo { 46 | display: flex; 47 | justify-content: center; 48 | align-items: flex-start; 49 | width: 300px; 50 | margin-right: 30px; 51 | } 52 | 53 | .user-profile-photo img { 54 | width: 150px; 55 | height: auto; 56 | border-radius: 150px; 57 | border: 1px solid #eaeaea; 58 | } 59 | 60 | .user-profile-data { 61 | flex-grow: 2; 62 | padding: 4px 0; 63 | } 64 | 65 | .user-profile-data h1 { 66 | font-size: 28px; 67 | font-weight: 300; 68 | line-height: 32px; 69 | margin: -5px 0 20px; 70 | } 71 | 72 | .user-profile-data dl { 73 | display: flex; 74 | justify-content: flex-start; 75 | align-items: center; 76 | margin-bottom: 20px; 77 | } 78 | 79 | .user-profile-data dl div { 80 | display: flex; 81 | flex-direction: row-reverse; 82 | margin-right: 40px; 83 | font-size: 16px; 84 | white-space: nowrap; 85 | } 86 | 87 | .user-profile-data dl dt { 88 | font-weight: 400; 89 | text-transform: lowercase; 90 | margin-left: 4px; 91 | } 92 | 93 | .user-profile-data dl dd { 94 | font-weight: 700; 95 | } 96 | 97 | .user-profile-data h2, 98 | .user-profile-data p, 99 | .user-profile-data a { 100 | font-size: 16px; 101 | line-height: 24px; 102 | } 103 | 104 | .user-profile-data h2 { 105 | font-weight: 600; 106 | } 107 | 108 | .user-profile-data a { 109 | color: #003569; 110 | text-decoration: none; 111 | font-weight: 600; 112 | } 113 | -------------------------------------------------------------------------------- /html-practice/08-receipt/README.md: -------------------------------------------------------------------------------- 1 | # Receipt 2 | 3 | ### Screenshot 4 | 5 | ![Receipt](https://user-images.githubusercontent.com/19285811/69402886-221ce180-0d34-11ea-9a95-d2c774a96c63.png) 6 | -------------------------------------------------------------------------------- /html-practice/08-receipt/assets/barcode.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.15, written by Peter Selinger 2001-2017 9 | 10 | 12 | 13 | 14 | 15 | 17 | 18 | 20 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 52 | 54 | 55 | 57 | 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /html-practice/08-receipt/assets/logo-mcdonalds.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/html-practice/08-receipt/assets/logo-mcdonalds.png -------------------------------------------------------------------------------- /html-practice/08-receipt/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Receipt - 김버그의 버그 없는 HTML 8 | 9 | 10 | 11 | 12 |

13 | Bill sharing request 14 | from Kimbug 15 |

16 |
17 |

18 | McDonald's 19 |

20 | 21 | Barcode 22 | 23 | 24.06.20xx 24 |
25 |
26 |
27 |
Coke Light - 0.3L
28 |
29 | 30 | $1.50 31 | 32 |
33 |
34 |
35 |
Heineken Beer - 0.5L
36 |
37 | 38 | $3.25 39 | 40 |
41 |
42 |
43 |
Chicken McNuggets
44 |
45 | 46 | $21.00 47 | 48 |
49 |
50 |
51 |
52 |
In total
53 |
54 | 55 | $25.75 56 | 57 |
58 |
59 |
60 |
61 | 62 | 63 | -------------------------------------------------------------------------------- /html-practice/08-receipt/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | html { 9 | font-family: "Nunito Sans", sans-serif; 10 | font-size: 16px; 11 | line-height: 1.5; 12 | color: #1f2d3d; 13 | } 14 | 15 | body { 16 | display: flex; 17 | flex-direction: column; 18 | justify-content: center; 19 | align-items: center; 20 | width: 100%; 21 | height: 100vh; 22 | margin: 0 auto; 23 | background-color: #1f2d3d; 24 | } 25 | 26 | body::after { 27 | content: "kimbug©"; 28 | display: block; 29 | margin-top: 50px; 30 | color: #fff; 31 | font-size: 12px; 32 | font-weight: 600; 33 | } 34 | 35 | body > h1 { 36 | margin-bottom: 32px; 37 | font-size: 20px; 38 | line-height: 28px; 39 | color: #fff; 40 | } 41 | 42 | body > h1 span { 43 | display: block; 44 | font-size: 14px; 45 | font-weight: 400; 46 | line-height: 20px; 47 | opacity: 0.5; 48 | } 49 | 50 | body > h1 a { 51 | color: #fff; 52 | text-decoration: none; 53 | } 54 | 55 | body > h1, 56 | .receipt { 57 | width: 100%; 58 | max-width: 320px; 59 | } 60 | 61 | .receipt { 62 | display: flex; 63 | flex-direction: column; 64 | justify-content: center; 65 | align-items: center; 66 | padding: 48px 32px 32px; 67 | border-radius: 12px; 68 | background-color: #fff; 69 | background-image: url("./assets/logo-mcdonalds.png"); 70 | background-repeat: no-repeat; 71 | background-size: 40px auto; 72 | background-position: 91% 28px; 73 | } 74 | 75 | .receipt > span { 76 | order: 1; 77 | display: block; 78 | width: 100%; 79 | margin-bottom: 20px; 80 | font-size: 14px; 81 | line-height: 20px; 82 | font-weight: 600; 83 | color: #80868e; 84 | } 85 | 86 | .receipt h2 { 87 | order: 2; 88 | margin-bottom: 24px; 89 | font-size: 18px; 90 | font-weight: 600; 91 | line-height: 24px; 92 | color: #333e47; 93 | } 94 | 95 | .receipt .barcode { 96 | order: 3; 97 | width: 120px; 98 | margin-bottom: 32px; 99 | } 100 | 101 | .receipt img { 102 | width: 100%; 103 | height: auto; 104 | } 105 | 106 | .receipt > div { 107 | order: 4; 108 | } 109 | 110 | .receipt dl { 111 | width: 100%; 112 | } 113 | 114 | .receipt dl div, 115 | .receipt dl:last-child { 116 | display: flex; 117 | justify-content: space-between; 118 | margin-bottom: 4px; 119 | font-size: 14px; 120 | color: 333e47; 121 | opacity: 0.8; 122 | } 123 | 124 | .receipt dl:last-child { 125 | margin-bottom: 16px; 126 | } 127 | 128 | .receipt > div { 129 | display: flex; 130 | flex-direction: column-reverse; 131 | width: 100%; 132 | } 133 | -------------------------------------------------------------------------------- /html-practice/09-github-dropdown-menu/README.md: -------------------------------------------------------------------------------- 1 | # Github Dropdown Menu 2 | 3 | ### Screenshot 4 | 5 | ![Github Dropdown Menu](https://user-images.githubusercontent.com/19285811/69483354-37435e80-0e61-11ea-82ee-f90916b51f42.png) 6 | 7 | ![How Dropdown Menu Works](https://user-images.githubusercontent.com/19285811/69483378-84273500-0e61-11ea-979a-88fd16b34984.gif) 8 | -------------------------------------------------------------------------------- /html-practice/09-github-dropdown-menu/app.js: -------------------------------------------------------------------------------- 1 | var dropdownMenu = document.querySelector(".dropdown-menu") 2 | var dropdownButton = document.querySelector(".dropdown-button") 3 | 4 | dropdownButton.addEventListener("click", function(event) { 5 | if (this.active) { 6 | dropdownMenu.classList.remove("active") 7 | } else { 8 | dropdownMenu.classList.add("active") 9 | } 10 | 11 | this.active = !this.active 12 | }) 13 | 14 | dropdownButton.active = false 15 | -------------------------------------------------------------------------------- /html-practice/09-github-dropdown-menu/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Github Dropdown Menu - 김버그의 버그 없는 HTML 8 | 9 | 10 | 11 | 12 |
13 | 19 |
20 |

21 | Signed in as rohjs 22 |

23 | 40 | 54 |
55 |
56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /html-practice/09-github-dropdown-menu/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | box-sizing: border-box; 4 | } 5 | 6 | html { 7 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", 8 | "Helvetica Neue", sans-serif; 9 | font-size: 16px; 10 | line-height: 1.5; 11 | color: #1f2d3d; 12 | } 13 | 14 | body { 15 | display: flex; 16 | flex-direction: column; 17 | justify-content: center; 18 | align-items: center; 19 | width: 100%; 20 | height: 100vh; 21 | margin: 0 auto; 22 | background-color: #1f2d3d; 23 | } 24 | 25 | body::after { 26 | content: "kimbug©"; 27 | display: block; 28 | margin-top: 50px; 29 | color: #fff; 30 | font-size: 12px; 31 | font-weight: 600; 32 | } 33 | 34 | .dropdown { 35 | position: relative; 36 | } 37 | 38 | .dropdown-button { 39 | width: 40px; 40 | padding: 0; 41 | border: none; 42 | border-radius: 5px; 43 | overflow: hidden; 44 | background-color: transparent; 45 | cursor: pointer; 46 | } 47 | 48 | .dropdown-button:hover { 49 | opacity: 0.75; 50 | } 51 | 52 | .dropdown-button:focus, 53 | .dropdown-button:active { 54 | box-shadow: none; 55 | outline: none; 56 | } 57 | 58 | .dropdown-button img { 59 | width: 100%; 60 | height: auto; 61 | } 62 | 63 | .dropdown-menu { 64 | display: none; 65 | position: absolute; 66 | top: 100%; 67 | right: 0; 68 | width: 200px; 69 | padding: 8px 0; 70 | border-radius: 4px; 71 | background-color: #fff; 72 | box-shadow: 0 1px 15px rgba(27, 31, 35, 0.15); 73 | transition: transform 200ms ease-in; 74 | } 75 | 76 | .dropdown-menu.active { 77 | display: block; 78 | } 79 | 80 | .dropdown-menu:hover { 81 | transform: translateY(2px); 82 | } 83 | 84 | .dropdown-menu::before { 85 | content: ""; 86 | position: absolute; 87 | top: -18px; 88 | right: 12px; 89 | width: 0; 90 | height: 0; 91 | border-top: 9px solid transparent; 92 | border-left: 8px solid transparent; 93 | border-bottom: 9px solid #fff; 94 | border-right: 8px solid transparent; 95 | } 96 | 97 | .dropdown-menu h3, 98 | .dropdown-menu a { 99 | font-size: 14px; 100 | line-height: 1.5; 101 | color: #24292e; 102 | text-decoration: none; 103 | } 104 | 105 | .dropdown-menu h3 { 106 | padding: 8px 16px 16px; 107 | border-bottom: 1px solid #e1e4e8; 108 | font-weight: 500; 109 | } 110 | 111 | .dropdown-menu h3 strong { 112 | font-weight: 700; 113 | } 114 | 115 | .dropdown-menu h3 strong:hover { 116 | opacity: 0.5; 117 | } 118 | 119 | .dropdown-menu ul { 120 | list-style-type: none; 121 | padding: 8px 0; 122 | } 123 | 124 | .dropdown-menu ul:last-child { 125 | border-top: 1px solid #e1e4e8; 126 | } 127 | 128 | .dropdown-menu ul a { 129 | display: block; 130 | padding: 8px 16px; 131 | font-size: 14px; 132 | line-height: 1.5; 133 | color: #24292e; 134 | text-decoration: none; 135 | } 136 | 137 | .dropdown-menu ul a:hover { 138 | color: #fff; 139 | background-color: #0366d6; 140 | } 141 | -------------------------------------------------------------------------------- /html-practice/10-input-group/README.md: -------------------------------------------------------------------------------- 1 | # Input Group 2 | 3 | ### Screenshot 4 | 5 | ![Input Group](https://user-images.githubusercontent.com/19285811/70762571-f1a4f200-1d8b-11ea-9227-67540eeddf0f.png) 6 | -------------------------------------------------------------------------------- /html-practice/10-input-group/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Input Group - 김버그의 버그 없는 HTML 8 | 9 | 10 | 11 |
12 |

Manage Subscriptions

13 |

14 | You can follow the discussion on @kimbug without to leave a comment. Cool, huh?
15 | Just enter your email address in the form here below and you are all set 16 |

17 |
18 | 19 | 20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /html-practice/10-input-group/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Nunito+Sans:400,600&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | html { 9 | font-family: "Nunito Sans", sans-serif; 10 | font-size: 16px; 11 | line-height: 1.5; 12 | color: #1f2d3d; 13 | } 14 | 15 | body { 16 | display: flex; 17 | flex-direction: column; 18 | justify-content: center; 19 | align-items: center; 20 | width: 100%; 21 | height: 100vh; 22 | margin: 0 auto; 23 | background-color: #f8f9fa; 24 | } 25 | 26 | body::after { 27 | content: "kimbug©"; 28 | display: block; 29 | margin-top: 50px; 30 | color: #1f2d3d; 31 | font-size: 12px; 32 | font-weight: 600; 33 | } 34 | 35 | .subscription { 36 | display: flex; 37 | flex-direction: column; 38 | justify-content: center; 39 | align-items: center; 40 | align-items: center; 41 | padding: 32px 56px; 42 | border-radius: 6px; 43 | text-align: center; 44 | background-color: #fff; 45 | box-shadow: 0 3px 30px 0 rgba(0, 0, 0, 0.025); 46 | } 47 | 48 | .subscription h1 { 49 | margin-bottom: 8px; 50 | font-size: 24px; 51 | line-height: 1.6666666667; 52 | font-weight: 600; 53 | color: #212529; 54 | } 55 | 56 | .subscription p { 57 | color: #333e47; 58 | } 59 | 60 | .input-group { 61 | display: flex; 62 | justify-content: center; 63 | align-items: center; 64 | margin-top: 20px; 65 | } 66 | 67 | .input-group input { 68 | width: 240px; 69 | height: 36px; 70 | padding: 0 12px; 71 | border: none; 72 | border-radius: 4px; 73 | margin-right: 4px; 74 | font-size: 14px; 75 | font-family: "Nunito Sans", sans-serif; 76 | background-color: #f6f8fa; 77 | color: #333e47; 78 | } 79 | 80 | .input-group input:focus, 81 | .input-group button:focus { 82 | box-shadow: none; 83 | outline: none; 84 | } 85 | 86 | .input-group input::placeholder { 87 | color: #b6bec8; 88 | } 89 | 90 | .input-group button { 91 | height: 36px; 92 | padding: 0 12px; 93 | border: none; 94 | border-radius: 4px; 95 | font-size: 14px; 96 | font-family: "Nunito Sans", sans-serif; 97 | font-weight: 600; 98 | color: #fff; 99 | background-color: #ff4438; 100 | } 101 | -------------------------------------------------------------------------------- /html-practice/11-feed/README.md: -------------------------------------------------------------------------------- 1 | # Feed 2 | 3 | ### Screenshot 4 | 5 | ![Feed](https://user-images.githubusercontent.com/19285811/69111821-b0d1fa00-0ab9-11ea-8089-193985090db6.png) 6 | 7 | ![How Feed Works](https://user-images.githubusercontent.com/19285811/69111955-0e664680-0aba-11ea-8a9b-5181516ce052.gif) 8 | -------------------------------------------------------------------------------- /html-practice/11-feed/app.js: -------------------------------------------------------------------------------- 1 | var followButton = document.querySelector(".feed-user-profile button") 2 | var likeButton = document.querySelector(".feed-footer button:first-child") 3 | var commentButton = document.querySelector(".feed-footer button:last-child") 4 | var feedComment = document.querySelector(".feed-comment") 5 | 6 | followButton.addEventListener("click", function() { 7 | if (this.following) { 8 | this.innerHTML = "Follow" 9 | this.classList.remove("following") 10 | } else { 11 | this.innerHTML = "Following" 12 | this.classList.add("following") 13 | } 14 | this.following = !this.following 15 | }) 16 | followButton.following = false 17 | 18 | likeButton.addEventListener("click", function() { 19 | if (this.following) { 20 | this.innerHTML = "10 Likes" 21 | this.classList.remove("active") 22 | } else { 23 | this.innerHTML = "11 Likes" 24 | this.classList.add("active") 25 | } 26 | this.following = !this.following 27 | }) 28 | likeButton.following = false 29 | 30 | commentButton.addEventListener("click", function() { 31 | if (this.active) { 32 | feedComment.classList.remove("active") 33 | } else { 34 | feedComment.classList.add("active") 35 | } 36 | this.active = !this.active 37 | }) 38 | commentButton.active = false 39 | -------------------------------------------------------------------------------- /html-practice/11-feed/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Feed - 김버그의 버그 없는 HTML 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 | 김버그 19 | 20 |
21 |

22 | 23 | Kimbug 24 | 25 |

26 | 30 min 27 |
28 | 31 |
32 |
33 |

34 | The most beautiful experience we can have is the mysterious. It is the fundamental emotion that stands at the 35 | cradle of true art and true science. — Albert Einstein 36 |

37 |
38 |
39 | 42 | 45 |
46 |
47 | 48 | 49 |
50 |
51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /html-practice/11-feed/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | box-sizing: border-box; 4 | } 5 | 6 | html { 7 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", 8 | "Helvetica Neue", sans-serif; 9 | font-size: 16px; 10 | line-height: 1.5; 11 | color: #1f2d3d; 12 | } 13 | 14 | body { 15 | display: flex; 16 | flex-direction: column; 17 | justify-content: center; 18 | align-items: center; 19 | width: 100%; 20 | height: 100vh; 21 | margin: 0 auto; 22 | background-color: #f8f9fa; 23 | } 24 | 25 | body::after { 26 | content: "kimbug©"; 27 | display: block; 28 | margin-top: 50px; 29 | color: #1f2d3d; 30 | font-size: 12px; 31 | font-weight: 600; 32 | } 33 | 34 | .feed { 35 | width: 100%; 36 | max-width: 420px; 37 | background-color: #fff; 38 | box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.04); 39 | padding: 16px 20px; 40 | border-radius: 5px; 41 | } 42 | 43 | .feed button { 44 | display: inline-flex; 45 | justify-content: center; 46 | align-items: center; 47 | font-size: 14px; 48 | color: #0257c7; 49 | cursor: pointer; 50 | } 51 | 52 | .feed button:hover, 53 | .feed button:focus { 54 | outline: none; 55 | box-shadow: none; 56 | } 57 | 58 | .feed-user-profile { 59 | position: relative; 60 | display: flex; 61 | align-items: flex-end; 62 | width: 100%; 63 | margin-bottom: 16px; 64 | } 65 | 66 | .feed-user-profile > a { 67 | margin-right: 12px; 68 | line-height: 1; 69 | } 70 | 71 | .feed-user-profile > a img { 72 | width: 32px; 73 | height: 32px; 74 | border-radius: 32px; 75 | } 76 | 77 | .feed-user-profile div { 78 | display: flex; 79 | flex-direction: column; 80 | justify-content: center; 81 | } 82 | 83 | .feed-user-profile h1 { 84 | margin-bottom: 0; 85 | font-size: 14px; 86 | font-weight: 500; 87 | line-height: 20px; 88 | color: #212529; 89 | } 90 | 91 | .feed-user-profile a { 92 | color: inherit; 93 | text-decoration: none; 94 | } 95 | 96 | .feed-user-profile a:hover { 97 | opacity: 0.5; 98 | } 99 | 100 | .feed-user-profile span { 101 | color: #80868e; 102 | font-size: 12px; 103 | line-height: 16px; 104 | } 105 | 106 | .feed-user-profile button { 107 | position: absolute; 108 | top: 50%; 109 | right: 16px; 110 | display: inline-flex; 111 | justify-content: center; 112 | align-items: center; 113 | height: 32px; 114 | padding: 0 16px; 115 | border: 1px solid #dbdee4; 116 | border-radius: 4px; 117 | transform: translateY(-50%); 118 | transition: color 300ms, background-color 400ms, border-color 300ms; 119 | } 120 | 121 | .feed-user-profile button.following { 122 | background-color: #006ffe; 123 | border-color: #006ffe; 124 | color: #fff; 125 | } 126 | 127 | .feed-content { 128 | margin-bottom: 8px; 129 | } 130 | 131 | .feed-content p { 132 | font-size: 16px; 133 | line-height: 1.375; 134 | letter-spacing: -0.01em; 135 | color: #333e47; 136 | } 137 | 138 | .feed-footer button { 139 | height: 32px; 140 | padding: 0; 141 | border: none; 142 | margin-right: 12px; 143 | color: #0081ff; 144 | background-color: #fff; 145 | } 146 | 147 | .feed-footer button:hover { 148 | color: #006ffe; 149 | } 150 | 151 | .feed-footer button:first-child.active { 152 | font-weight: 700; 153 | } 154 | 155 | .feed-comment { 156 | display: none; 157 | margin-top: 4px; 158 | } 159 | 160 | .feed-comment.active { 161 | display: block; 162 | } 163 | 164 | .feed-comment textarea { 165 | width: 100%; 166 | height: 64px; 167 | padding: 10px 12px; 168 | border: 1px solid #dbdee4; 169 | border-radius: 3px; 170 | margin-bottom: 4px; 171 | font-size: 14px; 172 | line-height: 1.4285714286; 173 | color: #333e47; 174 | transition: border-color 250ms ease-in-out; 175 | } 176 | 177 | .feed-comment textarea:focus { 178 | outline: none; 179 | border-color: #b6bec8; 180 | } 181 | 182 | .feed-comment textarea::placeholder { 183 | color: #b6bec8; 184 | } 185 | 186 | .feed-comment button { 187 | display: inline-flex; 188 | justify-content: center; 189 | align-items: center; 190 | height: 32px; 191 | padding: 0 16px; 192 | border-radius: 4px; 193 | transition: background-color 100ms; 194 | background-color: #0081ff; 195 | border-color: #0081ff; 196 | color: #fff; 197 | } 198 | 199 | .feed-comment button:hover { 200 | background-color: #006ffe; 201 | } 202 | -------------------------------------------------------------------------------- /html-practice/12-gmail-inbox/README.md: -------------------------------------------------------------------------------- 1 | # Gmail Inbox 2 | 3 | ### Screenshot 4 | 5 | ![Gmail Inbox](https://user-images.githubusercontent.com/19285811/70840878-98eb5d00-1e50-11ea-9109-06094e6110be.png) 6 | 7 | ![How Gmail Inbox Works](https://user-images.githubusercontent.com/19285811/70840900-cf28dc80-1e50-11ea-89f4-93ae36e1847b.gif) 8 | 9 | -------------------------------------------------------------------------------- /html-practice/12-gmail-inbox/app.js: -------------------------------------------------------------------------------- 1 | var inboxCheckboxes = document.querySelectorAll(".inbox-checkbox") 2 | var inboxStars = document.querySelectorAll(".inbox-star") 3 | 4 | inboxCheckboxes.forEach(function(item) { 5 | item.addEventListener("click", toggle) 6 | item.active = false 7 | }) 8 | 9 | inboxStars.forEach(function(item) { 10 | item.addEventListener("click", toggle) 11 | item.active = false 12 | }) 13 | 14 | function toggle() { 15 | if (this.active) { 16 | this.classList.remove("active") 17 | } else { 18 | this.classList.add("active") 19 | } 20 | 21 | this.active = !this.active 22 | } 23 | -------------------------------------------------------------------------------- /html-practice/12-gmail-inbox/assets/icon-checkbox-checked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /html-practice/12-gmail-inbox/assets/icon-checkbox-outlined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /html-practice/12-gmail-inbox/assets/icon-star-border.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /html-practice/12-gmail-inbox/assets/icon-star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /html-practice/12-gmail-inbox/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Gmail Inbox - 김버그의 버그 없는 HTML 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 20 | 23 | 26 | 27 | 28 | 29 | 30 | 41 | 44 | 55 | 58 | 59 | 60 | 71 | 74 | 83 | 86 | 87 | 88 |
15 | Actions 16 | 18 | Sender 19 | 21 | Title 22 | 24 | Timestamp 25 |
31 |
32 |
33 | 34 | 35 |
36 | 39 |
40 | 		42 | Goorm Edu 43 | 45 | 46 | Unread 47 | 48 | Rate your course: FRONTEND 101 WITH KIMBUG 49 | 50 | 51 | - Woohyeon. How’s everything going? We want to hear your opinion on... 52 | 53 | 54 | 56 | 3:34 PM 57 |
61 |
62 |
63 | 64 | 65 |
66 | 69 |
70 | 		72 | Goorm Edu 73 | 75 | 76 | Read 77 | Rate your course: FRONTEND 101 WITH KIMBUG 78 | 79 | - Woohyeon. How’s everything going? We want to hear your opinion on... 80 | 81 | 82 | 84 | 3:34 PM 85 |
89 | 90 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /html-practice/12-gmail-inbox/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | box-sizing: border-box; 4 | } 5 | 6 | html { 7 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", 8 | "Helvetica Neue", sans-serif; 9 | font-size: 16px; 10 | line-height: 1.5; 11 | color: #1f2d3d; 12 | } 13 | 14 | body { 15 | display: flex; 16 | flex-direction: column; 17 | justify-content: center; 18 | align-items: center; 19 | width: 100%; 20 | height: 100vh; 21 | margin: 0 auto; 22 | background-color: #ee5253; 23 | } 24 | 25 | body::after { 26 | content: "kimbug©"; 27 | display: block; 28 | margin-top: 50px; 29 | color: #fff; 30 | font-size: 12px; 31 | font-weight: 600; 32 | } 33 | 34 | .sr-only { 35 | position: absolute; 36 | top: -9999px; 37 | left: -9999px; 38 | z-index: -1; 39 | width: 1px; 40 | height: 1px; 41 | overflow: hidden; 42 | visibility: hidden; 43 | } 44 | 45 | .inbox { 46 | max-width: 1140px; 47 | border-collapse: collapse; 48 | border-radius: 4px; 49 | background-color: #fff; 50 | font-size: 13.5px; 51 | color: #212529; 52 | white-space: nowrap; 53 | } 54 | 55 | .inbox thead { 56 | position: absolute; 57 | z-index: -1; 58 | } 59 | 60 | .inbox tr { 61 | transition: box-shadow 150ms ease-in-out; 62 | } 63 | 64 | .inbox tr:not(:last-child) { 65 | box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1); 66 | } 67 | 68 | .inbox tr:hover { 69 | box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.14); 70 | } 71 | 72 | .inbox tr.unread { 73 | font-weight: 700; 74 | } 75 | 76 | .inbox tr.unread span { 77 | font-weight: 400 !important; 78 | } 79 | 80 | .inbox span:not(:nth-child(2)) { 81 | opacity: 0.75; 82 | } 83 | 84 | .inbox th, 85 | .inbox td { 86 | padding: 8px 16px; 87 | } 88 | 89 | .inbox th:nth-child(3), 90 | .inbox td:nth-child(3) { 91 | padding-right: 64px; 92 | } 93 | 94 | .inbox th:last-child, 95 | .inbox td:last-child { 96 | font-size: 12px; 97 | } 98 | 99 | .inbox a { 100 | color: inherit; 101 | text-decoration: none; 102 | } 103 | 104 | .inbox-actions { 105 | display: flex; 106 | align-items: center; 107 | } 108 | 109 | .inbox-actions > * { 110 | width: 24px; 111 | height: 24px; 112 | padding: 0; 113 | margin: 0 2px; 114 | } 115 | 116 | .inbox-star, 117 | .inbox-checkbox::after { 118 | display: inline-block; 119 | width: 24px; 120 | height: 24px; 121 | border: none; 122 | background-color: transparent; 123 | background-size: contain; 124 | background-position: center center; 125 | background-repeat: no-repeat; 126 | cursor: pointer; 127 | transition: opacity 100ms; 128 | } 129 | 130 | .inbox-star:hover, 131 | .inbox-checkbox:hover::after { 132 | opacity: 0.75; 133 | } 134 | 135 | .inbox-star:focus, 136 | .inbox-checkbox:focus { 137 | outline: none; 138 | box-shadow: none; 139 | } 140 | 141 | .inbox-star { 142 | background-image: url(./assets/icon-star-border.svg); 143 | } 144 | 145 | .inbox-star.active { 146 | background-image: url(./assets/icon-star.svg); 147 | } 148 | 149 | .inbox-checkbox::after { 150 | content: ""; 151 | background-size: 90% auto; 152 | background-image: url(./assets/icon-checkbox-outlined.svg); 153 | } 154 | 155 | .inbox-checkbox.active::after { 156 | background-image: url(./assets/icon-checkbox-checked.svg); 157 | } 158 | 159 | .inbox-checkbox { 160 | position: relative; 161 | top: 1px; 162 | overflow: hidden; 163 | } 164 | 165 | .inbox-checkbox input { 166 | position: absolute; 167 | top: 0; 168 | left: 0; 169 | width: 100%; 170 | height: 100%; 171 | opacity: 0; 172 | } 173 | -------------------------------------------------------------------------------- /html-practice/13-music-player/README.md: -------------------------------------------------------------------------------- 1 | # Music Player 2 | 3 | ### Screenshot 4 | 5 | ![Music Player](https://user-images.githubusercontent.com/19285811/71177346-62717000-229e-11ea-9347-09a098cf4674.png) 6 | -------------------------------------------------------------------------------- /html-practice/13-music-player/app.js: -------------------------------------------------------------------------------- 1 | var musicPlayItems = document.querySelectorAll(".music-play-item") 2 | 3 | musicPlayItems.forEach(function(item) { 4 | item.isPlaying = false 5 | item.audio = item.querySelector("audio") 6 | 7 | item.addEventListener("click", function() { 8 | if (this.isPlaying) { 9 | item.audio.pause() 10 | item.audio.currentTime = 0 11 | } else { 12 | item.audio.play() 13 | } 14 | 15 | item.isPlaying = !item.isPlaying 16 | }) 17 | }) 18 | -------------------------------------------------------------------------------- /html-practice/13-music-player/assets/music-1.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/html-practice/13-music-player/assets/music-1.mp3 -------------------------------------------------------------------------------- /html-practice/13-music-player/assets/music-2.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/html-practice/13-music-player/assets/music-2.mp3 -------------------------------------------------------------------------------- /html-practice/13-music-player/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Music Player - 김버그의 버그 없는 HTML 8 | 9 | 10 | 11 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /html-practice/13-music-player/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | box-sizing: border-box; 4 | } 5 | 6 | html { 7 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", 8 | "Helvetica Neue", sans-serif; 9 | font-size: 16px; 10 | line-height: 1.5; 11 | color: #1f2d3d; 12 | } 13 | 14 | body { 15 | display: flex; 16 | flex-direction: column; 17 | justify-content: center; 18 | align-items: center; 19 | width: 100%; 20 | height: 100vh; 21 | margin: 0 auto; 22 | background-color: #f8f9fa; 23 | } 24 | 25 | body::after { 26 | content: "kimbug©"; 27 | display: block; 28 | margin-top: 50px; 29 | color: #1f2d3d; 30 | font-size: 12px; 31 | font-weight: 600; 32 | } 33 | 34 | ul, 35 | li { 36 | list-style-type: none; 37 | padding-left: 0; 38 | margin-left: 0; 39 | } 40 | 41 | .sr-only { 42 | position: absolute; 43 | top: -9999px; 44 | left: -9999px; 45 | z-index: -1; 46 | width: 1px; 47 | height: 1px; 48 | overflow: hidden; 49 | visibility: hidden; 50 | } 51 | 52 | .music-player { 53 | width: 100%; 54 | max-width: 540px; 55 | padding: 20px; 56 | border-radius: 4px; 57 | background-color: #fff; 58 | box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.05); 59 | } 60 | 61 | .music-play-item { 62 | position: relative; 63 | display: flex; 64 | align-items: center; 65 | align-content: center; 66 | width: 100%; 67 | } 68 | 69 | .music-album-cover { 70 | width: 50px; 71 | height: 50px; 72 | border-radius: 3px; 73 | margin-right: 16px; 74 | } 75 | 76 | .music-info { 77 | flex-grow: 1; 78 | display: flex; 79 | justify-content: space-between; 80 | align-content: center; 81 | align-items: center; 82 | padding: 8px 0; 83 | border-top: 1px solid #e5e5e5; 84 | cursor: pointer; 85 | } 86 | 87 | .music-info * { 88 | transition: opacity 120ms; 89 | } 90 | 91 | .music-info:hover * { 92 | opacity: 0.6; 93 | } 94 | 95 | .music-play-item:last-child .music-info { 96 | border-bottom: 1px solid #e5e5e5; 97 | } 98 | 99 | .music-info-detail * { 100 | font-weight: 400; 101 | } 102 | 103 | .music-info-detail h1 { 104 | font-size: 16px; 105 | line-height: 1.2; 106 | color: #383838; 107 | } 108 | 109 | .music-info-detail strong { 110 | display: block; 111 | font-size: 14px; 112 | color: #8e8e93; 113 | } 114 | 115 | .music-playtime { 116 | font-size: 14px; 117 | color: #909095; 118 | } 119 | -------------------------------------------------------------------------------- /html-practice/14-video-player/README.md: -------------------------------------------------------------------------------- 1 | # Video Player 2 | 3 | ### Screenshot 4 | 5 | ![Video Player](https://user-images.githubusercontent.com/19285811/71177216-10304f00-229e-11ea-9c1c-a6d57e9d8bfb.png) 6 | -------------------------------------------------------------------------------- /html-practice/14-video-player/assets/kimbug-bjj.mov: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/html-practice/14-video-player/assets/kimbug-bjj.mov -------------------------------------------------------------------------------- /html-practice/14-video-player/assets/kimbug-bjj.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohjs/bugless-101/cc64c9b6e3b2b5a230bd0b0507c2e2fe9ec0a2e5/html-practice/14-video-player/assets/kimbug-bjj.mp4 -------------------------------------------------------------------------------- /html-practice/14-video-player/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Video Player - 김버그의 버그 없는 HTML 8 | 9 | 10 | 11 |
12 |
13 | 17 |
18 |
19 |

주짓수 4주차 롤링 영상

20 |

30초 만에 압살 실화인가

21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /html-practice/14-video-player/styles.css: -------------------------------------------------------------------------------- 1 | @import url(https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css); 2 | 3 | * { 4 | margin: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | html { 9 | font-family: "SpoqaHanSans"; 10 | font-size: 16px; 11 | line-height: 1.5; 12 | color: #1f2d3d; 13 | } 14 | 15 | body { 16 | display: flex; 17 | flex-direction: column; 18 | justify-content: center; 19 | align-items: center; 20 | width: 100%; 21 | height: 100vh; 22 | margin: 0 auto; 23 | background-color: #f8f9fa; 24 | } 25 | 26 | body::after { 27 | content: "kimbug©"; 28 | display: block; 29 | margin-top: 50px; 30 | color: #1f2d3d; 31 | font-size: 12px; 32 | font-weight: 600; 33 | } 34 | 35 | .video-player { 36 | width: 100%; 37 | max-width: 400px; 38 | border-radius: 4px; 39 | overflow: hidden; 40 | transition: box-shadow 200ms; 41 | } 42 | 43 | .video-player:hover { 44 | box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.05); 45 | } 46 | 47 | .video-container { 48 | position: relative; 49 | width: 100%; 50 | height: 0; 51 | padding-bottom: 56.24%; 52 | overflow: hidden; 53 | } 54 | 55 | .video-container video { 56 | position: absolute; 57 | top: 0; 58 | left: 0; 59 | width: 100%; 60 | height: 100%; 61 | } 62 | 63 | .video-player-info { 64 | background-color: #fff; 65 | padding: 8px 10px 10px; 66 | } 67 | 68 | .video-player-info h1 { 69 | margin-bottom: 2px; 70 | font-size: 16px; 71 | letter-spacing: -0.03em; 72 | color: #383838; 73 | } 74 | 75 | .video-player-info p { 76 | font-size: 13px; 77 | letter-spacing: -0.03em; 78 | color: #8e8e93; 79 | } 80 | -------------------------------------------------------------------------------- /twitter-markup-challenge/01-header.html: -------------------------------------------------------------------------------- 1 |
2 |

3 | 4 | Twitter 5 | 6 |

7 |
8 | -------------------------------------------------------------------------------- /twitter-markup-challenge/02-global-navigation.html: -------------------------------------------------------------------------------- 1 | 62 | -------------------------------------------------------------------------------- /twitter-markup-challenge/03-main.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Home

4 | 7 |
8 |

Home shows you top Tweets first

9 | 18 | 19 | 20 | View content preferences 21 | 22 |
23 |
24 |
25 | -------------------------------------------------------------------------------- /twitter-markup-challenge/04-tweet-form.html: -------------------------------------------------------------------------------- 1 |
2 |

What's happening?

3 | 4 |
5 | @kimbugx 6 | 7 | 10 | 11 | 14 | 17 | 20 | 21 | 24 | 25 |
26 |
27 | -------------------------------------------------------------------------------- /twitter-markup-challenge/05-timeline.html: -------------------------------------------------------------------------------- 1 |
2 |

Your Timeline

3 |
    4 |
  1. 5 | 6 |
    2. 7 |
8 |
9 | -------------------------------------------------------------------------------- /twitter-markup-challenge/06-tweet.html: -------------------------------------------------------------------------------- 1 |
2 |

A Tweet from 김익명

3 |
4 | 5 | 김익명 6 | 7 |

8 | 9 | 김익명 10 | 11 |

12 |
13 |
14 |
Username
15 |
16 | 17 | @anonymouskim 18 | 19 |
20 |
21 |
22 |
Posted
23 |
24 | 25 | Dec 25 26 | 27 |
28 |
29 |
30 | 33 |
34 | 38 | 42 | 46 | 50 | 54 | 58 |
59 |
60 | 61 |

62 | 영어를 더 잘 하고싶다. 그러나 공부를 하고 싶지는 않다. 내 삶의 모든 것이 이런 식으로 망해왔다 63 |

64 | 65 | 101 |
102 | -------------------------------------------------------------------------------- /twitter-markup-challenge/07-worldwide-trends.html: -------------------------------------------------------------------------------- 1 | 100 | -------------------------------------------------------------------------------- /twitter-markup-challenge/08-footer.html: -------------------------------------------------------------------------------- 1 | 21 | --------------------------------------------------------------------------------