├── img ├── connect.png ├── connect-purple.png ├── icons │ ├── Setting.gif │ ├── awode1.png │ ├── awode2.png │ ├── bluestar.png │ ├── glassemoji.png │ ├── greenstar.png │ ├── lightblueStar.png │ ├── Setting(light).gif │ └── vrheadset-emoji.png ├── connetOtherSide.png ├── Home-img │ ├── aboutpic.png │ ├── aboutpic-dark.png │ └── perpule-theme.png └── connetOtherSide-purple.png ├── js └── js.js ├── Css ├── AboutPage.css ├── homePage.css ├── ResumePage.css └── Style.Css └── index.html /img/connect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amliyanage/My_PortFolio/HEAD/img/connect.png -------------------------------------------------------------------------------- /img/connect-purple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amliyanage/My_PortFolio/HEAD/img/connect-purple.png -------------------------------------------------------------------------------- /img/icons/Setting.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amliyanage/My_PortFolio/HEAD/img/icons/Setting.gif -------------------------------------------------------------------------------- /img/icons/awode1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amliyanage/My_PortFolio/HEAD/img/icons/awode1.png -------------------------------------------------------------------------------- /img/icons/awode2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amliyanage/My_PortFolio/HEAD/img/icons/awode2.png -------------------------------------------------------------------------------- /img/icons/bluestar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amliyanage/My_PortFolio/HEAD/img/icons/bluestar.png -------------------------------------------------------------------------------- /img/connetOtherSide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amliyanage/My_PortFolio/HEAD/img/connetOtherSide.png -------------------------------------------------------------------------------- /img/icons/glassemoji.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amliyanage/My_PortFolio/HEAD/img/icons/glassemoji.png -------------------------------------------------------------------------------- /img/icons/greenstar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amliyanage/My_PortFolio/HEAD/img/icons/greenstar.png -------------------------------------------------------------------------------- /img/Home-img/aboutpic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amliyanage/My_PortFolio/HEAD/img/Home-img/aboutpic.png -------------------------------------------------------------------------------- /img/icons/lightblueStar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amliyanage/My_PortFolio/HEAD/img/icons/lightblueStar.png -------------------------------------------------------------------------------- /img/icons/Setting(light).gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amliyanage/My_PortFolio/HEAD/img/icons/Setting(light).gif -------------------------------------------------------------------------------- /img/icons/vrheadset-emoji.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amliyanage/My_PortFolio/HEAD/img/icons/vrheadset-emoji.png -------------------------------------------------------------------------------- /img/Home-img/aboutpic-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amliyanage/My_PortFolio/HEAD/img/Home-img/aboutpic-dark.png -------------------------------------------------------------------------------- /img/Home-img/perpule-theme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amliyanage/My_PortFolio/HEAD/img/Home-img/perpule-theme.png -------------------------------------------------------------------------------- /img/connetOtherSide-purple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amliyanage/My_PortFolio/HEAD/img/connetOtherSide-purple.png -------------------------------------------------------------------------------- /js/js.js: -------------------------------------------------------------------------------- 1 | const body = document.querySelector('body') 2 | const btn = document.querySelector('.btn'); 3 | const icon = document.querySelector('.btn_icon'); 4 | const circles = document.querySelector('.circles'); 5 | const aboutpic = document.querySelector('.about div img'); 6 | 7 | 8 | const settings = document.querySelector('.settingBtn'); 9 | const settingForm = document.querySelector('.settings'); 10 | 11 | let flag = false; 12 | 13 | btn.addEventListener('click', () => { 14 | document.body.classList.toggle('darkMode'); 15 | document.body.classList.toggle('alt-colors'); 16 | 17 | if(flag == false){ 18 | circles.style.display = 'none'; 19 | flag = true; 20 | }else{ 21 | circles.style.display = 'block'; 22 | flag = false; 23 | } 24 | 25 | if(body.classList.contains('darkMode')){ 26 | icon.classList.remove('fa-sun'); 27 | settings.src = "img/icons/Setting(light).gif"; 28 | aboutpic.src="img/Home-img/aboutpic-dark.png"; 29 | icon.classList.add('fa-moon'); 30 | } 31 | else{ 32 | icon.classList.remove('fa-moon'); 33 | settings.src = "img/icons/Setting.gif"; 34 | aboutpic.src="img/Home-img/aboutpic.png"; 35 | icon.classList.add('fa-sun'); 36 | } 37 | }); 38 | 39 | settings.addEventListener('click', () =>{ 40 | event.preventDefault(); 41 | settingForm.classList.toggle('clicked'); 42 | }); 43 | 44 | const connectResume1 = document.querySelector('.Resume >:nth-child(2) img'); 45 | const connectResume2 = document.querySelector('.Resume >:nth-child(3) img'); 46 | const connectResume3 = document.querySelector('.Resume >:nth-child(4) img'); 47 | function changeColor(color){ 48 | 49 | console.log('api'); 50 | switch(color){ 51 | case 'purple' : 52 | document.documentElement.style.setProperty('--purple', '#7B1DF3'); 53 | connectResume1.src="img/connect-purple.png"; 54 | connectResume2.src="img/connect-purple.png"; 55 | connectResume3.src="img/connetOtherSide-purple.png"; 56 | break; 57 | 58 | case 'yellow' : 59 | document.documentElement.style.setProperty('--purple', '#C9F31D'); 60 | connectResume1.src="img/connect.png"; 61 | connectResume2.src="img/connect.png"; 62 | connectResume3.src="img/connetOtherSide.png"; 63 | break; 64 | 65 | case 'green' : 66 | document.documentElement.style.setProperty('--purple', '#05FF00'); 67 | break; 68 | 69 | case 'blue' : 70 | document.documentElement.style.setProperty('--purple', '#0094FF'); 71 | break; 72 | } 73 | } 74 | 75 | 76 | const bgAnimation = document.getElementById('bgAnimation'); 77 | 78 | const numberOfColorBoxes = 400; 79 | 80 | for (let i = 0; i < numberOfColorBoxes; i++) { 81 | const colorBox = document.createElement('div'); 82 | colorBox.classList.add('color-box'); 83 | bgAnimation.appendChild(colorBox); 84 | } -------------------------------------------------------------------------------- /Css/AboutPage.css: -------------------------------------------------------------------------------- 1 | .about{ 2 | position: relative; 3 | top: 66vh; 4 | z-index: -1; 5 | } 6 | 7 | .about div{ 8 | margin: 93px 62px 83px 64px; 9 | backdrop-filter: blur(7px); 10 | } 11 | 12 | .about .form{ 13 | display: flex; 14 | padding-top: 54px; 15 | padding-left: 40px; 16 | padding-bottom: 21px; 17 | margin: 0; 18 | } 19 | 20 | .about div img{ 21 | width: 758px; 22 | height: 829px; 23 | margin-top: 54px; 24 | margin-left: 40px; 25 | } 26 | 27 | .about div div{ 28 | display: block; 29 | } 30 | 31 | .about div div h5{ 32 | color: #C0C0C2; 33 | font-family: Roboto; 34 | font-size: 16px; 35 | font-style: normal; 36 | font-weight: 400; 37 | line-height: normal; 38 | margin-bottom: 28px; 39 | } 40 | 41 | .about div div h2{ 42 | color: var(--text); 43 | font-family: Roboto; 44 | font-size: 45px; 45 | font-style: normal; 46 | font-weight: 500; 47 | line-height: normal; 48 | margin-bottom: 40px; 49 | } 50 | 51 | .about div div h2 span{ 52 | color: var(--purple); 53 | } 54 | 55 | .about div div p{ 56 | color: var(--about-p); 57 | font-family: Roboto; 58 | font-size: 16px; 59 | font-style: normal; 60 | font-weight: 400; 61 | line-height: 30px; /* 187.5% */ 62 | } 63 | 64 | .about div div .working{ 65 | display: flex; 66 | margin: 0; 67 | } 68 | 69 | .about .working div div{ 70 | display: flex; 71 | margin: 0; 72 | } 73 | 74 | .about .working div div h1{ 75 | color: var(--text); 76 | font-family: Roboto; 77 | font-size: 28px; 78 | font-style: normal; 79 | font-weight: 500; 80 | line-height: normal; 81 | margin-right: 88px; 82 | margin-bottom: 47px; 83 | } 84 | 85 | .about .working div div i{ 86 | color: var(--purple); 87 | font-size: 34px; 88 | margin-right: 11px; 89 | } 90 | 91 | .about .working div{ 92 | margin: 0; 93 | margin-top: 80px; 94 | } 95 | 96 | .about .contactInfo{ 97 | margin: 0; 98 | display: flex; 99 | width: 848px; 100 | height: 85px; 101 | border: 2px solid var(--text); 102 | border-radius: 10px; 103 | padding-top: 26px; 104 | padding-left: 27px; 105 | padding-bottom: 0px; 106 | } 107 | 108 | .about .contactInfo div{ 109 | display: flex; 110 | margin: 0; 111 | } 112 | 113 | .about .contactInfo div div{ 114 | width: 55px; 115 | height: 55px; 116 | border-radius: 50%; 117 | background-color: var(--purple); 118 | margin-right: 22px; 119 | } 120 | 121 | .about .contactInfo div i{ 122 | font-size: 22px; 123 | margin: 17px; 124 | } 125 | 126 | .about .contactInfo div h5{ 127 | color: var(--about-p); 128 | } 129 | 130 | .about .contactInfo div h3{ 131 | color: var(--text); 132 | font-family: Roboto; 133 | font-size: 21px; 134 | font-style: normal; 135 | font-weight: 500; 136 | line-height: normal; 137 | letter-spacing: 0.63px; 138 | position: relative; 139 | top: 2vh; 140 | right: 7vh; 141 | } 142 | 143 | .about .contactInfo >:last-child h3{ 144 | right: 86px; 145 | } -------------------------------------------------------------------------------- /Css/homePage.css: -------------------------------------------------------------------------------- 1 | /* -------------------------------------------------------------star home page ------------------------------------------*/ 2 | 3 | .homePage{ 4 | position: relative; 5 | top: 7rem; 6 | z-index: -1; 7 | } 8 | 9 | .homePage .dis{ 10 | position: relative; 11 | top: 204px; 12 | left: 170px; 13 | width: 790px; 14 | } 15 | 16 | .homePage .dis h3{ 17 | color: var(--text); 18 | opacity: 40%; 19 | font-family: Roboto; 20 | font-size: 45px; 21 | font-style: normal; 22 | font-weight: 400; 23 | line-height: normal; 24 | letter-spacing: 2.7px; 25 | margin-bottom: 25px; 26 | } 27 | 28 | .homePage .dis h1{ 29 | color: var(--purple); 30 | font-family: Roboto; 31 | font-size: 65px; 32 | font-style: normal; 33 | font-weight: 600; 34 | line-height: normal; 35 | letter-spacing: 3.9px; 36 | margin-bottom: 9px; 37 | } 38 | 39 | .homePage .dis h1~h1{ 40 | color: var(--text); 41 | margin-bottom: 23px; 42 | } 43 | 44 | .homePage .dis p{ 45 | color: #9CB1B1; 46 | font-family: Roboto; 47 | font-size: 22px; 48 | font-style: normal; 49 | font-weight: 500; 50 | line-height: normal; 51 | letter-spacing: 1.32px; 52 | margin-bottom: 64px; 53 | } 54 | 55 | .homePage .dis button{ 56 | width: 245.667px; 57 | height: 87px; 58 | padding: 31px 60px; 59 | color: #FFF; 60 | font-family: Roboto; 61 | font-size: 25px; 62 | font-style: normal; 63 | font-weight: 500; 64 | line-height: normal; 65 | letter-spacing: 1.75px; 66 | background: var(--purple); 67 | border-radius: 7px; 68 | } 69 | 70 | .homePage .dis button::before, 71 | .homePage .dis button::after{ 72 | background-color: var(--purple); 73 | width: 245.667px; 74 | height: 87px; 75 | position: absolute; 76 | top: 24rem; 77 | left: -0.0vh; 78 | border-radius: 20px; 79 | z-index: -1; 80 | content: ""; 81 | opacity: 0.7; 82 | } 83 | 84 | .homePage .dis button::before{ 85 | animation: anim 2s ease-out infinite; 86 | } 87 | 88 | .homePage .dis button::after{ 89 | animation: anim 2s 1s ease-out infinite; 90 | } 91 | 92 | @keyframes anim{ 93 | 100%{ 94 | transform: scale(1.5,2); 95 | opacity: 0; 96 | } 97 | } 98 | 99 | .homePage .images > *{ 100 | position: absolute; 101 | } 102 | 103 | .homePage .images >:first-child{ 104 | width: 679px; 105 | height: 769px; 106 | top: 38.36px; 107 | right: 152px; 108 | } 109 | 110 | .homePage .images >:nth-child(2){ 111 | width: 65px; 112 | height: 67px; 113 | top: 59px; 114 | right: 177px; 115 | animation: upDown 2s infinite ease; 116 | } 117 | 118 | .homePage .images >:nth-child(3){ 119 | width: 144px; 120 | height: 144px; 121 | top: 95px; 122 | right: 692px; 123 | animation: upDown 2s infinite ease; 124 | } 125 | 126 | .homePage .images >:nth-child(4){ 127 | width: 327px; 128 | top: 235px; 129 | right: 36px; 130 | animation: upDown 2s infinite ease; 131 | } 132 | 133 | .homePage .images >:nth-child(5){ 134 | width: 58px; 135 | height: 54px; 136 | top:417.06px; 137 | right: 825.21px; 138 | animation: upDown 2s infinite ease; 139 | } 140 | 141 | .homePage .images >:nth-child(6){ 142 | width: 327px; 143 | right: 533px; 144 | top: 593px; 145 | animation: upDown 2s infinite ease; 146 | } 147 | 148 | .homePage .images >:nth-child(7){ 149 | width: 159px; 150 | height: 159px; 151 | top: 626px; 152 | right: 47px; 153 | animation: upDown 2s infinite ease; 154 | } 155 | 156 | .homePage .images >:last-child{ 157 | width: 43px; 158 | height: 44px; 159 | right: 221px; 160 | top: 736px; 161 | animation: upDown 2s infinite ease; 162 | } 163 | 164 | @keyframes upDown{ 165 | 0%{ 166 | transform: translateY(0%); 167 | } 168 | 50%{ 169 | transform: translateY(-10%); 170 | } 171 | 100%{ 172 | transform: translateY(0%); 173 | } 174 | } -------------------------------------------------------------------------------- /Css/ResumePage.css: -------------------------------------------------------------------------------- 1 | .Resume{ 2 | position: relative; 3 | top: 81vh; 4 | z-index: -1; 5 | } 6 | 7 | .Resume >:first-child{ 8 | text-align: center; 9 | } 10 | 11 | .Resume >:first-child h5{ 12 | color: var(--purple); 13 | font-family: Inter; 14 | font-size: 18px; 15 | font-style: normal; 16 | font-weight: 600; 17 | line-height: normal; 18 | letter-spacing: 0.72px; 19 | } 20 | 21 | .Resume >:first-child h3{ 22 | color: var(--text); 23 | font-family: Inter; 24 | font-size: 38px; 25 | font-style: normal; 26 | font-weight: 600; 27 | line-height: normal; 28 | letter-spacing: 0.76px; 29 | } 30 | 31 | .Resume >:nth-child(2){ 32 | display: flex; 33 | } 34 | 35 | .Resume >:nth-child(2) div{ 36 | width: 441px; 37 | height: 133px; 38 | background-color: var(--divBackInResume); 39 | border: 2px solid #1F1F1F; 40 | border-radius: 8px; 41 | text-align: center; 42 | margin-top: 74.5px; 43 | margin-left: 19.6vh; 44 | } 45 | 46 | .Resume >:nth-child(2) div h2{ 47 | color: var(--text); 48 | font-family: Inter; 49 | font-size: 18px; 50 | font-style: normal; 51 | font-weight: 600; 52 | line-height: normal; 53 | letter-spacing: 0.72px; 54 | padding: 21px 70px 7px 77px; 55 | } 56 | 57 | .Resume >:nth-child(2) div h3{ 58 | color: #6A6357; 59 | font-family: Inter; 60 | font-size: 16px; 61 | font-style: normal; 62 | font-weight: 600; 63 | line-height: normal; 64 | letter-spacing: 0.64px; 65 | } 66 | 67 | .Resume >:nth-child(2) div h4{ 68 | color: #B1B1A3; 69 | font-family: Inter; 70 | font-size: 16px; 71 | font-style: normal; 72 | font-weight: 600; 73 | line-height: normal; 74 | letter-spacing: 0.64px; 75 | padding-top: 18px; 76 | } 77 | 78 | .Resume >:nth-child(2) img{ 79 | width: 271.349px; 80 | height: 233.349px; 81 | margin-left: 68px; 82 | margin-top: 113px; 83 | } 84 | 85 | .Resume >:nth-child(3){ 86 | display: flex; 87 | } 88 | 89 | .Resume >:nth-child(3) div{ 90 | width: 441px; 91 | height: 133px; 92 | background-color: var(--divBackInResume); 93 | border: 2px solid #1F1F1F; 94 | border-radius: 8px; 95 | text-align: center; 96 | position: relative; 97 | left: 136vh; 98 | bottom: 5vh; 99 | } 100 | 101 | 102 | .Resume >:nth-child(3) div h2{ 103 | color: var(--text); 104 | font-family: Inter; 105 | font-size: 18px; 106 | font-style: normal; 107 | font-weight: 600; 108 | line-height: normal; 109 | letter-spacing: 0.72px; 110 | padding: 21px 70px 7px 77px; 111 | } 112 | 113 | .Resume >:nth-child(3) div h3{ 114 | color: #6A6357; 115 | font-family: Inter; 116 | font-size: 16px; 117 | font-style: normal; 118 | font-weight: 600; 119 | line-height: normal; 120 | letter-spacing: 0.64px; 121 | } 122 | 123 | .Resume >:nth-child(3) div h4{ 124 | color: #B1B1A3; 125 | font-family: Inter; 126 | font-size: 16px; 127 | font-style: normal; 128 | font-weight: 600; 129 | line-height: normal; 130 | letter-spacing: 0.64px; 131 | padding-top: 18px; 132 | } 133 | 134 | .Resume >:nth-child(3) img{ 135 | width: 271.349px; 136 | height: 233.349px; 137 | margin-left: 68px; 138 | position: relative; 139 | bottom: 22vh; 140 | left: 45.5vh; 141 | rotate: 180deg; 142 | } 143 | 144 | .Resume >:nth-child(4){ 145 | display: flex; 146 | } 147 | 148 | .Resume >:nth-child(4) div{ 149 | width: 441px; 150 | height: 133px; 151 | background-color: var(--divBackInResume); 152 | backdrop-filter: blur(10px); 153 | -webkit-backdrop-filter: blur(10px); 154 | border-radius: 8px; 155 | border: 2px solid #1F1F1F; 156 | text-align: center; 157 | margin-top: -45.5px; 158 | margin-left: 19.6vh; 159 | z-index: 100; 160 | } 161 | 162 | 163 | .Resume >:nth-child(4) div h2{ 164 | color: var(--text); 165 | font-family: Inter; 166 | font-size: 18px; 167 | font-style: normal; 168 | font-weight: 600; 169 | line-height: normal; 170 | letter-spacing: 0.72px; 171 | padding: 21px 70px 7px 77px; 172 | } 173 | 174 | .Resume >:nth-child(4) div h3{ 175 | color: #6A6357; 176 | font-family: Inter; 177 | font-size: 16px; 178 | font-style: normal; 179 | font-weight: 600; 180 | line-height: normal; 181 | letter-spacing: 0.64px; 182 | } 183 | 184 | .Resume >:nth-child(4) div h4{ 185 | color: #B1B1A3; 186 | font-family: Inter; 187 | font-size: 16px; 188 | font-style: normal; 189 | font-weight: 600; 190 | line-height: normal; 191 | letter-spacing: 0.64px; 192 | padding-top: 18px; 193 | } 194 | 195 | .Resume >:nth-child(4) img{ 196 | width: 271.349px; 197 | height: 233.349px; 198 | position: relative; 199 | bottom: 22vh; 200 | left: 7.2vh; 201 | 202 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 |
18 | 19 |
20 | 21 |   
22 | 23 |
24 |
25 |
26 |
27 |
28 | 29 |
30 | 44 | 45 |
46 |
47 |
48 |
49 | 50 |
51 |
52 |
53 |

Click One Color

54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 | 63 |
64 |
65 |

Hello, i’m

66 |

Ashen Madhushanka

67 |

software engineer

68 |

The software engineer adeptly coded, tested, and optimized programs
69 | for optimal functionality.

70 | 71 |
72 |
73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 |
82 |
83 | 84 |
85 |
86 |
87 | 88 |
89 |
About Me
90 |

Professional Problem Solutions
91 | For Digital Products

92 | 93 |

"Hello, I'm Ashen , a professional software engineer, intrepreneur, and technopreneur
94 | with 3 years of experience in the industry. I am passionate about using technology to
95 | create innovative solutions that drive business growth and improve people's lives.

96 | 97 |
98 |
99 |
100 | 101 |

Branding & Design

102 |
103 | 104 |
105 | 106 |

Web Development

107 |
108 |
109 |
110 |
111 | 112 |

Software Development

113 |
114 | 115 |
116 | 117 |

Mobile App Development

118 |
119 |
120 |
121 | 122 |
123 |
124 |
125 |
Email Us
126 |

glamadushanka2@gmail.com

127 |
128 |
129 |
130 |
Make A Call
131 |

+94 76 234 0111

132 |
133 |
134 | 135 |
136 |
137 |
138 |
139 |
140 |
141 |
Skills
142 |

My Resume

143 |
144 | 145 |
146 |
147 |

Software Engineering Degree

148 |

Institute of Java Software Engineering

149 |

2025 - 2026

150 |
151 | 152 |
153 | 154 |
155 |
156 |

Software Engineering Degree

157 |

Institute of Java Software Engineering

158 |

2025 - 2026

159 |
160 | 161 |
162 | 163 |
164 |
165 |

Software Engineering Degree

166 |

Institute of Java Software Engineering

167 |

2025 - 2026

168 |
169 | 170 |
171 |
172 | 173 | 174 | -------------------------------------------------------------------------------- /Css/Style.Css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Lily+Script+One&display=swap'); 2 | @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Lily+Script+One&display=swap'); 3 | 4 | *{ 5 | text-decoration: none; 6 | list-style: none; 7 | margin: 0; 8 | padding: 0; 9 | border: none; 10 | } 11 | 12 | 13 | :root{ 14 | --background-color : #fff; 15 | --text : #000; 16 | --purple : #7B1DF3; 17 | --about-p : #8f8f8f; 18 | --divBackInResume : rgba(0,0,0,0); 19 | } 20 | 21 | body.alt-colors { 22 | --background-color : #252525; 23 | --text : #fff; 24 | --about-p : #C0C0C2; 25 | --divBackInResume : #1F1F1F; 26 | } 27 | 28 | 29 | body{ 30 | background-color: var(--background-color); 31 | } 32 | 33 | .circles > *{ 34 | filter: blur(210px); 35 | position: fixed; 36 | border-radius: 50%; 37 | z-index: -1; 38 | } 39 | 40 | .circles > :first-child{ 41 | width: 221px; 42 | height: 211px; 43 | background-color: red; 44 | border-radius: 50%; 45 | top: 182px; 46 | left: 162px; 47 | } 48 | 49 | .circles > :nth-child(2){ 50 | width: 289px; 51 | height: 276px; 52 | background: #05FF00; 53 | top: 647px; 54 | left: 718px; 55 | } 56 | 57 | .circles > :last-child{ 58 | width: 289px; 59 | height: 276px; 60 | background: #0094FF; 61 | top: 207px; 62 | right: 206px; 63 | } 64 | 65 | header{ 66 | width: 100%; 67 | height: 112px; 68 | border-bottom: 1px solid; 69 | position: fixed; 70 | backdrop-filter: blur(10px); 71 | } 72 | 73 | header nav{ 74 | display: flex; 75 | } 76 | 77 | header nav ul{ 78 | display: flex; 79 | } 80 | 81 | header nav h1{ 82 | color: var(--text); 83 | font-family: "Lily Script One"; 84 | font-size: 30px; 85 | font-style: normal; 86 | font-weight: 400; 87 | line-height: normal; 88 | letter-spacing: 2.4px; 89 | margin: 42px 250px 29px 186px; 90 | } 91 | 92 | nav ul li{ 93 | color: var(--text); 94 | font-family: "DM Sans"; 95 | font-size: 18px; 96 | font-style: normal; 97 | font-weight: 500; 98 | line-height: normal; 99 | letter-spacing: 1.44px; 100 | margin-left: 53px; 101 | margin-top: 48px; 102 | transition: 1s; 103 | } 104 | 105 | nav ul li:hover{ 106 | color: var(--purple); 107 | } 108 | 109 | header nav img{ 110 | width: 60px; 111 | height: 60px; 112 | margin-left: 56px; 113 | margin-top: 29px; 114 | } 115 | 116 | header nav button{ 117 | width: 134px; 118 | height: 51px; 119 | border-radius: 26px; 120 | background: var(--purple); 121 | color: #FFF; 122 | font-family: Inter; 123 | font-size: 18px; 124 | font-style: normal; 125 | font-weight: 500; 126 | line-height: normal; 127 | letter-spacing: 0.54px; 128 | margin-top: 37px; 129 | margin-left: 109px; 130 | } 131 | 132 | /*------------setting-----------------*/ 133 | 134 | header .btn{ 135 | background-color: var(--background-color); 136 | width: 12em; 137 | height: 5em; 138 | border-radius: 10em; 139 | 140 | box-shadow: inset 0 8px 60px rgba(0, 0, 0, .1), 141 | inset 0 8px 8px rgba(0, 0, 0, .1), 142 | inset 0 -4px 4px rgba(0, 0, 0, .1); 143 | 144 | position: relative; 145 | margin-left: 6rem; 146 | 147 | display: flex; 148 | text-align: center; 149 | cursor: pointer; 150 | } 151 | 152 | header .btn_indicator{ 153 | background-color: #fff; 154 | width: 4em; 155 | height: 4em; 156 | border-radius: 50%; 157 | 158 | position: absolute; 159 | top: 9px; 160 | left: 7px; 161 | 162 | box-shadow: 0px 8px 40px rgba(0, 0, 0,.2); 163 | 164 | transition: transform .3s ease; 165 | } 166 | 167 | header .btn_icon-container{ 168 | width: 100%; 169 | height: 100%; 170 | 171 | display: flex; 172 | justify-content: center; 173 | align-items: center; 174 | } 175 | 176 | header .btn_icon{ 177 | color : yellow; 178 | font-size: 2rem; 179 | } 180 | 181 | /*---------------dark--------------*/ 182 | 183 | .darkMode .btn_indicator{ 184 | transform: translateX(7em); 185 | background-color: var(--text); 186 | box-shadow: 0 8px 40px rgba(0, 0, 0, .3); 187 | } 188 | 189 | .darkMode .btn_icon{ 190 | color: #000; 191 | } 192 | 193 | .darkMode .btn{ 194 | box-shadow: inset 0 8px 60px rgba(0, 0, 0, .3), 195 | inset 0 8px 8px rgba(0, 0, 0, .3), 196 | inset 0 -4px 4px rgba(0, 0, 0, .3); 197 | } 198 | 199 | .settings{ 200 | position: absolute; 201 | right: 20vh; 202 | padding: 1rem; 203 | border: 1px solid var(--text); 204 | background-color: var(--background-color); 205 | border-radius: 13px; 206 | display: none; 207 | } 208 | 209 | .settings.clicked{ 210 | display: inline; 211 | } 212 | 213 | .settings .colors > *{ 214 | width: 4rem; 215 | height: 4rem; 216 | float: left; 217 | margin: 1rem; 218 | border-radius: 50%; 219 | } 220 | 221 | .settings .colors > :first-child{ 222 | background-color: #7B1DF3; 223 | } 224 | 225 | .settings .colors > :nth-child(2){ 226 | background-color: #C9F31D; 227 | } 228 | 229 | .settings .colors > :nth-child(3){ 230 | background-color: #05FF00; 231 | } 232 | 233 | .settings .colors > :last-child{ 234 | background-color: #0094FF; 235 | } 236 | 237 | .settings h3{ 238 | color: var(--text); 239 | font-family: "DM Sans"; 240 | font-size: 18px; 241 | font-style: normal; 242 | font-weight: 500; 243 | line-height: normal; 244 | letter-spacing: 1.44px; 245 | margin: 20px; 246 | } 247 | 248 | .settings{ 249 | text-align: center; 250 | align-items: center; 251 | } 252 | 253 | /*---------------------------------background--------------------------------------*/ 254 | 255 | 256 | .bgAnimation{ 257 | position: fixed; 258 | top: 0; 259 | left: 0; 260 | width: 100%; 261 | height: 100vh; 262 | display: grid; 263 | grid-template-columns: repeat(20, 1fr); 264 | grid-template-rows: repeat(20, 1fr); 265 | background-color: var(--background-color); 266 | filter: saturate(2); 267 | overflow: hidden; 268 | z-index: -1; 269 | } 270 | 271 | .color-box{ 272 | z-index: 2; 273 | filter: brightness(1.1); 274 | transition: 2s ease; 275 | position: relative; 276 | margin: 2px; 277 | background: var(--background-color); 278 | } 279 | 280 | .color-box:hover{ 281 | background: var(--purple) ; 282 | opacity: 10%; 283 | transition: durathion 0s; 284 | } 285 | 286 | .backgroundAmim{ 287 | position: absolute; 288 | top: 0; 289 | left: 0; 290 | width: 100%; 291 | height: 60px; 292 | background: var(--purple) ; 293 | ; 294 | filter: blur(60px); 295 | animation: animback 6s linear infinite; 296 | } 297 | 298 | @keyframes animback{ 299 | 0%{ 300 | top: -60px; 301 | } 302 | 100%{ 303 | top: 120%; 304 | } 305 | } --------------------------------------------------------------------------------