html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="de">
<head>
<title>SkillZz standard buttons</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' type='text/css' media='screen' href="main.css">
<script src="main.js"></script>
</head>
<header>
<div class="navbar">
<!------------------- navbar is coming ----------------------------->
<!------------------- navbar is coming ----------------------------->
<!------------------- navbar is coming ----------------------------->
<h1> Simple color buttons</h1>
</div>
</header>
<body>
<div class="btn-mainflex">
<div class="btn-mainflexchild">
<button class="btn-01 btn-red btn-size" type="text">Button 01</button>
<button class="btn-01 btn-blue btn-size" type="text">Button 01</button>
<button class="btn-01 btn-green btn-size" type="text">Button 01</button>
<button class="btn-01 btn-yellow btn-size" type="text">Button 01</button>
<p id="buttontext">Beschreibung<br><br>-steht hier-</p>
</div>
<div class="btn-mainflexchild">
<button class="btn-02 btn-red btn-size" type="text">Button 02</button>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/*----------------------------------*/
/*---------- Sections Sections Sections -----------------*/
/* -------------------------------------------------------*/
html, body {
width: 100%;
height: 100vh;
background-color: rgb(148, 143, 138);
margin: 0;
}
header {
border-bottom: solid 10px rgb(161, 63, 63);
border-radius: 0 0 3rem 3rem;
padding: 1% 0 1% 0;
margin: 0 1% 0 1%;
font-size: 30px;
text-shadow: 10px 15px 25px rgb(255, 255, 255);
background-color: rgba(95, 91, 86, 0.541);
}
/*---------------------------------------------------------------/*
footer {
background-color: rgba(61, 56, 48, 0.63);
width: 80%;
bottom: 0;
position: fixed;
font-size: 18px;
padding: 1% 10% 0.5% 10%;
border-top: solid 6px rgb(116, 45, 45);
border-top-style: double;
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Uruchom