Question: Modify the following code such that if the screen is minimized, the page layout becomes like this. The current page is this Please modify it
Modify the following code such that if the screen is minimized, the page layout becomes like this. The current page is this 
Please modify it using grid and media queries to become like this when it's minimized. 
2. You may use any font, images, or background of your choice, as long as the page produced closely resembles the provided design. 3. Use flexbox to define the layout of activity cards and the page navigation and wherever you see it appropriate. 4. Use grid and media queries for the overall page layout and wherever you see it appropriate.
html code:
- Home
- About Us
- Contact
Hi, we are
the Computing Club.
A QU Student Club.
Empowering innovation through technology and community.
css code:
/*Give the website default margin and padding.*/
* {
margin: 0;
padding: 0;
font-family: sans-sarif;
}
/*Design the class navbar*/
.navbar {
width: 85%;
margin: auto;
padding: 35px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
/*Design the class logo*/
.logo {
max-width: 100px;
height: auto;
cursor: pointer;
border-radius: 50%;
}
/*Design the tag li inside the class navbar*/
.navbar ul li {
list-style: none;
display: inline-block;
margin: 0 30px;
position: relative;
}
/*Design the tag a inside the class navbar*/
.navbar ul li a {
text-decoration: none;
color: #000;
}
/*Design the the class content*/
.content{
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
/*Design the tag h1 inside the class content*/
.content h1{
margin-top: 20px;
}
/*Design the tag p inside the class content*/
.content p{
margin: 20px auto;
font-weight: 400;
line-height: 25px;
}
/*Design the class inside*/
.inside{
color: #0E86D4;
display: inline-block;
font-weight: 400;
}
/*Design the tag button*/
button{
width: 150px;
padding: 10px 0;
text-align: center;
margin: 20px 10px;
border-radius: 25px;
font-weight: bold;
border: 2px solid #009688;
color: #808080;
cursor: pointer;
}
/*Design the tag span*/
span{
height: 100%;
width: 0;
border-radius: 25px;
left: 0;
bottom: 0;
z-index: -1;
transition: 0.5s;
}
/*If someone hover on button then change the color of the button.*/
button:hover{
background: #0E86D4;
color: white;
}
/*It makes the website responsive, if the screen size is small then it reacts accordingly.*/
@media screen and (max-width: 1200px)
{
.logo{
display: block;
}
}
Empowering innovation through technology and community. Empowering innovation through technology and communityStep by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
Study Help