Laboratory 3




Index.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
        <head>
                <link rel="stylesheet" type="text/css" href="styles.css">
                </head>
<body>
   <a class="zad1" href="https://onet.pl">GRADIENT</a>
<nav id="primary_nav_wrap">
<ul>
  <li class="current-menu-item"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a>
  </li>
  <li><a href="#">Menu 2</a>
  </li>
  <li><a href="#">Menu 3</a>
    <ul>
      <li class="dir"><a href="#">Sub Menu 1</a></li>
      <li class="dir"><a href="#">Sub Menu 2</a>
        <ul>
          <li><a href="#">Category 1</a></li>
          <li><a href="#">Category 2</a></li>
          <li><a href="#">Category 3</a></li>
          <li><a href="#">Category 4</a></li>
          <li><a href="https://onet.pl">Category 5</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>
</ul>
</nav>
<br>
<br>
<br>
<br>
<br>
<br>
        <form>
  <span>Imie i Nazwisko: </span> <input type="text" name="firstname"><br>
  <span>Plec:  </span>
  <input type="radio" name="gender" value="male"> Mezczyzna
  <input type="radio" name="gender" value="female"> Kobieta<br>
  
  <span>Rodzaj konta:  </span>
  <select name="cars">
  <option value="volvo">bezplatne</option>
  <option value="saab">platne</option>
	</select> <br><br>
	
	<span>O mnie:  </span>
	<textarea rows="4" cols="50"></textarea>
	<br>
	<input type="submit" value="dalej..">

</form>          
                
</body>
</html>




Styles.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
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
body{
	background-color:#4dff4d;
}
nav{
    margin-top: 3px;
    margin-bottom: 3px;
}
footer { 
    text-align: center;
    background: yellow; 
    width:100%; 
    height: 20px; 
    clear: both; 
}

.zad1{
    background-color: #f44336;
	height:50px;
    color: white;
    padding: 14px 25px;
    text-align: center; 
    text-decoration: none;
	line-height:50px;
    display: inline-block;
	margin:5px;
	-webkit-box-shadow: 0px 4px 5px 1px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 4px 5px 1px rgba(0,0,0,0.75);
	box-shadow: 0px 4px 5px 1px rgba(0,0,0,0.75);
	border-radius: 25px;
}
.zad1:visited {
    background-color: green;
	height:50px;
    color: white;
    padding: 14px 25px;
    text-align: center; 
    text-decoration: none;
	line-height:50px;
    display: inline-block;
	margin:5px;
	-webkit-box-shadow: 0px 4px 5px 1px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 4px 5px 1px rgba(0,0,0,0.75);
	box-shadow: 0px 4px 5px 1px rgba(0,0,0,0.75);
	border-radius: 25px;
}

.zad1:hover {
    background-color: green;
}

#primary_nav_wrap
{
	margin-top:15px
}

#primary_nav_wrap ul
{
	list-style:none;
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#primary_nav_wrap ul a
{
	display:block;
	color:#333;
	text-decoration:none;
	font-weight:700;
	font-size:12px;
	line-height:32px;
	padding:0 15px;
	font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

#primary_nav_wrap ul li
{
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
	background:#ddd
}

#primary_nav_wrap ul li:hover
{
	background:#f6f6f6
}

#primary_nav_wrap ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	padding:0
}

#primary_nav_wrap ul ul li
{
	float:none;
	width:140px
}

#primary_nav_wrap ul ul a
{
	line-height:120%;
	padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
	top:0;
	left:100%
}

#primary_nav_wrap ul li:hover > ul
{
	display:block
}
form{
 font-size:25px;
}
input{
	background-color:orange;
}
select{
	background-color:#ffffcc;
}
textarea{
	background-color:#ffffcc;
}
 span{
	display:block;
	float:left;
	width:200px;
}




TOP50 Gry