├── README.md ├── Simple_Interest_Calculator ├── index.html ├── script.js └── style.css ├── Single_Page_Profile_Website ├── images.png │ ├── CSS3.png │ ├── about me.jpg │ ├── bullet.png │ ├── checkmark--outline.svg │ ├── envelope.png │ ├── flash.png │ ├── home.png │ ├── html5.png │ ├── index.html │ ├── java.png │ ├── js.jpeg │ ├── node.png │ ├── phone.png │ └── react.png ├── index.html ├── script.js └── style.css └── Unit_Converter ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | 2 | # IBM-Introduction-to-Web-Development-with-HTML-CSS-JavaScript 3 | 4 | Assignments and final Project of the course. 5 | 6 | 7 | 8 | ## Deployment 9 | 10 | Unit Converter : 11 | 12 | https://ibm-unit-convrtr.vercel.app 13 | 14 | Simple Interest calculator : 15 | 16 | https://ibm-sic.vercel.app 17 | 18 | Final Project : Single Page Profile website 19 | 20 | https://ibm-intro-final-prjct.vercel.app 21 | 22 | 23 | 24 | ## Certification 25 | 26 | https://coursera.org/share/cd9274694a138a5a60959571ffa998a4 27 | -------------------------------------------------------------------------------- /Simple_Interest_Calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Simple Interest Calculator 5 | 6 | 7 | 8 |

9 |

10 |

Simple Interest Calculator

11 | Amount
12 | 13 | Rate 14 | 15 | 10.25 16 | %
17 | 18 | No. of Years 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 | 33 | Interest :
34 | 35 | 36 | 37 |

38 | 39 | 42 |

43 | 44 | 45 | -------------------------------------------------------------------------------- /Simple_Interest_Calculator/script.js: -------------------------------------------------------------------------------- 1 | function updaterate(){ 2 | var rateval=document.getElementById("rate").value; 3 | document.getElementById("rate_val").innerText=rateval; 4 | } 5 | 6 | function compute(){ 7 | var principal=document.getElementById("principal").value; 8 | var rate=document.getElementById("rate").value; 9 | var years=document.getElementById("years").value; 10 | var interest=principal * years * rate / 100; 11 | 12 | var year=new Date().getFullYear() + parseInt(years); 13 | var Amount=parseInt(principal) + parseFloat(interest); 14 | var result=document.getElementById("result"); 15 | 16 | if(principal<=0){ 17 | alert("Please enter a positive number !"); 18 | document.getElementById("principal").focus(); 19 | } 20 | else 21 | { 22 | result.innerHTML = "If you deposit $" + "" + principal + "" + ",\ at an interest rate of " + "" + rate + "%" + "" + "\ You will receive an amount of $" + "" + Amount + "" + ",\ in the year " + "" + year + "" + "\"; 23 | } 24 | 25 | } -------------------------------------------------------------------------------- /Simple_Interest_Calculator/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: black; 3 | font-family: arial; 4 | color: white; 5 | } 6 | 7 | h1 { 8 | color: grey; 9 | font-family: verdana; 10 | } 11 | #align{ 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | flex-direction: column; 16 | position: relative; 17 | } 18 | 19 | .maindiv { 20 | position: absolute; 21 | top:250px; 22 | background-color: white; 23 | color: black; 24 | width: 300px; 25 | padding: 20px; 26 | border-radius: 25px; 27 | text-align: center; 28 | } 29 | footer{ 30 | position: absolute; 31 | top:650px; 32 | } -------------------------------------------------------------------------------- /Single_Page_Profile_Website/images.png/CSS3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TejasNayak42/IBM-Introduction-to-Web-Development-with-HTML-CSS-JavaScript/db2362919bf9fa745c85ea6d61c266bff751d14e/Single_Page_Profile_Website/images.png/CSS3.png -------------------------------------------------------------------------------- /Single_Page_Profile_Website/images.png/about me.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TejasNayak42/IBM-Introduction-to-Web-Development-with-HTML-CSS-JavaScript/db2362919bf9fa745c85ea6d61c266bff751d14e/Single_Page_Profile_Website/images.png/about me.jpg -------------------------------------------------------------------------------- /Single_Page_Profile_Website/images.png/bullet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TejasNayak42/IBM-Introduction-to-Web-Development-with-HTML-CSS-JavaScript/db2362919bf9fa745c85ea6d61c266bff751d14e/Single_Page_Profile_Website/images.png/bullet.png -------------------------------------------------------------------------------- /Single_Page_Profile_Website/images.png/checkmark--outline.svg: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /Single_Page_Profile_Website/images.png/envelope.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TejasNayak42/IBM-Introduction-to-Web-Development-with-HTML-CSS-JavaScript/db2362919bf9fa745c85ea6d61c266bff751d14e/Single_Page_Profile_Website/images.png/envelope.png -------------------------------------------------------------------------------- /Single_Page_Profile_Website/images.png/flash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TejasNayak42/IBM-Introduction-to-Web-Development-with-HTML-CSS-JavaScript/db2362919bf9fa745c85ea6d61c266bff751d14e/Single_Page_Profile_Website/images.png/flash.png -------------------------------------------------------------------------------- /Single_Page_Profile_Website/images.png/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TejasNayak42/IBM-Introduction-to-Web-Development-with-HTML-CSS-JavaScript/db2362919bf9fa745c85ea6d61c266bff751d14e/Single_Page_Profile_Website/images.png/home.png -------------------------------------------------------------------------------- /Single_Page_Profile_Website/images.png/html5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TejasNayak42/IBM-Introduction-to-Web-Development-with-HTML-CSS-JavaScript/db2362919bf9fa745c85ea6d61c266bff751d14e/Single_Page_Profile_Website/images.png/html5.png -------------------------------------------------------------------------------- /Single_Page_Profile_Website/images.png/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Creating a single page website 5 | 6 | 7 | 8 | 9 | 34 | 35 | 36 |

37 |

38 |

39 |

40 | 41 |

42 |

43 | Hi, I'm Tejas Nayak B! 44 |

45 |

46 | I am currently studying 2nd year and I am pusrusing my majors in computer science . 47 | I have been into web development now almost for 4 months now. 48 | Currently Am enough familiar with HTML,CSS and JavaScript to work with mini projects. 49 | I am eager to develop my skills which will be helpful for me in future. 50 |

51 |

52 |

53 | 54 | 55 |

56 |

Skills:

57 |

58 | 59 |

60 |

61 |

62 |

HTML

63 |

4 months experience

64 |

65 | 66 |

67 |

68 |

JavaScript

69 |

2 months experience

70 |

71 | 72 | 73 |

74 |

75 |

Java

76 |

3 months experience

77 |

78 | 79 | 80 |

81 |

82 |

Node JS

83 |

1 month experience

84 |

85 | 86 | 87 |

88 |

89 |

React JS

90 |

2 weeks experience

91 |

92 | 93 | 94 | 95 |

96 |

97 | 98 | 99 |

100 |

101 | Projects 102 |

103 |

104 | 105 |

106 |

107 |

Green Escapes

108 |

Developed an web app using HTML,CSS,Javascript and Navic system for the development of rural areas via tourism annd hospitality.

111 |

112 |

113 |

114 |

Simple Interest Calculator

115 |

Developed a simple interest calculator which takes input for Rate of interest,years,amount of money and gives dynmic output in sentence.

118 |

119 |

120 |

121 |

Units Converter

122 |

Created a multi page unit converter which converts tempertaure,distance,weight,simplemath,height and time.

125 |

126 |

127 |

128 |

129 | 130 | 131 |

132 |

Recommendations

133 |

134 |

135 |

136 | “ 137 | Tejas is very smart and grasps onto things which are related to web development so quickly that it saves a lot of time which helps us in make him learn new concepts which were useful for our company other than the basic concepts taught to trainees. 138 | ” 139 |

140 |

141 | “ 142 | Tejas not only has quick learning quirks but also has great leadership skill ,he wasnot only mentoring group at the same time learning related subjects which might be helpful too even the senior developers present here .Inshort he has a great personality and helping nature. 143 | ” 144 |

145 |

146 | “ 147 | When it comes to experience he's the best ,I, once had worked with him he not only helped me in completeing my work also gave me few tips on how to get the work easily and fastly done. 148 | ” 149 |

150 |

151 |

152 | 153 | 154 |

155 |

156 |

157 | Leave a Recommendation 158 |
159 | 160 |

161 | 162 |

163 |

164 |

165 |

166 | 167 |

168 | 169 | 170 | 171 | 174 | 175 |

176 | 177 | 182 | 183 | 184 | 185 | -------------------------------------------------------------------------------- /Single_Page_Profile_Website/images.png/java.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TejasNayak42/IBM-Introduction-to-Web-Development-with-HTML-CSS-JavaScript/db2362919bf9fa745c85ea6d61c266bff751d14e/Single_Page_Profile_Website/images.png/java.png -------------------------------------------------------------------------------- /Single_Page_Profile_Website/images.png/js.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TejasNayak42/IBM-Introduction-to-Web-Development-with-HTML-CSS-JavaScript/db2362919bf9fa745c85ea6d61c266bff751d14e/Single_Page_Profile_Website/images.png/js.jpeg -------------------------------------------------------------------------------- /Single_Page_Profile_Website/images.png/node.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TejasNayak42/IBM-Introduction-to-Web-Development-with-HTML-CSS-JavaScript/db2362919bf9fa745c85ea6d61c266bff751d14e/Single_Page_Profile_Website/images.png/node.png -------------------------------------------------------------------------------- /Single_Page_Profile_Website/images.png/phone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TejasNayak42/IBM-Introduction-to-Web-Development-with-HTML-CSS-JavaScript/db2362919bf9fa745c85ea6d61c266bff751d14e/Single_Page_Profile_Website/images.png/phone.png -------------------------------------------------------------------------------- /Single_Page_Profile_Website/images.png/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TejasNayak42/IBM-Introduction-to-Web-Development-with-HTML-CSS-JavaScript/db2362919bf9fa745c85ea6d61c266bff751d14e/Single_Page_Profile_Website/images.png/react.png -------------------------------------------------------------------------------- /Single_Page_Profile_Website/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Creating a single page website 5 | 6 | 7 | 8 | 9 | 34 | 35 | 36 |

37 |

38 |

39 |

40 | 41 |

42 |

43 | Hi, I'm Tejas Nayak B! 44 |

45 |

51 |

52 |

53 | 54 | 55 |

56 |

Skills:

57 |

58 | 59 |

60 |

61 |

62 |

HTML

63 |

4 months experience

64 |

65 | 66 |

67 |

68 |

JavaScript

69 |

2 months experience

70 |

71 | 72 | 73 |

74 |

75 |

Java

76 |

3 months experience

77 |

78 | 79 | 80 |

81 |

82 |

Node JS

83 |

1 month experience

84 |

85 | 86 | 87 |

88 |

89 |

React JS

90 |

2 weeks experience

91 |

92 | 93 | 94 | 95 |

96 |

97 | 98 | 99 |

100 |

101 | Projects 102 |

103 |

104 | 105 |

106 |

107 |

Green Escapes

108 |

Developed an web app using HTML,CSS,Javascript and Navic system for the development of rural areas via tourism annd hospitality.

111 |

112 |

113 |

114 |

Simple Interest Calculator

115 |

Developed a simple interest calculator which takes input for Rate of interest,years,amount of money and gives dynmic output in sentence.

118 |

119 |

120 |

121 |

Units Converter

122 |

Created a multi page unit converter which converts tempertaure,distance,weight,simplemath,height and time.

125 |

126 |

127 |

128 |

129 | 130 | 131 |

132 |

Recommendations

133 |

134 |

135 |

140 |

145 |

150 |

151 |

152 | 153 | 154 |

155 |

156 |

157 | Leave a Recommendation 158 |
159 | 160 |

161 | 162 |

163 |

164 |

165 |

166 | 167 |

168 | 169 | 170 | 171 | 174 | 175 |

176 | 177 | 182 | 183 | 184 | 185 | -------------------------------------------------------------------------------- /Single_Page_Profile_Website/script.js: -------------------------------------------------------------------------------- 1 | function addRecommendation() { 2 | // Get the message of the new recommendation 3 | let recommendation = document.getElementById("new_recommendation"); 4 | // If the user has left a recommendation, display a pop-up 5 | if (recommendation.value != null && recommendation.value.trim() != "") { 6 | console.log("New recommendation added"); 7 | //Call showPopup here 8 | 9 | // Create a new 'recommendation' element and set it's value to the user's message 10 | var element = document.createElement("div"); 11 | element.setAttribute("class","recommendation"); 12 | element.innerHTML = "\“\" + recommendation.value + "\”\"; 13 | // Add this element to the end of the list of recommendations 14 | document.getElementById("all_recommendations").appendChild(element); 15 | 16 | // Reset the value of the textarea 17 | recommendation.value = ""; 18 | } 19 | } 20 | 21 | function showPopup(bool) { 22 | if (bool) { 23 | document.getElementById('popup').style.visibility = 'visible' 24 | } else { 25 | document.getElementById('popup').style.visibility = 'hidden' 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /Single_Page_Profile_Website/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 3 | } 4 | 5 | /* Navigation Bar */ 6 | 7 | #home { 8 | background-color: #65cbfc; 9 | padding-bottom: 1cm; 10 | margin-left:-1cm; 11 | margin-right:-1cm; 12 | margin-top:-1cm; 13 | padding-top: 2cm; 14 | padding-bottom: 2cm; 15 | height: 5mm; 16 | } 17 | 18 | .topmenu { 19 | color: lightgray; 20 | margin: 10px; 21 | padding: 20px; 22 | font-size: 20px; 23 | text-decoration:none; 24 | } 25 | 26 | .topmenu:hover { 27 | color: white; 28 | font-weight: bolder; 29 | text-decoration: underline; 30 | } 31 | 32 | .topdiv { 33 | float: right; 34 | padding-right: 1cm; 35 | } 36 | 37 | .profile_name { 38 | float: left; 39 | padding-left: 2cm; 40 | color: aliceblue; 41 | font-weight: bolder; 42 | font-size: 30px; 43 | } 44 | 45 | .profile_name .contact_info { 46 | font-size: 15px; 47 | font-style: italic; 48 | display: flex; 49 | align-items: center; 50 | flex-direction: row; 51 | } 52 | 53 | .contact_info img { 54 | width:25px; 55 | margin-right: 10px; 56 | float:left; 57 | } 58 | 59 | /* Titles */ 60 | 61 | h2 { 62 | text-align: justify; 63 | font-size: 50px; 64 | text-align: center; 65 | float: left; 66 | color: #7600bc; 67 | margin: 30px; 68 | margin-left: 60px; 69 | margin-top: 40px; 70 | margin-bottom: 0px; 71 | } 72 | 73 | .introduction { 74 | text-align: justify; 75 | font-size: 30px; 76 | text-align: center; 77 | float: left; 78 | margin-top: 30px; 79 | margin-bottom: 20px; 80 | animation-duration: 5s; 81 | position: relative; 82 | } 83 | 84 | /* Used in the About Me sections */ 85 | 86 | .container { 87 | display: flex; 88 | } 89 | 90 | /* About Me */ 91 | 92 | .about-me { 93 | display: flex; 94 | align-items: center; 95 | } 96 | 97 | #about-me h1 { 98 | font-size: 65px; 99 | margin-top: 90px; 100 | color: #7600bc; 101 | } 102 | 103 | #about-me p { 104 | font-size: 25px; 105 | color: rgb(128, 128, 128); 106 | margin-top: -1cm; 107 | } 108 | 109 | .profile_image { 110 | width: 550px; 111 | height: fit-content; 112 | vertical-align: middle; 113 | margin: 5px; 114 | } 115 | 116 | /* Skills */ 117 | 118 | .all_skills { 119 | display: flex; 120 | flex-direction: row; 121 | flex-flow: wrap; 122 | } 123 | 124 | .skill { 125 | border: 1px solid gray; 126 | display: block; 127 | border-radius: 6px; 128 | text-align: center; 129 | margin: 50px; 130 | padding: 10px; 131 | width: 2in; 132 | font-size: 20px; 133 | box-shadow: 0 3px 10px gray; 134 | } 135 | 136 | .skill img { 137 | height: 35px; 138 | align-items: center; 139 | } 140 | 141 | .skills h6 { 142 | align-items: center; 143 | font-size: 20px; 144 | margin-block-start: 8px; 145 | margin-block-end: 5px; 146 | font-weight: bold; 147 | } 148 | 149 | .skills p { 150 | align-items: center; 151 | font-size: 15px; 152 | color: gray; 153 | margin-block-start: 5px; 154 | margin-block-end: 5px; 155 | } 156 | 157 | .flex_center { 158 | display: flex; 159 | align-items: center; 160 | justify-content: center; 161 | } 162 | 163 | /* Projects */ 164 | 165 | .projects-container { 166 | margin-top: 30px; 167 | margin-left: 60px; 168 | } 169 | 170 | .projects-container hr { 171 | border: 1px solid lightgray; 172 | width: 75%; 173 | margin-left: 5cm; 174 | } 175 | 176 | .project-card { 177 | margin: 0 15px 15px 30px; 178 | padding-bottom: 5px; 179 | } 180 | 181 | .project-card h3 { 182 | font-size: 25px; 183 | margin-left: 30px; 184 | } 185 | 186 | .project-card li { 187 | font-size: 20px; 188 | margin-left: 30px; 189 | } 190 | 191 | /* Recommendations */ 192 | 193 | .all_recommendations { 194 | display: flex; 195 | align-items: center; 196 | margin-left: 1in; 197 | flex-direction: row; 198 | flex-flow: wrap; 199 | padding: 20px; 200 | } 201 | 202 | .recommendation { 203 | font-style: italic; 204 | text-align: left; 205 | width: 21.875rem; 206 | padding: 1rem; 207 | background-color: #fff; 208 | border-radius: 11px; 209 | box-shadow: 0 3px 10px var(--primary-shadow); 210 | padding: 20px; 211 | margin: 10px; 212 | border:1px solid gray; 213 | font-size: 18px; 214 | height:150px 215 | } 216 | 217 | .recommendation span { 218 | color: #7600bc; 219 | font-size: 20px; 220 | font-family: 'Times New Roman', Times, serif; 221 | } 222 | 223 | /* Scroll to Top Button */ 224 | 225 | .iconbutton{ 226 | width: 48px; 227 | height: 48px; 228 | border-radius: 100%; 229 | background-color: #7600bc; 230 | display: flex; 231 | align-items: center; 232 | justify-content: center; 233 | position: fixed; 234 | right: 3%; 235 | bottom: 3%; 236 | cursor: pointer; 237 | 238 | } 239 | 240 | /* Form Pop-up */ 241 | 242 | .popup { 243 | width:400px; 244 | background-color: #e8bcf0; 245 | border-radius: 3mm; 246 | top: 50%; 247 | left:50%; 248 | transform: translate(-50%,-50%); 249 | text-align: center; 250 | position: fixed; 251 | /* padding: 30px; */ 252 | visibility: hidden; 253 | } 254 | 255 | .popup img { 256 | padding-top: 20px; 257 | } 258 | 259 | .popup button { 260 | background-color: #fff; 261 | border: 1px solid #7600bc; 262 | color: #7600bc; 263 | display: block; 264 | border-radius: 6px; 265 | text-align: center; 266 | margin: 50px; 267 | padding: 10px; 268 | width: 2in; 269 | font-size: 20px; 270 | margin-left: 25%; 271 | } 272 | 273 | .popup button:hover { 274 | background-color: #fff; 275 | border: 2px solid #7600bc; 276 | color: #7600bc; 277 | display: block; 278 | font-weight: bolder; 279 | text-align: center; 280 | cursor: pointer; 281 | margin-left: 25%; 282 | } 283 | 284 | /* Recommendation Form */ 285 | 286 | input, textarea { 287 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 288 | margin: 10px; 289 | width:100%; 290 | } 291 | 292 | fieldset { 293 | display: flexbox; 294 | align-content: center; 295 | justify-content: center; 296 | padding: 25px; 297 | margin-left: 50px; 298 | margin-right: 50px; 299 | border: thin solid white; 300 | width: 50%; 301 | } 302 | 303 | /* Buttons */ 304 | 305 | button { 306 | background-color: #fff; 307 | border: 1px solid #7600bc; 308 | color: #7600bc; 309 | display: block; 310 | border-radius: 6px; 311 | text-align: center; 312 | margin: 50px; 313 | padding: 10px; 314 | width: 2in; 315 | font-size: 20px; 316 | } 317 | 318 | button:hover { 319 | background-color: #7600bc; 320 | border: 1px solid #7600bc; 321 | color: #fff; 322 | display: block; 323 | border-radius: 6px; 324 | text-align: center; 325 | cursor: pointer; 326 | } -------------------------------------------------------------------------------- /Unit_Converter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 7 | 8 |

9 |

10 | Unit Conversions 11 |

12 | 19 |

20 |

21 | 22 |

23 | 24 |

25 |

26 |

30 |

31 | 32 |

33 | Temperature 34 | Celsius
35 | 36 |
37 | 38 |
39 | 40 |
41 | 42 | Fahrenheit 43 |

44 | 47 |

48 |

49 |

50 | 51 |

52 | 53 |

54 |

55 |

59 |

60 |

61 | Weight 62 | KG
63 | 64 |
65 | 66 |
67 | 68 | 69 |
70 | 71 | Pounds 72 |

73 | 76 |

77 |

78 |

79 | 80 |

81 | 82 |

83 |

84 |

88 |

89 |

90 | Distance 91 | KM
92 | 93 |
94 | 95 |
96 | 97 |
98 | 99 | Miles 100 |

101 | 104 | 105 |

106 |

107 |

108 |

109 | 110 |

111 | 112 |

113 | 114 |

115 | 116 |

117 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /Unit_Converter/style.css: -------------------------------------------------------------------------------- 1 | /* sets the margin of all the element to 10px on all sides*/ 2 | *{ 3 | margin: 10px; 4 | } 5 | 6 | body{ 7 | background-color: black; 8 | } 9 | 10 | /* Home section which has the app name and nav bar. The styling is applied by id */ 11 | 12 | #home { 13 | background-color: #483355; 14 | padding-bottom: 1cm; 15 | margin-left:-1cm; 16 | margin-right:-1cm; 17 | margin-top:-1cm; 18 | padding-top: 2cm; 19 | padding-bottom: 2cm; 20 | } 21 | 22 | /* Application name inside the home section. The styling is applied by tag name */ 23 | 24 | header { 25 | font-size: 30px; 26 | color: rgb(240, 234, 245); 27 | float: left; 28 | padding-left: 2cm; 29 | } 30 | 31 | /* Navigation Bar Container*/ 32 | 33 | .topdiv { 34 | float: right; 35 | padding-right: 1cm; 36 | } 37 | 38 | /* Navigation Bar Buttons */ 39 | .topmenu { 40 | color: lightgray; 41 | background-color: #483355; 42 | margin: 10px; 43 | padding: 10px; 44 | font-size: 20px; 45 | text-decoration:none; 46 | border-radius: 1mm; 47 | } 48 | 49 | .topmenu:hover { 50 | color: white; 51 | font-weight: bolder; 52 | background-color: #382742; 53 | text-decoration: underline; 54 | } 55 | 56 | /* Container for all the three conversion calculator sections */ 57 | #all-conversion-sections{ 58 | display: grid; 59 | justify-content: center; 60 | } 61 | 62 | figure { 63 | float:left; 64 | justify-self: auto; 65 | width:200px 66 | } 67 | 68 | img { 69 | width: 200px; 70 | } 71 | 72 | figcaption { 73 | color:black; 74 | font-size: 17px; 75 | text-align: center; 76 | } 77 | 78 | button{ 79 | font-size: 20px; 80 | border: transparent; 81 | width: fit-content; 82 | background-color: rgb(173, 218, 173); 83 | border-radius: 40px; 84 | padding-right: 15px; 85 | padding-left: 15px; 86 | } 87 | 88 | button:hover { 89 | cursor: pointer; 90 | } 91 | 92 | /* The calculator panel */ 93 | .b{ 94 | border-top-style: solid; 95 | background-color: white; 96 | border-top-width: 20px; 97 | width: 600px; 98 | height: 400px; 99 | border-radius: 10px; 100 | margin-bottom: 25px; 101 | margin-top: 25px; 102 | display: flex; 103 | } 104 | 105 | .temperature{ 106 | border-top-color: green; 107 | } 108 | 109 | .weight{ 110 | border-top-color: coral; 111 | } 112 | 113 | .distance{ 114 | border-top-color: cyan; 115 | 116 | } 117 | 118 | legend { 119 | font-size: 30px; 120 | font-weight: bolder; 121 | } 122 | 123 | /* Floating icon for the home button */ 124 | .iconbutton{ 125 | width:40px; 126 | height:40px; 127 | border-radius: 100%; 128 | background-color: rgb(225, 235, 235); 129 | display: flex; 130 | align-items: center; 131 | justify-content: center; 132 | position: fixed; 133 | bottom:40px; 134 | left:0; 135 | } 136 | 137 | .iconbutton img { 138 | width:30px 139 | } 140 | 141 | footer { 142 | background-color:rgb(240, 234, 245); 143 | margin-top: 20px; 144 | } --------------------------------------------------------------------------------

Simple Interest Calculator

43 | Hi, I'm Tejas Nayak B! 44 |

Skills:

HTML

JavaScript

Java

Node JS

React JS

101 | Projects 102 |

Green Escapes

Simple Interest Calculator

Units Converter

Recommendations

Thanks for leaving a recommendation !

43 | Hi, I'm Tejas Nayak B! 44 |

Skills:

HTML

JavaScript

Java

Node JS

React JS

101 | Projects 102 |

Green Escapes

Simple Interest Calculator

Units Converter

Recommendations

Thanks for leaving a recommendation !