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

HTML-CSS-Coursework-Week3-wireframe #75

Closed
mame-baba wants to merge 7 commits into from
Closed

HTML-CSS-Coursework-Week3-wireframe #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e3c4641
htlm semantic
mame-baba Nov 27, 2020
b94a4d2
added css
mame-baba Nov 27, 2020
e79ee87
addding flex box and inline.
mame-baba Nov 27, 2020
917b18f
Styling
mame-baba Nov 27, 2020
dd49926
added html
mame-baba Nov 27, 2020
bc925d3
styled the footer with css
mame-baba Nov 27, 2020
2237252
added to style.css
mame-baba Nov 28, 2020
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
73 changes: 72 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,81 @@
<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>
<link rel="stylesheet" href="style.css">
<!-- Add a link to your css file here -->
</head>

<header class="header">
<div class="logo">
<h1>logo-img</h1>
</div>
<div class="Contact">
<h1>Contact</h1>
</div>
</header>
<body>
<nav class="nav-bar">
<div class="nav-list">
<ul>
<li>Home</li>
<li>Cake</li>
<li>Ordering</li>
<li>Lessons</li>
<li>About</li>
</ul>

</div>
</nav>
<section class="container">
<div class="box-1">
<h1>Information</h1>

<p>Find Information here</p>

</div>
<div class="box-2">

<img src="https://www.w3.org/TR/wai-aria-practices-1.1/examples/carousel/images/lands-endslide__800x600.jpg" Alt="a carousel image">

</div>
<div class="img-list">
<ul>
<p>img-1</p>
<p>img-2</p>
<p>img-3</p>
<p>img-4</p>
</ul>
</div>
</section>
<section class="cake-section">
<div class="cake-box-1">
cake-1
</div>
<div class="cake-box-2">
cake-2
</div>
<div class="cake-box-3">
cake-3
</div>
<div class="cake-box-3">
cake-4
</div>
</section>
</div>

<footer class="footer-bar">
<div class="footer-list">
<ul>
<li>Sitemap</li>
<li>Contact</li>
<li>delivery</li>
<li>blank</li>
<li>blank</li>

</ul>
</div>

</footer>

<!-- Add your markup here -->
</body>

Expand Down
89 changes: 89 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,90 @@
/* Add your styling here */
.header{
font-size: 20px;

color: black;
background-color:gray;
display: flex;
justify-content: space-between;
}
.logo{
float: right;
display: grid;
align-items: flex-end;
}
.nav-list{
font-size: 30px;
}
.nav-list ul{
display: flex;
background-color: gray;
justify-content: space-between;
}
.container{
display: flex;
justify-content: flex-end;
flex-direction: row;

}
.box-1{
display: inline;
align-self: start;
flex-direction: column;
margin: 200px;

}
.box-2{
display: inline-block;
justify-content: baseline;

}
.img-list{
}
.cake-section{
color: black;
padding: 20px;
display: flex;
align-items: flex-end;
justify-content: space-around;
}
.cake-box-1{
height: 100px;
width: 100px;
background-color: gray;
}
.cake-box-2{
height: 100px;
width: 100px;
background-color: gray;

}
.cake-box-3{
height: 100px;
width: 100px;
background-color: gray;
}
.cake-box-4{
height: 100px;
width: 100px;
background-color: gray;
}
.footer-bar{
background-color: gray;
color: black;
display: flex;
justify-content: space-around;

}
.footer-list ul{
display: flex;
background-color: gray;
justify-content: flex-end;
list-style-type: none;
}
.footer-list ul li{
display: flex;
justify-content: space-between;
color: black;
margin: 10px;
padding: 20px;
}