Skip to content

Commit

Permalink
ajj news leading page
Browse files Browse the repository at this point in the history
  • Loading branch information
@moizali125
moizali125 committed Feb 15, 2024
0 parents commit 17587ef
Show file tree
Hide file tree
Showing 59 changed files with 2,184 additions and 0 deletions.
Binary file added Nafees Nastaleeq v1.02(VOLT project).ttf
Binary file not shown.
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# Aaj-News-Web-UI-Clone
In this Repository, I have designed User Interface of "https://www.aajenglish.tv/"
44 changes: 44 additions & 0 deletions Style-Sheets/Adjacent-nav-sec.CSS
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
@font-face {
font-family: Nafees;
src: url(./../Nafees\Nastaleeq\v1.02\(VOLT\project\).ttf);
}

/* others container */
.othrs-container {
width: 100%;
height: 9vh;
font-family: "Fjalla One", "Roboto Serif", sans-serif, "Times New Roman",
Times, serif;
font-size: 1.4rem;
font-weight: 600;
border-top: 3px solid black;
border-bottom: 3px solid black;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}

.others-element-one {
display: inline;
width: fit-content;
height: fit-content;
padding-right: 1%;
padding-left: 1%;
text-align: center;
border-right: 1px solid black;
}

.othrs-a-sec {
text-decoration: none;
color: black;
}

.othrs-a-sec:hover {
color: orange;
}

.search-icon {
color: #9fa6b2;
font-size: 1.5rem;
}
90 changes: 90 additions & 0 deletions Style-Sheets/Footer.CSS
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
/* Main Section */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,opsz,wght@0,8..144,100;0,8..144,200;0,8..144,300;1,8..144,100;1,8..144,200;1,8..144,300&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Roboto+Serif:ital,opsz,wght@0,8..144,100;0,8..144,200;0,8..144,300;1,8..144,100;1,8..144,200;1,8..144,300&display=swap');

@font-face {
font-family: Nafees;
src: url(./../Nafees\ Nastaleeq\ v1.02\(VOLT\ project\).ttf);
}
/* ------------------------------------------------- */
/* Foooter */
.foot {
width: 100%;
/* border:2px solid black; */
margin-top: 1%;
height: 10vh;
height: fit-content;
padding: 1%;
display: flex;
flex-direction: row;
align-items: center;
}

/* Foot Element 1 */
.foot-element-1 {
display: flex;
margin-left: 8%;
flex-direction: column;
width: 16vw;
height: fit-content;
text-align: center;
}

/* Socila Icons */
.social-icons {
/* margin-left: 8vw; */
display: flex;
flex-direction: row;
align-items: center;
width: 12vw;
height: fit-content;
/* border: 2px solid red; */
padding: 1%;
/* padding-bottom: 1%; */
}

/* Social Anchor */
.social-anchor {
text-decoration: none;
margin: 0%;
padding: 0%;
width: fit-content;
height: fit-content;
}

.social-img {
width:80%;
margin-left: 0%;
}

.foot-para {
display: inline-block;
text-align: left;
font-size: 0.6rem;
margin-left: -2vw;
font-family: "Roboto Serif", 'Times New Roman', Times, serif, sans-serif;
}

/* Foot Element 2 */
.foot-element-2{
padding: 1%;
width: 60%;
text-align: center;
}


/* Foot Span Anchor */
.foot-span-anchor{
text-decoration: none;
}

.foot-span{
color: black;
font-family:"Fjalla One","Roboto Serif", 'Times New Roman', Times, serif, sans-serif;
font-size: 0.9rem;
font-weight: 300;
padding-right: 0.5%;
padding-left: 0.5%;
border-right: 2px solid black;
}
236 changes: 236 additions & 0 deletions Style-Sheets/Main-sec-2.CSS
Original file line number Diff line number Diff line change
@@ -0,0 +1,236 @@
/* Main Section */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,opsz,wght@0,8..144,100;0,8..144,200;0,8..144,300;1,8..144,100;1,8..144,200;1,8..144,300&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Roboto+Serif:ital,opsz,wght@0,8..144,100;0,8..144,200;0,8..144,300;1,8..144,100;1,8..144,200;1,8..144,300&display=swap');
/* Nafees Nastaleeq Font Face */
@font-face {
font-family: Nafees;
src: url(./../Nafees\ Nastaleeq\ v1.02\(VOLT\ project\).ttf);
}
/* ------------------------------------------------- */
.flex-content-mid {
display: flex;
flex-direction: column;
height: fit-content;
width: 40%;
margin-top: 3%;

}

.main-sec2 {
margin-top: 6%;
padding-bottom: 2%;
/* border-bottom: 2px double rgb(114, 114, 114); */
}

/* Recomended Legend */
.legend-mid-main {
width: fit-content;
height: fit-content;
border: 2px solid black;
color: #fff;
background-color: #000;
font-family: "Fjalla One", "Roboto Serif", sans-serif, 'Times New Roman', Times, serif;
font-size: 1.6rem;
font-weight: 300;
padding-right: 7px;
padding-left: 7px;
border-radius: 5px;
}

/* Mid MAin div */
.mid-main-div {
width: 38vw;
border: 1px solid black;
height: fit-content;
display: flex;
flex-direction: column;
flex-wrap: wrap;
border-radius: 5px;
padding-bottom: 2%;
}


.img-left {
width: 99%;
margin: 1%;
padding: 6%;
}

.img-right {
width: 95%;
margin: 1%;
height: 24vh;
padding: 2%;
}

/* img div */
.img-div {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
float: left;
justify-content: space-evenly;
align-items: baseline;
}

/* image anchor */
.mid-anchor {
text-decoration: none;
color: #000;
}

/* mid images heading */
.mid-img-head {
font-size: 1.1rem;
margin-left: 4%;
margin-top: 0%;
text-align: left;
text-wrap: wrap;
display: inline-block;
width: fit-content;
}


/* Animate Div */
.animate-news {
width: 48vw;
height: 17vh;
border-top: 2px solid rgb(114, 114, 114);
border-bottom: 2px solid rgb(114, 114, 114);
margin-top: 4%;
}

.div-one {
/* margin-top: 4%; */
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
justify-content: center;
width: 100%;
height: 100%;
/* border: 2px solid black; */
}

.div-one>a {
text-decoration: none;
color: black;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}

.div-one>a>img {
display: inline-block;
padding: 1%;
width: 80px;
height: 80px;
border-radius: 50%;
}

.div-one>a>p {
width: 100%;
font-size: 1.5rem;
display: inline-block;
text-align: justify;
height: fit-content;
font-family: "Roboto Serif", sans-serif, 'Times New Roman', Times, serif;
}

/* Recap Class */
.recap-class {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 48vw;
height: 10vh;
padding: 1%;
/* border: 2px solid black; */
}

.waste-extra {
width: 23%;
height: 0.6vh;
border-top: 1px solid rgb(114, 114, 114);
border-bottom: 1px solid rgb(114, 114, 114);
}

.waste-extra-1 {
width: 24.5%;
height: 0.6vh;
border-top: 1px solid rgb(114, 114, 114);
border-bottom: 1px solid rgb(114, 114, 114);

}

.recap-class>img{
width: 4%;
/* padding: 1%; */
}

.recap-class>span{
font-size: 1.7rem;
font-family:"Fjalla One" ,"Roboto Serif", sans-serif, 'Times New Roman', Times, serif;
/* padding: 0.5%; */
}

/* Main Video Section */
/* Video Section */
.video-sec-anchors{
padding: 0.5%;
/* border: 2px solid black; */
width: 50vw;
height: fit-content;
}

.video-main {
/* border: 2px solid black; */
width: 100%;
height: fit-content;
padding: 0.7%;
display: flex;
/* float: left; */
align-items: center;
justify-content: center;
box-sizing: border-box;
}


.video-main>a>img {
width: 100%;
padding: 2%;
margin-left: 1%;
margin-right: 1%;
}

.video-main>a {
text-decoration: none;
margin-right: 2%;
margin-left: 1%;
color: black;
font-family: "Nafees Nastaleeq", "Fjalla One", "Roboto Serif", sans-serif, 'Times New Roman', Times, serif;
/* font-weight: 100; */
text-align: justify;
}

.video-main>a:hover {
text-decoration: underline;
text-decoration-color: #02BB9B;
font-size: 1.1rem;
}


.video-icon{
display: block;
padding: 1%;
float: left;
text-align: center;
width: fit-content;
height: fit-content;
font-size: 0.5rem;
margin-bottom: 2vh;
background-color: #f69223;
}
Loading

0 comments on commit 17587ef

Please sign in to comment.