GoBlogger.github.io/Art.html at main · ananyachibber21/GoBlogger.github.io · 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
<!DOCTYPE html>
<html>
	<head>
		<title>Art</title>
		<style>
			body{
			background-color:  #070707;
			font-family: Ink Free;
			}
			h1{
				color: #D6283A;
				font-size: 70px;
				font-weight: bold;
				text-decoration: underline;
	            text-align: center;
			}
			h2{
				color: #40434E;
				font-size: 40px;
				font-weight: bold;
	            text-align: center;
	            letter-spacing: 2px;
			}
			h2:hover{
            color: #D6283A;
		    }
		    .arts{
		    	margin: 30px;
            	display: flex;
	           text-align: justify;
		    }
		    .img{
		   	width: 80%;
		   	height:500px;
		   }
		   .child{
		   	width: 50%;
		   	padding: 30px;
		   }
		   @media all and (max-width: 670px){
		   	h1{
				color: #D6283A;
				font-size: 60px;
				font-weight: bold;
				text-decoration: underline;
	            text-align: center;
			}
	       	.arts{
		        margin: 30px;
            	display: flex;
            	flex-direction: column;
            	text-align: center;
		    }
		    .img{
		   	width: 90%;
		   	height:350px;
		   }
		   .child{
		   	width: 80%;
		   	padding: 30px;
		   }
       }
	</style>
	</head>
	<body>
		<h1>ART GALLERY</h1>
		<h2>Here are some of my Arts....</h2>
		<div class="arts">
			<div class="child"><img class="img" src="img15.jpg" style="text-align: center; padding-left:50px;"></div>
			<div class="child"><img class="img" src="img16.jpg" style="text-align: center; padding-left: 80px;"></div>
		</div>
		<div class="arts">
			<div class="child"><img class="img" src="img17.jpg" style="text-align: center; padding-left:50px;"></div>
			<div class="child"><img class="img" src="img18.jpg" style="text-align: center; padding-left: 80px;"></div>
		</div>
		<div class="arts">
			<div class="child"><img class="img" src="img19.jpg" style="text-align: center; padding-left:50px;"></div>
			<div class="child"><img class="img" src="img20.jpg" style="text-align: center; padding-left: 80px;"></div>
		</div>
		<div class="arts">
			<div class="child"><img class="img" src="img21.jpg" style="text-align: center; padding-left:50px;"></div>
			<div class="child"><img class="img" src="img22.jpg" style="text-align: center; padding-left: 80px;"></div>
		</div>
		<div class="arts">
			<div class="child"><img class="img" src="img23.jpg" style="text-align: center; padding-left:50px;"></div>
			<div class="child"><img class="img" src="img24.jpg" style="text-align: center; padding-left: 80px;"></div>
		</div>
		<div class="arts">
			<div class="child"><img class="img" src="img25.jpg" style="text-align: center; padding-left:50px;"></div>
			<div class="child"><img class="img" src="img26.jpg" style="text-align: center; padding-left: 80px;"></div>
		</div>
	</body>
</html>