├── portfolio ├── bg.jpg ├── boy.png ├── logo.png ├── index.html └── style.css ├── landingpage ├── travelbg.jpg └── index.html └── calculator ├── index.js ├── styles.css └── index.html /portfolio/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Harshithss07/CODESOFT/HEAD/portfolio/bg.jpg -------------------------------------------------------------------------------- /portfolio/boy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Harshithss07/CODESOFT/HEAD/portfolio/boy.png -------------------------------------------------------------------------------- /portfolio/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Harshithss07/CODESOFT/HEAD/portfolio/logo.png -------------------------------------------------------------------------------- /landingpage/travelbg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Harshithss07/CODESOFT/HEAD/landingpage/travelbg.jpg -------------------------------------------------------------------------------- /calculator/index.js: -------------------------------------------------------------------------------- 1 | //calculator program 2 | 3 | const display=document.getElementById("display"); 4 | 5 | function appendToDisplay(input){ 6 | display.value += input; 7 | } 8 | 9 | function clearDisplay(){ 10 | display.value = ""; 11 | } 12 | 13 | function calculate(){ 14 | display.value = eval(display.value); 15 | } -------------------------------------------------------------------------------- /calculator/styles.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | height: 100vh; 7 | background-color: hsl(0, 0%, 95%); 8 | } 9 | #calculator{ 10 | font-family: Arial, sans-serif; 11 | background-color: hsl(0, 0%, 15%); 12 | border-radius: 15px; 13 | max-width: 500px; 14 | overflow: hidden; 15 | } 16 | #display{ 17 | width: 100%; 18 | padding: 25px; 19 | font-size: 5rem; 20 | text-align: left; 21 | border: none; 22 | background-color: hsl(0, 0%, 20%); 23 | color: white; 24 | } 25 | #keys{ 26 | display: grid; 27 | grid-template-columns: repeat(4, 1fr); 28 | gap: 10px; 29 | padding: 25px; 30 | } 31 | button{ 32 | width: 100px; 33 | height: 100px; 34 | border-radius: 50px; 35 | border: none; 36 | background-color:hsl(0, 0%, 30%); 37 | color: white; 38 | font-size: 3rem; 39 | font-weight: bold; 40 | cursor: pointer; 41 | } 42 | button:hover{ 43 | background-color: hsl(0, 0%, 40%); 44 | } 45 | button:active:{ 46 | background-color: hsl(0, 0%, 50%); 47 | } 48 | .operator-btn{ 49 | background-color: hsl(35, 100%, 55%); 50 | } 51 | .operator-btn:hover{ 52 | background-color: hsl(35, 100%, 65%); 53 | } 54 | .operator-btn:active{ 55 | background-color: hsl(35, 100%, 75%); 56 | } -------------------------------------------------------------------------------- /portfolio/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Personal Portfolio 7 | 8 | 9 | 10 |
11 |
12 | 13 | 20 |
21 |
22 |

I'm Harshith.

23 |

WEB DESIGNER

24 |

Web designer and developer

25 |

Just a newbie developer in a learning process

26 |

please do contact me if you are interested in my work

27 | Hire Me 28 |
29 |
30 | 31 |
32 |
33 | 34 | 35 | 36 |
37 |
38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /calculator/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 | 31 |
32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /portfolio/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0; 3 | padding:0; 4 | } 5 | .main{ 6 | width: 100%; 7 | background: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.2)),url(bg.jpg); 8 | background-position: center; 9 | background-size: cover; 10 | height: 100vh; 11 | position: relative; 12 | font-family: sans-serif; 13 | } 14 | .navbar{ 15 | width: 86%; 16 | display: flex; 17 | margin: auto; 18 | padding: 15px 0; 19 | align-items: center; 20 | justify-content: space-between; 21 | } 22 | .navbar .logo{ 23 | width: 160px; 24 | cursor: pointer; 25 | margin-top: -1%; 26 | margin-left: -2%; 27 | } 28 | ul{ 29 | margin-top: -4%; 30 | } 31 | ul li{ 32 | list-style: none; 33 | display: inline-block; 34 | padding: 10px 16px; 35 | margin-top: 15%; 36 | } 37 | ul li a{ 38 | font-size:16px; 39 | font-weight: bold; 40 | text-decoration: none; 41 | color: rgb(94, 255, 255); 42 | margin-top: -3%; 43 | transition: .4s ease; 44 | } 45 | ul li a:hover{ 46 | color: rgb(230,104,59); 47 | } 48 | .info{ 49 | margin-left: 14%; 50 | margin-top: 14%; 51 | } 52 | .info h1{ 53 | font-size: 65px; 54 | color: rgb(242, 228, 170); 55 | } 56 | .info h2{ 57 | font-size: 35px; 58 | color:rgb(255, 224, 113) 59 | } 60 | .info h3{ 61 | font-size: 18px; 62 | letter-spacing: 1px; 63 | line-height: 24px; 64 | color: white; 65 | } 66 | .info span{ 67 | color: rgb(230,104,59); 68 | } 69 | .info a{ 70 | text-decoration: none; 71 | color: #fff; 72 | background: rgb(27, 102, 122); 73 | margin: 26px 0; 74 | padding: 10px 18px; 75 | border-radius: 10px; 76 | display: inline-block; 77 | transition: .4s ease; 78 | } 79 | .info a:hover{ 80 | background: rgb(118, 242, 254); 81 | } 82 | .image{ 83 | width: 30%; 84 | height: 60%; 85 | position: absolute; 86 | right: 100px; 87 | bottom: 0; 88 | } 89 | .image img{ 90 | position: absolute; 91 | height:140%; 92 | left: 40%; 93 | transform: translate(-55%); 94 | bottom: 0; 95 | transition: left 2s ease; 96 | } 97 | .image:hover .boy{ 98 | left: 55%; 99 | } 100 | .icons a{ 101 | text-decoration: none; 102 | color: #67e4f8; 103 | } 104 | .icons ion-icon{ 105 | margin-left: 14%; 106 | color: #faf6f6; 107 | margin-right: -240px; 108 | font-size: 40px; 109 | transition: .4s ease; 110 | } 111 | .icons ion-icon:hover{ 112 | color: rgb(59,174,209); 113 | } -------------------------------------------------------------------------------- /landingpage/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Simple Landing Page 7 | 91 | 92 | 93 |
94 | 108 |
109 | Enjoy 110 |

Wonderful Travelling Experience

111 | 112 |
113 | Book your Trip 114 |
115 |
116 | 117 | 118 | --------------------------------------------------------------------------------