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

WMC2-Monique King - HTML/CSS - wk3 #70

Closed
moniqueking57 wants to merge 8 commits into from
Closed

WMC2-Monique King - HTML/CSS - wk3 #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
86f3602
Changes made HTML written
moniqueking57 Nov 25, 2020
f43c2ff
A break added
moniqueking57 Nov 25, 2020
26d6094
Break removed
moniqueking57 Nov 25, 2020
65cfb0d
gallery added photos removed
moniqueking57 Nov 25, 2020
3f5df15
fixed the background banner image
moniqueking57 Nov 25, 2020
3082c1c
Changed picureds and tidied up css
moniqueking57 Nov 26, 2020
ae711ae
Small adjustments to css
moniqueking57 Nov 27, 2020
2fdffef
reactive
moniqueking57 Dec 1, 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
85 changes: 81 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,88 @@
<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 -->
<link href='//fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>

<body>
<!-- Add your markup here -->
</body>
<div id="page-container">
<div id="content-wrap">
<nav class="top">
<img class="logo" src="https://s.tmimgcdn.com/scr/1204x1146/108600/cake-bakery-logo-template_108642-original.jpg" alt="Bakery logo" width="60" height="50"/>
<ul class= "links">
<li class="links">About </li>
<li class="link"> Cakes </li>
<li class="link"> Cakes for occasions </li>
<li class="link"> Ordering </li>
<li class="link">Login </li>
</ul>
</nav>

</html>
<header class="header">
<h1 style="font-size:10vw;"> Introducing Monique's Bakery</h1>
<h3 style="font-size:5vw;"> Where there is a cake for every occasion...</h3>
</header>

<section class= "Icon">
<h4 style="font-size:5vw;"><i>"A party without cake is really just a meeting!"
<br>~ Julia Child </i></h4>
</section>


<section class="pictures-gallery">

<div class="gallery">
<a target="_blank" href="https://i.pinimg.com/originals/9a/7f/3f/9a7f3f6c746671abd7272032b2ed0bda.jpg">
<img src="https://i.pinimg.com/originals/9a/7f/3f/9a7f3f6c746671abd7272032b2ed0bda.jpg" alt="Birthday Cakes" width="600" height="400">
</a>
<div class="desc">Birthday Cakes</div>
</div>

<div class="gallery">
<a target="_blank" href="https://images-na.ssl-images-amazon.com/images/I/71OFnH2qKSL._AC_SL1500_.jpg">
<img src="https://images-na.ssl-images-amazon.com/images/I/71OFnH2qKSL._AC_SL1500_.jpg" alt="Wedding Cakes" width="600" height="400">
</a>
<div class="desc">Wedding Cakes</div>
</div>

<div class="gallery">
<a target="_blank" href="https://i.pinimg.com/564x/23/da/fd/23dafd9089bbf116e3d1b150095fbda6.jpg">
<img src="https://i.pinimg.com/564x/23/da/fd/23dafd9089bbf116e3d1b150095fbda6.jpg" alt="Alternative Cakes" width="600" height="400">
</a>
<div class="desc">Alternative Cakes</div>
</div>

<div class="gallery">
<a target="_blank" href="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/christmas-cakes-tree-mendous-gingerbread-cake-1539120100.jpg">
<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/christmas-cakes-tree-mendous-gingerbread-cake-1539120100.jpg" alt="Holiday Cakes" width="600" height="400">
</a>
<div class="desc">Holiday Cakes</div>
</div>
</div>

</section>


<footer>
<div class="footnote">
<nav class="footer">
<ul class="footer-links">
<li class="link">
<a href="#">Twitter</a>
</li>
<li class="link">
<a href="#">Instagram</a>
</li>
<li class="link">
<a href="#">Facebook</a>
</li>
</ul>
</nav>
</div>
</footer>
</div>

</body>
</html>
173 changes: 173 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,174 @@
/* Add your styling here */


.top {
width:100%;
background-color: rgb(26, 24, 25);
padding: 1rem;
display:flex;
}
.top > .links {
float: right;
font: 1rem;
margin-top: 1rem;
margin-bottom: 1rem;
list-style: none;
display: flex;
font-size: 10px;
color: white;

}
.links li {
margin-left: 1rem;
}

.header {
background-image: url('https://i.pinimg.com/originals/e9/d5/00/e9d5002d4b53202de2adde4d35983698.jpg');
background-size: cover;
background-repeat: no-repeat;


}
.header h1{
color: white;
text-align: center;
padding-top: 2rem;
}
.header h3{
color: white;
text-align: center;
margin-top: 8rem;
margin-bottom: 1rem;
}

.icon h4{
font-size: 5px;
font-family: sans-serif;
}

h3{
margin-left: 1rem;
display: flex;
}

.pictures-gallery{
display: flex;
justify-content: center;
flex-wrap: wrap;
}

div.gallery {
margin: 5px;
border: 1px solid #ccc;
width: 180px;

}

div.gallery:hover {
border: 1px solid #777;
}

div.gallery img {
width: 100%;
height: auto;

}

div.desc {
padding: 15px;
text-align: center;

}
/* #page-container {
position: relative;
min-height: 100vh;
}

#content-wrap {
padding-bottom: 2.5rem;
}
*/

.footer, .footnote {
width: 100%;
height: 2.5rem;


}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}


/* responsive section */
@media screen and (max-width: 481px){
h1{
font-size:1.2em;
}
h3{
font-size:0.75em;
}
h4{
font-size:1em;
}
.top{
width:100%;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

}


@media screen and (min-width: 481px){
h1{
font-size:2em;
}
h3{
font-size:1.5em;
}
h4{
font-size:1em;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}


li a:hover {
background-color: #111;
}

}