web-development/uditagrawal08/task8.html at main · cc-bhu/web-development · GitHub

1
2
3
4
5
6
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task 8</title>
    <style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;

    }

    .container img{
          transition: width 1s;
        width: 50%;
    }

    .container img:hover{
        border: 10px solid rosybrown;
        border-radius: 5%;
        width: 400px;
        cursor: pointer

      }
    .modal{

      display:none;
      position: fixed;

      padding: 100px;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;

    }
    .modal-content{
      text-align: left;
      display: block;
      width: 75%;
      height: 30%;
      border-radius: 20px;
      background-color:aliceblue;
      padding: 20px;
      box-shadow:0px 8px 8px 0px violet
    }
      #close{
       background-color: darkgray;
       float: right;
       margin-left: 30px;
       font-size: large;
       border-radius: 10px;

      }
      #download{
        background-color:darkgray;
        float: right;
        height: 50%;
        font-size: large;
        border-radius: 10px;
      }
      .modal-content button:hover{
        cursor:pointer;
      }
    </style>
</head>
<body>

  <div class="container">
    <img id="img" src="../assets/images/task8.jpg" alt="this is image">
  </div>
  <div id="my-modal" class="modal">
  <div class="modal-content">
    <h1>RED DAHLIA FLOWER</h1>
    <br>
    <p>This is a flower that exites your eyes with beauty and pattern of its red petals. </p>
    <div class="close">
    <button onclick="closeFunction()" id="close">Close</button>
    </div>
    <div class="download">
      <a href="../assets/images/task8.jpg" download>
      <button  id="download">Download</button>
    </a>
    </div>
  </div>
  </div>
  </body>
  <script>
    var modal=document.getElementById("my-modal");
    var img=document.getElementById("img");
    var close=document.getElementById("close");
    function closeFunction(){
      modal.style.display="none";
    }
    img.onclick=function()
    {
      modal.style.display="block";
    }


  </script>
  </html>