Skip to content
Snippets Groups Projects
Commit 1ffdf8bd authored by Muhammad Butt's avatar Muhammad Butt
Browse files

Merge branch 'Mansoor_01' into 'master' 

Articles and comment section

See merge request !1
parents 89dbb073 e463e75f
No related branches found
No related tags found
1 merge request!1Articles and comment section
Pipeline #3071 failed
Stage: build
Stage: test
Hide whitespace changes
Inline Side-by-side
Showing
with 0 additions and 1148 deletions
CSS/style.css deleted 100644 → 0
+ 0
− 242
View file @ 89dbb073
body{
font:15px/1.5 Arial,helvetica,sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global */
.container{
width:80%;
margin: auto;
overflow: hidden;
}
ul{
margin: 0;
padding: 0;
}
.button_1{
height: 38px;
background: #e8491d;
border: 0;
padding-left: 20px;
padding-right: 20px;
margin-right: 400px;
color: #ffffff;
}
.dark{
padding: 15px;
background: #35424a;
color: #ffffff;
margin-top: 10px;
margin-bottom: 10px;
}
/*header **/
header{
background: #35424a;
color: #ffffff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
header a{
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li{
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding{
float:left;
}
header #branding h1{
margin : 0;
}
header nav{
float: right;
margin-top: 10px;
}
header .highlight, header .current a{
color:#e8491d !important;
font-weight: bold;
}
header a:hover{
color: #cccccc;
font-weight: bold;
}
/*showcase*/
#showcase{
min-height: 400px;
background:url('../Images/showcase.jpg'), no-repeat,0 200px;
text-align: center;
color: #ffffff;
}
#showcase h1{
margin top: 100px;
font-size: 55px;
margin-bottom: 18px;
}
#showcase p{
font-size: 20px;
}
/* Newsletter*/
#newsletter p{
padding: 15px;
color: #ffffff;
background:#35424a;
}
#newsletter h1{
float: left;
}
#newsletter form{
float: right;
margin-top: 15px;
}
#newsletter input[type="email"]{
padding: 4px;
height: 25px;
width: 250px
}
/* Boxes */
#boxes{
margin-top: 20px;
}
#boxes .box{
float: left;
text-align: center;
width: 30%;
padding: 10px;
}
#Boxes .box img {
width: 90px;
}
/* Sidebar*/
aside#sidebar{
float:right;
width: 30%;
margin-top: 10px;
}
aside#sidebar .quote input, aside#sidebar .quote textarea{
width:90%;
padding:5px;
}
/* Main-col */
article#main-col{
float: left;
width: 65%;
}
/* Services*/
ul#services li{
list-style: none;
padding: 20px;
border: #cccccc solid 1px;
margin-bottom: 5px;
background:#e6e6e6;
}
footer{
padding: 20px;
margin-top: 20px;
color: #ffffff;
background-color: #e8491d;
text-align: center;
}
/*login **/
.login-page {
width: 60%;
padding: 7% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 468px;
margin: 60px auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #e8491d;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
background: #cccccc;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #e8491d;
text-decoration: none;
}
.form {
border-top: 20px;
}
form p {
float: left;
margin-bottom: 30px;
}
form #role{
background: #f2f2f2;
float: left;
margin-top: 6px;
font-family: "Roboto", sans-serif;
margin-left: 5px;
}
form label{
font-family: "Roboto", sans-serif;
margin-left: 6px;
}
/*signup **/
.signup{
padding-top: 7%;
}
/*articles shown in admins dashboard**/
table {
font:15px/1.5 Arial,helvetica,sans-serif;
border-collapse: collapse;
width: 100%;
}
Files Updated By Mansoor/Articles!.html deleted 100644 → 0
+ 0
− 86
View file @ 89dbb073
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Articles!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i,900,900i">
<link rel="stylesheet" href="styles/reset.css">
<link rel="stylesheet" href="styles/-debug.css">
<link rel="stylesheet" href="styles/article.css">
<link rel="stylesheet" href="styles/article-figure.css">
<link rel="stylesheet" href="styles/article-text.css">
<link rel="stylesheet" href="styles/article-share.css">
</head>
<body>
<article id="the-galaxies-4">
<h1><a href="#the-galaxies-4">The <em>Galaxies</em> is all there is</a></h1>
<h2>This article is about the astronomical structure.</h2>
<time datetime="07-07-2016">july. 7, 2016</time>
<p>
<em>A Galaxy is a</em>, gravitationally <a href="https://en.wikipedia.org/wiki/Galaxy">Galaxy</a> bound system of stars, stellar remnants, interstellar gas, dust, and dark matter. The word galaxy is derived from the Greek galaxias, literally "milky", a reference to the Milky Way. Galaxies range in size from dwarfs with just a few hundred million stars to giants with one hundred trillion stars, each orbiting its galaxy's center of mass.
Galaxies are categorized according to their visual morphology as elliptical, spiral, or irregular. Many galaxies are thought to have supermassive black holes at their centers. The Milky Way's central black hole, known as Sagittarius A*, has a mass four million times greater than the Sun. As of March 2016, GN-z11 is the oldest and most distant observed galaxy with a comoving distance of 32 billion light-years from Earth, and observed as it existed just 400 million years after the Big Bang. stars that never die, discover atoms as massive as suns and universes smaller than atoms.
</p>
<figure class="size-2">
<img src="./Images/download.jpg">
</figure>
<figcaption><p>The <em>Galaxy</em>.</p></figcaption>
<h3>Palm Tree</h3>
<p>
Palm trees are a botanical family of perennial lianas, shrubs, and trees. They are the only members of the family Arecaceae, which is the only family in the order Arecales. They grow in hot climates.
Well known palm trees are:
Date palm
Coconut palm
There are about 2600 species of palm trees, most of them living in tropical, subtropical, and warm temperate climates.
Palms are one of the best known and most widely planted tree families. They have held an important role for humans throughout much of history. Many common products and foods come from palms. They are often used in parks and gardens that are in areas that do not have heavy frosts.
In the past palms were symbols of victory, peace, and fertility. Today palms are a popular symbol for the tropics and for ideas that pass the test, reject the ones that fail, follow the evidence wherever it leads and question everything.
<strong>Palm trees to keep environment green.</strong>
</p>
<div class="share">
<figure class="size-2">
<img src="./Images/palm tree.jpg">
</figure>
<figcaption><p>The <em>Palm Tree</em>.</p></figcaption>
</article>
<article id="the-cosmos-2">
<h1><a href="#the-cosmos-2">The <em>Cosmos</em> is all there is</a></h1>
<h2>Author: Carl Sagan</h2>
<time datetime="03-09-2014">MAR. 9, 2014</time>
<p>
<em>A generation ago</em>, the astronomer <a href="https://en.wikipedia.org/wiki/carl_sagan">Carl Sagan</a> stood here and launched hundreds of millions of us on a great adventure the exploration of the universe revealed by science.
It's time to get going again.
We're about to begin a journey that will take us from the infinitesimal to the infinite, from the dawn of time to the distant future.
We'll explore galaxies and suns and worlds, surf the gravity waves of space-time, encounter beings that live in fire and ice, explore the planets of stars that never die, discover atoms as massive as suns and universes smaller than atoms.
</p>
<figure class="size-2">
<img src="./Images/cosmos3.jpg">
</figure>
<figcaption><p>The <em>Cosmos</em>.</p></figcaption>
<h3>COSMOS IS ALSO A STORY ABOUT US</h3>
<p>
It's the saga of how wandering bands of hunters and gatherers found their way to the stars, one adventure with many heroes.
To make this journey, we'll need imagination.
But imagination alone is not enough because the reality of nature is far more wondrous than anything we can imagine.
This adventure is made possible by generations of searchers strictly adhering to a simple set of rules test ideas by experiment and observation, build on those ideas that pass the test, reject the ones that fail, follow the evidence wherever it leads and question everything.
<strong>Accept these terms, and the cosmos is yours.</strong>
</p>
<div class="share">
<figure class="size-2">
<img src="./Images/cosmos1.jpg">
<img src="./Images/cosmos4.jpg">
</div>
</article>
</body>
</html>
\ No newline at end of file
Files Updated By Mansoor/CSS/style.css deleted 100644 → 0
+ 0
− 348
View file @ 89dbb073
body{
font:15px/1.5 Arial,helvetica,sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global */
.container{
width:80%;
margin: auto;
overflow: hidden;
}
ul{
margin: 0;
padding: 0;
}
.button_1{
height: 38px;
background: #e8491d;
border: 0;
padding-left: 20px;
padding-right: 20px;
margin-right: 400px;
color: #ffffff;
}
.dark{
padding: 15px;
background: #35424a;
color: #ffffff;
margin-top: 10px;
margin-bottom: 10px;
}
/*header **/
header{
background: #35424a;
color: #ffffff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
header a{
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li{
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding{
float:left;
}
header #branding h1{
margin : 0;
}
header nav{
float: right;
margin-top: 10px;
}
header .highlight, header .current a{
color:#e8491d !important;
font-weight: bold;
}
header a:hover{
color: #cccccc;
font-weight: bold;
}
/*showcase*/
#showcase{
min-height: 400px;
background:url('../Images/showcase.jpg'), no-repeat,0 200px;
text-align: center;
color: #ffffff;
}
#showcase h1{
margin top: 100px;
font-size: 55px;
margin-bottom: 18px;
}
#showcase p{
font-size: 20px;
}
/* Newsletter*/
#newsletter p{
padding: 15px;
color: #ffffff;
background:#35424a;
}
#newsletter h1{
float: left;
}
#newsletter form{
float: right;
margin-top: 15px;
}
#newsletter input[type="email"]{
padding: 4px;
height: 25px;
width: 250px
}
/* Boxes */
#boxes{
margin-top: 20px;
}
#boxes .box{
float: left;
text-align: center;
width: 30%;
padding: 10px;
}
#Boxes .box img {
width: 90px;
}
/* Sidebar*/
aside#sidebar{
float:right;
width: 30%;
margin-top: 10px;
}
aside#sidebar .quote input, aside#sidebar .quote textarea{
width:90%;
padding:5px;
}
/* Main-col */
article#main-col{
float: left;
width: 65%;
}
/* Services*/
ul#services li{
list-style: none;
padding: 20px;
border: #cccccc solid 1px;
margin-bottom: 5px;
background:#e6e6e6;
}
footer{
padding: 20px;
margin-top: 20px;
color: #ffffff;
background-color: #e8491d;
text-align: center;
}
/*login **/
.login-page {
padding-top: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 468px;
margin: 60px auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #e8491d;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
background: #cccccc;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #e8491d;
text-decoration: none;
}
.form {
border-top: 20px;
}
form p {
float: left;
margin-bottom: 30px;
}
form #role{
background: #f2f2f2;
float: left;
margin-top: 6px;
font-family: "Roboto", sans-serif;
margin-left: 5px;
}
form label{
font-family: "Roboto", sans-serif;
margin-left: 6px;
}
}
/*signup **/
.signup{
padding-top: auto;
}
/*articles shown in admins dashboard
organized table**/
table {
font:15px/1.5 Arial,helvetica,sans-serif;
border-collapse: collapse;
width: 80%;
}
/* fix footer */
#footeraa {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
}
/* admin button */
.adminpanelbutton {
position: relative;
background-color: #4CAF50;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
margin-left:50px;
margin-top:50px;
}
.adminpanelbutton:after {
content: "";
background: #f1f1f1;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.adminpanelbutton:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
.buttondiv{
margin-top:50px;
margin-left:200px;
}
.tableuser{
margin-top:20px;
margin-left:50px;
border-color:#000000;
}
/*delete button on usertable*/
.button {
position: relative;
background-color: #4CAF50;
border: none;
font-size: 20px;
color: #FFFFFF;
padding: 10px;
width: 100px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
margin-left:10px;
margin-top:10px;
}
.button:after {
content: "";
background: #f1f1f1;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
/* Login signup alignment*/
::-webkit-input-placeholder {
text-align:center;
}
Files Updated By Mansoor/Images/Financial-Technology-1-696x378.jpg deleted 100644 → 0
+ 0
− 0
View file @ 89dbb073
Files Updated By Mansoor/Images/Financial-Technology-1-696x378.jpg

17.6 KiB

Files Updated By Mansoor/Images/Meditation-PNG-Image.png deleted 100644 → 0
+ 0
− 0
View file @ 89dbb073
Files Updated By Mansoor/Images/Meditation-PNG-Image.png

32.6 KiB

Files Updated By Mansoor/Images/cooking.png deleted 100644 → 0
+ 0
− 0
View file @ 89dbb073
Files Updated By Mansoor/Images/cooking.png

47.7 KiB

Files Updated By Mansoor/Images/cosmos1.jpg deleted 100644 → 0
+ 0
− 0
View file @ 89dbb073
Files Updated By Mansoor/Images/cosmos1.jpg

5.58 KiB

Files Updated By Mansoor/Images/cosmos2.jpg deleted 100644 → 0
+ 0
− 0
View file @ 89dbb073
Files Updated By Mansoor/Images/cosmos2.jpg

98.8 KiB

Files Updated By Mansoor/Images/cosmos3.jpg deleted 100644 → 0
+ 0
− 0
View file @ 89dbb073
Files Updated By Mansoor/Images/cosmos3.jpg

63.1 KiB

Files Updated By Mansoor/Images/cosmos4.jpg deleted 100644 → 0
+ 0
− 0
View file @ 89dbb073
Files Updated By Mansoor/Images/cosmos4.jpg

11.4 KiB

Files Updated By Mansoor/Images/csscrashcourse.zip deleted 100644 → 0
+ 0
− 0
View file @ 89dbb073
File deleted
Files Updated By Mansoor/Images/csscrashcourse/csscheatsheet/css/style.css deleted 100644 → 0
+ 0
− 210
View file @ 89dbb073
/*
*{
margin:0;
padding:0;
}
*/
body{
background-color:#f4f4f4;
color:#555555;
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:normal;
/* Same as above */
font: normal 16px Arial, Helvetica, sans-serif;
line-height:1.6em;
margin:0;
}
a{
text-decoration: none;
color:#000;
}
a:hover{
color:red;
}
a:active{
color:green;
}
a:visited{
}
.container{
width:80%;
margin:auto;
}
.button{
background-color:#333;
color:#fff;
padding:10px 15px;
border:none;
}
.button:hover{
background:red;
color:#fff;
}
.clr{
clear:both;
}
.box-1{
background-color:#333;
color:#fff;
border-right:5px red solid;
border-left:5px red solid;
border-top:5px red solid;
border-bottom:5px red solid;
border-width:3px;
border-bottom-width:10px;
border-top-style:dotted;
border: 5px red solid;
padding-top:20px;
padding-bottom:20px;
padding-right:20px;
padding-left:20px;
/* Same as above */
padding:20px;
margin-top:20px;
margin:20px 0;
}
.box-1 h1{
font-family:Tahoma;
font-weight:800;
font-style:italic;
text-decoration:underline;
text-transform:uppercase;
letter-spacing: 0.2em;
word-spacing: 1em;
}
.box-2{
border:3px dotted #ccc;
padding:20px;
margin:20px 0;
}
.categories{
border:1px #ccc solid;
padding:10px;
border-radius:15px;
}
.categories h2{
text-align:center;
}
.categories ul{
padding:0;
padding-left:20px;
list-style:square;
list-style:none;
}
.categories li{
padding-bottom:6px;
border-bottom:dotted 1px #333;
list-style-image: url('../images/check.png');
}
.my-form{
padding:20px;
}
.my-form .form-group{
padding-bottom:15px;
}
.my-form label{
display:block;
}
.my-form input[type="text"], .my-form textarea{
padding:8px;
width:100%;
}
.block{
float:left;
width:33.3%;
border:1px solid #ccc;
padding:10px;
box-sizing:border-box;
}
#main-block{
float:left;
width:70%;
padding:15px;
box-sizing: border-box;
}
#sidebar{
float:right;
width:30%;
background-color:#333;
color:#fff;
padding:15px;
box-sizing: border-box;
}
.p-box{
width:800px;
height:500px;
border:1px solid #000;
margin-top:30px;
position:relative;
background-image:url('../images/bgimage.jpg');
background-repeat: no-repeat;
background-position:100px 200px;
background-position:center top;
}
.p-box h1{
position:absolute;
top:100px;
left:200px;
}
.p-box h2{
position:absolute;
bottom:40px;
right:100px;
}
.fix-me{
position:fixed;
top:400px;
}
.my-list li:first-child{
background: red;
}
.my-list li:last-child{
background: blue;
}
.my-list li:nth-child(5){
background: yellow;
}
.my-list li:nth-child(even){
background: grey;
}
Files Updated By Mansoor/Images/csscrashcourse/csscheatsheet/images/bgimage.jpg deleted 100644 → 0
+ 0
− 0
View file @ 89dbb073
Files Updated By Mansoor/Images/csscrashcourse/csscheatsheet/images/bgimage.jpg

123 KiB

Files Updated By Mansoor/Images/csscrashcourse/csscheatsheet/images/check.png deleted 100644 → 0
+ 0
− 0
View file @ 89dbb073
Files Updated By Mansoor/Images/csscrashcourse/csscheatsheet/images/check.png

2.82 KiB

Files Updated By Mansoor/Images/csscrashcourse/csscheatsheet/index.html deleted 100644 → 0
+ 0
− 118
View file @ 89dbb073
<!DOCTYPE html>
<html>
<head>
<title>CSS Cheat Sheet</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<div class="box-1">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
<div class="box-2">
<h1>Goodbye World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
<a class="button" href="">Read More</a>
</div>
<div class="categories">
<h2>Categories</h2>
<ul>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
<li><a href="#">Category 4</a></li>
<li><a href="test.html">Category 5</a></li>
</ul>
</div>
<form class="my-form">
<div class="form-group">
<label>Name: </label>
<input type="text" name="name">
</div>
<div class="form-group">
<label>Email: </label>
<input type="text" name="email">
</div>
<div class="form-group">
<label>Message: </label>
<textarea name="message"></textarea>
</div>
<input class="button" type="submit" value="Submit" name="">
</form>
<div class="block">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</p>
</div>
<div class="block">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</p>
</div>
<div class="block">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</p>
</div>
<div class="clr"></div>
<div id="main-block">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</p>
</div>
<div id="sidebar">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</p>
</div>
<div class="clr"></div>
<div class="p-box">
<h1>Hello</h1>
<h2>Goodbye</h2>
</div>
<ul class="my-list">
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div><!-- ./container -->
<a class="fix-me button" href="">Hello</a>
<div style="margin-top:500px;"></div>
</body>
</html>
\ No newline at end of file
Files Updated By Mansoor/Images/csscrashcourse/mywebsite/css/style.css deleted 100644 → 0
+ 0
− 91
View file @ 89dbb073
body{
background-color:#f4f4f4;
color:#555;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
line-height:1.6em;
margin:0;
}
.container{
width:80%;
margin:auto;
overflow:hidden;
}
#main-header{
background-color:coral;
color:#fff;
}
#navbar{
background-color:#333;
color:#fff;
}
#navbar ul{
padding:0;
list-style: none;
}
#navbar li{
display:inline;
}
#navbar a{
color:#fff;
text-decoration: none;
font-size:18px;
padding-right:15px;
}
#showcase{
background-image:url('../images/showcase.jpg');
background-position:center right;
min-height:300px;
margin-bottom:30px;
text-align: center;
}
#showcase h1{
color:#fff;
font-size:50px;
line-height: 1.6em;
padding-top:30px;
}
#main{
float:left;
width:70%;
padding:0 30px;
box-sizing: border-box;
}
#sidebar{
float:right;
width:30%;
background: #333;
color:#fff;
padding:10px;
box-sizing: border-box;
}
#main-footer{
background: #333;
color:#fff;
text-align: center;
padding:20px;
margin-top:40px;
}
@media(max-width:600px){
#main{
width:100%;
float:none;
}
#sidebar{
width:100%;
float:none;
}
}
\ No newline at end of file
Files Updated By Mansoor/Images/csscrashcourse/mywebsite/images/showcase.jpg deleted 100644 → 0
+ 0
− 0
View file @ 89dbb073
Files Updated By Mansoor/Images/csscrashcourse/mywebsite/images/showcase.jpg

1.18 MiB

Files Updated By Mansoor/Images/csscrashcourse/mywebsite/index.html deleted 100644 → 0
+ 0
− 53
View file @ 89dbb073
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header id="main-header">
<div class="container">
<h1>My Website</h1>
</div>
</header>
<nav id="navbar">
<div class="container">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<section id="showcase">
<div class="container">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
</h1>
</div>
</section>
<div class="container">
<section id="main">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</section>
<aside id="sidebar">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud </p>
</aside>
</div>
<footer id="main-footer">
<p>Copyright &copy; 2017 My Website</p>
</footer>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment