├── README.md ├── mobile.css ├── style.css └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # Images- -------------------------------------------------------------------------------- /mobile.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0; 3 | padding:0; 4 | } 5 | @media (max-width:595px){ 6 | #container{ 7 | display:grid; 8 | grid-template-columns:auto; 9 | } 10 | .header{ 11 | padding-top:30px; 12 | padding-bottom:30px; 13 | padding-right: 10px; 14 | padding-left:10px; 15 | } 16 | img{ 17 | width:250px; 18 | height:300px; 19 | } 20 | .footer{ 21 | padding:10px 22 | } 23 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | font-family: "Raleway", Arial, sans-serif; 3 | } 4 | 5 | #container{ 6 | display:grid; 7 | grid-template-columns:auto auto; 8 | } 9 | .header{ 10 | height:10vh; 11 | display:flex; 12 | justify-content:space-between; 13 | padding-top:30px; 14 | padding-bottom:30px; 15 | padding-left: 40px; 16 | padding-right:40px; 17 | } 18 | a{ 19 | text-decoration:none; 20 | color:black; 21 | font-size:25px; 22 | } 23 | 24 | /**********************************************About****************************************************************************/ 25 | .about-block{ 26 | width:60vw; 27 | margin:auto; 28 | padding-top:80px; 29 | text-align:center; 30 | } 31 | .heading{ 32 | font-size:35px; 33 | font-family:sans-serif; 34 | padding-bottom:20px; 35 | letter-spacing:5px; 36 | } 37 | .description{ 38 | font-size:15px; 39 | color:grey; 40 | padding-top:30px; 41 | letter-spacing:2px; 42 | } 43 | .red{ 44 | font-size:20px; 45 | color:red; 46 | padding:10px; 47 | } 48 | .input{ 49 | margin:20px; 50 | text-align:center; 51 | } 52 | input{ 53 | width:60vw; 54 | height:35px; 55 | } 56 | span{ 57 | display:block; 58 | font-size:15px; 59 | font-weight:bold; 60 | } 61 | .button{ 62 | width:61vw; 63 | height:40px; 64 | border:none; 65 | font-size:15px; 66 | color:white; 67 | background:rgb(39, 36, 36); 68 | } 69 | .button:hover{ 70 | color:black; 71 | background:lightgrey; 72 | } 73 | 74 | /*******************************************Footer***********************************************/ 75 | .footer{ 76 | width:95vw; 77 | height:5vw; 78 | text-align:center; 79 | color:grey; 80 | padding:20px; 81 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | ArtGallery 11 | 12 | 13 | 14 |
15 | MY ART 16 | ABOUT 17 |
18 |
19 |
20 | 21 | 22 | 23 |
24 |
25 | 26 | 27 |
28 |
29 |
30 |
31 |

About

32 | 33 |

Just me, myself and I, exploring the universe of unknownment. I have a heart of love 34 | and an interest of lorem ipsum and mauris neque quam blog. I want to share my world with you. Praesent 35 | tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue 36 | gravida diam non fringilla. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta 37 | lectus vitae, ultricies congue gravida diam non fringilla.

38 |
39 |
40 |

Do not hesitate to contact me!

41 |
42 |
43 | Name 44 | 45 |
46 |
47 | Email 48 | 49 |
50 |
51 | Message 52 | 53 |
54 |
55 | 56 |
57 |
58 | 59 |
60 | Made by ❤Jugesh Raghav 61 |
62 | 63 | 64 | --------------------------------------------------------------------------------