Skip to content

Commit b779a9e

Browse files
author
guldus98
committed
html, css and js
1 parent 0ab8e03 commit b779a9e

File tree

3 files changed

+202
-0
lines changed

3 files changed

+202
-0
lines changed

‎JavaScript Tabs Styled 1/JavaScript Tabs Styled 1.css

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700');
2+
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700');
3+
html {
4+
height: 100%;
5+
font-family: 'Open Sans Condensed', sans-serif;
6+
user-select: none;
7+
}
8+
body {
9+
background: linear-gradient(to bottom right, #3D4258, #6670A0, #9688B4);
10+
}
11+
.container{
12+
position: absolute;
13+
top: 25%;
14+
left: 50%;
15+
transform: translate(-50%,-25%);
16+
width: 500px;
17+
height: auto;
18+
}
19+
h2{
20+
text-align: center;
21+
color: #dedede;
22+
font-size: 40px;
23+
text-shadow: 0px 15px 15px #262626;
24+
}
25+
.main_box{
26+
position: relative;
27+
margin-top: 50px;
28+
}
29+
#tabs {
30+
width: 100%;
31+
height: 30px;
32+
font-family: sans-serif;
33+
font-size: 15px;
34+
}
35+
.tab {
36+
text-align: center;
37+
padding: 8px 10px 8px 10px;
38+
margin-right: 10px;
39+
background: #444c6a;
40+
border: 1px solid #dedede;
41+
border-radius: 30px;
42+
float: left;
43+
color: #dedede;
44+
transition: .5s;
45+
cursor: pointer;
46+
box-sizing: border-box;
47+
}
48+
.tab:hover{
49+
background: #3D4258;
50+
transform: scale(1.1);
51+
box-shadow: 0px 5px 25px rgba(0, 0, 0, 85);
52+
}
53+
#text_box{
54+
margin-top: 25px;
55+
clear: both;
56+
width: 100%;
57+
}
58+
.text {
59+
position: absolute;
60+
width: 100%;
61+
background: linear-gradient(45deg,#dedede,#d8d8d8);
62+
border-radius: 1px;
63+
padding: 20px 30px;
64+
box-sizing: border-box;
65+
box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.5);
66+
font-size: 16px;
67+
font-family: 'Open Sans Condensed', sans-serif;
68+
font-weight: bold;
69+
color: rgba(5, 0, 0, 0.65);
70+
transition: .5s ease-in-out;
71+
}
72+
#tab1{ opacity: 1; }
73+
#tab2, #tab3 { opacity: 0; }
74+
.tab_1.active {
75+
background: #3D4258;
76+
transform: scale(1.1);
77+
box-shadow: 0px 5px 25px rgba(0, 0, 0, 85);
78+
}
79+
.tab_2.active {
80+
background: #3D4258;
81+
transform: scale(1.1);
82+
box-shadow: 0px 5px 25px rgba(0, 0, 0, 85);
83+
}
84+
.tab_3.active {
85+
background: #3D4258;
86+
transform: scale(1.1);
87+
box-shadow: 0px 5px 25px rgba(0, 0, 0, 85);
88+
}

‎JavaScript Tabs Styled 1/JavaScript Tabs Styled 1.html

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>page</title>
7+
<link rel="stylesheet" type="text/css" href="JavaScript Tabs Styled 1.css">
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
10+
</head>
11+
<body>
12+
13+
<div class="container">
14+
15+
<!-- title -->
16+
<h2>JavaScript Tabs</h2>
17+
18+
<div class="main_box">
19+
20+
<!-- top box -->
21+
<div id="tabs">
22+
<div class="tab tab_1">JavaScript</div>
23+
<div class="tab tab_2">Python</div>
24+
<div class="tab tab_3">CSS</div>
25+
</div>
26+
27+
<!-- bottom box -->
28+
<div id="text_box">
29+
<div class="text tab_1_text" id="tab1">
30+
JavaScript is one of the most popular and dynamic programming
31+
languages used for creating and developing websites. This
32+
language is capable of achieving several things including
33+
controlling the browser, editing content on a document that
34+
has been displayed, allowing client-side scripts to communicate
35+
with users and also asynchronous communication. It was developed
36+
by Netscape and borrows a lot of its syntax from C language.
37+
JavaScript is used very widely and effectively in creating desktop
38+
applications as well as for developing games.
39+
</div>
40+
<div class="text tab_2_text" id="tab2">
41+
Python is a highly used and all-purpose programming
42+
language which is dynamic in nature. Being dynamic
43+
in nature means that you as a developer can write and
44+
run the code without the need of a compiler. The design
45+
of the language is such that it supports code readability
46+
which means that its syntax is such that only a few lines
47+
of codes are needed to express a point or a concept. This
48+
concept of code readability is also possible in the case
49+
of Java and C++, etc. This is a high-level or advanced
50+
language that is considered easy for beginners to
51+
understand and learn.
52+
</div>
53+
<div class="text tab_3_text" id="tab3">
54+
CSS or Cascading Style Sheets is rather a markup language.
55+
When paired with HTML, CSS allow a developer to decide and
56+
define how a web page or a website will eventually look or
57+
how it will appear to the visitors of the web platform.
58+
Some of the elements which CSS has an impact on include
59+
font size, font style, the overall layout, the colors and
60+
other design elements. This is a markup language that can be
61+
applied to several types of documents including Plain XML
62+
documents, SVG documents as well as XUL documents. For most
63+
websites across the world, CSS is the platform to opt for if
64+
they need help to create visually attractive webpages and
65+
finds use not just in the creation of web applications but
66+
also mobile apps.
67+
</div>
68+
</div>
69+
</div>
70+
71+
</div>
72+
73+
74+
<script>
75+
76+
let tab1 = document.querySelector(".tab_1"),
77+
tab2 = document.querySelector(".tab_2"),
78+
tab3 = document.querySelector(".tab_3"),
79+
box1 = document.getElementById("tab1"),
80+
box2 = document.getElementById("tab2"),
81+
box3 = document.getElementById("tab3");
82+
83+
tab1.addEventListener("click", function () {
84+
box1.style.opacity = 1;
85+
box2.style.opacity = 0;
86+
box3.style.opacity = 0;
87+
tab1.classList.add("active");
88+
tab2.classList.remove("active");
89+
tab3.classList.remove("active");
90+
});
91+
92+
tab2.addEventListener("click", function () {
93+
box1.style.opacity = 0;
94+
box2.style.opacity = 1;
95+
box3.style.opacity = 0;
96+
tab1.classList.remove("active");
97+
tab2.classList.add("active");
98+
tab3.classList.remove("active");
99+
});
100+
101+
tab3.addEventListener("click", function () {
102+
box1.style.opacity = 0;
103+
box2.style.opacity = 0;
104+
box3.style.opacity = 1;
105+
tab1.classList.remove("active");
106+
tab2.classList.remove("active");
107+
tab3.classList.add("active");
108+
});
109+
110+
111+
</script>
112+
113+
</body>
114+
</html>

‎JavaScript Tabs Styled 1/JavaScript Tabs Styled 1.png

420 KB
Loading

0 commit comments

Comments
 (0)