Skip to content

Commit b4d851d

Browse files
author
codeblogger
committed
html, css and js
1 parent 06ae68e commit b4d851d

File tree

3 files changed

+341
-0
lines changed

3 files changed

+341
-0
lines changed

‎Marvel Tabs/Marvel Tabs.html‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>page</title>
6+
<link rel="stylesheet" type="text/css" href="Marvel Tabs.css">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
9+
</head>
10+
<body>
11+
12+
<div class="container">
13+
<div class="vertical_tabs">
14+
<div class="tab" onclick="tabFunction(event, 'spider')" id="defaultOpen">Spider-Man</div>
15+
<div class="tab" onclick="tabFunction(event, 'captian')">Captain America</div>
16+
<div class="tab" onclick="tabFunction(event, 'hulk')">Hulk</div>
17+
<div class="tab" onclick="tabFunction(event, 'thor')">Thor</div>
18+
<div class="tab" onclick="tabFunction(event, 'war_machine')">War Machine</div>
19+
<div class="tab" onclick="tabFunction(event, 'ironMan')">Iron Man</div>
20+
<div class="tab" onclick="tabFunction(event, 'antMan')">Ant Man</div>
21+
<div class="tab" onclick="tabFunction(event, 'blackPanther')">Black Panther</div>
22+
</div>
23+
<div class="show_box">
24+
<!-- BOX 1 -->
25+
<div class="show" id="spider">
26+
<div class="image image_1"></div>
27+
<p class="date"></p>
28+
<h2>Spider-Man</h2>
29+
<p class="info">
30+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
31+
sed diam nonumy eirmod tempor invidunt ut labore et dolore
32+
magna aliquyam erat, sed diam voluptua. At vero eos et accusam
33+
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
34+
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
35+
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
36+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
37+
sed diam voluptua. At vero eos et accusam et justo duo dolores
38+
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
39+
est Lorem ipsum dolor sit amet.
40+
</p>
41+
</div>
42+
43+
<!-- BOX 2 -->
44+
<div class="show" id="captian">
45+
<div class="image image_2"></div>
46+
<h2>Captian America</h2>
47+
<p class="info">
48+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
49+
sed diam nonumy eirmod tempor invidunt ut labore et dolore
50+
magna aliquyam erat, sed diam voluptua. At vero eos et accusam
51+
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
52+
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
53+
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
54+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
55+
sed diam voluptua. At vero eos et accusam et justo duo dolores
56+
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
57+
est Lorem ipsum dolor sit amet.
58+
</p>
59+
</div>
60+
61+
<!-- BOX 3 -->
62+
<div class="show" id="hulk">
63+
<div class="image image_3"></div>
64+
<h2>Hulk</h2>
65+
<p class="info">
66+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
67+
sed diam nonumy eirmod tempor invidunt ut labore et dolore
68+
magna aliquyam erat, sed diam voluptua. At vero eos et accusam
69+
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
70+
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
71+
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
72+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
73+
sed diam voluptua. At vero eos et accusam et justo duo dolores
74+
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
75+
est Lorem ipsum dolor sit amet.
76+
</p>
77+
</div>
78+
79+
<!-- BOX 4 -->
80+
<div class="show" id="thor">
81+
<div class="image image_4"></div>
82+
<h2>Thor</h2>
83+
<p class="info">
84+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
85+
sed diam nonumy eirmod tempor invidunt ut labore et dolore
86+
magna aliquyam erat, sed diam voluptua. At vero eos et accusam
87+
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
88+
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
89+
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
90+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
91+
sed diam voluptua. At vero eos et accusam et justo duo dolores
92+
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
93+
est Lorem ipsum dolor sit amet.
94+
</p>
95+
</div>
96+
97+
<!-- BOX 5 -->
98+
<div class="show" id="war_machine">
99+
<div class="image image_5"></div>
100+
<h2>War Machine</h2>
101+
<p class="info">
102+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
103+
sed diam nonumy eirmod tempor invidunt ut labore et dolore
104+
magna aliquyam erat, sed diam voluptua. At vero eos et accusam
105+
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
106+
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
107+
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
108+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
109+
sed diam voluptua. At vero eos et accusam et justo duo dolores
110+
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
111+
est Lorem ipsum dolor sit amet.
112+
</p>
113+
</div>
114+
115+
<!-- BOX 6 -->
116+
<div class="show" id="ironMan">
117+
<div class="image image_6"></div>
118+
<h2>Iron Man</h2>
119+
<p class="info">
120+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
121+
sed diam nonumy eirmod tempor invidunt ut labore et dolore
122+
magna aliquyam erat, sed diam voluptua. At vero eos et accusam
123+
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
124+
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
125+
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
126+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
127+
sed diam voluptua. At vero eos et accusam et justo duo dolores
128+
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
129+
est Lorem ipsum dolor sit amet.
130+
</p>
131+
</div>
132+
133+
<!-- BOX 7 -->
134+
<div class="show" id="antMan">
135+
<div class="image image_7"></div>
136+
<h2>Ant Man</h2>
137+
<p class="info">
138+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
139+
sed diam nonumy eirmod tempor invidunt ut labore et dolore
140+
magna aliquyam erat, sed diam voluptua. At vero eos et accusam
141+
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
142+
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
143+
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
144+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
145+
sed diam voluptua. At vero eos et accusam et justo duo dolores
146+
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
147+
est Lorem ipsum dolor sit amet.
148+
</p>
149+
</div>
150+
151+
<!-- BOX 8 -->
152+
<div class="show" id="blackPanther">
153+
<div class="image image_8"></div>
154+
<h2>Black Panther</h2>
155+
<p class="info">
156+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
157+
sed diam nonumy eirmod tempor invidunt ut labore et dolore
158+
magna aliquyam erat, sed diam voluptua. At vero eos et accusam
159+
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
160+
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
161+
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
162+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
163+
sed diam voluptua. At vero eos et accusam et justo duo dolores
164+
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
165+
est Lorem ipsum dolor sit amet.
166+
</p>
167+
</div>
168+
</div>
169+
</div>
170+
171+
<script>
172+
173+
function tabFunction(evt,superHero){
174+
let i,info,tab;
175+
show = document.getElementsByClassName("show");
176+
for(i=0; i < show.length; i++){
177+
show[i].style.display = "none";
178+
}
179+
tab = document.getElementsByClassName("tab");
180+
for(i=0; i < tab.length; i++){
181+
tab[i].className = tab[i].className.replace(" active","");
182+
}
183+
document.getElementById(superHero).style.display = "block";
184+
evt.currentTarget.className += " active";
185+
}
186+
187+
document.getElementById("defaultOpen").click();
188+
189+
</script>
190+
191+
192+
</body>
193+
</html>

‎Marvel Tabs/Marvel Tabs.png‎

411 KB
Loading

‎Marvel Tabs/Marvel Tabs.scss‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
@import url('https://fonts.googleapis.com/css?family=Oswald:400,500');
2+
body{
3+
padding: 0;
4+
margin: 0;
5+
font-family: 'Oswald', sans-serif;
6+
background: url("https://wallpaperplay.com/walls/full/0/3/d/163882.jpg");
7+
background-repeat: no-repeat;
8+
9+
.container{
10+
display: grid;
11+
width: 750px;
12+
height: 420px;
13+
background: rgba(0,0,0,.2);
14+
margin: 150px auto;
15+
border-radius: 15px;
16+
overflow: hidden;
17+
grid-template-columns: 1.5fr 5fr;
18+
grid-template-areas:
19+
"tabs boxes";
20+
21+
.vertical_tabs{
22+
grid-area: tabs;
23+
background: #262626;
24+
box-shadow: inset 0px 0px 15px rgba(0,0,0,.7);
25+
color: #faf7f5;
26+
}
27+
.tab{
28+
width: 100%;
29+
height: 50px;
30+
text-align: center;
31+
line-height: 50px;
32+
cursor: pointer;
33+
transition: .5s cubic-bezier(.57,.21,.69,3.25);
34+
&:hover{
35+
transform: scale(1.1);
36+
}
37+
&.active{
38+
background: #F6EEE3;
39+
color: #262626;
40+
transform: scale(1.2);
41+
font-size: 18px;
42+
font-weight: bold;
43+
}
44+
}
45+
46+
47+
.show_box{
48+
grid-area: boxes;
49+
background: #F6EEE3;
50+
box-shadow: inset 0px 0px 15px rgba(0,0,0,.7);
51+
position: relative;
52+
53+
.show{
54+
position: absolute;
55+
width: 90%;
56+
left: 50%;
57+
top: 40px;
58+
transform: translateX(-50%);
59+
60+
.image{
61+
width: 50%;
62+
height: 200px;
63+
float: left;
64+
margin: 0px 15px 0px 0px;
65+
border-radius: 10px 0px;
66+
}
67+
.image_1{
68+
background: url("https://images.alphacoders.com/927/927310.jpg");
69+
background-position: right;
70+
background-size: cover;
71+
}
72+
.image_2{
73+
background: url("https://images.alphacoders.com/660/thumb-1920-660254.jpg");
74+
background-size: cover;
75+
background-position: center;
76+
}
77+
.image_3{
78+
background: url("https://images5.alphacoders.com/403/thumb-1920-403369.jpg");
79+
background-size: cover;
80+
background-position: center;
81+
}
82+
.image_4{
83+
background: url("https://images3.alphacoders.com/674/674048.jpg");
84+
background-size: cover;
85+
background-position: center;
86+
}
87+
.image_5{
88+
background: url("https://www.sideshow.com/product-asset/902831/feature");
89+
background-size: cover;
90+
background-position: right;
91+
}
92+
.image_6{
93+
background: url("https://images2.alphacoders.com/971/971653.jpg");
94+
background-size: cover;
95+
background-position: center;
96+
}
97+
.image_7{
98+
background: url("http://www.laprensalibre.cr/files/noticias/images/detail/656086486_ant_man_hd_wallpapers.jpg");
99+
background-size: cover;
100+
background-position: center;
101+
}
102+
.image_8{
103+
background: url("https://stmed.net/sites/default/files/black-panther-wallpapers-29427-7479210.png");
104+
background-size: cover;
105+
background-position: center;
106+
}
107+
h2{
108+
font-size: 28px;
109+
color: #262626;
110+
margin-top: 0px;
111+
}
112+
.info{
113+
font-size: 15px;
114+
}
115+
}
116+
}
117+
}
118+
}
119+
120+
@media only screen and (max-width:750px){
121+
body{
122+
123+
.container{
124+
display: grid;
125+
width: 100%;
126+
min-height: 850px;
127+
grid-template-rows: 1.5fr 5fr;
128+
grid-template-columns: 1fr;
129+
border-radius: 15px;
130+
overflow: hidden;
131+
grid-template-areas:
132+
"tabs"
133+
"boxes";
134+
135+
.vertical_tabs{
136+
grid-area: tabs;
137+
height: 410px;
138+
}
139+
.show_box{
140+
grid-area: boxes;
141+
position: relative;
142+
143+
144+
}
145+
146+
}
147+
}
148+
}

0 commit comments

Comments
 (0)