Hi, I’m going crazy trying to figure out what’s wrong with my code as I’m only missing a media query and I’m using two in my code.
Can someone help me please?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Sofia Cifuentes, Designer and front-end developer based in Lisbon" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sofia Cifuentes</title>
<link rel="icon" type="image/png" sizes="16x16" href="images/sc-logo16.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/sc-logo32.png">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://use.typekit.net/rbz5yaa.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top" id="navbar">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">SOFIA CIFUENTES</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="about.html" title="Page about Sofia Cifuentes">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html#contact" title="Direct link to contact me">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects" title="Scroll down to projects">Projects</a>
</li>
</ul>
</div>
</div>
</nav>
<br>
<div class="container center-div" id="welcome-section">
<h2>👋 Hi I am</h2>
<h1 class="big-text">SOFIA</h1>
<h3 class="headline">🇵🇹 Designer and front-end developer, based in Lisbon</h3>
<div class="contact-container row mt-5 justify-content-center">
<div class="col-sm-3 col-xs-12 text-center mb-2">
<a href="about.html#contact"><button class="contact" role="button">
Contact me
</button>
</a>
</div>
<div class="col-md-2 col-sm-8 col-xs-12 text-center">
<a href="about.html">
<button class="about" role="button" href="about.html">
About me
</button></a>
</div>
</div>
<p class="text-center mt-4"><a id="profile-link" href="https://github.com/sofiacif" target="_blank"
title="Link to GitHub profile">DEV
PROFILE</a></p>
</div>
<div class="carousel-container" id="projects">
<div id="carouselExampleCaptions" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<a href="https://isitsunnytoday.netlify.app" target="_blank">
<img src="images/isitsunny1.png" class="d-block w-100" alt="is it sunny weather app"></a>
<div class="carousel-caption d-none d-md-block">
<h5 class="project-tile">Is it sunny?</h5>
<p>Weather app that shows the temperature in your city based on the she codes
API</p>
</div>
</div>
<div class="carousel-item"><a
href="https://www.shecodes.io/workshops/shecodes-basics-fce9b431-f74c-4260-a633-606494ff1757/projects/1188187"
target="_blank">
<img src="images/ericeira.png" class="d-block w-100" alt="beach in ericeira"></a>
<div class="carousel-caption d-none d-md-block">
<h5 class="project-title">Ericeira</h5>
<p><em>Ericeira, onde o mar é mais azul</em> is a project made for SheCodes
course homework</p>
</div>
</div>
<div class="carousel-item">
<a href="https://www.behance.net/gallery/159135411/Macarico-Ocean-Literacy-Programme" target="_blank">
<img src="images/macarico.png" class="d-block w-100" alt="maçarico bird logo"></a>
<div class="carousel-caption d-none d-md-block">
<h5 class="project-title">Maçarico</h5>
<p>Visual identity design for an Ocean Literacy programme for +ATLANTIC</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</body>
</html>
:root {
--primary-color: #15cc92;
--offwhite: #ebebeb;
--yellow: #ffea00;
--secondary-color: #f5f2fe;
--bs-heading-color: white;
--box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
@media (prefers-reduced-motion: no-preference) {
* {
scroll-behavior: smooth;
}
}
@media (max-width: 576px) {
.headline {
font-weight: 300;
}
}
/*
font-family: depot-new-web, sans-serif;
font-weight: 400;
font-style: normal;
*/
body {
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.492),
rgba(0, 0, 0, 0.492)
),
url(https://images.unsplash.com/photo-1532423622396-10a3f979251a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80);
background-size: cover;
background-attachment: fixed;
}
#welcome-section {
height: 100%;
}
h1,
h2,
h3 {
text-align: center;
margin: 0;
font-family: depot-new-web, sans-serif;
font-weight: 400;
font-style: normal;
color: white;
}
.navbar-brand {
font-weight: 600;
letter-spacing: 1.5px;
}
.navbar {
font-family: depot-new-web, sans-serif;
font-style: normal;
font-weight: 400;
}
.big-text {
font-size: calc(48px + 6vw);
font-family: aktiv-grotesk-extended, sans-serif;
font-weight: 800;
font-style: normal;
color: white;
letter-spacing: 1vw;
}
/*
p {
padding: 20px;
font-size: 18px;
line-height: 1.5;
text-align: center;
color: white;
}*/
.contact-container {
display: flex;
justify-content: center;
margin-top: 7vw;
}
.contact {
/*margin-right: 2vw;*/
/*display: inline-block;*/
outline: none;
cursor: pointer;
font-size: 14px;
line-height: 1;
border-radius: 500px;
transition-property: background-color, border-color, color, box-shadow, filter;
transition-duration: 0.3s;
border: 1px solid transparent;
letter-spacing: 2px;
min-width: 160px;
text-transform: uppercase;
white-space: normal;
font-weight: 700;
text-align: center;
padding: 16px 14px 18px;
color: white;
box-shadow: inset 0 0 0 2px white;
background-color: transparent;
height: 48px;
}
.contact:hover {
color: var(--primary-color);
background-color: white;
}
.about {
/* margin-left: 2vw;*/
/*display: inline-block;*/
outline: none;
cursor: pointer;
font-size: 14px;
line-height: 1;
border-radius: 500px;
transition-property: background-color, border-color, color, box-shadow, filter;
transition-duration: 0.3s;
border: 1px solid transparent;
letter-spacing: 2px;
min-width: 160px;
text-transform: uppercase;
white-space: normal;
font-weight: 700;
text-align: center;
padding: 16px 14px 18px;
color: var(--primary-color);
background-color: white;
height: 48px;
}
.about:hover {
color: white;
background-color: var(--primary-color);
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#backHome {
justify-content: left;
text-align: left;
color: white;
text-decoration: none;
font-size: calc(12px + 0.3vw);
font-weight: 600;
letter-spacing: 1.5px;
margin-left: 2vw;
}
#backHome:hover {
text-decoration: underline;
}
.textContainer {
margin-left: 5vw;
margin-right: 5vw;
width: 70%;
margin: 0 auto;
margin-bottom: 2vw;
margin-top: 2%;
text-align: left;
max-width: 800px;
}
.about-paragraphs {
font-family: depot-new-web, sans-serif;
font-style: normal;
font-weight: 300;
color: white;
font-size: calc(18px + 0.2vw);
text-align: left;
padding: 0 2vw;
padding-bottom: 0;
}
.center-div {
margin-top: 10%;
}
.normalText {
margin: 0 auto;
font-size: calc(12px + 0.5vw);
}
.email-link {
margin-bottom: 2vw;
color: white !important;
padding-top: 0;
text-decoration: none !important;
display: flex;
justify-content: center;
}
.email-link:hover {
color: var(--yellow) !important;
cursor: pointer !important;
}
#contact {
color: white;
font-size: calc(18px + 0.5vw);
margin-top: 5%;
}
.about-top {
margin-bottom: 3%;
}
#cards-gal {
margin: 0 auto;
margin-top: 8%;
margin-bottom: 8%;
padding-left: 5%;
padding-right: 7%;
}
.carousel-container {
margin-top: 10%;
margin-bottom: 0;
}
#profile-link {
text-decoration: none;
color: #ffea00;
font-weight: 600;
letter-spacing: 2px;
}
#profile-link:hover {
text-decoration: underline;
}