Kontaktkort Amir Alsalakh

commit a6af7c665672ec3600b3730f80e30fb733144545 Author: Amiralsallakh Date: Tue Oct 8 18:11:20 2024 +0000 Upload files to "/" diff --git a/index.html b/index.html new file mode 100644 index 0000000..59ba6e1 --- /dev/null +++ b/index.html @@ -0,0 +1,69 @@ + + + + + + + + + Kontaktkort Amir Alsalakh + + + + + + + +

+ + +

Gymnasie

Ängelholms Gymnasieskola

Skolgatan 8, 262 43

Ängelholm

+ +

Hem

Spovgränd

Ängelholm

+ +

+ + +

+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..ff4f5cb --- /dev/null +++ b/script.js @@ -0,0 +1,21 @@ +function adjustLayout() { + const headerText = document.querySelector('.header-text'); + const separator = document.querySelector('.separator'); + + if (window.innerWidth <= 768) { // För mobiler + headerText.style.fontSize = '1.2rem'; // Minska textstorleken + separator.style.borderTop = '1px solid #4A90E2'; // Justera separator + } else if (window.innerWidth <= 1024) { // För surfplattor + headerText.style.fontSize = '1.4rem'; // Medium textstorlek + separator.style.borderTop = '1px solid #4A90E2'; // Justera separator + } else { // För stationära datorer + headerText.style.fontSize = '1.6rem'; // Standard textstorlek + separator.style.borderTop = '1px solid #4A90E2'; // Standard separator + } +} + +// Anropa funktionen vid fönstrets storlekändring +window.addEventListener('resize', adjustLayout); + +// Anropa funktionen vid sidladdning +window.addEventListener('load', adjustLayout); diff --git a/styleSheet.css b/styleSheet.css new file mode 100644 index 0000000..69be5b1 --- /dev/null +++ b/styleSheet.css @@ -0,0 +1,211 @@ +/* Global reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Arial', sans-serif; + background-color: #f0f0f0; + color: #333; +} + +/* Banner styling */ +.banner { + position: fixed; + top: 0; + left: 0; + width: 100%; + background-color: #000; + display: flex; + align-items: center; + padding: 10px; + z-index: 1000; +} + +/* Logotyp styling */ +.banner-logo { + width: 50px; + height: 50px; + object-fit: cover; + margin-right: 20px; /* Avstånd mellan logotyp och titel */ +} + +/* Titel i bannern */ +.banner-title { + color: white; + flex-grow: 1; /* Gör så att titeln kan växa och centrera sig */ + text-align: center; /* Centrera texten */ +} + +/* Container styling */ +.container { + background-color: #fff; + width: 100%; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: flex-start; + position: relative; + margin: 80px 0 0 0; + padding-top: 20px; +} + +/* Header styling */ +.header { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + background-color: #fff; + color: #333; + padding: 10px; +} + +.profile-photo { + border-radius: 10px; + width: 80px; + height: 80px; + object-fit: cover; + margin-right: 10px; +} + +.header-text { + text-align: left; +} + +.header-text h1 { + font-size: 1.4rem; + margin-bottom: 5px; +} + +/* Separator styling */ +.separator { + border-top: 1px solid #4A90E2; /* Lägger till separator */ + margin: 10px 0; /* Avstånd ovan och under */ +} + +/* Address section */ +.address-info { + display: flex; /* Lägg adresserna bredvid varandra */ + justify-content: space-between; /* Jämnt utrymme mellan dem */ + padding: 15px 10px; + background-color: #fff; + color: #333; +} + +.address-info div { + width: 48%; /* Gör så att båda adresserna får lika mycket utrymme */ + background-color: #f5f5f5; + padding: 10px; + border-radius: 5px; + text-align: left; +} + +/* Styling för gymnasieadressen */ +.work-address h2 { + background-color: #4A90E2; /* Blå bakgrundsfärg för Gymnasie */ + color: #fff; + padding: 5px; + border-radius: 3px; +} + +/* Styling för hemadressen */ +.home-address h2 { + background-color: #2ecc71; /* Grön bakgrundsfärg för Hem */ + color: #fff; + padding: 5px; + border-radius: 3px; +} + +.work-address a, +.home-address a { + text-decoration: none; + color: #4A90E2; + font-size: 0.8rem; + display: block; + margin-top: 5px; +} + +/* Logotyp för adresser */ +.address-logo { + width: 25px; + height: 25px; + margin-top: 5px; + vertical-align: middle; +} + +/* Footer */ +.footer { + display: flex; + align-items: center; /* Centra elementen vertikalt */ + background-color: #333; + padding: 10px; + position: fixed; + width: 100%; + bottom: 0; + left: 0; +} + +/* Logotyp och vänster sektion */ +.footer .left-icon { + display: flex; + align-items: center; +} + +/* Höger sektion för SMS och mejl */ +.footer .right-icons { + display: flex; + gap: 10px; + align-items: center; +} + +/* Center ikon för samtal */ +.footer .center-icon { + margin: 0 auto; /* Centra denna ikon i mitten */ +} + +.icon { + color: white; + font-size: 24px; + text-decoration: none; + padding: 5px; + background-color: #4A90E2; + border-radius: 50%; +} + +.icon:hover { + color: #00ff00; +} + +/* Media Queries for responsive design */ +@media (max-width: 768px) { + .header { + flex-direction: column; + text-align: center; + } + + .profile-photo { + margin: 0 0 20px 0; + width: 60px; /* Minska storleken på profilbilden */ + height: 60px; + } + + .header-text h1 { + font-size: 1.2rem; /* Justera h1 storlek */ + } + + .separator { + display: none; /* Ta bort separatorn på små skärmar */ + } +} + +@media (min-width: 769px) and (max-width: 1024px) { + .header { + flex-direction: row; + justify-content: space-between; /* Justera layouten för surfplattor */ + } +} \ No newline at end of file