Skip to content

Commit

Permalink
First Commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@LAHSIVA
LAHSIVA committed Jan 7, 2024
0 parents commit c2fda13
Show file tree
Hide file tree
Showing 3 changed files with 409 additions and 0 deletions.
153 changes: 153 additions & 0 deletions index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}

.header{
width: 100%;
background-color: #beb3b3;
padding: 0px 50px;
}

.header_container{
width: 100%;
height: 80px;
/* background-color: red; */
display: flex;
justify-content: space-between;
}

.logo{
width: 10%;
height: 80px;
background-color:#8b4b7d;
font-size: 20px;
font-family: segoe UI;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
border-radius: 80%;
}

.search_ops{
width: 50%;
height: 80px;
/* background-color: lightgreen; */
padding: 0px 30px;
display: flex;
justify-content: center;
align-items: center;
column-gap: 2%;
}

.inp{
width: 35%;
height: 40px;
font-size: 17px;
border-radius: 10px;
border: 1px solid lightgray;
text-indent: 10px;
outline: none;
transition: .4s;

}

.inp:focus {
box-shadow: 0 0 8px lightblue;
}

.btn{
padding: 12px 30px;
text-transform: uppercase;
font-weight: bold;
border-radius: 10px;
background-color: #1c83d5;
color: white;
border: none;
cursor: pointer;
transition: .4s;
}

.btn:hover{
background-color: #116ab1;
}


/* css for news section */

.news{
width: 100%;
padding: 50px;
display: flex;
flex-wrap: wrap;
column-gap: 2%;
row-gap:25px;
background-color: #837b9d;
}

.news_card{
width: 49%;
background-color: rgba(31, 36, 70, 0.678);
display: flex;
box-shadow: 0 0 5px #090909;
border-radius: 10px;
overflow: hidden;
padding: 20px;
}

.news_img{
height: 300px;
width: 40%;
/*background-color: yellow;*/
/* overflow: hidden; */
}

.news_img > img {
height: 90%;
width:100%;
border-radius: 90%;
padding-bottom: 10%;
margin-top: 20%;
border-color: rgb(91, 103, 99);
border-width: 10px;
}

.news_details{
width:60%;
background-color: rgb(46, 74, 128);
padding: 20px;
font-family: segoe UI;
display: flex;
flex-direction: column;
row-gap: 15px;
align-items: flex-start;
}

.author{
color: rgb(238, 232, 232);
font-style: italic;

}

.content{
color: #dbcbcb;
}


.loading-spinner {
display: inline-block;
border: 4px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top: 4px solid #3498db;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
margin: 20px auto; /* Adjust the margin as needed */
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
140 changes: 140 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>News App</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>

<!-- header -->

<header class="header">
<div class="header_container">

<div class="logo">
<p>News App</p>
</div>

<div class="search_ops">

<select class="inp" id="country">
<option value="">Select Country</option>
<option value="ar">Argentina</option>
<option value="au">Australia</option>
<option value="at">Austria</option>
<option value="be">Belgium</option>
<option value="br">Brazil</option>
<option value="bg">Bulgaria</option>
<option value="ca">Canada</option>
<option value="cn">China</option>
<option value="co">Colombia</option>
<option value="cu">Cuba</option>
<option value="cz">Czech Republic</option>
<option value="eg">Egypt</option>
<option value="fr">France</option>
<option value="de">Germany</option>
<option value="gr">Greece</option>
<option value="hk">Hong Kong</option>
<option value="hu">Hungary</option>
<option value="in">India</option>
<option value="id">Indonesia</option>
<option value="ie">Ireland</option>
<option value="il">Israel</option>
<option value="it">Italy</option>
<option value="jp">Japan</option>
<option value="lv">Latvia</option>
<option value="lt">Lithuania</option>
<option value="my">Malaysia</option>
<option value="mx">Mexico</option>
<option value="ma">Morocco</option>
<option value="nl">Netherlands</option>
<option value="nz">New Zealand</option>
<option value="ng">Nigeria</option>
<option value="no">Norway</option>
<option value="ph">Phillipines</option>
<option value="pl">Poland</option>
<option value="pt">Portugal</option>
<option value="ro">Romania</option>
<option value="ru">Russia</option>
<option value="sa">Saudi Arabia</option>
<option value="sk">Slovakia</option>
<option value="si">Slovenia</option>
<option value="za">South Africa</option>
<option value="kr">South Korea</option>
<option value="se">Sweden</option>
<option value="ch">Switzerland</option>
<option value="tw">Taiwan</option>
<option value="th">Thailand</option>
<option value="tr">Turkey</option>
<option value="ae">UAE</option>
<option value="ua">Ukraine</option>
<option value="gb">United Kingdom</option>
<option value="us">United States</option>
<option value="ve">Venezuela</option>

</select>

<select class="inp" id="category">
<option value="">Select Category</option>
<option value="politics">Politics</option>
<option value="business">Business</option>
<option value="technology">Technology</option>
<option value="government">government</option>
<option value="education">education</option>
<option value="health">health</option>
<option value="environment">environment</option>
<option value="economy">economy</option>
<option value="fashion">fashion</option>
<option value="sport">sport</option>

</select>

<button class="btn" onclick="search()">
Get News
</button>

</div>
</div>
</header>




<!-- news part -->

<section class="news" id="news">

<!-- <div class="news_card">
<div class="news_img">
<img src="./dummy_img.jpg">
</div>
<div class="news_details">
<h1 class="title">Pollution alert in some cities.</h1>
<p class="author"> - Lalit Kumar</p>
<p class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti unde modi aperiam dolore placeat, dolorem accusamus, laudantium rem rerum aliquam, in quia vel neque.
</p>
<a target="blank">
<button class="btn">
Read Full Article
</button>
<a>
</div>
</div> -->



</section>



<script src="./index.js"></script>
</body>
</html>
Loading

0 comments on commit c2fda13

Please sign in to comment.