So my website has different pages to click through, and on the home page everything is fine. I am adding this page currently, and once I added the pop up cards, my nav bar went to the middle of the screen for some reason. I am completely new to coding, so sorry if this is an easy fix. Any help would be appreciated. Here is the website
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Harvard</title>
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles1.css">
</head>
<body>
<div class="container">
<div class="nav-wrapper">
<div class="left-side">
<div class="nav-link-wrapper">
<a href="index.html">Data Sets</a>
</div>
<div class="nav-link-wrapper">
<a href="compare.html">Compare</a>
</div>
</div>
<div class="right-side">
<div class="brand">
<div>A2C Common Data Sets</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-image"></div>
<div class="card-text">
<span class="date">top</span>
<h2>One</h2>
<p>body</p>
</div>
<div class="card-stats">
<div class="stat">
<div class="value">4<sup>m</sup></div>
<div class="type">#</div>
</div>
<div class="stat border">
<div class="value">5123</div>
<div class="type">#</div>
</div>
<div class="stat">
<div class="value">32</div>
<div class="type">#</div>
</div>
</div>
</div>
<div class="card">
<div class="card-image card2"></div>
<div class="card-text card2">
<span class="date">top</span>
<h2>Two</h2>
<p>body</p>
</div>
<div class="card-stats card2">
<div class="stat">
<div class="value">7<sup>m</sup></div>
<div class="type">#</div>
</div>
<div class="stat border">
<div class="value">7152</div>
<div class="type">#</div>
</div>
<div class="stat">
<div class="value">21</div>
<div class="type">#</div>
</div>
</div>
</div>
<div class="card">
<div class="card-image card3"></div>
<div class="card-text card3">
<span class="date">top</span>
<h2>Three</h2>
<p>body</p>
</div>
<div class="card-stats card3">
<div class="stat">
<div class="value">5<sup>m</sup></div>
<div class="type">#</div>
</div>
<div class="stat border">
<div class="value">3021</div>
<div class="type">#</div>
</div>
<div class="stat">
<div class="value">15</div>
<div class="type">#</div>
</div>
</div>
</div>
</body>
</html>
CSS:
.container {
display: grid;
grid-template-columns: 1fr;
}
/* Nav Styles */
.nav-wrapper {
display: flex;
justify-content: space-between;
padding: 38px;
}
.left-side {
display: flex;
}
.nav-wrapper > .left-side > div {
margin-right: 20px;
font-size: 0.9m;
text-transform:uppercase;
}
.nav-link-wrapper {
height: 22px;
border-bottom: 1px solid transparent;
transition: border-bottom 0.5s;
}
.nav-link-wrapper a {
color: #8a8a8a;
text-decoration: none;
transition: color 0.5s;
}
.nav-link-wrapper:hover {
border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover {
color: black;
}
.active-nav-link {
border-bottom: 1px solid black;
}
.active-nav-link a{
color: black;
}
/* Cards */
body {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background:url();
overflow: hidden;
}
.card {
display: grid;
grid-template-columns: 300px;
grid-template-rows: 210px 210px 80px;
grid-template-areas: "image" "text" "stats";
border-radius: 18px;
background: white;
box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
font-family: roboto;
text-align: center;
transition: 0.5s ease;
cursor: pointer;
margin:30px;
}
.card-image {
grid-area: image;
background: url("images/princeton1.png");
border-top-left-radius: 15px;
border-top-right-radius: 15px;
background-size: cover;
}
.card-text {
grid-area: text;
margin: 25px;
}
.card-text .date {
color: rgb(255, 7, 110);
font-size:13px;
}
.card-text p {
color: grey;
font-size:15px;
font-weight: 300;
}
.card-text h2 {
margin-top:0px;
font-size:28px;
}
.card-stats {
grid-area: stats;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
background: rgb(255, 7, 110);
}
.card-stats .stat {
padding:10px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: white;
}
.card-stats .border {
border-left: 1px solid rgb(172, 26, 87);
border-right: 1px solid rgb(172, 26, 87);
}
.card-stats .value{
font-size:22px;
font-weight: 500;
}
.card-stats .value sup{
font-size:12px;
}
.card-stats .type{
font-size:11px;
font-weight: 300;
text-transform: uppercase;
}
.card:hover {
transform: scale(1.15);
box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
}
/*card2*/
.card-image.card2 {
background: url("img2.jpg");
background-size: cover;
}
.card-text.card2 .date {
color: rgb(255, 77, 7);
}
.card-stats.card2 .border {
border-left: 1px solid rgb(185, 67, 20);
border-right: 1px solid rgb(185, 67, 20);
}
.card-stats.card2 {
background: rgb(255, 77, 7);
}
/*card3*/
.card-image.card3 {
background: url("img3.jpg");
background-size: cover;
}
.card-text.card3 .date {
color: rgb(0, 189, 63);
}
.card-stats.card3 .border {
border-left: 1px solid rgb(14, 122, 50);
border-right: 1px solid rgb(14, 122, 50);
}
.card-stats.card3 {
background: rgb(0, 189, 63);
}
Aucun commentaire:
Enregistrer un commentaire