Skip to content

Commit d96031e

Browse files
author
DaniloJovanovicGIT
committed
Dovršavanje iygleda sajta
1 parent 0672f0a commit d96031e

File tree

3 files changed

+110
-42
lines changed

3 files changed

+110
-42
lines changed

‎index.php

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,16 @@
1010
<body>
1111
<div class="form">
1212
<ul class="tab-group">
13-
<li class="tab"><a href="#signup">Prijavi se</a></li>
14-
<li class="tab active"><a href="#login">Uloguj se</a></li>
13+
<li class="tab"><a href="#signup">Registruj se</a></li>
14+
<li class="tab active"><a href="#login">Pronađi avanture</a></li>
1515
</ul>
1616
<p>Zdravo dobrodosili na sajt Avanture.rs, ovde mozete objaviti vase planove za odlazak na planinu, jezero, reku ili more</p>
1717
</br>
1818
<p>Ukoliko zelite da idete sa vecim drustvom i upoznate nove avantursite pogledajte vec aktivne polaske na avanture</p>
1919
</br>
2020
<div class="tab-content">
2121
<div id="login">
22-
<h1>Dobrodošli</h1>
22+
<h1>Dobrodošli, avanture vas čekaju!</h1>
2323
<form action="index.php" method="post" autocomplete="off">
2424
<div class="field-wrap">
2525
<label>Email adresa<span class="req">*</span>
@@ -32,7 +32,7 @@
3232
</label>
3333
<input type="password" required autocomplete="off" name="password">
3434
</div>
35-
<button class="button button-block" name="login">Prijavi se</button>
35+
<button class="button-28" name="login">Prijavi se</button>
3636
</form>
3737
<div id="signup">
3838
<h1>Registruj se za 5 sekundi.</h1>
@@ -60,7 +60,7 @@
6060
</label>
6161
<input type="password" required autocomplete="off" name="password">
6262
</div>
63-
<button type="submit" class="button button-block" name="register">Registruj se</button>
63+
<button type="submit" class="button-28" name="register">Registruj se</button>
6464
</form>
6565
</div>
6666
</div>

‎raph_lanok.zip

8.32 MB
Binary file not shown.

‎style.css

Lines changed: 105 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,7 @@ background-size: cover;
1616

1717
}
1818

19-
a{
20-
text-decoration: none;
21-
color: aquamarine;
22-
-webkit-transition: .5s ease;
23-
transition: .5s ease;
24-
}
25-
a:hover {
26-
color:cadetblue;
27-
}
19+
2820
.form {
2921
background: rgba(172, 107, 83, 0.4);
3022
padding: 40px;
@@ -57,59 +49,135 @@ border-radius: 15px;
5749
display: block;
5850
text-decoration: none;
5951
padding: 15px;
60-
background: rgba(224, 250, 227, 0.87);
61-
color: rgb(5, 53, 5);
52+
background: rgba(224, 250, 227, 0.4);
53+
color: rgb(6, 22, 6);
6254
font-size: 25px;
6355
float: left;
6456
width: 50%;
6557
text-align: center;
6658
cursor: pointer;
67-
-webkit-transition: .5s ease;
68-
transition: .5s ease;
59+
6960
}
7061
.tab-group li a:hover{
7162

72-
background: rgba(221, 144, 97, 0.9);
73-
color: rgb(45, 255, 175);
63+
background: rgba(224, 250, 227, 0.9);
64+
color: rgb(6, 22, 6);
65+
}
66+
p{
67+
font-size: large;
68+
color: black;
69+
font-family: Verdana, Geneva, Tahoma, sans-serif;
7470
}
75-
7671
.tab-froup .active a{
7772
background: sandybrown;
7873
color: seashell;
7974

8075
}
81-
.tab-content > div:last-child{
82-
display: none;
83-
}
76+
8477

8578
h1{
8679
text-align: center;
87-
color: rgba(224, 250, 227, 0.87);
80+
color: rgb(224, 250, 227);
8881
font-weight: 300;
8982
margin: 0 0 40px;
9083
font-family: Verdana, Geneva, Tahoma, sans-serif;
84+
text-shadow: 2px 2px black;
9185
}
9286

93-
div.info {
94-
color:pink;
95-
display:box;
96-
text-align:center;
97-
padding: 5px;
98-
margin-top:-20px;
99-
margin-bottom: 15px;
100-
border: 1px solid red;
101-
background: coral;
102-
}
87+
10388

10489
label {
10590
position: absolute;
106-
-webkit-transform: translateY(6px);
107-
transform: translateY(6px);
91+
bottom:40px;
10892
left:13px;
109-
color: rgba(255,255,255,0.5);
110-
-webkit-transition: all 0.25s ease;
111-
transition: all 0.25s ease;
112-
-webkit-backface-visibility: hidden;
113-
pointer-events: none;
93+
color: rgb(255, 255, 255);
94+
95+
96+
}
97+
98+
label .req{
99+
margin: 2px;
100+
color:rgb(15, 167, 159);
101+
}
102+
label .active{
103+
-webkit-transform: translateY(50px);
104+
transform: translateY(50px);
105+
left:2px;
106+
color: rgba(255,255,255,0);
107+
}
108+
109+
label.active .req {
110+
opacity: 1;
111+
}
112+
113+
label.highlight{
114+
color: aquamarine;
115+
}
116+
input, textarea{
117+
font-size: 22px;
118+
display: block;
119+
width: 100%;
120+
height: 6%;
121+
padding: 5px 10px;
122+
background: none;
123+
border:3px solid #a0a0a0;
124+
}
125+
input:focus, textarea:focus{
126+
outline: 0;
127+
border-color:aquamarine;
128+
background-color: rgba(255,255,255,0.2);
129+
}
130+
textarea{
131+
border: 2px solid #ffffff;
132+
resize: vertical;
133+
}
134+
135+
.field-wrap{
136+
position: relative;
137+
margin-bottom: 45px;
138+
}
139+
140+
141+
.button-28 {
142+
appearance: none;
143+
background-color: transparent;
144+
border: 2px solid #1A1A1A;
145+
border-radius: 15px;
146+
box-sizing: border-box;
147+
color: #3B3B3B;
148+
cursor: pointer;
149+
display: inline-block;
150+
font-family: Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
151+
font-size: 16px;
152+
font-weight: 600;
153+
line-height: normal;
154+
margin: 0;
155+
min-height: 60px;
156+
min-width: 0;
157+
outline: none;
158+
padding: 16px 24px;
159+
text-align: center;
160+
text-decoration: none;
161+
transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
162+
user-select: none;
163+
-webkit-user-select: none;
164+
touch-action: manipulation;
165+
width: 100%;
166+
will-change: transform;
167+
}
168+
169+
.button-28:disabled {
170+
pointer-events: none;
171+
}
172+
173+
.button-28:hover {
174+
color: #fff;
175+
background-color: #1A1A1A;
176+
box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
177+
transform: translateY(-2px);
178+
}
114179

180+
.button-28:active {
181+
box-shadow: none;
182+
transform: translateY(0);
115183
}

0 commit comments

Comments
 (0)