Upload files to "/"
This commit is contained in:
commit
a6af7c6656
69
index.html
Normal file
69
index.html
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="sv">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="description" content="Kontaktkort - Amir Alsalakh"> <!-- Beskrivning av sidan för SEO -->
|
||||||
|
<title>Kontaktkort Amir Alsalakh</title> <!-- Titeln på sidan som visas i webbläsarfliken -->
|
||||||
|
<link rel="stylesheet" href="styleSheet.css"> <!-- Länkar till CSS-stilmallen -->
|
||||||
|
<script src="script.js" defer></script> <!-- Länkar till JavaScript-filen (defer säkerställer att scriptet laddas efter HTML) -->
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="banner">
|
||||||
|
<img src="../Images/MINIPROJEKT1/egyLogo.webp" alt="Logotyp" class="banner-logo"> <!-- Logotyp för banner -->
|
||||||
|
<h1 class="banner-title">Kontakt</h1> <!-- Huvudrubrik i bannern -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container"> <!-- Container för att hålla allt innehåll -->
|
||||||
|
<header class="header">
|
||||||
|
<img src="../Miniprojekt_2/images/amir.jpeg" alt="Amir Alsalakh foto" class="profile-photo"> <!-- Profilbild -->
|
||||||
|
<div class="header-text">
|
||||||
|
<h1>Amir Alsalakh</h1> <!-- Namn -->
|
||||||
|
<hr class="separator"> <!-- Horisontell linje för att separera namnet från övrig information -->
|
||||||
|
<p><strong>👨🏽🦱Elev:</strong> i Rönneberggymnasiet</p> <!-- Elevinformation -->
|
||||||
|
<p><strong>✉️Arbete:</strong> 07alam@skola.engelholm.se</p> <!-- Arbets-e-post -->
|
||||||
|
<p><strong>Privat:</strong> amiralsallakh@gmail.com</p> <!-- Privat-e-post -->
|
||||||
|
<p><strong>📞Telefon:</strong> +46 700 13 13 62</p> <!-- Telefonnummer -->
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="address-info"> <!-- Sektion för adressinformation -->
|
||||||
|
<div class="work-address"> <!-- Arbetsadress -->
|
||||||
|
<h2>Gymnasie</h2> <!-- Rubrik för arbetsadress -->
|
||||||
|
<p>Ängelholms Gymnasieskola</p> <!-- Namn på skolan -->
|
||||||
|
<p>Skolgatan 8, 262 43</p> <!-- Adress -->
|
||||||
|
<p>Ängelholm</p> <!-- Stad -->
|
||||||
|
<a href="https://www.google.com/maps?q=Ängelholms+Gymnasieskola"> <!-- Länk till Google Maps -->
|
||||||
|
<img src="images/googleMaps.jpeg" alt="Maps Logotyp" class="address-logo"> <!-- Logotyp för Google Maps -->
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="home-address"> <!-- Hemadress -->
|
||||||
|
<h2>Hem</h2> <!-- Rubrik för hemadress -->
|
||||||
|
<p>Spovgränd</p> <!-- Gatuadress -->
|
||||||
|
<p>23</p> <!-- Husnummer -->
|
||||||
|
<p>Ängelholm</p> <!-- Stad -->
|
||||||
|
<a href="https://www.google.com/maps?q=Spovgränd+23"> <!-- Länk till Google Maps -->
|
||||||
|
<img src="images/googleMaps.jpeg" alt="Maps Logotyp" class="address-logo"> <!-- Logotyp för Google Maps -->
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="footer"> <!-- Fotdel av sidan -->
|
||||||
|
<div class="left-icon"> <!-- Vänstra delen med logotyp -->
|
||||||
|
<img src="../Images/MINIPROJEKT1/egyLogo.webp" alt="Footer Logotyp" class="logo"> <!-- Logotyp -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="tel:+46700131362" class="icon phone center-icon" aria-label="Ring Amir">📞</a> <!-- Telefonlänk -->
|
||||||
|
|
||||||
|
<div class="right-icons"> <!-- Höger del av footern med kontaktikoner -->
|
||||||
|
<a href="sms:+46700131362" class="icon sms" aria-label="SMS till Amir">💬</a> <!-- SMS-länk -->
|
||||||
|
<a href="mailto:amiralsallakh@gmail.com" class="icon email" aria-label="E-posta Amir">✉️</a> <!-- E-postlänk -->
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
21
script.js
Normal file
21
script.js
Normal file
@ -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);
|
||||||
211
styleSheet.css
Normal file
211
styleSheet.css
Normal file
@ -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 */
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user