Skip to content

Commit

Permalink
almost done with media query
Browse files Browse the repository at this point in the history
  • Loading branch information
@Akshola00
Akshola00 committed Jan 15, 2024
1 parent 8c6d4ce commit 0cac38c
Show file tree
Hide file tree
Showing 4 changed files with 302 additions and 22 deletions.
13 changes: 11 additions & 2 deletions heading.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,13 @@ nav {
.contactme {
padding: 10px 15px;
}
.hamburger {
display: none;
background-color: silver;
width: 30px;
height: 3px;
margin: 5px;
}
nav > ul {
display: flex;
gap: 2rem;
Expand All @@ -63,19 +70,21 @@ nav > ul > li:hover {
border-bottom: 3px solid;
}
.wlcmimg {

background: url(./images/brennen-clifford-DlUVdeI4ec4-unsplash.jpg);
background-repeat: no-repeat;
background-size: cover;
padding-top: 30vh;
padding-bottom: 30vh;

object-fit: cover;
object-position: center;
}
.wlcmmsg {
color: white;
/* -webkit-text-stroke: 2px white; */
background: none;
font-size: 4.5rem;
font-size: 3.5rem;
font-family: RobotoSlab;
margin-left: 2%;
margin-top: -3%;
Expand Down Expand Up @@ -432,7 +441,7 @@ nav > ul > li:hover {

@media screen and (max-width: 650px) {
.swiper-navBtn {
display: none;
margin-left: 10px;
}
}

Expand Down
9 changes: 7 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,11 @@ <h1 class="logo">SholaX</h1>
<div>
<button class="my-standard-button contactme">Contact Me</button>
</div>
<div>
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
</div>
</nav>

<main>
Expand All @@ -59,7 +64,7 @@ <h3 class="asideh3"> WFH in comfort with branch's high-quality egroconomic chair
<div>
<div>
<img src="./images/joshua-koblin-eqW1MPinEV4-unsplash.jpg">
<h2>Home office <img src="./images/right_26px.png"></h2>
<h2> Home office <img src="./images/right_26px.png"></h2>
<p>Work essentials for everday use</p>
</div>
<div>
Expand Down Expand Up @@ -136,7 +141,7 @@ <h2>Description text</h2>
<h3 class="a-div-header">We sell direct
and share
the savings</h3>
<p class="font-size-setting" ">We cut out middlemen and maintain a lean line of modular inventory to
<p class="font-size-setting">We cut out middlemen and maintain a lean line of modular inventory to
save you up to 50% compared to traditional office furniture of similar quality.</p>
<button class="my-standard-button our-story-button">Our Story</button>
</div>
Expand Down
296 changes: 281 additions & 15 deletions mediaquery_phones.css
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,281 @@
@media (max-width : 595px) {
body{
background-color: antiquewhite;
margin: 10px;
}
.showing > div, .prods > div {
display: block;
}
.aside > h3{
text-align: center;
}
nav > ul {
display: none;
}
}
@media (max-width: 430px) {
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
/* background-color: antiquewhite; */
/* margin: 10px; */
}

.aside > h3 {
text-align: center;
}
nav > ul {
display: none;
position: absolute;
padding-top: 45px;
padding-bottom: 45px;
background-color: lightgray;
width: 100%;
/* display: flex; */
align-items: center;
gap: 1rem;
flex-direction: column;
margin-top: 445px;
z-index: 1;
}
nav > ul > li {
padding: 10px 15px;
background-color: lightblue;
width: 200px;
text-align: center;
border-radius: 5px;

list-style: none;
font-family: ItalianOldStyle;
font-size: 1.3rem;
/* border: 1px solid; */
/* padding: 5px 15px; */
}
.promotext {
font-size: 0.8rem;
}
.promoprice {
font-size: 1rem;
}
.promoclose {
position: absolute;
right: 2%;
margin-top: 0rem;
color: black;
font-family: poppins;
font-size: 1.5rem;
cursor: pointer;
}
.logo {
font-size: 2rem;
}
.contactme {
font-size: 1rem;
}
.hamburger {
display: block;
}
.wlcmimg {
padding-left: 2vh;
}
.aside > h3 {
font-size: 1.3rem;
}
.aside > p {
font-size: 2rem;
}
.aside > ul {
gap: 2rem;
font-size: 1.3rem;
}
.showing,
.prods,
.othersection {
padding-bottom: 50px;
}

.showing > p {
font-size: 1.7rem;
padding-bottom: 2rem;
}
.othersection > h2 {
font-size: 1.3rem;
padding-bottom: 0.5rem;
padding-top: 1.5rem;
}
.showing > div,
.prods > div {
display: flex;
flex-direction: column;
gap: 3rem;
}
.showing > div > div > img {
width: 370px;
height: 370px;
}
.showing > div > div > h2 {
font-size: 1.7rem;
}
.showing > div > div > p,
.prods > div > div > p {
font-size: 1.6rem;
margin-top: 3px;
}
.othersection > p {
font-size: 1.1rem;
text-align: center;
}
.othersection > article > div {
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 2rem;
}
.abvtxt {
margin-left: 0;
}
.fourth-section {
height: fit-content;
display: flex;
flex-direction: column;
}
.fourth-section-div {
width: 100%;
padding-top: 10px;
padding-left: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.a-div-header {
text-align: center;
margin: 0;
color: skyblue;
font-size: 1.8rem;
}
.font-size-setting {
font-size: 1.3rem;
text-align: center;
font-family: "Times New Roman";
}

.first_blue_square {
min-width: 4rem;
max-width: 4rem;
width: 7rem;
height: 12cm;
background-color: lightskyblue;
}
.second_blue_square {
min-width: 4rem;
max-width: 4rem;
display: flex;
flex-direction: column;
width: 7rem;
height: 12cm;
border: 3px dotted lightskyblue;
align-items: center;
}

.second_blue_square_inner_text {
font-size: 1.2rem;
transform: rotate(90deg);
margin-top: 195px;
margin-left: 90px;
width: 150px;
text-align: center;
height: fit-content;
/* border: 1px solid; */
}
.second_blue_square_inner_square {
margin: 0;
padding: 0;
box-sizing: border-box;
width: 3.7rem;
height: 6.1cm;
background-color: lightskyblue;
position: relative;
margin-top: 220px;
}
.squrares_description_texts {
font-size: 1.1rem;
color: black;
}
.squrares_description {
display: flex;
height: 12cm;
flex-direction: column;
justify-content: space-evenly;
text-align: right;
}
.squares_section {
width: 35%;
display: flex;
gap: 2rem;
padding-top: 40px;
padding-left: 20px;
}

.first_blue_square_text {
font-family: ItalianOldStyle;
/* position: absolute; */
margin-left: 125px;
color: black;
margin-top: 29rem;
font-size: 1rem;
text-align: center;
}
.second_blue_square_text {
font-family: ItalianOldStyle;
font-size: 1.3rem;
font-weight: bold;
position: absolute;
margin-left: 220px;
color: black;
margin-top: 29.5rem;
}
.section-6 {
padding-top: 40px;
height: fit-content;
background-color: burlywood;
display: flex;
flex-direction: column;
gap: 2rem;
align-items: center;
justify-content: space-evenly;
}
.first-text {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1.8rem;
color: black;
}
.second-text {
width: fit-content;
font-size: 1.2rem;
font-family: system-ui;
color: black;
padding-bottom: 30px;
padding-right: 30px;
padding-left: 30px;
}
.section-7 {
padding-top: 3rem;
padding-bottom: 3rem;
border: 1px solid blue;
display: flex;
flex-direction: column;
align-items:normal;
justify-content: center;
gap: 4rem;
}

.text-heading {
font-size: 1.5rem;
font-family: electra;
color: black;
text-align: center;
width: 70%;
border: 1px solid;
}

.section-7-div-1 {
width: 30%;
/* border: 4px solid blue; */
}
.section-7-div-2 {
padding: 15px;
/* border: 1px solid black; */
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
}
6 changes: 3 additions & 3 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// document.getElementById('promoclose').addEventListener('click', e => {
// document.getElementById('promo').style.display = 'none'
// })
document.getElementById('promoclose').addEventListener('click', e => {
document.getElementById('promo').style.display = 'none'
})



Expand Down

0 comments on commit 0cac38c

Please sign in to comment.