Commitdaf41a0

committed

add sub header

1 parentabc81d7 commitdaf41a0Copy full SHA for daf41a0

File tree

2 files changed

+87

-0

lines changed

100-hulu webpage clone
- index.html
- style.css

2 files changed

+87

-0

lines changed

`‎100-hulu webpage clone/index.html`

Lines changed: 15 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,21 @@ <h4>Try up to one month free</h4>`
`35`	`35`	`</div>`
`36`	`36`	`</div>`
`37`	`37`	`</header>`
	`38`	`+<sectionclass="sub-header">`
	`39`	`+<img`
	`40`	`+src="https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/logos.png?raw=true"`
	`41`	`+alt=""`
	`42`	`+/>`
	`43`	`+<div>`
	`44`	`+<h4>Bundle with any Hulu plan & save</h4>`
	`45`	`+<h3>Get Hulu, Disney+, and ESPN+.</h3>`
	`46`	`+<ahref="#"class="sub-link">Details</a>`
	`47`	`+</div>`
	`48`	`+<div>`
	`49`	`+<ahref="#"class="btn btn-outline">Get Bundle</a>`
	`50`	`+<ahref="#"class="sub-link">Terms apply</a>`
	`51`	`+</div>`
	`52`	`+</section>`
`38`	`53`	`<scriptsrc="script.js"></script>`
`39`	`54`	`</body>`
`40`	`55`	`</html>`

`‎100-hulu webpage clone/style.css`

Lines changed: 72 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -32,6 +32,11 @@ img {`
`32`	`32`	`width:100%;`
`33`	`33`	`}`
`34`	`34`
	`35`	`+h3 {`
	`36`	`+font-size:26px;`
	`37`	`+font-weight:300;`
	`38`	`+}`
	`39`	`+`
`35`	`40`	`h4 {`
`36`	`41`	`color:#00ed82;`
`37`	`42`	`font-size:13px;`
`@@ -58,12 +63,31 @@ h4 {`
`58`	`63`	`opacity:0.8;`
`59`	`64`	`}`
`60`	`65`
	`66`	`+.btn-outline {`
	`67`	`+background: none;`
	`68`	`+color:#fff;`
	`69`	`+border:2px solid#fff;`
	`70`	`+}`
	`71`	`+`
	`72`	`+.btn-outline:hover {`
	`73`	`+color:#fff;`
	`74`	`+border-color:#ccc;`
	`75`	`+}`
	`76`	`+`
`61`	`77`	`.legal-text {`
`62`	`78`	`font-size:10px;`
`63`	`79`	`color:#ccc;`
`64`	`80`	`margin-top:20px;`
`65`	`81`	`}`
`66`	`82`
	`83`	`+.sub-link {`
	`84`	`+display: block;`
	`85`	`+color:#ccc;`
	`86`	`+font-size:12px;`
	`87`	`+margin-top:5px;`
	`88`	`+text-decoration: underline;`
	`89`	`+}`
	`90`	`+`
`67`	`91`	`/* Header */`
`68`	`92`
`69`	`93`	`.header {`
`@@ -111,6 +135,30 @@ h4 {`
`111`	`135`	`margin:25px0;`
`112`	`136`	`}`
`113`	`137`
	`138`	`+/* Sub Header */`
	`139`	`+.sub-header {`
	`140`	`+display: grid;`
	`141`	`+grid-template-columns:2fr4fr2fr;`
	`142`	`+gap:40px;`
	`143`	`+align-items: center;`
	`144`	`+padding:30px40px;`
	`145`	`+background:linear-gradient(`
	`146`	`+318.68deg,`
	`147`	`+#0f495c0%,`
	`148`	`+#0d364049.72%,`
	`149`	`+#08141f100%`
	`150`	`+ );`
	`151`	`+}`
	`152`	`+`
	`153`	`+.sub-header>div:last-of-type {`
	`154`	`+justify-self: end;`
	`155`	`+align-self: end;`
	`156`	`+}`
	`157`	`+`
	`158`	`+.sub-header>div:last-of-type .sub-link {`
	`159`	`+text-align: center;`
	`160`	`+}`
	`161`	`+`
`114`	`162`	`/* Media Queries */`
`115`	`163`	`@media (max-width:768px) {`
`116`	`164`	`.header .logo {`
`@@ -121,4 +169,28 @@ h4 {`
`121`	`169`	`text-align: center;`
`122`	`170`	`padding:020px;`
`123`	`171`	`}`
	`172`	`+`
	`173`	`+ .header .header-text-1 {`
	`174`	`+margin-bottom:40px;`
	`175`	`+ }`
	`176`	`+`
	`177`	`+ .header .header-text-2 {`
	`178`	`+display: none;`
	`179`	`+ }`
	`180`	`+`
	`181`	`+ .sub-header {`
	`182`	`+grid-template-columns:1fr;`
	`183`	`+text-align: center;`
	`184`	`+gap:20px;`
	`185`	`+ }`
	`186`	`+`
	`187`	`+ .sub-headerimg {`
	`188`	`+width:250px;`
	`189`	`+margin: auto;`
	`190`	`+ }`
	`191`	`+`
	`192`	`+ .sub-header>div:last-of-type {`
	`193`	`+justify-self: center;`
	`194`	`+align-self: center;`
	`195`	`+ }`
`124`	`196`	`}`

0 commit comments

Comments

(0)

Movatterモバイル変換

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Commitdaf41a0

File tree

2 files changed

2 files changed

`‎100-hulu webpage clone/index.html`

`‎100-hulu webpage clone/style.css`

0 commit comments