# Full Stack Odyssey

Before we dive into topics, we need two pieces of software

1. Web Browser
    
2. Code Editor
    

* After writing the code in the code editor, a web browser is needed to view the website.
    

### What is HTML?

* HTML is an acronym which stands for **Hyper Text Markup Language** which is used for creating web pages and web applications. This is the tool we use to create Websites.
    
* **Hyper text** means a text has a link within it.
    
* **Markup Language** is a system of annotating a document to describe its structure and presentation. It uses tags or codes to define elements such as heading, paragraph, lists, images, links and more.
    

### What is web pages, website, web application?

* **Web Pages:-** It is a document which is commonly written in HTML, which can be displayed in a web browser such as Firefox, Google Chrome, Apple Safari, Microsoft edge.
    
* **Website:-** It is a collection of web pages and related content that is identified by a common domain name and published on at least one web server.
    
* **Web application:-** A **web application** (or web app) is application software that is accessed using a web browser.
    

**Task1:-**

### Buttons which are used on various websites

```xml
  <button class="subscribe-btn">SUBSCRIBE</button>
    <button class="join-btn">JOIN</button>
    <button class="tweet-btn">Tweet</button>
    <button class="uber-rn-btn">Request now</button>
    <button class="amazon-add2cart-btn">Add to Cart</button>
    <button class="github-btn">Sign up</button>
    <button class="bootstrap-getstarted-btn">Get started</button>
    <button class="bootstrap-download-btn">Download</button>
    <button class="linkedin-apcw-btn">Apply on company website</button>
    <button class="linkedin-save-btn">Save</button>
```

```css
.subscribe-btn{
    vertical-align: top;
    background: rgb(200, 0, 0);
    color : white;
    font-weight: 500px;
    padding: 8px;
    border : none;
    border-radius: 2px;
    cursor :pointer;
    margin: 5px;
}
.join-btn{
    background: white;
    color: rgb(2, 158, 255);
    border-color:  rgb(0, 21, 255);
    vertical-align: top;
    font-weight: 700px;
    border-style: solid;
    border-radius: 3px;
    cursor :pointer;
    border-width : thin;
    margin: 5px;
    padding: 7px;
}
.tweet-btn{
    background: rgb(2, 158, 255);
    color: white;
    border: none;
    border-radius: 15px;
    vertical-align: top;
    font-weight: 700px;
    padding: 8px 10px;
    font-size: 15px;
    cursor :pointer;
    margin: 5px;
}
.uber-rn-btn{
    vertical-align: top;
    background: black;
    color: white;
    padding: 7px;
    border: none;
    cursor: pointer;
    margin: 5px;
}
.amazon-add2cart-btn{
    vertical-align: top;
    background-color: rgb(237, 249, 5);
    color: black;
    border-radius: 25px;
    padding : 10px 20px;
    border: none;
    cursor: pointer;
    margin: 5px;
}
.github-btn{
    vertical-align: top;
    padding: 9px 25px;
    color: white;
    background: rgb(28, 160, 28);
    border-radius: 3px;
    border: none;
    cursor: pointer;
    margin: 5px;
}
.bootstrap-getstarted-btn{
    vertical-align: top;
    background: #563d7c ;
    color : white;
    font-weight: 500px;
    padding: 9px 25px;
    border : none;
    border-radius: 2px;
    cursor :pointer;
    margin: 5px;
}
.bootstrap-download-btn{
    vertical-align: top;
    background: white;
    border-width : thin;
    color :  #563d7c;
    font-weight: 500px;
    padding: 9px 25px;
    border-style: solid;
    border-color : #563d7c;
    border-radius: 2px;
    cursor :pointer;
    margin: 5px;
}
.linkedin-apcw-btn{
    vertical-align: top;
    background-color:  rgb(20, 72, 155);;
    border-width: thin;
    font-size: 15px;
    color: white;
    border: rgb(20, 72, 155);
    padding: 8px 15px;
    border-radius: 15px;
    cursor :pointer;
    margin: 5px;
}

.linkedin-save-btn{
    background: white;
    padding: 7px 20px;
    color: rgb(20, 72, 155);
    border-color: rgb(20, 72, 155);
    border-radius: 25px;
    font-size: 15px;
    border-width : thin;
    margin: 5px;
    vertical-align: top;
}
```

ex:- rgb(237, 6, 6); ---&gt; minimum value starts from 0 and maximum value 255.  
rgba --&gt; a stands for opacity of the color  
r-red(0-255)  
g-green(0-255)  
b-blue(0-255)

### **output:-**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706115140238/ea5bad56-a367-48ee-bdff-fc7a6ccab1fb.png align="center")

**Task2:-**

```xml
 <a href="https://www.amazon.in/?&tag=googhydrabk1-21&ref=pd_sl_7hz2t19t5c_e&adgrpid=155259815513&hvpone=&hvptwo=&hvadid=674842289437&hvpos=&hvnetw=g&hvrand=9891856701101980203&hvqmt=e&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=9062163&hvtargid=kwd-10573980&hydadcr=14453_2316415">Back to Amazon</a>
    <p class="title">Nike Black Running Shoes</p>
    <p class="price"> $39 - in stock.</p>
    <p class="delivery">Free delivery tomorrow.</p>
    <button class="amz-atc-btn">Add to cart</button>
    <button class="bn">Buy now</button>
```

```css
a{color: rgb(0, 113, 133);
    font-size: 15px;

}
.title{
    font: bold;
    font-size: 20px;
    color: black;
    font-weight: 700;
}
.price {
    color: rgb(0, 118, 0);
    font: bold;
}
.delivery{
    color: black;
    font-size: 12px;
}
.amz-atc-btn{
    background: rgb(255, 216, 20);
    font-size: 10px;
    border: none;
    color: black;
    border-radius: 20px;
    padding: 5px;
    width: 80px;
    font-weight: 400;

}
.bn{
    background: rgb(255, 164, 28);
    font-size: 10px;
    border: none;
    color: black;
    border-radius: 20px;
    padding: 5px;
    width: 80px;4
    font-weight: 400;
}
```

**output:-**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706185141269/40b711a1-96b8-4788-aca1-330ddfe5cd8e.png align="center")

## **pseudo class:-**

**It basically add extra styles in certain situation.**  
**For example:- when we hover a button it change the color of the button.**  
**active pseudo class activates when we click on the element.**

```css
.subscribe-btn:hover{
    background-color: green;
    opacity:0;
}

.join-btn{
transition : opacity 0.1s;
}
.join-btn:active{
    background: blue;
    opacity: 0.1;
    box-shadow : 0 0 0 rgba(0, 0, 0, 0.15);
}
```

**opacity:-**  
**0 --&gt; completely fade out the color**  
**1 ---&gt; normal**  
**Transition:-**  
for a seamless transition to occur  
**ex:-** We are stating that transition should occur to opacity smoothly for one second in the scenario above.  
**Shadow:-(0, 0, 0, color)take**  
**It take 4 values (horizontal, Vertical, Blur, color)**

### Task3:-

1. Pagination button
    
2. The width and height of the button should get a little larger when we hover over it.
    
3. box shadow
    
4. The button's left and right sides should only rise when we hover over them.
    

%[https://codepen.io/Sravanthi-Kuruva/pen/ZEPaKrg]