Skip to content
GitLab
Commit 5aee0de9 authored by Shadow Chrome's avatar Shadow Chrome
Browse files

Einsendeaufgabe 1 committed

parent 9596d81f
Hide whitespace changes
Inline Side-by-side
.idea/$PRODUCT_WORKSPACE_FILE$ 0 → 100644
View file @ 5aee0de9
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="masterDetails">
<states>
<state key="ProjectJDKs.UI">
<settings>
<last-edited>1.8</last-edited>
<splitter-proportions>
<option name="proportions">
<list>
<option value="0.2" />
</list>
</option>
</splitter-proportions>
</settings>
</state>
</states>
</component>
</project>
\ No newline at end of file
.idea/.gitignore 0 → 100644
View file @ 5aee0de9
# Default ignored files
/workspace.xml
\ No newline at end of file
.idea/internettechnologie-ea.iml 0 → 100644
View file @ 5aee0de9
<?xml version="1.0" encoding="UTF-8"?>
<module type="JAVA_MODULE" version="4">
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
\ No newline at end of file
.idea/misc.xml 0 → 100644
View file @ 5aee0de9
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptSettings">
<option name="languageLevel" value="ES6" />
</component>
</project>
\ No newline at end of file
.idea/modules.xml 0 → 100644
View file @ 5aee0de9
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/internettechnologie-ea.iml" filepath="$PROJECT_DIR$/.idea/internettechnologie-ea.iml" />
</modules>
</component>
</project>
\ No newline at end of file
.idea/vcs.xml 0 → 100644
View file @ 5aee0de9
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>
\ No newline at end of file
css/style.css 0 → 100644
View file @ 5aee0de9
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
body {
margin: 0;
font-family: 'Roboto', sans-serif;
}
.content {
background-image: url("../images/background-image.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.menu {
width: 80%;
margin: 0 auto;
}
.header-text,
.home-header-text {
color: #fff;
float: left;
padding: 10px 0;
}
/*Header*/
header {
background: rgb(52, 80, 162);
color: #fff;
}
header::after {
content: '';
display: table;
clear: both;
}
/*Navigation*/
nav {
float: right;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: #fff;
text-transform: uppercase;
margin: 0 10px;
font-size: 16px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
nav.shift ul li a {
position: relative;
z-index: 1;
}
nav.shift ul li a:hover {
color: rgb(52, 80, 162);
}
nav.shift ul li a:after {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 100%;
height: 1px;
content: '.';
color: transparent;
background: #fff;
visibility: none;
opacity: 0;
z-index: -1;
}
nav.shift ul li a:hover:after {
opacity: 1;
visibility: visible;
height: 100%;
}
/*Steckbrief*/
.wrapper {
display: flex;
padding: 48px;
}
.wrapper .left {
width: 35%;
background: rgb(105,105,105);
padding: 30px 25px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
text-align: center;
color: #fff;
}
.wrapper .left img {
border-radius: 5px;
margin-bottom: 10px;
}
.wrapper .left h4 {
margin-bottom: 10px;
}
.wrapper .left p {
font-size: 12px;
}
.wrapper .right {
width: 65%;
background: #fff;
padding: 30px 25px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.wrapper .right .info,
.wrapper .right .projects {
margin-bottom: 25px;
}
.wrapper .right .info h3,
.wrapper .right .projects h3 {
margin-bottom: 15px;
padding-bottom: 5px;
border-bottom: 1px solid #e0e0e0;
color: #353c4e;
text-transform: uppercase;
letter-spacing: 5px;
}
.wrapper .right .info_data,
.wrapper .right .projects_data {
display: flex;
justify-content: space-between;
}
.wrapper .right .info_data .data,
.wrapper .right .projects_data .data {
width: 45%;
}
.wrapper .right .info_data .data h4,
.wrapper .right .projects_data .data h4 {
color: #353c4e;
margin-bottom: 5px;
}
.wrapper .right .info_data .data p,
.wrapper .right .projects_data .data p {
font-size: 13px;
margin-bottom: 10px;
color: #919aa3;
}
label,
textarea {
font-size: .8rem;
letter-spacing: 1px;
}
textarea {
padding: 10px;
max-width: 100%;
line-height: 1.5;
border-radius: 5px;
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #999;
}
label {
display: block;
margin-bottom: 10px;
}
\ No newline at end of file
index.html 0 → 100644
View file @ 5aee0de9
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8"/>
<title>Internettechnologie - Client - Server Einsendeaufgabe von Marcel Koschau</title>
<meta name="description" content="Internettechnologie - Client - Server Einsendeaufgabe von Marcel Koschau"/>
<meta name="author" content="Marcel Koschau"/>
<link rel="stylesheet" href="./css/style.css"/>
</head>
<body>
<header>
<div class="menu">
<h1 class="header-text">Fuyumi 'Shiro' Bigfoot von Pleissengrund</h1>
<nav class="shift">
<ul>
<li><a href="#facts">Fakten</a></li>
<li><a href="#comment">Gästebuch</a></li>
<li><a href="#about">Über</a></li>
</ul>
</nav>
</div>
</header>
<div class="content">
<div id="facts">
<div class="wrapper">
<div class="left">
<img src="images/shiro_fakten.jpg" alt="user" width="100">
<h4>Fuyumi 'Shiro' Bigfoot von Pleissengrund</h4>
<p>Samojede</p>
</div>
<div class="right">
<div class="info">
<h3>Fakten</h3>
<div class="info_data">
<div class="data">
<h4>Geburtsdatum</h4>
<p>01.11.16</p>
</div>
<div class="data">
<h4>Wohnort</h4>
<p>Berlin</p>
</div>
</div>
</div>
<div class="projects">
<h3>Weiteres</h3>
<div class="projects_data">
<div class="data">
<h4>Geschlecht</h4>
<p>weiblich</p>
</div>
<div class="data">
<h4>Gewicht</h4>
<p>31kg</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="comment">
<div class="wrapper">
<div class="left">
<img src="images/gästebuch.jpg" alt="user" width="100">
<h4>Gästebuch</h4>
</div>
<div class="right">
<div class="info">
<h3>Kommentare</h3>
<div style="display: flex">
<div style="margin: 12px">
<label for="comment1">Kommentar von Max Mustermann:</label>
<textarea id="comment1" name="comment1"
rows="5" cols="33">
So ein schöner Hund!
</textarea>
</div>
<div style="margin: 12px">
<label for="comment2">Kommentar von Julia Müller:</label>
<textarea id="comment2" name="comment2"
rows="5" cols="33">
Das Fell muss bestimmt jeden Tag gepflegt werden...
</textarea>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="about"></div>
</div>
<script src="./js/main.js"></script>
</body>
</html>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment