Basic website (non-responsive) #48
Conversation
Added the basic structure of the website and did some first CSS for the Home Page.
Not there any more
Not needed any more
First responsive stuff (like e.g. burger navigation)
There was a problem hiding this comment.
Great job on your website! 😊🌟 You've named your tags in a nice way, created a really good looking menu as well as used a lot of pictures - which is great!
There are some tweaks you could work on, like the image sizing and applying the menu to all pages, but overall it's a good looking site! If you want to, you could also think about adding some margins to the sides of your containers. Most websites look better with some extra margins and shorter lines of text. 😊👍🏻
Keep up the good work!
| @@ -0,0 +1,40 @@ | |||
| <!DOCTYPE html> | |||
There was a problem hiding this comment.
Hi there! My name is Karin and I will take a review your code today 😊
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <link rel='icon' href='images/favicon.ico' type='image/ico'/ > |
| <link rel="stylesheet" type="text/css" href="./style.css"/> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap" rel="stylesheet"> |
There was a problem hiding this comment.
.. and a custom font as well! Good job!
code/impressionen.html
Outdated
| <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap" rel="stylesheet"> | ||
| </head> | ||
| <body> | ||
| <div class="navigation-logo"> |
There was a problem hiding this comment.
In the index.html-file you've created a menu using the Nav-tag which looks great! If you want that menu to appear on all pages you need to add that code to the other pages as well. 😊
code/index.html
Outdated
| <nav role="navigation"> | ||
| <div id="menuToggle"> | ||
| <input type="checkbox" /> | ||
| <span></span> | ||
| <span></span> | ||
| <span></span> | ||
| <ul id="menu"> | ||
| <li></li><a href="lgb.html">Über den LGB</a></li> | ||
| <li></li><a href="mitglieder.html">Mitglieder</a></li> | ||
| <li></li><a href="veranstaltungen.html">Veranstaltungen</a></li> | ||
| <li></li><a href="impressionen.html">Impressionen</a></li> | ||
| <li></li><a href="kontakt.html">Kontakt</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="navigation-logo"> | ||
| <a href="index.html" class="link-image"> <img class="image-logo" src="images/LGB-logo.png"></a> | ||
| </div> | ||
| </nav> |
code/index.html
Outdated
| <!--<div class="image-hero"><img class="hero-image" src="images/Running-Lanes-1-4.jpg"> | ||
| <h1 class="h1-hero">LGB - der Gönnerverein des LC Brühl</h1> | ||
| </div>--> |
There was a problem hiding this comment.
Make it a habit to remove commented/hidden code before deploying your site. 😄
code/kontakt.html
Outdated
| <div> | ||
| <div> | ||
| </div> | ||
| <div class="div-content-right"> |
There was a problem hiding this comment.
You are doing a great job naming your tags! 👍🏻 🙂 (A little detail: You don't need to write div in the name itself, or h1 like in h1-content, but instead use content-title, content-image and similar.)
| <table> | ||
| <tbody> | ||
| <tr> | ||
| <td class="td-image"><img class="image-portrait" src="images/markus-wirth.jpg" alt="Portrait von Markus Wirth, Präsident"> |
There was a problem hiding this comment.
This table looks great!
If you want the images to be a little smaller, you could add a max-width, or set the width to a percentage. 🙂 If you add a class to your css-file and add it to all the images, you could set a width to all pictures at once.
| .centered { | ||
| position: absolute; | ||
| background-color: white; | ||
| color:#008542; | ||
| margin: 10px; | ||
| padding: 10px; | ||
| bottom: 10%; | ||
| width:65%; | ||
| } |
There was a problem hiding this comment.
Great job with the positioning of this element! 👍🏻
code/style.css
Outdated
| color: #008542; | ||
| } | ||
|
|
||
| @media ( max-width: 768px ) and ( min-width: 481px ) { |
There was a problem hiding this comment.
Great job on the media queries!
You could add them like you've done here, after each item, but I would say it's more common to place all media queries in the bottom of the css-file. By doing so you only have to write the media-rule (@media ( max-width: 768px ) and ( min-width: 481px ) {) once, per size. 🙂
Handing in the Basic website, still not responsive (I know I'm late) and would appreciate feedback on it. :-)