Skip to content
This repository was archived by the owner on Jan 14, 2024. It is now read-only.

inconpleted html/css #225

Open
Miguel-Cabral wants to merge 1 commit into
base: master
Choose a base branch
from
Open

inconpleted html/css #225

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 96 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,99 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap");

* {
box-sizing: border-box;
}

body {
background-color: #b1aea50d; /* 84894A 034C3C */
font-family: "lato", sans-serif;
margin: 0;
}
nav {
background-color: #464640;
color: #fff;
display: flex;
justify-content: flex-end;
padding: 15px;
}
nav a {
color: #fff;
position: relative;
margin-left: 30px;
text-decoration: none;
}
nav a::after {
content: "";
border-bottom: 3px solid #fff;
position: absolute;
top: 0;
left: 0;
transform: translateY(10px);
transition: transform 0.3s ease;
height: 100%;
width: 100%;
opacity: 0;
}
nav a:hover::after {
transform: translateY(0);
opacity: 1;
}

h1,
h2,
p{
text-align: center;


}
img{
height: 350px;
width: 300px;
justify-content: center;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 15%;

}
img:hover{
transform: scaleX(-2);
}
.section-cachupa{
background-color: rgba(57, 43, 6, 0.502);
color: #fff;
box-sizing: content-box;
width: 70%;
margin: 10px;
padding: 15px;
border: 1px grey solid;
display: flex;
flex-direction: column;
}



.section-buzio{
background-color: dimgray;
width: 70%;
margin: 10px;
padding: 15px;
border: 1px grey solid;
display: flex;
flex-direction: column;

}

.section-moreia{
background-color: lightslategray;
width: 70%;
margin: 10px;
padding: 15px;
border: 1px rgb(61, 47, 47) solid;
display: flex;
flex-direction: column;
}

44 changes: 42 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,47 @@
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<header>
<nav>
<a href="#homepage">Home</a>
<a href="#about">Main Plates</a>

</nav>
<h1>Cape Verdean Traditional Plates</h1>
<p>Like everything else, the Cape Verdean food showcases Portuguese and West African influences.</p>

</header>


<main>
<section id="about">
<section class="section-cachupa">
<h2>Cachupa Rica</h2>
<p>A staple of Cape Verdean culture, cachupa is more than just a national dish. Proudly prepared by locals for the most various occasions, this hearty stew can easily be defined as the Cape Verdean comfort food par excellence.
</p>
<img src="https://paulinaontheroad.com/wp-content/uploads/2018/11/viajar-santo-antao-mindelo-cabo-verde-cape-verde-expresiones-kriol-criollo-creole-what-to-do-sao-vicente-hiking-food-restaurant-marina-boat-party-music-shopping-outdoor-trekking-2.jpg.webp" alt="">
</section>
<section class="section-buzio">
<h2>Buzio</h2>
<p>If you like fish and seafood more than meat, then buzio is definitely a dish to try in Cape Verde. This slow-cooked food is typically made with mussels (although other shellfish can also be used), and soy sauce.

Not as hearty as the Cape Verdean cachupa, buzio is a better choice for a lighter lunch or dinner, as well as for a festive meal.</p>
<img src="https://paulinaontheroad.com/wp-content/uploads/2020/03/buzio-stew-cabo-verde-1536x1413.jpg.webp" alt="">

</section>
<section class="section-moreia">
<h2>Moreia</h2>
<p>Morreia (fried moray eel) is one of those dishes that stand as proof of the strong Portuguese influences the Cape Verdean culture had over the decades.

A staple of the Portuguese cuisine, morreia is one of the most popular dishes in Cape Verde too.</p>
<img src="https://paulinaontheroad.com/wp-content/uploads/2020/03/Fried-Fish.jpg.webp" alt="">
</section>
</section>
</main>
<footer>


</footer>

</body>
</html>