본문 바로가기
반응형

CSS490

Timeline html, css, jsTimelineAuthor : haraldev01타임라인 / Timeline  https://codepen.io/haraldev01/pen/NWVvNqy TimelineTimeline element inspired by Ibelick: https://www.ibelick.com/lab/timeline I expanded on the design, as it now correctly shows the selected year, high...codepen.io 2024. 8. 8.
Horizontal Timeline of Web Development html, css, jsHorizontal Timeline of Web DevelopmentAuthor : Jerome Rass타임라인 / Timeline  https://codepen.io/jerora98/pen/yLWzYGO Horizontal Timeline of Web DevelopmentExplore the evolution of web development through this interactive horizontal timeline. Scroll horizontally to navigate through the major milestones in ...codepen.io 2024. 8. 8.
Basic Timeline html, css, jsBasic TimelineAuthor : J타임라인 / Timeline   https://codepen.io/jaingam/pen/RwmjarP Basic TimelineBasic timeline component with dark mode compatibility. Using tailwindcss....codepen.io 2024. 8. 8.
Timeline in Dark Theme html, cssTimeline in Dark ThemeAuthor : Muzammal Ahmed타임라인, Timeline   https://codepen.io/MuzammalAhmed/pen/MWdVwVo Timeline in Dark ThemeIDK what to say but follow me for more awesome content...codepen.io 2024. 8. 8.
Scrolling timeline clickable years html, css, jsScrolling timeline clickable yearsAuthor : buildplan타임라인 / Timeline   https://codepen.io/buildplan/pen/pomLawb Scrolling timeline clickable yearsScrolling timeline clickable years with jquery...codepen.io 2024. 8. 8.
Vertical Timeline With Icons #html / css#Vertical Timeline With Icons#Author : Riley Egge#타임라인/ Vertical Timeline    https://codepen.io/eggeriley/pen/QWReeXO Vertical Timeline With IconsA vertical timeline widget using Font Awesome and pure css. ...codepen.io 2024. 8. 8.
기본적인 체크 박스(checkbox) 결과이미지 html(index.html) Basic Checkbox Basic Checkbox Round Checkbox Round Checkbox Custom Checkbox Custom Checkbox   CSS(styles.css)body { font-family: Arial, sans-serif;}.basic-checkbox,.round-checkbox,.custom-checkbox { display: block; position: relative; padding-left: 35px; marg.. 2024. 8. 7.
심플한 애니메이션 탭(Tab bar animation) 결과 이미지  HTML먼저 HTML 구조를 작성합니다: Tab 1 Tab 2 Tab 3 Tab 4 Content 1 Content 2 Content 3 Content 4   CSS탭과 애니메이션 효과를 위한 CSS를 작성합니다:/* styles.css */body { font-family: Arial, sans-serif;}.tab-container { position: relative; display: flex; justify-content: space-around; margin-bottom: 20px; border-bottom: 2px solid #ddd;}.. 2024. 8. 6.
심플한 웹사이트 세로 메뉴 만들기(소스 포함) 샘플이미지    HTML Home Services + Web Development SEO Marketing About Contact    CSS (styles.css)body { font-family: Arial, sans-serif;}nav { width: 200px;}.vertical-menu { list-style-type: none; p.. 2024. 8. 6.
심플한 웹사이트 가로 메뉴 만들기(소스 포함) 샘플이미지  #html Home Services Web Development SEO Marketing About Contact   #css(styles.css)body { font-family: Arial, sans-serif;}nav { background-color: #333; overflow: hidden;}.menu { list-style.. 2024. 8. 6.
React modal using hooks #html / css / js#React modal using hooks#Author : Maxime Preaux#모달 / Modal / React   https://codepen.io/deammer/pen/LoMBvp React modal using hooks...codepen.io 2024. 7. 19.
React Dialog Modal #html / css / js(Babel)#React Dialog Modal#Mehmet Can#모달 /  Modal / React   https://codepen.io/m3hm3tcan/pen/yLExMbe Modal window with react-modal...codepen.io 2024. 7. 19.