<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Instagram 2.0</title>
<style>
/* Navigation*/
[href] {
text-decoration: none;
color: black;
}
a:hover{
text-decoration: none;
color:var(--brown);
}
a:focus{
text-decoration: underline;
}
#navibereich {
display: flex;
flex-direction: row;
flex-wrap: wrap ;
text-decoration: none;
justify-content: flex-start;
background-color: var(--bright);
list-style-type: none;
margin-bottom: 3px;
}
#navi02{
margin-left:5%;
margin-right:5%;
}
/* ---------Schrift- und Hintergrundbearbeitung-------------*/
:root{
--bright: #e0c2a5;
--brown: #684536;
--background: #fffee9;
--cream: #f3ecc5;
}
@font-face {
font-family: Open Sans;
src: url(<link rel="preconnect" <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">);
}
div.label {
font-family: Open Sans;
font-size: 20px;
background-color:var(--bright);
padding: 15px;
}
p {
font-family: Open Sans;
font-size: 15px;
width:70vw;
}
label{
font-family: Open Sans;
font-size: 15px;
width:70vw;
}
p::selection{
color: white;
}
h1 {
font-family: Open Sans;
font-size: 40px;
width:70vw;
}
h2{
font-family: Open Sans;
font-size: 20px;
}
body {
background-color:var(--background);
}
/* -----------Feed bearbeitung----------*/
main {
background-color: var(--cream);
padding-top: 1%;
display: block;
text-align: center;
}
.Ann {
background-color: var(--background);
padding-top: 1%;
padding-bottom: 1%;
}
.TextAnn {
display: flex;
justify-content: center;
text-align: center;
background-color: var(--cream);
margin-top: 1%;
}
p.Ann{
color: var(--brown);
}
.KommentarAnn{
font-family: Open Sans;
font-size: 15px;
padding: 15px;
background-color:var(--cream);
margin-top:1%;
}
.Lena {
background-color: var(--background);
padding-top: 1% ;
padding-bottom: 2%;
}
.TextLena{
display: flex;
justify-content: center;
text-align: center;
background-color: var(--cream);
margin-top: 1%;
}
p.Lena{
color: var(--brown);
}
.KommentarLena{
font-family: Open Sans;
font-size: 15px;
padding: 15px;
background-color: var(--cream);
margin-top: 1%;
}
/*Profil*/
.Lukas{
background-color: var(--background);
padding-top: 1% ;
padding-bottom: 2%;
}
.Eingabe{
margin: 1%;
}
.field{
margin-bottom: 1%;
}
.Formelles{
text-align: match-parent;
}
/*------------*/
img {
padding-right: 1%;
}
.LukasBilder{
padding: 2%;
}
h3:hover {
transition: background-color 2s ;
background-color: var(--brown);
}
</style>
</head>
<body>
<header>
<div > <a href="instagram-clone_schlachter.html"> <h1>Gramml</h1> </a ></div>
</header>
<ul id="navibereich">
<li id="navi01"> <a href="profil.html"> <h2>Mein Profil </h2> </a> </li>
<li id="navi02"> <a href="instagram-clone_schlachter.html"> <h2>Entdecken</h2></a> </li>
<li id="navi01"> <a href="upload.html"><h2>Upload Picture</h2></a> </li>
</ul>
<div class="label">
<label>Suche:</label>
<input type="text"/>
</div>
<main>
<div class="Lukas">
<h2>Lukas_W3br</h2> <br>
<img
src="images/profilpic.jpg"
alt="Profil"
title="Profil"
height="150">
</div>
<div class="Eingabe" id="Eingabe">
<div class="field">
<input id="Vorname-input" type="text" name="name" placeholder="Vorname" />
</div>
<div class="field">
<input id="Nachname-input" type="text" name="name" placeholder="Nachname" />
</div>
<div class="field">
<input id="Geburtstag-input" type="date" name="Datum" placeholder="Geburtsdatum" />
</div>
<label>Über mich: <br> </label>
<textarea name="Über mich" id="ueber-mich" cols="40" rows="5" maxcols="35" placeholder="Über mich:" > </textarea>
</div>
<div class="Formelles">
<p> <input id="check" type="checkbox" name="AGB" value="News"> Datenschutzerklärung und AGB akzeptieren. </p>
</div>
<button id="enter-button" class=" button" type="submit">
Speichern
</button>
<div class="LukasBilder">
<img
src="images/hiking.webp"
alt="Wanderung"
title="Wanderung"
height="150">
<img
src="images/yellow_jacked.webp"
alt="Wanderung"
title="Wanderung"
width="250"
height="150">
<img
src="images/dog_human.jpg"
alt="Hund"
title="Hund"
width="250"
height="150">
</div>
</main>
<script>
const VornameInput = document.getElementById("Vorname-input");
const NachnameInput = document.getElementById("Nachname-input");
const GeburtstagInput = document.getElementById("Geburtstag-input");
const ueberMichInput = document.getElementById("ueber-mich");
const che= document.getElementById("check");
document.getElementById("enter-button").addEventListener("click",function(){
error='';
if(validierung(VornameInput.value, NachnameInput.value, GeburtstagInput.valueg,ueberMichInput.value)!=''){
alert(validierung(VornameInput.value, NachnameInput.value, GeburtstagInput.valueg,ueberMichInput.value));
}else{
alert('alle,daten richtig ausgefüllt');
}
})
function felderInKonsoleAusgeben () {
console.log("Vorname:", Vorname);
console.log("Nachname:", Nachname);
console.log("Geburtstag:", Geburtstag);
console.log("UeberMich:", ueberMich);
}
function validierung(Vorname, Nachname, Geburtstag,uervermich) {
if (Vorname=='') {
error+="\nBitte fülle dein Vorname ein! ";
}else{
}
if (Nachname=='') {
error+="\nBitte gebe dein Nachname ein ";
}else{
}
if (Geburtstag=='') {
error+="\nBitte gebe dein geburtstag ein! ";
}else{
}
if (uervermich=='') {
error+="\nBitte gebe was über dich an ";
}else{
if(uervermich.length<=3){
error+="\nGebe mindesatens 3 Zeichen ein";
}else{
}
}
if(check.checked==false){
error+="\nSie müssen die datenschutz checkbox noch anklicken";
}
return error;
}
</script>
</body>
</html>