Skip to content

Commit f0be32f

Browse files
ShraysananShraysanan
authored
Add files via upload
initial commit
1 parent 112a52b commit f0be32f

File tree

2 files changed

+113
-0
lines changed

2 files changed

+113
-0
lines changed

‎practice 5.css

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
body{
2+
background-color:#3B464F;
3+
}
4+
.opening{
5+
color: #3B464F;
6+
}
7+
.jumbotron{
8+
background-color: #31373C;
9+
}
10+
.jumbotron h1{
11+
color:white;
12+
text-shadow: 1px 1px 2px white;
13+
font-family: 'Liu Jian Mao Cao', cursive;
14+
font-size: 4.0rem;
15+
}
16+
.jumbotron p{
17+
color:white;
18+
text-shadow: 1px 1px 2px white;
19+
font-family: 'Liu Jian Mao Cao', cursive;
20+
font-size: 2.0rem;
21+
}

‎practice 5.html

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>photo grid</title>
5+
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
6+
<link rel="stylesheet" type="text/css" href="practice 5.css">
7+
<link href="https://fonts.googleapis.com/css?family=Liu+Jian+Mao+Cao&display=swap" rel="stylesheet">
8+
</head>
9+
<body>
10+
11+
12+
<nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark">
13+
<div class="container">
14+
<a class="navbar-brand" href="#">
15+
16+
<!-- added image code from booststrap -->
17+
<svg class="bi bi-images" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
18+
<path fill-rule="evenodd" d="M12.002 4h-10a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1zm-10-1a2 2 0 00-2 2v8a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2h-10z" clip-rule="evenodd"/>
19+
<path d="M10.648 8.646a.5.5 0 01.577-.093l1.777 1.947V14h-12v-1l2.646-2.354a.5.5 0 01.63-.062l2.66 1.773 3.71-3.71z"/>
20+
<path fill-rule="evenodd" d="M4.502 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM4 2h10a1 1 0 011 1v8a1 1 0 01-1 1v1a2 2 0 002-2V3a2 2 0 00-2-2H4a2 2 0 00-2 2h1a1 1 0 011-1z" clip-rule="evenodd"/>
21+
</svg>
22+
23+
IMAGES
24+
</a>
25+
26+
27+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
28+
<span class="navbar-toggler-icon"></span>
29+
</button>
30+
31+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
32+
<div class="navbar-nav mr-auto">
33+
<li class="nav-item active">
34+
<a class="nav-link" href="#">About<span class="sr-only">(current)</span></a>
35+
</li>
36+
<li class="nav-item">
37+
<a class="nav-link" href="#">Contact</a>
38+
</li>
39+
</div>
40+
</div>
41+
<div class="nav navbar-nav navbar-right">
42+
<li><a class="nav-link" href="#">sign up</a></li>
43+
<li><a class="nav-link" href="#">login</a></li>
44+
</div>
45+
</div>
46+
</nav>
47+
48+
<div class="container">
49+
<div class="jumbotron">
50+
<h1 class="opening">
51+
52+
<svg class="bi bi-camera" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <!-- camera icon -->
53+
<path d="M9 5C7.343 5 5 6.343 5 8a4 4 0 014-4v1z"/>
54+
<path fill-rule="evenodd" d="M14.333 3h-2.015A5.97 5.97 0 009 2a5.972 5.972 0 00-3.318 1H1.667C.747 3 0 3.746 0 4.667v6.666C0 12.253.746 13 1.667 13h4.015c.95.632 2.091 1 3.318 1a5.973 5.973 0 003.318-1h2.015c.92 0 1.667-.746 1.667-1.667V4.667C16 3.747 15.254 3 14.333 3zM1.5 5a.5.5 0 100-1 .5.5 0 000 1zM9 13A5 5 0 109 3a5 5 0 000 10z" clip-rule="evenodd"/>
55+
<path d="M2 3a1 1 0 011-1h1a1 1 0 010 2H3a1 1 0 01-1-1z"/>
56+
</svg>
57+
58+
The Image Gallery
59+
</h1>
60+
<p class="opening">A bunch of beautiful collection of images</a></p>
61+
</div>
62+
63+
64+
65+
66+
<!-- pictures can be larger than screen so they are mae to be displayed in thumbnails and fluid makes them responsive -->
67+
<div class="row">
68+
<div class="col-lg-4 col-med-4 col-sm-6 col-xs-12"><img class="img-thumbnail img-fluid" src="https://images.unsplash.com/photo-1483849838745-e8a3304f4eed?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"></div>
69+
<div class="col-lg-4 col-med-4 col-sm-6 col-xs-12"><img class="img-thumbnail img-fluid"src="https://images.unsplash.com/photo-1483849838745-e8a3304f4eed?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"></div>
70+
<div class="col-lg-4 col-med-4 col-sm-6 col-xs-12"><img class="img-thumbnail img-fluid" src="https://images.unsplash.com/photo-1483849838745-e8a3304f4eed?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"></div>
71+
</div>
72+
<div class="row">
73+
<div class="col-lg-4 col-med-4 col-sm-6 col-xs-12"><img class="img-thumbnail img-fluid" src="https://images.unsplash.com/photo-1483849838745-e8a3304f4eed?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"></div>
74+
<div class="col-lg-4 col-med-4 col-sm-6 col-xs-12"><img class="img-thumbnail img-fluid" src="https://images.unsplash.com/photo-1483849838745-e8a3304f4eed?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"></div>
75+
<div class="col-lg-4 col-med-4 col-sm-6 col-xs-12"><img class="img-thumbnail img-fluid" src="https://images.unsplash.com/photo-1483849838745-e8a3304f4eed?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"></div>
76+
</div>
77+
<div class="row">
78+
<div class="col-lg-4 col-med-4 col-sm-6 col-xs-12"><img class="img-thumbnail img-fluid" src="https://images.unsplash.com/photo-1483849838745-e8a3304f4eed?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"></div>
79+
<div class="col-lg-4 col-med-4 col-sm-6 col-xs-12"><img class="img-thumbnail img-fluid" src="https://images.unsplash.com/photo-1483849838745-e8a3304f4eed?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"></div>
80+
<div class="col-lg-4 col-med-4 col-sm-6 col-xs-12"><img class="img-thumbnail img-fluid" src="https://images.unsplash.com/photo-1483849838745-e8a3304f4eed?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"></div>
81+
</div>
82+
83+
84+
85+
86+
87+
88+
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
89+
90+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
91+
</body>
92+
</html>

0 commit comments

Comments
 (0)