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

Glasgow_6-Najah_Farah-HTML-3 #519

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

Glasgow_6-Najah_Farah-HTML-3 #519

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
Binary file added cake1.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cake2.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cake3.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions html 3/.vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
85 changes: 79 additions & 6 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,88 @@
<html lang="en">

<head>
<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 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Cake Webpage</title>
<link rel="stylesheet" href="/style.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=Comfortaa:wght@500&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Julius+Sans+One&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet" />
</head>

<body>
<!-- Add your markup here -->
<header>
<div id="logo">
<img src="logo1.jpeg" alt="Logo" />
</div>
<div id="slogan">
<h1>The Best Cakes in Town Delivered to Your Door</h1>
</div>
</header>
<nav class="navbar">
<div class="burger">
<span></span>
<span></span>
<span></span>
</div>
<ul class="nav-list">
<li id="nav-item1"><a href="#home">Home</a></li>
<li id="nav-item2"><a href="#Cakes">Cakes</a></li>
<li id="nav-item3"><a href="#Orderin">Orderin</a></li>
<li id="nav-item4"><a href="#Lessons">Lessons</a></li>
<li id="nav-item5"><a href="#About">About</a></a></li>
</ul>
</nav>

<main class="content">
<h2 class="article[]">Welcome</h2>
<article class="article">
<p>
Welcome to our delicious world of cakes! We offer a wide variety of mouthwatering cakes that are sure to
satisfy your taste buds. From classic flavors to unique creations, our cakes are made with the finest
ingredients and are baked to perfection. Whether you're celebrating a special occasion or just craving a
sweet treat, our cakes are the perfect choice.
</p>
</article>
<div id="main_img">
<img src="main pic.jpg" alt="owners" />
</div>
<div class="small" >
<div id="small_image1">
<img src="cake1.jpg" alt="Cake_1" />
</div>
<div id="small_image2">
<img src="cake2.jpg" alt="Cake2" />
</div>
<div id="small_image3">
<img src="topcake.jpg" alt="birthday_cake" />
</div>
<div id="small_image4">
<img src="cake3.jpg" alt="Cake3" />
</div>
</div>

</main>
<footer>
<div id="contact">
<h3>Contact Us</h3>
<ul>
<li>Email: info@bestcakeshop.com</li>
<li>Phone: 0736901784</li>
<li>Address: 123 best st , glasgow , G1 0GG</li>
</ul>
</div>
<div id="social">
<h3>Follow Us on</h3>
<ul>
<li><a href="https://www.facebook.com/cakeshop" target="_blank" rel="noopener noreferrer">Facebook</a></li>
<li><a href="https://www.instagram.com/cakeshop" target="_blank" rel="noopener noreferrer">Instagram</a></li>
<li><a href="https://www.twitter.com/cakeshop" target="_blank" rel="noopener noreferrer">Twitter</a></li>
</ul>
</div>
</footer>
</body>

</html>
Binary file added logo1.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added main pic.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
138 changes: 137 additions & 1 deletion style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,137 @@
/* Add your styling here */
/* Default styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Comfortaa', cursive;
background-color: #f0f0f0;
}

header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: grey;
padding: 10px;
}

#logo img {
width: 80px;
}

#slogan {
font-size: 16px;
color: white;
}

.navbar {
display: flex;
justify-content: flex-end;
}

.burger {
display: block;
cursor: pointer;
}

.burger span {
display: block;
width: 25px;
height: 3px;
background-color: #333;
margin: 4px;
}

.nav-list {
display: none;
}

.content {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
padding: 20px;
}

.main-section {
display: flex;
}

#main_img img {
width: 50%;
}

.article {
width: 50%;
}

.small {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}

.small img {
width: 100%;
}

footer {
display: flex;
justify-content: space-around;
padding: 20px 0;
background-color: #333;
color: white;
}

footer h3 {
margin-bottom: 10px;
}

footer ul {
list-style-type: none;
}

footer a {
color: white;
text-decoration: none;
}

/* Medium styles */
@media (min-width: 540px) {
#slogan {
font-size: 20px;
}
}

/* Large styles */
@media (min-width: 900px) {
#logo img {
width: 100px;
}

#slogan {
font-size: 24px;
}

.burger {
display: none;
}

.nav-list {
display: flex;
gap: 10px;
}

.nav-list a {
text-decoration: none;
color: #333;
font-size: 18px;
}

.nav-list li {
display: inline;
}
}
Binary file added topcake.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.