diff --git a/Art/annenuno-HeaderDesign/index.html b/Art/annenuno-HeaderDesign/index.html new file mode 100644 index 000000000..ff21e3ba7 --- /dev/null +++ b/Art/annenuno-HeaderDesign/index.html @@ -0,0 +1,26 @@ + + + + + + + Halloween Hacktoberfest + + + + +
+

Happy Hacktoberfest!

+

I made this minimalistic yet sophisticated button

+ + Check my GitHub! + + + + + + +
+ + + \ No newline at end of file diff --git a/Art/annenuno-HeaderDesign/meta.json b/Art/annenuno-HeaderDesign/meta.json new file mode 100644 index 000000000..f77e4f40b --- /dev/null +++ b/Art/annenuno-HeaderDesign/meta.json @@ -0,0 +1,4 @@ +{ + "artName": "HeaderDesign", + "githubHandle": "annenuno" +} \ No newline at end of file diff --git a/Art/annenuno-HeaderDesign/styles.css b/Art/annenuno-HeaderDesign/styles.css new file mode 100644 index 000000000..221fc852d --- /dev/null +++ b/Art/annenuno-HeaderDesign/styles.css @@ -0,0 +1,87 @@ +.container { + position: relative; + height: auto; + max-width: 790px; + padding-right: 0px; + margin-top: auto; + margin-bottom: auto; + padding-top: 200px; +} +.w-container { + margin-left: auto; + margin-right: auto; +} +.font-class { + font-family: "Ubuntu", sans-serif; + font-weight: 700; + letter-spacing: 0.05em; + color: #234567; +} +p { + font-family: "Ubuntu", sans-serif; + /* padding-top: 10px; */ + padding-bottom: 50px; +} +.cta { + position: relative; + margin: auto; + /* margin: 20px 20px; */ + padding: 12px 18px; + padding-top: 15px; + transition: all 0.2s ease; + border: none; + background: none; + cursor: pointer; + text-decoration-line: none; + /* margin-top: 10px; */ + /* display: flex; */ + /* width: fit; */ + } + + .cta:before { + content: ""; + position: absolute; + top: 0; + left: 0; + display: block; + border-radius: 50px; + background: #b1dae7; + width: 45px; + height: 45px; + transition: all 0.3s ease; + } + + .cta span { + position: relative; + font-family: "Ubuntu", sans-serif; + font-size: 18px; + font-weight: 700; + letter-spacing: 0.05em; + color: #234567; + } + + .cta svg { + position: relative; + top: 0; + margin-left: 10px; + fill: none; + stroke-linecap: round; + stroke-linejoin: round; + stroke: #234567; + stroke-width: 2; + transform: translateX(-5px); + transition: all 0.3s ease; + } + + .cta:hover:before { + width: 100%; + background: #b1dae7; + } + + .cta:hover svg { + transform: translateX(0); + } + + .cta:active { + transform: scale(0.95); + } \ No newline at end of file