Coursera Introduction to CSS3 week 4 [Assignment Solution]

Welcome,
Here is the css script solution for week 2.
Copy the code and place it in your css folder.
you can follow these steps if you are not clear
Css solution
fig1. Select CSS folder

css file
fig2. Select hw1 file and paste the code

Now you are done with the assignment. you can save and view your changes by clicking index in fig1.

Note: Don't just copy the code, this is just for your reference only. See and check where you have gone wrong👍😉

Code:

body{
    padding: 20px;
    margin: 1%;
}
nav a{
    display: inline-block;
    background-color: rgba(247, 242, 242, 0.459);
    text-decoration: none;
    height: 50px;
    width: 200px;
    border-radius: 5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    margin: 50px;
    padding: 20px 0px 0px 0px;
}
.active{
    background-color: rgb(247, 242, 242);

}
header{
    background-color: rgb(247, 242, 242);
    background-image: url(../images/flywheel.jpg);
    text-align: center;
    padding: 2%;
    height: 200px;
    color: rgb(247, 242, 242);
    background-size: 100%;
}
h1{
    text-transform: uppercase;
}
.left, .right{
    float: left;
    display: inline;
}
.left{
    background-color: rgb(20, 60, 192);
    padding: 1%;
    align-items: center; 
    width: 270px;
    float: left;    
}
.right{
    width: 74%;
    display: inline-block;
    padding-left: 2%;
}
img{
    width: 200px;
    margin: 30px;
    border: solid 2px rgb(1,1,1);    
    display: inline;
    
}
table {
	    border-collapse: collapse;
   		width: 600px;
   		font-family: "Times New Roman", Times, serif;
   		font-weight: bold;
   		font-size: 60%;
	}

	
	th {
		background: #808000; 
		color: #FFFFFF; 
	    border: 2px solid #FFFFFF; 
		
	}



	td {
		background: #E0FFFF; 
		color: #808080; 
		border: 2px solid #FFFFFF;
		text-align: center;
	}

	table, td, th {

	    padding: 1%;
	}

	tr th:first-child, tr td:first-child {
		text-align: left;
	}

	tr td {
		opacity: 0.8;

	}

	
	tr td:hover {
		opacity: 2.5;
		text-align: center;
		font-size: 120%;
	}



If you have any doubts or questions regarding this, feel free to ask in comment section.

Thank you🙏

Comments