-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
122 lines (97 loc) · 5.11 KB
/
index.html
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Hello, world!</title>
<style media="screen">
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-dark text-white ">
<ul class="navbar-nav">
<li class="nav-item p-2">
<a class="contact" href="first.html" target="_blank">Contact Me</a>
</li>
<li class="nav-item p-2 ">
<a class="price" href="second.html" target="_blank">Price </a>
</li>
<li class="nav-item p-2">Welcome</li>
</ul>
</nav>
<div class="container-fluid mt-4 clearfix">
<img src="artist.png" alt="Artist">
<button style="margin-left:15px; position:relative; top:190px;" type="button" name="button" onclick="alert('Hola Amigo')">Click Me!</button>
<h3 class="Display-2">Welcome everyone!</h1>
<h1 class="Display-3">I AM SMIT A SKETCH ARTIST</h2>
<h4 class="Display-4">This is my art gallary</h4>
</div>
<div class="row">
<h1 class="know bg-dark display-5">Know the artist</h1>
<div class="col-sm-4" style="background-color:#51c4d3">
<h4 style="margin-top:3px;">About myself</h4>
<div class="container">
<p>Hello everyone my name is Smit lad and I am the face behind all these drawings</p>
<p>I developed a passion for sketching when i was 9 years old and after that there is no looking back.</p>
<p>I have other interests as well such as reading books and playing football</p>
</div>
<img src="smit.jpg " alt="My image" style="width:250px;" class="smit">
</div>
<div class="col-sm-4" class="second" style="background-color:#fad586">
<h4 style="margin-top:3px;">My family</h4>
<div class="container">
<p>This is my family. I have a younger sister.My family is extremly rich and lives a lavish lifestyle</p>
<p>My father owns a bussiness and my mother is a housewife.My little sister is very intelligent</p>
<p>My family loves travelling</p>
</div>
<img src="family.jpg " alt="My image" style="width:250px; height:250px;" class="family">
</div>
<div class="col-sm-4" class="third" style="background-color:#51c4d3">
<h4 style="margin-top:3px;">My Friends</h4>
<div class="container">
<p>This is my other family.I have the bestest set of friends</p>
<p>They remain by my side through hardships and failures</p>
<p>My friends are extremely faithful</p>
<p>Friendship is a divine relationship</p>
<p>Their love is unconditional and true</p>
</div>
<img src="frnds.jpg " alt="My image" style="width:250px; height:250px;" class="frnds">
</div>
<div class="container-fluid gallary bg-dark" style="margin-top:40px;">
<h1 class="Display-3 gal ">THE ART GALLARY</h1>
</div>
<div class="row">
<div class="col-sm-3">
<img src="harry.jpg" alt="" width="300px"style="position:absolute; left:15px;">
</div>
<div class="col-sm-4">
<img src="naru.jpg" alt="" width="300px" style="position:absolute; right:600px;"">
</div>
<div class="col-sm-4">
<img src="decaprio.jpg" alt="" width="300px" style="position:absolute; right:4px;">
</div>
</div>
<div class="row">
<div class="col-sm-5">
<img src="ronaldo.jpg" alt="" width="300px" style="margin-top:640px; position:absolute; left:319px;">
</div>
<div class="col-sm-5">
<img src="sherlock.jpg" alt="" width="300px" height="" style="margin-top:640px;position:absolute; right:297px;">
</div>
<div class="row">
<div class="col-sm-6">
<img src="joker.jpg" alt="" width="300px" style="margin-top:1289px; position:absolute; left:620px;">
</div>
</div>
<!--Optional JavaScript; choose one of the two! -->
<!--Option 1: Bootstrap Bundle with Popper-- >
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
</body>
</html>