soragui/csslearn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

Compare commits

base: soragui:CSS-02
Branches Tags
soragui:master
soragui:CSS-02
soragui:0.0.1
...
compare: soragui:master
Branches Tags
soragui:master
soragui:CSS-02
soragui:0.0.1

2 Commits
CSS-02 ... master

Author SHA1 Message Date
soragui
50a8d5417b add git logo 2023-01-12 23:01:36 +08:00
soragui
2d0cbc8368 update style 2023-01-11 20:51:54 +08:00
2 changed files with 70 additions and 1 deletions
Show Stats Expand all files Collapse all files

6
index.html
View File

@ -13,6 +13,12 @@
</head> </head>
<body> <body>
<div class="git-logo">
<div class="line1"></div>
<div class="line2"></div>
</div>
<div class="container"> <div class="container">
<ul> <ul>
<li><a class="slidinglink" href="#">Sliding Link</a></li> <li><a class="slidinglink" href="#">Sliding Link</a></li>

65
styles/style.css
View File

@ -11,6 +11,69 @@ a {
font-weight: 700; font-weight: 700;
} }
/* git logo */
.git-logo {
height: 150px;
width: 150px;
background-color: #f06033;
border-radius: 15px;
position: relative;
transform: rotate(45deg);
}
.line1 {
width: 110px;
background-color: white;
height: 10px;
top: 40px;
position: absolute;
}
.line1::before {
content: "";
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: white;
top: -8px;
left: 30px;
}
.line1::after {
content: "";
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: white;
top: -8px;
left: 90px;
}
.line2 {
width: 90px;
background-color: white;
height: 12px;
top: 70px;
left: 30px;
position: absolute;
transform: rotate(45deg);
}
.line2::after {
content: "";
width: 30px;
background-color: white;
height: 30px;
border-radius: 50%;
top: -8px;
left: 70px;
position: absolute;
transform: rotate(45deg);
}
/* sliding effect */ /* sliding effect */
.slidinglink { .slidinglink {
line-height: 1.5; line-height: 1.5;
@ -121,7 +184,7 @@ a {
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
} }
.colorswapping:before { .colorswapping::before {
content: ''; content: '';
background: #54b3d6; background: #54b3d6;
display: block; display: block;