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

north-west-5/sahar-karimi/cake project #397

Open
sasarkarimi wants to merge 1 commit into
base: master
Choose a base branch
from
Open

north-west-5/sahar-karimi/cake project #397

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
70 changes: 67 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,76 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Responsive Cake webpage</title>
<!-- Add a link to your css file here -->
<title>Responsive Cake Webpage</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200&family=Square+Peg&display=swap"
rel="stylesheet">
</head>

<body>
<!-- Add your markup here -->
<header>
<section class="heading">
<img src="assets/images/chocolate-strawberry.png" alt="Cake Shop">
<p>Navigation text about how yummy these cakes are</p>
</section>
<nav>
<a href="#" class="expand-nav">...</a>
<ul class="responsive-nav">
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#cakes" class="nav-link">Cakes</a></li>
<li class="nav-item"><a href="#about" class="nav-link">About</a></li>
<li class="nav-item"><a href="#contacts" class="nav-link">Contact</a></li>
</ul>
<ul class="nav-list">
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#cakes" class="nav-link">Cakes</a></li>
<li class="nav-item"><a href="#about" class="nav-link">About</a></li>
<li class="nav-item"><a href="#contacts" class="nav-link">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="welcome" id="about">
<h2>Welcome Header</h2>
<p>Fancy stuff about cakes lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae omnis
dolor
eaque, repellat accusamus, aliquid corporis et quam sunt nam dicta harum ut eligendi, nostrum ab
culpa
consequatur! Dicta, odit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim hic nam
voluptate deserunt, distinctio totam officia et, ipsa consequatur, laudantium maxime dolore commodi.
In unde voluptate assumenda dolorum eligendi vel.</p>
<img src="assets/images/cake.png" alt="cake" class="cake">
</section>
<section class="articles" id="cakes">
<article>
<img src="assets/images/box-o-chocolates.png" alt="Box of chocolates">
</article>
<article>
<img src="assets/images/cupcake.png" alt="Cupcake">
</article>
<article>
<img src="assets/images/hot-chocolate.png" alt="Hot Chocolate">
</article>
<article>
<img src="assets/images/love-cake.png" alt="Love cakes">
</article>
</section>
</main>
<footer>
<section class="contact" id="contacts">
<a href="#"><i class="bi bi-facebook"></i></a>
<a href="#"><i class="bi bi-instagram"></i></a>
<a href="#"><i class="bi bi-twitter"></i></a>
</section>
<section class="copyright">
<p>&copy; michellejanaycodes @ CodeYourFuture</p>
</section>
</footer>
</body>

<script src="script.js"></script>

</html>
217 changes: 217 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,218 @@
/* Add your styling here */
body {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
}
/* HEADER */
header {
display: grid;
grid-template: auto / repeat(2, auto);
background-color: lavender;
color: #644983;
}
.heading {
grid-column: 1 / -1;
grid-row: 2;
}
.heading > img {
grid-column: 1;
max-width: 20%;
}
nav {
grid-column: 2;
padding-right: 1rem;
}
.expand-nav {
text-decoration: none;
font-size: 3rem;
color: #644983;
}
.heading > p {
grid-row: 3;
grid-column: 1 / -1;
text-align: right;
padding-right: 1rem;
}
.responsive-nav {
display: none;
background-color: lavenderblush;
padding: 2rem 1rem;
}
.nav-list {
display: none;
}
.nav-item {
list-style-type: none;
padding-bottom: 1rem;
}
.nav-link {
text-decoration: none;
text-transform: uppercase;
color: #644983;
}
.nav-link:hover {
background-color: white;
font-size: 1.2rem;
color: #644983;
}
/* Main */
main {
display: grid;
grid-template: auto / repeat(2, auto);
}
.welcome {
grid-row: 1;
grid-column: 1 / -1;
display: flex;
flex-direction: column;
}
.welcome > h2 {
color: #644983;
font-size: 2.5rem;
padding: 2rem 1rem 0rem 1rem;
margin: 0;
letter-spacing: 0.5rem;
}
.welcome > p {
line-height: 1.2rem;
}
.cake {
max-width: 95%;
align-self: center;
background-color: lavender;
}
.welcome > p {
padding: 0rem 1rem;
}
.articles {
grid-column: 1 / -1;
display: grid;
grid-template: auto / repeat(2, 1fr);
row-gap: 1rem;
column-gap: 1rem;
padding: 1rem;
}
article > img {
max-width: 100%;
background-color: lavenderblush;
}
/* FOOTER */
footer {
display: grid;
grid-template: auto / repeat(2, 1fr);
background-color: lavender;
color: #644983;
padding: 0.5rem 0 0 0;
}
.contact {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
padding-left: 1rem;
}
.contact > a {
text-decoration: none;
margin-top: 0.5rem;
}
i {
color: #644983;
}
i:hover {
color: white;
}
.copyright {
grid-column: 1 / -1;
text-align: center;
}

@media only screen and (min-width: 540px) {
header {
background-color: white;
}
.heading {
background-color: lavender;
color: #644983;
margin-bottom: 1rem;
display: flex;
justify-content: space-between;
}
.heading > p {
font-size: 1.5rem;
align-self: flex-end;
}
header > nav {
grid-column: 1 / -1;
grid-row: 4;
background-color: lavenderblush;
margin: 0rem 1rem;
padding-top: 0.75rem;
}
.nav-list {
display: flex;
justify-content: flex-end;
}
.nav-list > li {
padding-left: 1rem;
}
.responsive-nav {
display: none;
}
.nav-link {
background-color: lavender;
padding: 0.5rem 1rem;
text-decoration: none;
font-weight: bold;
color: #644983;
}
.expand-nav {
display: none;
}
.welcome > h2 {
text-align: center;
}
.contact {
flex-direction: row;
justify-content: center;
}
.contact > a {
padding: 0rem 1rem;
}
}
@media only screen and (min-width: 900px) {
.heading > p {
font-size: 1.5rem;
}
.responsive-nav {
display: none;
}
.welcome {
display: grid;
grid-template: auto / repeat(2, 1fr);
margin: 1rem 1rem 0rem 1rem;
}
.cake {
grid-column: 1;
grid-row: 1;
max-width: 100%;
}
.welcome > h2 {
grid-column: 2;
grid-row: 1;
text-align: right;
font-size: 3rem;
}
.welcome > p {
grid-column: 2;
grid-row: 1;
margin-top: 10rem;
text-align: right;
}
.articles {
grid-column: 1 / -1;
display: flex;
}
footer {
padding-top: 1rem;
}
}