Skip to content

Commit fab2fee

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

File tree

3 files changed

+148
-0
lines changed

3 files changed

+148
-0
lines changed

‎Tab - Tesla Car Models/tesla-car.html

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>page</title>
6+
<link rel="stylesheet" type="text/css" href="tesla-car.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+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
10+
11+
</head>
12+
<body>
13+
14+
15+
<div class="container">
16+
<h2></h2>
17+
<div class="model model_x" id="model_x">
18+
<h2>Tesla Model X</h2>
19+
</div>
20+
21+
<div class="model model_s" id="model_s" >
22+
<h2>Tesla Model S</h2>
23+
</div>
24+
25+
<div class="model model_y" id="model_y">
26+
<h2>Tesla Model Y</h2>
27+
</div>
28+
29+
<div class="bottom_tabs">
30+
<div class="tab" onclick="tesla_car(event,'model_x')">Model X</div>
31+
<div class="tab" onclick="tesla_car(event,'model_s')">Model S</div>
32+
<div class="tab" onclick="tesla_car(event,'model_y')">Model Y</div>
33+
</div>
34+
35+
36+
</div>
37+
38+
39+
<script>
40+
41+
function tesla_car(evt,car){
42+
43+
let model = document.getElementsByClassName("model");
44+
for(let i=0; i < model.length; i++){
45+
model[i].style.display = "none";
46+
}
47+
48+
let tab = document.getElementsByClassName("tab");
49+
for(let i=0; i < tab.length; i++){
50+
tab[i].className = tab[i].className.replace(" active","");
51+
}
52+
document.getElementById(car).style.display = "block";
53+
evt.currentTarget.className += " active";
54+
55+
}
56+
57+
</script>
58+
59+
60+
</body>
61+
</html>

‎Tab - Tesla Car Models/tesla-car.png

610 KB
Loading

‎Tab - Tesla Car Models/tesla-car.scss

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
2+
body{
3+
padding: 0;
4+
margin: 0;
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
8+
height: 100vh;
9+
font-family: 'Roboto Condensed', sans-serif;
10+
11+
12+
.container{
13+
width: 750px;
14+
height: 450px;
15+
position: relative;
16+
border-radius: 20px;
17+
overflow: hidden;
18+
box-shadow: 0px 40px 100px 3px black;
19+
}
20+
.model_x{
21+
position: absolute;
22+
background: url("https://4-images.motorcar.com/portals/blog/motorcar/244/1024/1903.jpg");
23+
background-size: cover;
24+
width: 100%;
25+
height: 90%;
26+
}
27+
.model_s{
28+
position: absolute;
29+
background: url("https://www.tesla.com/tesla_theme/assets/img/models/v1.0/section-hero-background.jpg?20180111");
30+
background-size: cover;
31+
width: 100%;
32+
height: 90%;
33+
background-position: center;
34+
}
35+
.model_y{
36+
position: absolute;
37+
background: url("https://cdn.motor1.com/images/mgl/LEKjM/s3/tesla-model-y.jpg");
38+
background-size: cover;
39+
width: 100%;
40+
height: 90%;
41+
}
42+
h2{
43+
position: absolute;
44+
bottom: 30px;
45+
left: 30px;
46+
color: #fff;
47+
text-shadow: 0px 0px 5px black;
48+
}
49+
.bottom_tabs{
50+
position: absolute;
51+
bottom: 0px;
52+
width: 100%;
53+
54+
div{
55+
position: relative;
56+
display: block;
57+
float: left;
58+
width: 33.333%;
59+
text-align: center;
60+
background: #fff;
61+
padding: 15px;
62+
box-sizing: border-box;
63+
color: #262626;
64+
font-weight: bold;
65+
cursor: pointer;
66+
transition: .5s;
67+
68+
&:hover{
69+
background: rgb(226, 226, 226);
70+
}
71+
&:before{
72+
content: "";
73+
position: absolute;
74+
top:0;
75+
left: 0;
76+
width: 100%;
77+
height: 0px;
78+
background:#262626;
79+
transition: .5s;
80+
}
81+
&.active:before{
82+
height: 50px;
83+
opacity: .7;
84+
}
85+
}
86+
}
87+
}

0 commit comments

Comments
 (0)