I'm very new to coding with html/css. I'm currently working on a project for uni and am stuck with a problem. I want my footer (about me, socials, imprint) to be in the horizontal middle of the page (so just a little bit further on the right). I have tried everything (text-align, justify-content, align-items, ...) - nothing really worked. Has anyone an idea on how to fix it?
I'm thankful for any kind of help :)
Here's my code so far (with a few other problem areas. plus it's probably super messy - sorry!) :
body, html { margin: 0; padding: 0; overflow-x: hidden; } body { overflow-x: hidden; font-family: Baskerville, Helvetica, serif; font-size: 20px; text-align: center; letter-spacing: .2em; background-image: url(https://cdn.shopify.com/s/files/1/1362/2563/products/Kariceramicshandmadepotterybluesixhandceramicdinnerplates_2048x.jpg?v=1591292140); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-position: center; color: #A5A58D; } .header1 { height: 90px; padding: 80px 0; font-size: 68px; letter-spacing: 12px; text-transform: uppercase; } nav > ul > li { display: block; padding-left: 20px; padding-right: 20px; position: relative; }<head> <link rel="stylesheet" href="WS 2020 Screendesign.css"> <title> ALINA'S POTTERY </title> </head> <body> <div class="bg-image"></div> <div class="header1"> Alina's Pottery </div> <nav class="categoryContainer"> <ul> <li class="current"><a href="home.html" title="Home" class="category">Home</a></li> <li><a href="pottery.html" title="Pottery" class="category">Pottery</a> <ul class="dropdown"> <li><a href="general.html" title="General" class="subCategory">General</a></li> <li><a href="handbuilding.html" title="Hand-Building" class="subCategory">Hand-Building</a></li> <li><a href="potterywheel.html" title="Pottery Wheel" class="subCategory">Pottery Wheel</a></li> <li><a href="materials.html" title="Materials" class="subCategory">Materials</a></li> <li><a href="temperatures.html" title="Temperatures" class="subCategory">Temperatures</a></li> </ul> </li> <li><a href="tutorials.html" title="Tutorials" class="category">Tutorials</a> <ul class="dropdown"> <li><a href="viewall.html" title="View All" class="subCategory">View All</a></li> <li><a href="getstarted.html" title="Get Started" class="subCategory">Get Started</a></li> <li><a href="plates.html" title="Plates" class="subCategory">Plates</a></li> <li><a href="mugs.html" title="Mugs" class="subCategory">Mugs</a></li> <li><a href="bowls.html" title="Bowls" class="subCategory">Bowls</a></li> </ul> </li> <li><a href="shop.html" title="Shop" class="category">Shop</a> <ul class="dropdown"> <li><a href="products.html" title="Products" class="subCategory">Products</a></li> <li><a href="contactform.html" title="Contact Form" class="subCategory">Contact Form</a></li> </ul> </li> </ul> </nav> <div class="header2"> Welcome to my pottery portfolio! </div> <div class="text1"> I am very passionate about creating my own ceramics. </div> <section class="footerContainer"> <a href="aboutme.html" title="About Me" class="footer">About Me</a> <a href="socials.html" title="Socials" class="footer"> Socials</a> <a href="imprint.html" title="Imprint" class="footer2">Imprint</a> </section> </body> <div class="background"></div> </html>
没有评论:
发表评论