Skip to content

Instantly share code, notes, and snippets.

@anshumankmr

anshumankmr/index.html

Created February 13, 2022 07:10
Show Gist options
  • Save anshumankmr/cd2d87e688704bc649cf604c19f4b9bb to your computer and use it in GitHub Desktop.
Save anshumankmr/cd2d87e688704bc649cf604c19f4b9bb to your computer and use it in GitHub Desktop.
Download ZIP
FrontEnd Master's Project: HTML & CSS for COMPLETE INTRO TO WEB DEVELOPMENT
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap" rel="stylesheet">
<title>News</title>
</head>
<body>
<div class="content">
<div class="heading">
<div class="header-text">The New's Times</div>
</div>
<div class="row">
<div class="item small-item">
<div class="sub-header">Student Learns HTML</div>
<div class="text">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse<
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum." </div>
</div>
<div class="item large-item">
<div>
<div class="sub-header">BREAKING: Puppies Are Adorable </div>
<div class="image" class="sub-header-image"> <img src="http://placecorgi.com/250" /> </div>
<div class="text"> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
</div>
<div class="item small-item">
<div class="sub-header"> CSS Is Apparently a Thing</div>
<div class="text"> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
</div>
</div>
<div class="row">
<div class="item small-item">
<div class="sub-header">Student Learns HTML</div>
<div class="text">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse<
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum." </div>
</div>
<div class="item x-large-item">
<div class="topic type1">
<div class="left"></div>
<div class="center">Politics</div>
<div class="right"></div>
</div>
<div class="topic type2">
<div class="left"></div>
<div class="center">Politics</div>
<div class="right"></div>
</div>
<div class="topic type3">
<div class="left"></div>
<div class="center">Politics</div>
<div class="right"></div>
</div>
<div class="topic type4">
<div class="left"></div>
<div class="center">Politics</div>
<div class="right"></div>
</div>
<div class="topic type5">
<div class="left"></div>
<div class="center">Politics</div>
<div class="right"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
styles.css
body{
display: flex;
flex-direction: column;
}
.content {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.header-text {
font-family: 'Cedarville Cursive', cursive;
display: flex;
font-size: xxx-large;
}
.heading {
display: flex;
justify-content: center;
}
.row{
display: flex;
flex-direction: row;
}
.item{
display: flex;
flex-direction: column;
border:1px;
border-color: black;
border-style: solid;
}
.large-item{
max-width:50%;
}
.small-item{
max-width: 25%;
}
.x-large-item{
width:75%;
}
.sub-header{
font-style: italic;
justify-content: center;
display: flex;
font-size:x-large;
}
.text {
margin-left: 1%;
margin-right: 1%;
display: flex;
overflow-wrap: anywhere;
}
.topic {
font-family: sans-serif;
height: 20%;
font-size: large;
display: flex;
flex-direction: column;
}
.image {
display: flex;
justify-content: center;
align-items: center;
width: auto;
height: auto;
}
.sub-header-image {
width:50px;
height:50px;
}
.type1{
background-color: yellow;
}
.type2{
background-color: powderblue;
}
.type3{
background-color: greenyellow;
}
.type4{
background-color: blue;
}
.type5{
background-color: purple;
}
.left, .right {
flex: 1;
display: flex;
}
.center{
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif ;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment