From 71504526cc6bc02d754a7f60428ce5d1928e0fa7 Mon Sep 17 00:00:00 2001 From: Arjun I Date: Sun, 21 Jul 2024 08:41:21 +0530 Subject: [PATCH] Made Responsive --- index.html | 28 ++++----- style.css | 171 ++++++++++++----------------------------------------- 2 files changed, 48 insertions(+), 151 deletions(-) diff --git a/index.html b/index.html index 547451d..cca81a5 100644 --- a/index.html +++ b/index.html @@ -15,31 +15,25 @@ +

Calculator

+
-

Calculator

-
- - -
-
- + -
+ + -
+ + -
- - -
-
- - + + + -
+
diff --git a/style.css b/style.css index bbb6517..15cbaa7 100644 --- a/style.css +++ b/style.css @@ -1,132 +1,61 @@ -/* *{ - box-sizing: border-box; -} - -body{ - background-color: #CAE7DF; -} - -h1{ - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - padding-bottom: 50px; -} - -.Numbers{ - padding-top : 220px ; - padding-left : 600px; -} - -.num{ - padding : 20px 20px; - font-size: 14px; - margin : 8px; - border : 0px solid #fff; - border-radius: 20px; -} - -.num:hover{ - font-size: large; -} - -.spe:hover{ - font-size: large; -} - -.operators:hover{ - font-size:large; -} - -#result{ - text-align: center; -} - -.spe{ - padding : 18px; - margin : 6px; - font-size: 14px; - border : 1px solid #fff; - border-radius: 20px; -} - -.operators{ - padding : 19px; - margin : 6px; - font-size : 14px; - border : 1px solid #fff; - border-radius : 20px; -} - -#result{ - height : 40px; - width : 255px; - margin-left: 2px; - font-size: 14px; - border : 1px solid #fff; - border-radius: 20px; -} - - -@media(max-width : 1000px){ - .num{ - width : 1000px; - } -} */ - body{ background-image: url(https://user-images.githubusercontent.com/39142850/67110554-fdea5400-f20d-11e9-834a-d459a612b7b1.gif); background-size:cover; + display : flex; + flex-direction: column; + justify-content: center; + align-items: center; + width : 100%; + height : 70vh; } h1{ - position: relative; left : 50px; font-family: "Playwrite DK Uloopet",cursive; } .calc-body{ - position : absolute; - top : 25vh; - left : 75vh; - height : 100%; - width : 100%; + display : grid; + grid-template-rows: 1fr 1fr 1fr 1fr ; + grid-template-columns: 1fr 1fr 1fr 1fr; + gap : 15px; } - .num{ cursor : pointer; - width : 50px; - height : 50px; - position : relative; + width : 65px; + height : 65px; + /* position : relative; */ background-color: rgba(255,255,255,0.3); font-size : 20px; color : #000000; - border-radius: 20px; + border-radius: 25px; border : 2px solid #CAE7DF; backdrop-filter: blur(5px); font-family: "Ga Maamli",sans-serif; - margin : 10px 10px; + /* margin : 10px 10px; */ } .clear{ cursor : pointer; - width : 120px; - height : 50px; - position: relative; + width : 65px; + height : 65px; + /* position: relative; */ border : 2px solid #CAE7DF; border-radius : 20px; background-color:rgba(255,255,255,0.3); color : #000000; - font-size: 20px; + font-size: 25px; font-family: "Ga Maamli",sans-serif; backdrop-filter: blur(5px); - margin : 10px 10px; + /* margin : 10px 10px; */ } #result{ cursor: pointer; - width : 190px; - height : 50px; - position: relative; + width : 250px; + height : 45px; + clear :right; background-color: rgba(255,255,255,0.3); color : #000000; border : 2px solid #CAE7DF; @@ -134,43 +63,33 @@ h1{ border-radius : 20px; font-size : 30px; font-family: "Ga Maamli",sans-serif; - margin : 20px 10px; + margin : 35px 10px; } .operations{ display : block; position: relative; - width : 50px; - height : 50px; - position : relative; + width : 65px; + height : 65px; + /* position : relative; */ background-color: rgba(255,255,255,0.3); color : #000000; border : 2px solid #CAE7DF; backdrop-filter : blur(5px); - font-size : 20px; + font-size : 25px; border-radius: 20px; font-family: "Ga Maamli",sans-serif; - margin : 20px 10px; -} - -.calc-input{ - display : block; -} - -.calc-numbers{ - display : inline-block; + /* margin : 20px 10px; */ } -.calc-operations{ - display : inline-block; -} -.num:hover{ +/* .num:hover{ height : 60px; width : 60px; font-size: 25px; } + .clear:hover{ height : 60px; font-size: 25px; @@ -180,27 +99,11 @@ h1{ height : 60px; width : 60px; font-size: 25px ; -} - -/* @media(max-width : 1200px){ - .calc-body{ - height : 100%; - width : 100%; - position : absolute; - top : 25vh; - left : 50vh; - } - .num{ - width : 35px; - height : 35px; - position : relative; - background-color: black; - font-size : 15px; - color : #ffffff; - border-radius: 2dvh; - border : 2px solid #fff; - font-family: "Ga Maamli",sans-serif; - margin : 7px 7px; - } } */ +@media(max-width : 1200px){ +body{ + background-size : contain; +} +} +