diff --git a/index.html b/index.html index c120a85..7c1d141 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,130 @@ + Document + + + + - - +
+
+
ICC WORLD CUP 2011
+
India Vs SriLanka ScoreCard
+
+ Background Image + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
India Innings277-4 (48.2)
India InningsRB4s6sSR
+ Virender Sehwag + lbw b L Malinga02000.00
+ Sachin Tendulkar + c K Sangakkara b L Malinga181420128.57
Gautam Gambhirb T Perera971229079.51
Virat Kohli + c & b T Dilshan35494071.43
+ MS Dhoni (c & wk) + not out917982115.19
+ Yuvraj Singh + not out21242087.50
Extras 15 (b 1, lb 6, w 8, nb 0, p 0)
Total277 (4 wkts, 48.2 Ov)
Did not bat + Suresh Raina, + Harbhajan Singh, + Zaheer Khan, + Munaf Patel, + S Sreesanth +
+
+
+ +
+ + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..be18bc6 --- /dev/null +++ b/index.js @@ -0,0 +1,18 @@ +const popupbg = document.querySelector('.popupbg'); + +const removepopup = (e) => { + if (e.target.classList.contains('popupbg')) { + popupbg.style.display = 'none'; + } +} + +popupbg.addEventListener('click', removepopup); + +const popup = (player) => { + popupbg.style.display = 'flex'; + const popup = document.createElement('img'); + popup.src = `./assets/${player}`; + popup.classList.add('popup'); + popupbg.replaceChildren(popup); +} + diff --git a/style.css b/style.css index 3ba81e6..43b3d09 100644 --- a/style.css +++ b/style.css @@ -1,16 +1,122 @@ -/* Type your code here */ +* { + margin: 0; + padding: 0; + font-family: 'Urbanist', + sans-serif; +} +.container { + height: 100vh; + width: 100%; + position: relative; +} + +.title { + position: absolute; + top: 30px; + left: 45px; +} + +.maintitle { + font-size: 50px; + font-weight: 800; + text-shadow: 0.5px 3px gray; +} + +.subtitle { + color: gray; + font-size: 30px; +} + +.bg { + position: absolute; + bottom: 0; + right: 0; + height: 100%; + z-index: -1; +} + +.logo { + position: absolute; + top: 50px; + right: 50px; +} + +table { + position: absolute; + top: 150px; + left: 40px; + border-collapse: collapse; + font-weight: 700; + width: 60vw; + height: 65vh; + background-color: white; + font-size: 18px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); +} + +td { + border-bottom: 1px solid #ccc; + padding: 0 10px; +} + +tr:last-child>td { + border-bottom: none; +} + +td { + text-align: right; +} + +td:first-child, +td:nth-of-type(2) { + text-align: left; +} + +tr:first-child { + background-color: orangered; + border: 1px solid orangered; + color: white; +} + +.popuptext { + color: blue; + font-weight: 400; + cursor: pointer; +} + +.out { + color: gray; + font-weight: 400; +} + +.popupbg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + display: none; +} + +.popup { + height: 80vh; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 10; +} /* change the font family and spacing as per your project font */ -.footer{ - display:flex; - flex-direction: row; - align-content: flex-end; - position: relative; - top: 750px; +.footer { + display: flex; + flex-direction: row; + align-content: flex-end; + position: absolute; + top: 700px; margin-left: 80px; font-size: 18px; - font-family: Nunito Sans; - font-style: normal; - + font-style: normal; } \ No newline at end of file