css-site

html – CSS: Übungsseite

 

index.html

<!DOCTYPE html>

<html>
   
    <head>
        <title>CSS Website</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css" />
       
        
        <style>
        @import "custom.css"
        </style>
    </head>
    
<body>

	<div id="wrapper">
	
            <div id="header">
            Max Weyermann
            </div>
            
            <div id="nav">
                <p>
                <a href="index.html">Home</a><br>
                <a href="bio.html">Über mich</a><br>
            </div>
            
            <div id="content">
            
            <p>
            <h3>Willkommen ....</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor 
            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
            et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est 
            Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
            sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
            voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
            no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    				
            </div>
            
            <div id="footer">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr
            </div>

	</div>
	
</body>
</html>

 

style.css

/*-----KOMMENTAR ANFANG -----------------

Tatsturbelegung für geschweifte Klammer: { }
MAC: Geschwungene Klammer Mac: Alt + 8 bzw. Alt + 9
PC: [ALT GR]7 bzw. [ALT GR]0

------ KOMMENTAR ENDE */


	
body {
    background-color: gray;
    font-size:20px;
}

#wrapper {
    max-width: 960px;
    margin: 0px auto;
    background-color: #FFFFFF;
    margin-top: 20px;
}


#header {
    height:80px;
    background-color: #C6A023;
    font-size:40px;
    text-align: center;
    padding-top:30px;
    color:white;
}


#nav {
   float: left;
   width: 20%;
   height: 500px;
   background-color: #FACC2E;
   line-height:25px;
}





#content {
    float: right;
    width: 80%;
    min-height: 500px;
    background-color: #FFE89E;
}


#footer {
    clear: both;
    height: 50px;
    background-color: #C6A023;
    color:white;
    font-size: 16px;
    text-align: center;
    padding-top:20px;
}



a {
  text-decoration: none;

}




p, h3 {
  margin:20px;
}



img {
    max-width: 100%;
    height: auto;   
     
}


.box {
    width: 40%;
    background-color: green;    
    color: #FFF; 
    padding:10px;
    border: 5px solid white; 
    margin: 0px auto;
    margin-top:20px;
    margin-bottom:20px;
}




/*-----EINFACH SO LASSEN ----  RESPONSIV ANGABEN-------*/

@media screen and (max-width: 880px) {
	
	#nav {
	width: 100%;
	float: none;
	height: 100px;
	padding-top: 20px;
	}
	
	#content {
	width: 100%;
	}
}

/*-----ENDE RESPONSIV ANGABEN-------*/

 

bio.html

<!DOCTYPE html>

<html>
   
    <head>
        <title>CSS Website</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css" />
       
 
 
  <style>
        @import "custom.css"
        </style>
 
    </head>
    

<body>

	<div id="wrapper">
	
            <div id="header">
            Max Weyermann
            </div>
            
            <div id="nav">
                <p>
                <a href="index.html">Home</a><br>
                <a href="bio.html">Über mich</a><br>
            </div>
            
            <div id="content">
            
            <h3>Eine kurze Geschichte über mich ....</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor 
            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
            et justo duo dolores et ea rebum. 
            
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor 
            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
            et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est 
            Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
            sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
            voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
            no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    				
            </div>
            
            <div id="footer">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr
            </div>

	</div>
	

</body>
</html>