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

add git logo

Browse Source
This commit is contained in:
soragui 2023-01-12 23:01:36 +08:00
parent 2d0cbc8368
commit 50a8d5417b
2 changed files with 69 additions and 0 deletions
Show Stats Download Patch File Download Diff File 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>

63
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;