I'm trying to make a simple webpage and have had some trouble with CSS. My first problem is that the headerImg is not displaying with the full width of the browser and has a small margin to the right that I can't seem to fin why.
My second problem are the images inside the #work .section, they overlap the #contactMe section and can't find a way to center them to be all 4 images in 2 columns in the center of the page. They keep pulling to the left side of the page no matter what I change.
Finally, I can't find a way for the tags to be responsive to changes in the browser so that they all appear inside the header even when the browser changes sizes.
THANK YOUUUUUUU I'm super new to CSS and absolutely hate it hahah
@font-face { font-family: Cherolina; src: url('./Fonts/coolvetica.ttf'); }
@font-face { font-family: Roboto; src: url('./Fonts/Roboto-Thin.ttf'); }
@font-face { font-family: RobotoR; src: url('./Fonts/Roboto-Regular.ttf'); }
:root{
--white: #ffffff;
--dark: #90323d;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-color: #f8edeb;
}
header {
padding: 2%;
font-family: Cherolina;
background-color: var(--dark);
color: var(--white);
}
header h1 {
display: inline-block;
font-size: 70px;
margin-left: 20px;
margin-bottom: 10px;
}
header section {
padding-top: 40px;
float: right;
font-family: Roboto;
font-size: 20px;
}
header section ul {
list-style-type: none;
}
header section ul li {
display: inline-block;
margin-left: 25px;
}
.headerImg{
margin: 0;
width: 100%;
height: 150px;
overflow: hidden;
opacity: 70%;
}
header section a {
color: var(--white);
text-decoration: none;
}
p {
font-size: 20px;
}
.float-left {
float: left;
margin-right: 25px;
}
.float-right {
float: right;
margin-left: 25px;
}
.sections{
margin: 50px 50px 50px 50px;
width: 90%;
height: 500px;
display: inline-block;
}
.sections p{
font-family: roboto;
margin-top: 50px;
text-align: justify;
margin-left: 110px;
width: 40%;
display:inline-block;
}
.content h2{
font-family: cherolina;
color: var(--dark);
font-size: 60px;
margin: 0 100px 0 100px;
border-bottom: 2px solid var(--white);
}
.content{
display: flex;
flex-direction: column;
justify-content: center;
}
.content img{
width: 550px;
height: 360px;
background-size: cover;
margin: 50px 0 50px 0;
}
.content ul {
list-style-type: none;
background-color: rgba(255,255,255,.70);
height: 30%;
margin-top: 90px;
}
.content li {
display: inline;
font-family: roboto;
margin: 70px 50px 50px 50px;
float: right;
}
.content a {
text-decoration: none;
color: black;
border-bottom: .5px solid black;
font-size: 20px;
}
#work a{
border-bottom: 0px;
}
#firstWeb{
display: block;
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 150px;
float: none;
opacity: 100%;
flex-wrap: nowrap;
}
.workImg{
display: inline-block;
column-count: 2;
margin-bottom: 0;
margin-top: 0;
opacity: 100%;
}
.workImg:hover{
opacity: 70%;
}
#firstWeb:hover{
opacity: 70%;
}
footer {
padding: 30px;
clear: both;
text-align: center;
font-family: Cherolina;
background-color: var(--dark);
}
footer h2 {
font-size: 20px;
color: var(--white);
}<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./Assets/style.css">
<title>Portfolio</title>
</head>
<body>
<header>
<h1>MR</span></h1>
<section>
<ul>
<li>
<a href="#aboutMe">About me</a>
</li>
<li>
<a href="#work">Work</a>
</li>
<li>
<a href="#contactMe">Contact me</a>
</li>
</ul>
</section>
</header>
<section class="headerImg">
<img src="./assets/Images/header.png">
</section>
<section class="content">
<section id="aboutMe" class="sections">
<h2 class="float-right">About Me</h2>
<img src="./assets/Images/aboutMe.jpg" class="float-left" />
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quam, laudantium nihil explicabo maxime molestias nam earum commodi eligendi at eaque perferendis dolorem temporibus alias repudiandae est assumenda, illum quas! Ipsam!
</p>
</section>
<section id="work" class="sections">
<h2 class="float-left">Work</h2>
<a href="https://github.com"><img id="firstWeb" src="./Assets/Images/firstWeb.webp" /></a>
<a href="https://github.com"><img class="workImg" src="./Assets/Images/work.png" /></a>
<a href="https://github.com"><img class="workImg" src="./Assets/Images/work.png" /></a>
<a href="https://github.com"><img class="workImg" src="./Assets/Images/work.png" /></a>
<a href="https://github.com"><img class="workImg" src="./Assets/Images/work.png" /></a>
</section>
<section id="contactMe" class="sections">
<h2 class="float-right">Contact Me</h2>
<ul>
<li>
<a href="https://github.com">Github</a>
</li>
<li>
<a href="https://LinkedIn.com">LinkedIn</a>
</li>
<li>
<a>@gmail.com</a>
</li>
<li>
<a>55XXXX</a>
</li>
</ul>
</section>
</section>
<footer>
<h2>Made with ❤️️</h2>
</footer>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire