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