107 804
Assignments Done
100%
Successfully Done
In November 2024
In November 2024
Your physics assignments can be a real challenge, and the due date can be really close — feel free to use our assistance and get the desired result.
Physics
Be sure that math assignments completed by our experts will be error-free and done according to your instructions specified in the submitted order form.
Math
Our experts will gladly share their knowledge and help you with programming projects. Keep up with the world’s newest programming trends.
Programming
Answer to Question #210700 in HTML/JavaScript Web Application for gowtham
Question #210700
Articles Page
In this assignment, let's build a Articles Page by applying the concepts we learned till now. You can use the Bootstrap concepts and CCBP UI Kit as well.
Resources
Use the image URLs given below.
Categories Icons Images
- https://assets.ccbp.in/frontend/static-website/articles-technology-icon-img.png
- https://assets.ccbp.in/frontend/static-website/articles-science-icon-img.png
- https://assets.ccbp.in/frontend/static-website/articles-healthcare-icon-img.png
- https://assets.ccbp.in/frontend/static-website/articles-business-icon-img.png
Carousel Images (Technology)
- https://assets.ccbp.in/frontend/static-website/articles-technology-c1-img.png
- https://assets.ccbp.in/frontend/static-website/articles-technology-c2-img.png
- https://assets.ccbp.in/frontend/static-website/articles-technology-c3-img.png
Carousel Images (Science)
- https://assets.ccbp.in/frontend/static-website/articles-science-c1-img.png
- https://assets.ccbp.in/frontend/static-website/articles-science-c2-img.png
Expert's answer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
<style>
html {
box-sizing: border-box;
}
*,
*::after,
*::before {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
font-family: 'Bree Serif', serif;
}
.container {
min-width: 100vw;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
background-color: #0E0E0E;
}
.wrapper {
width: 320px;
height: 100vh;
background-color: #fff;
}
.header {
background-color: #894bca;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0 20px 25px;
}
.header h1 {
width: 120px;
color: #fff;
font-size: 22px;
font-weight: normal;
}
.header img {
width: 150px;
display: block;
}
.main {
padding: 40px 0 0 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
position: relative;
background-color: #fff;
top: -15px;
}
.main h2 {
font-size: 18px;
font-weight: normal;
color: #f780c3;
}
.store-list {
list-style-type: none;
}
.store-item {
margin-top: 30px;
}
.store-link {
display: flex;
align-items: flex-start;
justify-content: space-between;
text-decoration: none;
}
.store-link img {
display: block;
}
.content {
display: block;
width: 78%;
}
.content h3 {
color: #323f4b;
margin-bottom: 5px;
margin: 0;
padding: 0;
}
.content p {
font-size: 13px;
color: #7b8794;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<header class="header">
<h1>Shop in your favourite stores</h1>
<img src="https://assets.ccbp.in/frontend/static-website/stores-img.png" alt="picture">
</header>
<main class="main">
<h2>Select your store with one click</h2>
<ul class="store-list">
<li class="store-item">
<a href="#" class="store-link">
<img src="https://assets.ccbp.in/frontend/static-website/amazon-logo-img.png" alt="store-img" width="50px">
<span class="content">
<h3>Amazon</h3>
<p>Online shopping Free shipping & Cash on delivery ...</p>
</span>
</a>
</li>
<li class="store-item">
<a href="#" class="store-link">
<img src="https://assets.ccbp.in/frontend/static-website/ikea-logo-img.png" alt="store-img" width="50px">
<span class="content">
<h3>IKEA</h3>
<p>Explore our furniture & home furnishing range. IKEA is a global leader...</p>
</span>
</a>
</li>
<li class="store-item">
<a href="#" class="store-link">
<img src="https://assets.ccbp.in/frontend/static-website/bewakoof-logo-img.png" alt="store-img" width="50px">
<span class="content">
<h3>Bewakoof</h3>
<p>A Lifystyle Fashion Brand That Offers Creative and Distinctive Fashion...</p>
</span>
</a>
</li>
<li class="store-item">
<a href="#" class="store-link">
<img src="https://assets.ccbp.in/frontend/static-website/flipkart-logo-img.png" alt="store-img" width="50px">
<span class="content">
<h3>Flipkart</h3>
<p>Wide Range of Genious Products, Easy Returns, Cash on Delivary, Browse Now...</p>
</span>
</a>
</li>
</ul>
</main>
</div>
</div>
</body>
</html>
NEED A FAST EXPERT'S RESP
Learn more about our help with Assignments: Programming & Computer Science
-
![Help me with my assignment!]()
Who Can Help Me with My Assignment
There are three certainties in this world: Death, Taxes and Homework Assignments. No matter where you study, and no matter…
-
![How to finish assignment]()
How to Finish Assignments When You Can’t
Crunch time is coming, deadlines need to be met, essays need to be submitted, and tests should be studied for.…
-
![Math Exams Study]()
How to Effectively Study for a Math Test
Numbers and figures are an essential part of our world, necessary for almost everything we do every day. As important…
Finding a professional expert in "partial differential equations" in the advanced level is difficult.
You can find this expert in "Assignmentexpert.com" with confidence.
Exceptional experts! I appreciate your help. God bless you!
#340153 on Dec 2023
#340153 on Dec 2023
Comments
Leave a comment