├── script.js ├── styles.css ├── sha.html ├── style.css ├── styless.css ├── sh.html └── shan.html /script.js: -------------------------------------------------------------------------------- 1 | function addToDisplay(value) { 2 | document.getElementById('display').value += value; 3 | } 4 | 5 | function clearDisplay() { 6 | document.getElementById('display').value = ''; 7 | } 8 | 9 | function calculate() { 10 | try { 11 | let result = eval(document.getElementById('display').value); 12 | document.getElementById('display').value = result; 13 | } catch (error) { 14 | document.getElementById('display').value = 'Error'; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | height: 100vh; 6 | margin: 0; 7 | background-color: #f0f0f0; 8 | } 9 | 10 | .calculator { 11 | background-color: #af7474; 12 | border-radius: 8px; 13 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 14 | padding: 20px; 15 | width: 300px; 16 | text-align: center; 17 | } 18 | 19 | .calculator input[type="text"] { 20 | width: 100%; 21 | margin-bottom: 10px; 22 | padding: 10px; 23 | font-size: 1.5em; 24 | border: 1px solid #82bbdb; 25 | border-radius: 4px; 26 | } 27 | 28 | .calculator .keys { 29 | display: grid; 30 | grid-template-columns: repeat(4, 1fr); 31 | grid-gap: 10px; 32 | } 33 | 34 | .calculator button { 35 | padding: 15px; 36 | font-size: 1.2em; 37 | border: none; 38 | border-radius: 4px; 39 | cursor: pointer; 40 | background-color: #4CAF50; 41 | color: rgb(240, 232, 123); 42 | } 43 | 44 | .calculator button:hover { 45 | background-color: #45a049; 46 | } 47 | 48 | .calculator button:active { 49 | background-color: #89e6c2; 50 | } 51 | -------------------------------------------------------------------------------- /sha.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Calculator 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 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* Reset some default styles */ 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | font-family: Arial, sans-serif; 10 | line-height: 1.6; 11 | background-color: #f0f0f0; 12 | } 13 | 14 | .container { 15 | max-width: 960px; 16 | margin: 0 auto; 17 | padding: 0 20px; 18 | } 19 | 20 | header { 21 | background-color: #333; 22 | color: #69b3ca; 23 | padding: 10px 0; 24 | } 25 | 26 | header h1 { 27 | float: left; 28 | } 29 | 30 | nav ul { 31 | float:right; 32 | list-style-type: none; 33 | } 34 | 35 | nav ul li { 36 | display: inline; 37 | margin-left: 20px; 38 | } 39 | 40 | nav ul li a { 41 | color: #fff; 42 | text-decoration: none; 43 | } 44 | 45 | nav ul li a:hover { 46 | text-decoration: underline; 47 | } 48 | 49 | section { 50 | padding: 40px 0; 51 | } 52 | 53 | section h2 { 54 | font-size: 2em; 55 | margin-bottom: 20px; 56 | } 57 | 58 | .project { 59 | margin-bottom: 20px; 60 | } 61 | 62 | .project h3 { 63 | margin-bottom: 10px; 64 | } 65 | 66 | .project a { 67 | display: inline-block; 68 | padding: 5px 10px; 69 | background-color: #ec8a3a; 70 | color: #fff; 71 | text-decoration: none; 72 | margin-top: 5px; 73 | } 74 | 75 | .project a:hover { 76 | background-color: #1e2c18; 77 | } 78 | 79 | form { 80 | max-width: 600px; 81 | margin: 0 auto; 82 | } 83 | 84 | form label { 85 | display: block; 86 | margin-bottom: 5px; 87 | } 88 | 89 | form input, 90 | form textarea { 91 | width: 100%; 92 | padding: 10px; 93 | margin-bottom: 10px; 94 | border: 1px solid #d37f7f; 95 | border-radius: 4px; 96 | } 97 | 98 | form button { 99 | padding: 10px 20px; 100 | background-color: #333; 101 | color: #fff; 102 | border: none; 103 | cursor: pointer; 104 | } 105 | 106 | form button:hover { 107 | background-color: #555; 108 | } 109 | 110 | footer { 111 | background-color: #333; 112 | color: #133563; 113 | text-align: center; 114 | padding: 10px 0; 115 | position: absolute; 116 | bottom: 0; 117 | width: 100%; 118 | } 119 | -------------------------------------------------------------------------------- /styless.css: -------------------------------------------------------------------------------- 1 | /* Reset default styles */ 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | font-family: Arial, sans-serif; 10 | line-height: 1.6; 11 | background-color: #c99a9a; 12 | } 13 | 14 | .container { 15 | max-width: 960px; 16 | margin: 0 auto; 17 | padding: 0 20px; 18 | } 19 | 20 | header { 21 | background-color: #333; 22 | color: #e95586; 23 | text-align: center; 24 | padding: 80px 0; 25 | } 26 | 27 | header h1 { 28 | font-size: 3em; 29 | margin-bottom: 20px; 30 | } 31 | 32 | header p { 33 | font-size: 1.5em; 34 | margin-bottom: 20px; 35 | } 36 | 37 | header nav ul { 38 | list-style-type: none; 39 | } 40 | 41 | header nav ul li { 42 | display: inline-block; 43 | margin: 0 10px; 44 | } 45 | 46 | header nav ul li a { 47 | color: #fff; 48 | text-decoration: none; 49 | } 50 | 51 | header nav ul li a:hover { 52 | text-decoration: underline; 53 | } 54 | 55 | .btn { 56 | display: inline-block; 57 | padding: 10px 20px; 58 | background-color: #532b2b; 59 | color: #778557; 60 | text-decoration: none; 61 | border-radius: 4px; 62 | margin-top: 20px; 63 | } 64 | 65 | .btn:hover { 66 | background-color: #555; 67 | } 68 | 69 | .section { 70 | padding: 60px 0; 71 | text-align: center; 72 | } 73 | 74 | .section h2 { 75 | font-size: 2.5em; 76 | margin-bottom: 20px; 77 | } 78 | 79 | .feature { 80 | margin-bottom: 40px; 81 | } 82 | 83 | .feature img { 84 | max-width: 100%; 85 | border-radius: 8px; 86 | margin-bottom: 10px; 87 | } 88 | 89 | .feature h3 { 90 | margin-bottom: 10px; 91 | } 92 | 93 | .feature p { 94 | color: #555; 95 | } 96 | 97 | .pricing-plan { 98 | display: inline-block; 99 | vertical-align: top; 100 | margin: 0 20px; 101 | text-align: left; 102 | } 103 | 104 | .pricing-plan h3 { 105 | margin-bottom: 10px; 106 | } 107 | 108 | .pricing-plan p { 109 | color: #555; 110 | margin-bottom: 20px; 111 | } 112 | 113 | footer { 114 | background-color: #333; 115 | color: #fff; 116 | text-align: center; 117 | padding: 10px 0; 118 | position: absolute; 119 | bottom: 0; 120 | width: 100%; 121 | } 122 | -------------------------------------------------------------------------------- /sh.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Your Name - Portfolio 7 | 8 | 9 | 10 |
11 |
12 |

SHANMUGA

13 | 21 |
22 |
23 | 24 |
25 |
26 |

About Me

27 |

Hello there iam Shanmuga,iam currently studing in K.Ramakrishnan college of enginnering, I like to code its really fun you know?.

28 |
29 |
30 | 31 |
32 |
33 |

Projects

34 |
35 |

identifying genetic disorder.

36 |

Me and my friends recently created coding to find genetic disorder using facial recognition.

37 | View Project 38 |
39 |
40 |

Project Name 2

41 |

Currently iam working on a web development project.

42 | View Project 43 |
44 | 45 |
46 |
47 | 48 |
49 |
50 |

Resume

51 | Download Resume 52 |
53 |
54 | 55 |
56 |
57 |

Contact Me

58 |
59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 |
70 |
71 |
72 | 73 | 78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /shan.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Landing Page 7 | 8 | 9 | 10 | 24 | 25 |
26 |
27 |

Features

28 |
29 | 30 |

Feature 1

31 |

We provide true facts about the places.

32 |
33 |
34 | 35 |

Feature 2

36 |

Our work is to give customers full satisfaction.

37 |
38 |
39 |
40 | 41 |
42 |
43 |

Places

44 |
45 |

Basic Plan

46 |

We give detailed information about the place you searched.

47 |

place:tajmahal

48 | Sign Up 49 |
50 |
51 |

Premium Plan

52 |

we provide premiun plans for the place you choose.

53 |

place:atlanda

54 | Sign Up 55 |
56 |
57 |
58 | 59 |
60 |
61 |

Contact Us

62 |
63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 |
74 |
75 |
76 | 77 | 82 | 83 | 84 | 85 | 86 | --------------------------------------------------------------------------------