diff --git a/assets/img/form.svg b/assets/img/form.svg new file mode 100644 index 0000000..3c0795c --- /dev/null +++ b/assets/img/form.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + diff --git a/assets/img/mobile.png b/assets/img/mobile.png new file mode 100644 index 0000000..4d32f86 Binary files /dev/null and b/assets/img/mobile.png differ diff --git a/class.css b/class.css index 09267f6..a0e616d 100644 --- a/class.css +++ b/class.css @@ -191,7 +191,7 @@ } .btn-contact, -.btn-whatsapp { +.btn-phone { display: inline-flex; align-items: center; gap: 0.5rem; @@ -202,32 +202,21 @@ transition: background-color 0.3s ease; color: white; background-repeat: no-repeat; + background-position-y: 4px; + background-size: 44px 44px; + padding: 0.8rem 1rem 0.8rem 3rem; + background-color: #b00f2e; +} + +.btn-phone { + background-image: url('assets/img/mobile.png'); } .btn-contact { - background-position-y: 4px; - background-size: 44px 44px; - padding: 0.8rem 1rem 0.8rem 3rem; - background-color: #b00f2e; background-image: url('assets/img/form.svg'); } +.btn-phone:hover, .btn-contact:hover { background-color: #d1776b; -} - -.btn-whatsapp { - background-size: 48px 48px; - padding: 0.7rem 1rem 0.7rem 3rem; - background-color: #25d366; - background-image: url('assets/img/whatsapp.svg'); -} - -.btn-whatsapp:hover { - background-color: #1ebe5d; -} - -.btn-contact svg, -.btn-whatsapp svg { - vertical-align: middle; } \ No newline at end of file diff --git a/index.html b/index.html index dc2eb07..69476e6 100644 --- a/index.html +++ b/index.html @@ -161,10 +161,8 @@
- - Contact - - 0650128904 + Contact + 0650128904