Skip to content

Commit fd7d795

Browse files
devasolutions-devosdevasolutions-devos
committed
built monster containers
1 parent af5b4fc commit fd7d795

3 files changed

Lines changed: 69 additions & 20 deletions

File tree

‎default.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,24 @@
11
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
}
6+
7+
.primary {
8+
color: #009002;
9+
}
10+
11+
.primary-background {
12+
background-color: #009002;
13+
}
14+
15+
.secondary {
16+
color: #1b0007
17+
}
218

19+
.secondary-background {
20+
background-color: #1b0007
21+
}
322
.ubuntu-light {
423
font-family: "Ubuntu", sans-serif;
524
font-weight: 300;

‎index.html‎

Lines changed: 35 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,28 +9,43 @@
99
rel="stylesheet"
1010
>
1111
<link href="./default.css" rel="stylesheet">
12+
<link href="./monster.css" rel="stylesheet">
13+
1214
</head>
13-
<body>
14-
<h1 class="ubuntu-medium">Devasolutions: DevOS</h1>
15-
16-
<img src="https://m.media-amazon.com/images/I/71Mqp0NFlsL._AC_UF894,1000_QL80_.jpg">
17-
<h2 class="ubuntu-medium">Monster Energy Original</h2>
18-
<p class="ubuntu-regular">Unleash the beast inside of you.</p>
15+
<body class="primary-background">
16+
<h1 class="ubuntu-medium secondary">Devasolutions: DevOS</h1>
1917

20-
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBnvK6nednnXOwjlpMoNH3Q1qg8D44Tj0XFBlUnfk6hw&s=10">
21-
<h2 class="ubuntu-medium">Monster Mango Loco</h2>
22-
<p>Unleash la bestia exótica we!</p>
23-
24-
<img src="https://images.albertsons-media.com/is/image/ABS/970126959-C1N1?$ng-ecom-pdp-mobile$&defaultImage=Not_Available">
25-
<h2 class="ubuntu-medium">Monster Ultra Zero</h2>
26-
<p>Control the beast inside you!</p>
18+
<div class="monster-box-container">
19+
<div class="monster-container">
20+
<img width=12.5% src="https://m.media-amazon.com/images/I/71Mqp0NFlsL._AC_UF894,1000_QL80_.jpg">
21+
<h2 class="ubuntu-medium secondary">Monster Energy Original</h2>
22+
<p class="ubuntu-regular secondary">Unleash the beast inside of you.</p>
23+
</div>
24+
25+
<div class="monster-container">
26+
<img width=19% src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBnvK6nednnXOwjlpMoNH3Q1qg8D44Tj0XFBlUnfk6hw&s=10">
27+
<h2 class="ubuntu-medium secondary">Monster Mango Loco</h2>
28+
<p>Unleash la bestia exótica we!</p>
29+
</div>
30+
31+
<div class="monster-container">
32+
<img width=15% src="https://images.albertsons-media.com/is/image/ABS/970126959-C1N1?$ng-ecom-pdp-mobile$&defaultImage=Not_Available">
33+
<h2 class="ubuntu-medium secondary">Monster Ultra Zero</h2>
34+
<p>Control the beast inside you!</p>
35+
</div>
36+
37+
<div class="monster-container">
38+
<img width=20% src="https://m.media-amazon.com/images/I/81xWb58aSwL.jpg">
39+
<h2 class="ubuntu-medium">Monster Pipeline punch</h2>
40+
<p>Fight for the beast you love :3</p>
41+
</div>
42+
43+
<div class="monster-container">
44+
<img width=20% src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSY2kZUTnZAhGQw966Qdw4b-fybRn1CHBikIWxBy6CbCFpKgilImu9Mdlc&s=10">
45+
<h2 class="ubuntu-medium">Monster Pacific punch</h2>
46+
<p>Relax and rock your monster |..|</p>
47+
</div>
48+
</div>
2749

28-
<img src="https://m.media-amazon.com/images/I/81xWb58aSwL.jpg">
29-
<h2 class="ubuntu-medium">Monster Pipeline punch</h2>
30-
<p>Fight for the beast you love :3</p>
31-
32-
<img src="https://assets.change.org/photos/8/ib/nz/FliBnZIGIdirPiq-1600x900-noPad.jpg?1622862411">
33-
<h2 class="ubuntu-medium">Monster Pacific punch</h2>
34-
<p>Relax and rock your monster |..|</p>
3550
</body>
3651
</html>

‎monster.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.monster-box-container {
2+
display: flex;
3+
flex-wrap: wrap;
4+
}
5+
6+
.monster-container {
7+
border: 2px solid #1b0007;
8+
width: 20%;
9+
margin-right: 20px;
10+
margin-bottom: 15px;
11+
}
12+
13+
.monster-container img {
14+
width: 75%;
15+
}

0 commit comments

Comments
 (0)