-
Notifications
You must be signed in to change notification settings - Fork 0
/
nabil.css
61 lines (39 loc) · 2.91 KB
/
nabil.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
*{margin: 0;
padding: 0;}
body{ margin: 0px; padding: 0px; background: linear-gradient(to right, #314755, #26a0da); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
header{margin: 0px; padding: 0px; position: fixed;right: 0.30px; width: 99%; height: 60px; background-image: linear-gradient(to right ,orange,red);border: rgb(0, 0, 0) solid;z-index: 1; ;}
h1{ font-family: Verdana, Geneva, Tahoma, sans-serif; text-align: center;
background-image: linear-gradient(to left , rgb(62, 175, 62) , white); width: 30%; height: 60px;position: fixed; left: 35%; top: 23px; font-size: 50px;
clip-path: polygon(8% 0, 100% 0%, 93% 100%, 0% 100%);
}
#imga{margin: 2px; border-radius: 50px; border: black double 3px; position: relative; left: 20px; width: 50px;height: 50px;
}
#imgc{width: 47%; height: 500px ; position:absolute;top: 140px; left: 10px; border: black 3px solid; border-radius: 20px; z-index: 0.5; }
#imgb{width:50px;height: 50px;margin: 2px;float: right ; position: relative;bottom: 0px; right: 20px;
border: black double 3px; border-radius: 50px; background-color: white;}
aside{background-color: rgb(3, 3, 3); width: 40px;height: 700px;position: fixed;right: 0%; top: 85px; opacity: 0.3;}
aside:hover{opacity: 1; width: 500px; transition-duration: 2s; position: absolute;z-index: 1;}
main{width: 80%; height: 100%;}
.lola{position: relative;left: 60%;top: 80px; width: 50%;height: 40px;margin: 20px; border-radius: 30px;
opacity: 0.6; font-family: Georgia, 'Times New Roman', Times, serif;font-size: 30px;text-align: center; }
h2{font-size: 20px;}
.lola:hover{opacity: 1;}
button{background-color: burlywood; position: relative;left: 70%;top: 80px; width: 15%;height: 40px; border-radius: 230px;opacity: 0.8;
font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 15px; margin: 20px;}
button:hover{opacity: 1; background-color: green; width: 20%; margin: 0px; left: 70%;}
article{background-color: rgb(219, 215, 215);width: 450px;height: 40px; margin: 60px;position: relative; right: 10px;
border-radius: 10px 0px 0px 40px;
box-shadow: rgb(0, 0, 0) 10px 10px 5px grey; opacity: 0.8;}
article:hover{opacity: 1; background-color: sandybrown;}
a{font-family: Georgia, 'Times New Roman', Times, serif;text-align: center;font-size: 25px;color: black;}
@media only screen and (min-width:250px) and (max-width:720px){
#imgc{height: 240px; width: 52%; position: absolute; bottom: 10px;} h1{font-size: 25px; position: absolute;top: 0px;}
#imga{width:45px ; height: 45px; }
#imgb{width: 45px; height:45px ; position: absolute;top: 0px;}
aside{width: 15px;}
.lola{margin: 5px; left: 70%; font-size: 10px;}
button{width: 22%; height: 35px; border-radius: 10px; margin: 5px; font-size: 10px;}
}
#koki a{color: blanchedalmond; }
#koki {background-color: black; text-align: center; color: blanchedalmond; width: 20%; height: 200px;position: absolute; z-index: 1;}