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

Glasgow_6-Joseph_Mwanza-HTML-CSS-Coursework-Week3 #520

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Glasgow_6-Joseph_Mwanza-HTML-CSS-Coursework-Week3 #520

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2f1e969
created the basic structure
Joemwa Feb 7, 2023
3a3fbae
added footer icons
Joemwa Feb 7, 2023
1abb17f
Added media query
Joemwa Apr 22, 2023
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
Prev Previous commit
Added media query
  • Loading branch information
@Joemwa
Joemwa committed Apr 22, 2023
commit 1abb17f801f3d3460cd30aaeafbc1dfc4ae5ff00
51 changes: 40 additions & 11 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,19 +33,48 @@
</header>
<main>
<section>
<h1 class="welcome">Welcome</h1>
<img class="first-img1" src="/images/cake_pic1.jpg" alt="random-cake-img">
<div class="welcome-container"> <!--display: grid -->
<!-- grid-template-columns: 1fr 470px 1fr; -->
<div class="left-gutter"></div>

<div class="welcome-main">
<h1 class="welcome">Welcome</h1>
<article class="article">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis ab amet natus, voluptates magni mollitia. Quo accusantium exercitationem voluptatibus eius ad nulla, unde eaque modi, atque a hic reiciendis odit!</p>
</article>
</div>
<div class="right-gutter"></div>
</div>
</section>

<section>
<div class="feature-img-container">
<div class="left-gutter"></div>

<img class="first-img1" src="/images/cake_pic1.jpg" alt="random-cake-img">
<div class="right-gutter"></div>
</div>
</section>






<section>
<div class="gallery-container">
<div class="left-gutter"></div>
<div class="four-images">
<img class="first-img" src="/images/cake_pic2.jpg" alt="random-cake-img">
<img class="first-img" src="/images/cake_pic3.jpg" alt="random-cake-img">
<img class="first-img" src="/images/cake_pic4.jpg" alt="random-cake-img">
<img class="first-img" src="/images/cake_pic5.jpg" alt="random-cake-img">
</div>
<div class="right-gutter"></div>
</div>

<article class="article">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis ab amet natus, voluptates magni mollitia. Quo accusantium exercitationem voluptatibus eius ad nulla, unde eaque modi, atque a hic reiciendis odit!</p>
</article>
</section>
<div class="four-images">
<img class="first-img" src="/images/cake_pic2.jpg" alt="random-cake-img">
<img class="first-img" src="/images/cake_pic3.jpg" alt="random-cake-img">
<img class="first-img" src="/images/cake_pic4.jpg" alt="random-cake-img">
<img class="first-img" src="/images/cake_pic5.jpg" alt="random-cake-img">
</div>


</main>

Expand Down
6 changes: 6 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

108 changes: 108 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,3 +75,111 @@ body {
width: 30px;
margin-top: 2rem;
}

.welcome-container {
display: grid;
grid-template-columns: 1fr 470px 1fr;
}

.left-gutter {
border: 2px solid black;
}

.welcome-main {
border: 2px solid red;
}
.right-gutter {
border: 2px solid black;
}

.feature-img-container {
display: grid;
grid-template-columns: 1fr 470px 1fr;
margin-bottom: 3rem;

}

.gallery-container {
display: grid;
grid-template-columns: 1fr 470px 1fr;

}



@media screen and (min-width: 768px) {
.nav {
display: flex;
justify-content: space-around;
align-items: center;
}

.nav a {
color: #333;
text-decoration: none;
font-size: 1rem;
margin: 0 1rem;
padding: 0.5rem;
border-radius: 5px;
transition: all 0.3s ease;
}

.nav a:hover {
background-color: #333;
color: #fff;
}

.logo-p-nav-container {
grid-template-columns: 1fr 1fr;
grid-template-rows: 180px;
}

.nav-p {
display: none;
}

.left-gutter,
.right-gutter {
display: none;
}

.welcome-main {
border: none;
}

.first-img1 {
width: 100%;
}

.four-images {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
}
}






/*
@media (min-width: 540px) {
body {
background-color: pink;

}
.feature-img-container {
display: grid;
grid-template-columns: 1fr auto 1fr;
margin-bottom: 3rem;

}
}

@media (min-width: 900px) {
body {
background-color: blue;
}
}
*/