Skip to content
This repository was archived by the owner on Jan 14, 2024. It is now read-only.

Scotland_class_5_-Israel Alas - HTML - CSS - Week_01 #77

Closed
aalassv wants to merge 6 commits into from
Closed

Scotland_class_5_-Israel Alas - HTML - CSS - Week_01 #77

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
78606bd
Update index.html
aalassv Jun 3, 2021
f417351
Update index.html
aalassv Jun 3, 2021
84ace0b
CSS styling
aalassv Jun 4, 2021
7be66cf
Update index.html
aalassv Jun 5, 2021
2267e62
Adding grid to the OS feature section.
aalassv Jun 20, 2021
fc0b412
Update style.css
aalassv Jun 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 123 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,126 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/
/*
/* Externals */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Quicksand:wght@500&family=Staatliches&display=swap");

/*Core Styles*/

body {
margin: 0%;
padding: 0%;
font-family: "Quicksand";
background: #fff;
text-align: center;
font-size: 1.1em;
}

/*Header Styles*/

header {
width: 100%;
height: 70px;
background-color: #e9e8e8;
}

header h1.nav-bar {
position: absolute;
padding: 1px;
float: left;
margin-left: 10px;
margin-top: 1%;
font-family: "Anton";
color: #000;
}

nav ul {
width: auto;
float: right;
margin-top: 8px;
}

nav ul li {
display: inline-block;
padding: 15px 30px;
}

ol {
list-style-type: none;
}

ul {
list-style-type: none;
}

h1,
h2,
h3,
h4 {
font-family: "Staatliches", Georgia, "Times New Roman", Times, serif;
margin: 0%;
}

/*Intro Section Styles*/

.Intro-section {
width: 100%;
height: 100%;
background-color: #7dcf6c;
}

article.Intro-section {
padding-top: 30px;
text-align: center;
}

/*OS section Styles*/

.OS-section {
width: 100%;
height: 100%;
background-color: #ccceec;
}

/*OS features sections Styles*/

.os_features {
width: 100%;
height: 100%;
background-color: #cae2c5;
}

.os_features {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 1rem;
}

.os {
border-radius: 3%;
background-color: rgb(255, 255, 255);
transition: 0.3s;
}

.os:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
/*Footer*/

#contact {
padding: 0.5em;
background: rgb(252, 252, 252);
width: 100%;
height: 100%;
color: tomato;
}

img {
display: block;
width: 20rem;
height: auto;
}

.nav-bar{

}
142 changes: 123 additions & 19 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,126 @@
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>My Blog</title>
<link
href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
</body>
</html>
<main>
<body>
<header>
<h1 class="nav-bar" >Operating System Blog</h1>
<nav>
<ul>
<li ><strong><a href="#intro">Intro</a></strong></li>
<li><strong><a href="#OS">OS</a></strong></li>
<li><strong><a href="#OS_Features">OS_Features</a></strong></li>
<li><strong><a href="#contact">Contact</a></strong></li>
</ul>
</nav>
</header>
<section id="intro" class="Intro-section">
<div class="Intro-section">
<article class="Intro-section">
<h2>Introduction to Operating System</h2>
<p>An Operating System can be defined as an interface between user and hardware.
It is responsible for the execution of all the processes, Resource Allocation,
CPU management, File Management and many other tasks.
<br>The purpose of an operating system is to provide an environment in which
a user can execute programs in convenient and efficient manner.
</p>
</article>
<aside>
<p>Curios Facts</p>
<ol>
<li>General motors build the firts OS in 1950 for IBM.</li>
<li>Linus is the most versioned OS in the world.</li>
</ol>
</aside>
</div>
</section>
<section id="OS" class="OS-section">
<div class="OS-section">
<article>
<h2>Most popular OS's arround the world</h2>
<p>Quisque sed vulputate nulla. Sed quis augue at nulla ornare egestas ut ut mi. Suspendisse nec congue nisi. Quisque ac dui et lorem cursus laoreet elementum et quam. Aliquam commodo id tellus pulvinar consectetur. Proin dui nisl, scelerisque ac condimentum et, sollicitudin at justo. Morbi tincidunt justo non eros tristique placerat. Maecenas aliquam lorem at nisi lobortis efficitur. Maecenas tempor purus convallis neque porta pretium. Quisque posuere nunc nec leo ultrices, at gravida tortor pellentesque.</p>
<ul>
<li><a href="https://en.wikipedia.org/wiki/Linux" target="_blank">Linux OS</a></li>
<li><a href="https://en.wikipedia.org/wiki/Microsoft_Windows" target="_blank">Windows OS</a></li>
<li><a href="https://en.wikipedia.org/wiki/MacOS" target="_blank">MAC OS</a></li>
<li><a href="https://en.wikipedia.org/wiki/OpenVMS" target="_blank">VMS OS</a></li>
<li><a href="hhttps://en.wikipedia.org/wiki/IBM_i" target="_blank">OS / 400</a></li>
</ul>
</article>
</div>
</section>
<section id="OS_Features" class="os_features" >
<div >
<article>
<h2>Principal features of the OS's </h2>
<p><i> operating system performs several key functions:</i></p>
<ul class="os_features">
<li>
<div class="os">
<p><b>Interface</b> - provides a user interface so it is easy to interact with the computer</p>
<p>Quisque sed vulputate nulla. Sed quis augue at nulla ornare egestas ut ut mi. Suspendisse nec congue nisi. Quisque ac dui et lorem cursus laoreet elementum et quam. Aliquam commodo id tellus pulvinar consectetur. Proin dui nisl, scelerisque ac condimentum et, sollicitudin at justo. Morbi tincidunt justo non eros tristique placerat. Maecenas aliquam lorem at nisi lobortis efficitur. Maecenas tempor purus convallis neque porta pretium. Quisque posuere nunc nec leo ultrices, at gravida tortor pellentesque.</p>
<img src="https://bam.files.bbci.co.uk/bam/live/content/zsxgd2p/medium" alt="interface">
</div>
</li>
<li>
<div class="os">
<p><b>Manages the CPU</b> - runs applications and executes and cancels processes</p>
<p>Quisque sed vulputate nulla. Sed quis augue at nulla ornare egestas ut ut mi. Suspendisse nec congue nisi. Quisque ac dui et lorem cursus laoreet elementum et quam. Aliquam commodo id tellus pulvinar consectetur. Proin dui nisl, scelerisque ac condimentum et, sollicitudin at justo. Morbi tincidunt justo non eros tristique placerat. Maecenas aliquam lorem at nisi lobortis efficitur. Maecenas tempor purus convallis neque porta pretium. Quisque posuere nunc nec leo ultrices, at gravida tortor pellentesque.</p>
<img src="https://bam.files.bbci.co.uk/bam/live/content/zgtcjxs/medium" alt="manages the CPU">
</div>
</li>
<li>
<div class="os">
<p><b>Multi-tasks</b> - allows multiple applications to run at the same time</p>
<p>Vivamus ut efficitur massa, porta hendrerit metus. Aliquam varius mollis metus, tempor molestie dolor. Nunc in metus aliquet, lobortis ex id, laoreet augue. Nam eleifend, ante vitae ultricies ornare, risus tellus accumsan justo, ac vulputate ipsum odio eget erat. Nullam ac convallis ligula, in pharetra lorem. Praesent ullamcorper blandit augue non condimentum. Suspendisse potenti. Aenean pellentesque neque eu lectus bibendum, a bibendum tortor dapibus.</p>
<img src="https://bam.files.bbci.co.uk/bam/live/content/zf6rwmn/medium" alt="multi-tasks">
</div>
</li>
<li>
<div class="os">
<p><b>Manages memory</b> - transfers programs into and out of memory, allocates free space between programs, and keeps track of memory usage</p>
<p>Phasellus varius neque at lorem interdum tempor. Integer accumsan nec enim ac aliquam. Fusce rhoncus sapien non tincidunt aliquet. Donec consectetur congue tempus. Nulla dignissim dui congue justo rhoncus tincidunt. Nulla hendrerit porttitor tincidunt. Maecenas convallis ex sed nisl pulvinar, a dignissim diam tempor. Sed luctus facilisis justo sit amet rutrum. Maecenas commodo nisl ex, at blandit mauris commodo tempus.</p>
</div>
</li>
<li>
<div class="os">
<p><b>Manages peripherals</b> - opens, closes and writes to peripheral devices such as storage attached to the computer</p>
<img src="https://bam.files.bbci.co.uk/bam/live/content/zkfdxnb/medium" alt="manages peripheral">
</div>
</li>
<li>
<div class="os">
<p><b>Organises</b> - creates a file system to organise files and directories</p>
</div>
</li>
<li>
<div class="os">
<p><b>Security</b> - provides security through user accounts and passwords</p>
</div>
</li>
<li>
<div class="os">
<p><b>Utilities</b> - provides tools for managing and organising hardware</p>
<img src="https://bam.files.bbci.co.uk/bam/live/content/z8yw6sg/medium" alt="utilities">
</div>
</li>
</ul>
</article>
</div>
</section>
<script src="" async defer></script>
</body>
</main>
<footer id="contact">
<p>Author: Israel Alejandro Quintanilla Alas</p>
<p><a href="mailito:a.alas.sv@gmail.com">a.alas.sv@gmail.com</a></p>
&copy: 2021 Israel Quintanilla - Code Your Future (Homework)
</footer>
</html>