diff --git a/README.md b/README.md index 58b47eb..0cec8d0 100644 --- a/README.md +++ b/README.md @@ -97,3 +97,6 @@ - Ayush Poddar - **[Portfolio](https://mr-magnificent.github.io/)** + +- Piyush + - **[Portfolio](https://piyushchauhan0311.github.io/)** diff --git a/Summer2018/PIYUSH/PORTFOLIO/Style.css b/Summer2018/PIYUSH/PORTFOLIO/Style.css new file mode 100644 index 0000000..67d8da6 --- /dev/null +++ b/Summer2018/PIYUSH/PORTFOLIO/Style.css @@ -0,0 +1,249 @@ +.container { + display: flex; + flex-wrap: wrap; +} +img { + width: 60%; + height: 70%; + border-radius: 50%; +} +.fa { + padding: 20px; + font-size: 30px; + width: 70px; + text-align: center; + text-decoration: none; + margin: 5px 2px; + border-radius: 50%; +} + +.fa:hover { + opacity: 0.7; +} + +.fa-facebook { + background: #3B5998; + color: white; +} +.fa-github { + background: black; + color: white; +} +.box { + width: 100%; + height: 400px; +} + +.box1 { + background-color: DarkOrange; + +} +.box2 { + background-color: YellowGreen ; + +} +.introbox{ + width: 80%; + height: 400px; + margin: 0 auto; +} +.box3 { + background-color: MediumAquamarine; + height:320px; + +} +.edubox{ + width: 50%; + height: 320px; + margin: 0 auto; +} +.box4 { + background-color: gold; + height: 220px; + +} +.box5 { + background-color: LightSeaGreen; + height: 330px; + +} +.techbox{ + width: 30%; + height: 330px; + margin: 0 auto; +} +.box6 { + background-color: RosyBrown; + height: 300px; + +} +@media screen and (min-width: 250px) { + .box2 { + height: 810px; + } + .box3{ + height: 560px ; + } + .edubox{ + width: 70%; + margin: 0 auto; + } + .box4 { + height: 380px; + + } + .techbox{ + width: 70%; + margin: 0 auto; + } + .box5 { + height: 350px; + + } + .box6 { + height: 660px; + + } +} +@media screen and (min-width: 300px) { + .box2 { + height: 720px; + } + .box3{ + height: 540px ; + } + .box4 { + height: 340px; + + } + .box6 { + height: 600px; + + } +} +@media screen and (min-width: 390px) { + .box2 { + height: 600px; + } + .box3{ + height: 400px ; + } + .box4 { + height: 320px; + + } + .box6 { + height: 460px; + + } +} +@media screen and (min-width: 450px) { + .box2 { + height:530px; + } + .box3{ + height: 380px ; + } + .box4 { + height: 250px; + + } + .box5 { + height: 360px; + + } + .techbox{ + width: 30%; + margin: 0 auto; + } + .box6 { + height: 380px; + + } +} +@media screen and (min-width: 650px) { + .box2 { + height:450px; + } + .box3{ + height: 340px ; + } + .box4 { + height: 220px; + + } + .box5 { + height: 330px; + + } + .techbox{ + width: 30%; + margin: 0 auto; + } + .box6 { + height: 320px; + + } +} +@media screen and (min-width: 800px) { + .box1 { + height: 400px; + } + + .box2 { + height:420px; + } + .box3{ + height: 330px ; + } + .edubox{ + width: 50%; + margin: 0 auto; + } + .box4 { + height: 200px; + + } + .box5 { + height: 330px; + + } + .techbox{ + width: 30%; + margin: 0 auto; + } + .box6 { + height: 270px; + + } +} +@media screen and (min-width: 1150px) { + .box1 { + width: 30%; + height: 400px; + } + .box2 { + width: 70%; + height: 400px + } + + .box3, .box4, .box5, .box6 { + width: 100%; + } + .edubox{ + width: 50%; + margin: 0 auto; + } + .techbox{ + width: 30%; + margin: 0 auto; + } + .box4 { + height: 180px; + + } + .box6 { + height: 250px; + + } +} diff --git a/Summer2018/PIYUSH/PORTFOLIO/index.html b/Summer2018/PIYUSH/PORTFOLIO/index.html new file mode 100644 index 0000000..ffd3bca --- /dev/null +++ b/Summer2018/PIYUSH/PORTFOLIO/index.html @@ -0,0 +1,64 @@ + + +
+ +
+